背水一战 Windows 10 (38)

2017-01-10 19:20:47来源:cnblogs.com作者:控件(布局类): Panel, Canvas, Relati人点击

[源码下载]


背水一战 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 - 流式布局控件,继承自 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
[源码下载]

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台