背水一战 Windows 10 (38)

youbo1

　　[源码下载]




背水一战 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* 和 7* 就代表后者是前者的 7/2 倍
注：Grid 的 HorizontalAlignment 属性和 VerticalAlignment 属性的默认值均是 Stretch
-->
<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>
<!--   
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
[源码下载]