背水一战 Windows 10 (38) - 控件（布局类）: Panel, Canvas, RelativePanel, StackPanel, Grid

2021-05-13 01:27

阅读：636

标签：obj double 网格 ansi class otto 指定元素背景 namespace

原文:背水一战 Windows 10 (38) - 控件（布局类）: Panel, Canvas, RelativePanel, StackPanel, Grid

[源码下载]

背水一战 Windows 10 (38) - 控件（布局类）: Panel, Canvas, RelativePanel, StackPanel, Grid

作者：webabcd

介绍
背水一战 Windows 10 之控件（布局类）

Panel
Canvas
RelativePanel
StackPanel
Grid

示例
1、Panel(基类) 的示例
Controls/LayoutControl/PanelDemo.xaml

Page
    x:Class="Windows10.Controls.LayoutControl.PanelDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.LayoutControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    Grid Background="Transparent">
        StackPanel Margin="10 0 10 10">

            

            StackPanel Margin="5" Background="Orange">
                StackPanel.Children>
                    TextBlock Text="A Panel contains a collection of UIElement objects, which are in the Children property" Margin="5" />
                    TextBlock Text="Panel elements do not receive focus by default" Margin="5" />
                    TextBlock Text="To compel a panel element to receive focus, set the Focusable property to true" Margin="5" />
                StackPanel.Children>
                StackPanel.ChildrenTransitions>
                    TransitionCollection>
                        EntranceThemeTransition />
                    TransitionCollection>
                StackPanel.ChildrenTransitions>
            StackPanel>

        StackPanel>
    Grid>
Page>

Controls/LayoutControl/PanelDemo.xaml.cs

/*
 * Panel(基类) - 面板控件基类（继承自 FrameworkElement, 请参见 /Controls/BaseControl/FrameworkElementDemo.xaml）
 */
 
using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.LayoutControl
{
    public sealed partial class PanelDemo : Page
    {
        public PanelDemo()
        {
            this.InitializeComponent();
        }
    }
}

2、Canvas 的示例
Controls/LayoutControl/CanvasDemo.xaml

Page
    x:Class="Windows10.Controls.LayoutControl.CanvasDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.LayoutControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    Grid Background="Transparent">
        
        

        
        Canvas Margin="10 0 0 0" HorizontalAlignment="Left" VerticalAlignment="Top" Background="Orange" Width="100" Height="100"
                Canvas.Left="100" Canvas.Top="100">

            Canvas Background="Blue" Width="200" Height="200" Canvas.Left="100" Canvas.Top="100">
                
                TextBlock Text="TextBlock TextBlock TextBlock TextBlock TextBlock" />

                
                StackPanel Background="Black" Width="50" Height="50" Canvas.Left="50" Canvas.Top="50" Canvas.ZIndex="10" />
                StackPanel Background="White" Width="50" Height="50" Canvas.Left="75" Canvas.Top="75" Canvas.ZIndex="1" />
            Canvas>

        Canvas>
    Grid>
Page>

Controls/LayoutControl/CanvasDemo.xaml.cs

/*
 * Canvas - 绝对定位布局控件（继承自 Panel, 请参见 /Controls/LayoutControl/PanelDemo.xaml）
 *     double GetLeft(UIElement element) - 获取指定 UIElement 的 Canvas.Left 值
 *     double GetTop(UIElement element) - 获取指定 UIElement 的 Canvas.Top 值
 *     int GetZIndex(UIElement element) - 获取指定 UIElement 的 Canvas.ZIndex 值
 *     SetLeft(UIElement element, double length) - 设置指定 UIElement 的 Canvas.Left 值
 *     SetTop(UIElement element, double length) - 设置指定 UIElement 的 Canvas.Top 值
 *     SetZIndex(UIElement element, int value) - 设置指定 UIElement 的 Canvas.ZIndex 值
 */

using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.LayoutControl
{
    public sealed partial class CanvasDemo : Page
    {
        public CanvasDemo()
        {
            this.InitializeComponent();
        }
    }
}

3、RelativePanel 的示例
Controls/LayoutControl/RelativePanelDemo.xaml

Page
    x:Class="Windows10.Controls.LayoutControl.RelativePanelDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.LayoutControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    Grid Background="Transparent">
        StackPanel Margin="10 0 10 10">

            
            
            RelativePanel Width="300" Margin="5" 
                           HorizontalAlignment="Left" BorderBrush="Orange" BorderThickness="1" CornerRadius="0" Padding="0">
                
                Rectangle x:Name="rectangle1" Fill="Red" Height="50" Width="50"/>
                
                Rectangle x:Name="rectangle2" Fill="Blue" Height="50" Width="50" 
                           RelativePanel.RightOf="rectangle1" />
                
                Rectangle x:Name="rectangle3" Fill="Green" Height="50" Width="50" 
                           RelativePanel.AlignRightWithPanel="True"/>
                
                Rectangle x:Name="rectangle4" Fill="Yellow" Height="50" Width="50" 
                           RelativePanel.Below="rectangle3" RelativePanel.AlignHorizontalCenterWith="rectangle3" />

                
                Rectangle x:Name="rectangle5" Fill="Purple" Height="100" Width="100" 
                           RelativePanel.AlignTopWith="rectangle4" RelativePanel.AlignHorizontalCenterWithPanel="True" />

            RelativePanel>
            
        StackPanel>
    Grid>
Page>

Controls/LayoutControl/RelativePanelDemo.xaml.cs

/*
 * RelativePanel - 相对定位布局控件（继承自 Panel, 请参见 /Controls/LayoutControl/PanelDemo.xaml）
 */

using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.LayoutControl
{
    public sealed partial class RelativePanelDemo : Page
    {
        public RelativePanelDemo()
        {
            this.InitializeComponent();
        }
    }
}

4、StackPanel 的示例
Controls/LayoutControl/StackPanelDemo.xaml

Page
    x:Class="Windows10.Controls.LayoutControl.StackPanelDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.LayoutControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    Grid Background="Transparent">
        StackPanel HorizontalAlignment="Left" Margin="10 0 10 10">

            

            StackPanel Background="Orange" Margin="5"
                        Orientation="Vertical" BorderBrush="Red" BorderThickness="1 2 3 4" CornerRadius="10 20 30 40" Padding="10 20 30 40">
                TextBlock Text="abc" Margin="5" />
                TextBlock Text="xyz" Margin="5" />
                TextBlock Text="123" Margin="5" />
            StackPanel>

        StackPanel>
    Grid>
Page>

Controls/LayoutControl/StackPanelDemo.xaml.cs

/*
 * StackPanel - 流式布局控件（继承自 Panel, 请参见 /Controls/LayoutControl/PanelDemo.xaml）
 */

using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.LayoutControl
{
    public sealed partial class StackPanelDemo : Page
    {
        public StackPanelDemo()
        {
            this.InitializeComponent();
        }
    }
}

5、Grid 的示例
Controls/LayoutControl/GridDemo.xaml

Page
    x:Class="Windows10.Controls.LayoutControl.GridDemo"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Windows10.Controls.LayoutControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    Grid Background="Transparent">
        
        
        
        Grid Background="Blue" Width="300" Height="300" BorderBrush="Orange" BorderThickness="10" CornerRadius="10" Canvas.ZIndex="10">
            Grid.RowDefinitions>
                RowDefinition Height="50" />
                RowDefinition Height="3*" />
                RowDefinition Height="7*" />
                RowDefinition Height="*" MinHeight="50" MaxHeight="100" />
                RowDefinition Height="Auto" />
            Grid.RowDefinitions>
            Grid.ColumnDefinitions>
                ColumnDefinition />
                ColumnDefinition />
                ColumnDefinition />
            Grid.ColumnDefinitions>

            TextBox Grid.Row="0" Grid.Column="0" Background="red" Text="webabcd" />
            TextBox Grid.Row="0" Grid.Column="1" Background="red" Text="webabcd" Grid.ColumnSpan="2" HorizontalAlignment="Center" />
            TextBox Grid.Row="1" Grid.Column="0" Background="red" Text="webabcd" />
            TextBox Grid.Row="1" Grid.Column="1" Background="red" Text="webabcd" Grid.ColumnSpan="2" HorizontalAlignment="Center" />
            TextBox Grid.Row="2" Grid.Column="0" Background="red" Text="webabcd" />
            TextBox Grid.Row="2" Grid.Column="1" Background="red" Text="webabcd" Grid.RowSpan="2" VerticalAlignment="Bottom" />
            TextBox Grid.Row="2" Grid.Column="2" Background="red" Text="webabcd" />
            TextBox Grid.Row="3" Grid.Column="2" Background="red" Text="webabcd" />
            TextBox Grid.Row="4" Grid.Column="2" Background="red" Text="webabcd" />
        Grid>

        
        Rectangle Margin="10 50 100 150" Fill="Green" Canvas.ZIndex="1" />

    Grid>
Page>

Controls/LayoutControl/GridDemo.xaml.cs

/*
 * Grid - 网格布局控件（继承自 Panel, 请参见 /Controls/LayoutControl/PanelDemo.xaml）
 */

using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.LayoutControl
{
    public sealed partial class GridDemo : Page
    {
        public GridDemo()
        {
            this.InitializeComponent();
        }
    }
}

OK
[源码下载]

背水一战 Windows 10 (38) - 控件（布局类）: Panel, Canvas, RelativePanel, StackPanel, Grid

标签：obj double 网格 ansi class otto 指定元素背景 namespace

原文地址：http://www.cnblogs.com/lonelyxmas/p/7567361.html

上一篇：背水一战 Windows 10 (29) - 控件（文本类）: RichTextBlock, RichTextBlockOverflow, RichEditBox

下一篇：Win10 UWP开发系列：实现Master/Detail布局

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：背水一战 Windows 10 (38) - 控件（布局类）: Panel, Canvas, RelativePanel, StackPanel, Grid
文章链接：http://soscw.com/index.php/essay/84934.html

亲，登录后才可以留言！

背水一战 Windows 10 (38) - 控件（布局类）: Panel, Canvas, RelativePanel, StackPanel, Grid

评论

热门文章

推荐文章

最新文章

置顶文章