WPF_常用的五种布局方式
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：Visual Studio 2015 * SQL Server
作者：叶
撰写时间：2019年01月01日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
- Grid 网格布局：
使用网格布局可以自定义行和列通过行列的数量、行高列宽来调整控件的布局。
Grid的特点：可以定义任何数量的行和列，还可以设置自己纵向跨几行，横向跨几列。
每个窗体只有一个顶级元素和一个子元素，<Grid></grid>
Grid有可以使用：
绝对值（固定宽高）：
代码如下：
<Grid>
<Grid.RowDefinions>
<RowDefinions Height=”200”/>
<RowDefinion Height=”250”/>
</Grid.RowDefinions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”250”/>
<ColumnDefinition Width=”95”/>
</Grid.ColumnDefinitions>
........
</Grid>
相对比例：
代码如下：
<Grid>
<Grid.RowDefinions>
<RowDefinion Height=”*”/>
<RowDefinion Height=”Auto”/>
</Grid.RowDefinions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”*”/>
<ColumnDefinition Width=”Auto”/>
</Grid.ColumnDefinitions>
........
</Grid>
自动调整：
相对于绝对值，相对比例宽度、高度会随着内容大小而改变。
定义好几行、几列和宽高，就开始往Grid布局中插入所需要的控件，如：
- StackPanel 栈面板：
将控件按照行或列顺序排序，但不会换行。通过设置Orientation属性设置了两种排序方式： 横排（Horizontal 默认的）和竖排（Vertical）。横向和纵向的StackPanel默认每个元素宽度与面板一样宽，超出则会截断多出的内容。剩下的将由HorizontalAlignment和VerticalAlignment属性来决定如何分配。
<StackPanel Orientation="Vertical" VerticalAlignment="Stretch">
<GroupBox Header="网站分类" Height="auto">
<StackPanel Orientation="Vertical">
<Button Content=".NET技术（16）">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFEAD765" Offset="0"/>
<GradientStop Color="#FFF1F1EF" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button Content="编程语言（13）">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFF06D5D" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button Content="软件设计（3）">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF4CD057" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
<Button Content="Web前端（16）">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF6DC8C0" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Button.Background>
</Button>
</StackPanel>
</GroupBox>
</StackPanel>
- WrapPanel 环绕面板：
WrapPanel布局面板将各个空间从左至右按照行或列的顺序罗列，当长度或高度不够时会自动调整进行换行，后续排序按照从上至下或从左至右的顺序进行。通过Orientation—根据内容自动换行。设置为Horizontal：元素是从左至右排序的。设置为Vertical：元素是从上至下排序的。
<WrapPanel Margin="3">
<Button VerticalAlignment="Top">顶层按钮</Button>
<Button MinHeight="60" Width="200">较高的按钮</Button>
<Button VerticalAlignment="Bottom">底部按钮</Button>
<Button Width="200">拉伸按钮</Button>
<Button VerticalAlignment="Center">居中按钮</Button>
<Button MinHeight="60" Width="200">居中按钮</Button>
<Button VerticalAlignment="Center">居中按钮</Button>
<Button MinHeight="60" Width="200">剧中按钮</Button>
</WrapPanel>
- Canvas 画布
Canvas布局是最基本的面板，主要用途是用来画图。它只是一个存储控件的容器，内部元素可以使用以像素为单位的绝对坐标进行定位，也允许指定相对任何角的坐标，通过设置其附加属性，附加属性的值是作为外边距使用。如果一个控件没有使用任何附加属性它会被放在Canvas的左上方（等同于设置Left和Top为0）。
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="254*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="129*"/>
</Grid.RowDefinitions>
<Canvas Margin="0,0,-0.4,0.4" Grid.RowSpan="3" Grid.ColumnSpan="2">
<Canvas.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="#FF4EB1BA" Offset="0.296"/>
<GradientStop Color="#FFEAECED" Offset="0.764"/>
</LinearGradientBrush>
</Canvas.Background>
<Canvas>
<TextBlock Canvas.Left="80" Height="100" Width="200" Canvas.Top="30" FontSize="20">
<TextBlock.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF51C85B" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</TextBlock.Background><Run Text="01"/>
</TextBlock>
<TextBlock Canvas.Left="80" Height="100" Width="200" Canvas.Bottom="-250" FontSize="20">
<TextBlock.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF51C85B" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</TextBlock.Background><Run Text="02"/>
</TextBlock>
</Canvas>
</Canvas>
<DockPanel LastChildFill="False" Margin="0,0,-0.4,0.4" Grid.RowSpan="3" Grid.ColumnSpan="2">
<TextBlock FontSize="28" DockPanel.Dock="Left">0</TextBlock>
</DockPanel>
</Grid>
五、DockPanel 泊靠式面板
内部元素可以选择泊靠的方向（上下左右中），DockPanel会对每个子元素进行排序，并停靠在面板的一侧，多个停靠在同一侧的元素按顺序排序。
<Grid>
<!--定义两列-->
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!--DockPanel 布局-->
<DockPanel LastChildFill="False">
<Button DockPanel.Dock="Top">
<StackPanel>
<TextBlock>停靠在顶部</TextBlock>
</StackPanel>
</Button>
<Button DockPanel.Dock="Left">1111</Button>
<Button DockPanel.Dock="Bottom">停靠在底部</Button>
<Button DockPanel.Dock="Right"> 右侧停靠</Button>
<Button DockPanel.Dock="Top">剩下的空间</Button>
</DockPanel>
<DockPanel Grid.Column="1" LastChildFill="True">
<Button DockPanel.Dock="Top">顶部按钮</Button>
<Button DockPanel.Dock="Top" HorizontalAlignment="Center">1111</Button>
<Button DockPanel.Dock="Top" HorizontalAlignment="Right">右对齐的顶部按钮</Button>
<Button DockPanel.Dock="Bottom">底部按钮</Button>
<Button DockPanel.Dock="Left">左侧按钮</Button>
<Button DockPanel.Dock="Right">右侧按钮</Button>
<Button>剩余空间</Button>
</DockPanel>
</Grid>
使用Grid布局，先定义好两列，再使用DockPanel布局，将LastChildFill属性设置为true（默认设置），那么无论DockPanel的最后一个子元素设置的其他任何停靠值，钙元素都将始终填满剩余的空间，如果设置为false，则其相反。