背水一戰 Windows 10 (38) - 控制項（佈局類）: Panel, Canvas, RelativePanel, StackPanel, Grid

背水一戰 Windows 10 之控制項（佈局類）: 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 - 流式佈局控制項，繼承自 Panel，下麵介紹 Panel 的相關知識點
                    Children - 子元素集合（[ContentProperty(Name = "Children")]）
                    Background - 背景色
                    ChildrenTransitions - 過渡效果集合
            -->

            <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 - 絕對定位佈局控制項（Canvas 的子元素使用絕對定位）
                
            Canvas.Left - 與上一層 Canvas 的 Y軸 間的距離，左上角為原點。僅在 Canvas 的子元素中設置有效
            Canvas.Top - 與上一層 Canvas 的 X軸 間的距離，左上角為原點。僅在 Canvas 的子元素中設置有效
            Canvas.ZIndex - 用於設置控制項的 z-index 值（數值大的在前面）。 不要求必須在 Canvas 內
        
            註：Canvas 不會因為自身的大小而限制子元素的大小
        -->

        <!--
            這裡指定 Canvas.Left 和 Canvas.Top 是沒用的，因為它的父親不是 Canvas
        -->
        <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">
                <!--
                    Canvas 不會因為自身的大小而限制子元素的大小 
                -->
                <TextBlock Text="TextBlock TextBlock TextBlock TextBlock TextBlock" />

                <!--
                    Canvas.ZIndex 大的在前面，所以此處黑色會壓著白色
                -->
                <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 - 相對定位佈局控制項
                    BorderBrush - 邊框畫筆
                    BorderThickness - 邊框寬度（左 上 右 下）
                    CornerRadius - 邊框的角半徑（左上 右上 右下 左下）
                    Padding - 內容與邊框的間距（左 上 右 下）
            
                    LeftOf, RightOf, Above, Below - 在指定元素的左邊, 右邊, 上邊, 下邊
                    AlignLeftWithPanel, AlignRightWithPanel, AlignTopWithPanel, AlignBottomWithPanel - 是否與 RelativePanel 容器的左邊緣, 右邊緣, 上邊緣, 下邊緣對齊
                    AlignLeftWith, AlignRightWith, AlignTopWith, AlignBottomWith - 與指定元素的左邊緣, 右邊緣, 上邊緣, 下邊緣對齊
                    AlignHorizontalCenterWith, AlignVerticalCenterWithPanel - 與指定元素水平居中對齊, 垂直居中對齊
                    AlignHorizontalCenterWithPanel, AlignVerticalCenterWithPanel - 是否相對於 RelativePanel 容器水平居中對齊, 垂直居中對齊
            
                    在 code-behind 中有對應的 Get... 和 Set... 方法來獲取或設置上面這些附加屬性
            -->
            
            <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" />

                <!--
                    rectangle5 的上邊緣與 rectangle4 的上邊緣對齊
                -->
                <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 - 流式佈局控制項
                    Orientation - 控制項內元素的排列方向
                        Horizontal - 水平排列
                        Vertical - 垂直排列
                    BorderBrush - 邊框畫筆
                    BorderThickness - 邊框寬度（左 上 右 下）
                    CornerRadius - 邊框的角半徑（左上 右上 右下 左下）
                    Padding - 內容與邊框的間距（左 上 右 下）
            -->

            <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 - 網格佈局控制項
                Grid.RowDefinitions - 用於定義 Grid 中的行
                Grid.ColumnDefinitions - 用於定義 Grid 中的列
                BorderBrush - 邊框畫筆
                BorderThickness - 邊框寬度（左 上 右 下）
                CornerRadius - 邊框的角半徑（左 上 右 下）
                Padding - 內容與邊框的間距（左上 右上 右下 左下）
        
            RowDefinition - 行定義
                Height - 高度
                MinHeight - 最小高度
                MaxHeight - 最大高度
                ActualHeight - 獲取真實高度
        
            ColumnDefinition - 列定義
                Width - 寬度
                MinWidth - 最小寬度
                MaxWidth - 最大寬度
                ActualWidth - 獲取真實寬度
                
            Grid.Row - 控制項所在的 Grid 的行的索引
                code-behind: int GetRow(FrameworkElement element), SetRow(FrameworkElement element, int value)
            Grid.Column - 控制項所在的 Grid 的列的索引
                code-behind: int GetColumn(FrameworkElement element), SetColumn(FrameworkElement element, int value)
            Grid.RowSpan - 合併的行數。 控制項所在行，以及控制項所在行之後的需要連續合併的行的總行數
                code-behind: int GetRowSpan(FrameworkElement element), SetRowSpan(FrameworkElement element, int value)
            Grid.ColumnSpan - 合併的列數。 控制項所在列，以及控制項所在列之後的需要連續合併的列的總列數
                code-behind: int GetColumnSpan(FrameworkElement element), SetColumnSpan(FrameworkElement element, int value)
                        
            Width 和 Height 的可用值如下：
            1、Auto - 自動設置為一個合適的值。預設值
            2、Pixel - 像素值
            3、* - 比例值。如 * 就是全部，2* 和 8* 就是分別占 20% 和 80%
        
            註：Grid 的 HorizontalAlignment 屬性和 VerticalAlignment 屬性的預設值均是 Stretch
        -->
        
        <Grid Background="Blue" Width="300" Height="300" 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>

        <!--    
            Canvas.ZIndex - 用於設置控制項的 z-index 值（不要求必須在 Canvas 內）
        
            註：在 Grid 內的子元素的定位可以通過 Margin 來實現
        -->
        <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
[源碼下載]