WPF布局

1.Border控件:是一种装饰控件，为控件添加边界

  <Border BorderThickness="5,0,0,0" BorderBrush="Red" CornerRadius="5" > //BorderThickness定义边界的笔大小,BorderBrush边界颜色 CornerRadius 边界圆角

2.Grid控件

用RowDefinitions和ColumnDefinitions定义行列, RowDefinition定义Height ,ColumnDefinition定义Width,设置值 “*”作为表格等分数，“Auto"设置根据内容调节大小,绝对数值根据填入值调节大小

 

 

 定义共享尺寸组: Grid.IsSharedSizeScope="True",命名SharedSizeGroup,调节一个表格大小，会跟随一起调节

<Grid Grid.IsSharedSizeScope="True" >
<Grid.RowDefinitions >
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid ShowGridLines="True" > //显示表格的边框
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" SharedSizeGroup="A"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<GridSplitter Width="8" VerticalAlignment="Stretch" Background="Red"></GridSplitter> //定义了调节大小的分割工具
</Grid>

<Grid ShowGridLines="True" Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="A"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
</Grid>
</Grid>

3.StackPanel 

<StackPanel Background="Orange" Width="659" HorizontalAlignment="Left" Orientation="Horizontal"> //Orientation定义面板内容布局方向，是从上往下，还是从左到右
<TextBlock Text="Zhaoxi.Edu-WPF"/>
<Button Content="Button1"/>
<Button Content="Button1" Height="80"/>
<Button Content="Button1"/>
<Button Content="Button1"/>
</StackPanel>

     从上到下，Vertical

 

     从左到右   Horizontal

4.UniformGrid

定义等分布局内容

<UniformGrid Rows="10" Columns="4">//定义10行4列内容等分
<Button Content="Button1"/>
<Button Content="Button4"/>
<Button Content="Button2"/>
<Button Content="Button2" Height="50"/>
<Button Content="Button2"/>
<Button Content="Button2"/>
<Button Content="Button2"/>
<Button Content="Button2"/>
<Button Content="Button2"/>
<Button Content="Button3" />
</UniformGrid>

 

 5.WrapPanel

挤压式布局，当一行排布不下就换一行排布，紧凑式排布，某一行或一列的宽度以最宽为准

<WrapPanel Orientation="Vertical">//定义排布方向
<Button Content="Button1" Height="40" Width="120" VerticalAlignment="Top"/>
<Button Content="Button2" Height="40" Width="120" VerticalAlignment="Bottom"/>
<Button Content="Button3" Height="60" Width="120"/>
<Button Content="Button4" Height="40" Width="120"/>
<Button Content="Button4" Height="80" Width="120"/>
<Button Content="Button4" Height="40" Width="220"/>
<Button Content="Button4" Height="40" Width="120"/>
<Button Content="Button4" Height="40" Width="120"/>
<Button Content="Button4" Height="40" Width="120"/>
<Button Content="Button4" Height="40" Width="120"/>
<Button Content="Button4" Height="40" Width="120" Click="Button_Click">

</Button>
</WrapPanel>

 

 

 6.Canvas

画布式布局，设置实际坐标布局

<Canvas Height="200">
<Button Width="200" Height="50" Content="Button1" Canvas.Left="100" Canvas.Top="50"/> //在面板100,50的位置显示按钮
<Button Width="180" Height="50" Content="Button2" Canvas.Right="100" Canvas.Bottom="50"/>
</Canvas>

<Canvas Height="200">
<Button Canvas.Left="200">hello</Button>
<Button>hello2</Button>

7.DockPanel

 

<DockPanel Visibility="Hidden" LastChildFill="True"> 
<Button Content="Button3" DockPanel.Dock="Left"/>
<Button Content="Button1" DockPanel.Dock="Top"/>
<Button Content="Button2" DockPanel.Dock="Bottom"/>
<Button Content="Button4" DockPanel.Dock="Right"/>
<Button Content="Button5"/> //定义LastChildFill="True"，最后一个Button自动填充到中心，默认值为True
</DockPanel>

8.InkCanvas

<InkCanvas EditingMode="EraseByPoint">
<Button Content="Button" InkCanvas.Left="100" InkCanvas.Top="50"/>
</InkCanvas>

 

public enum InkCanvasEditingMode
{
None,
Ink,
GestureOnly,
InkAndGesture,//手写模式
Select, //选择模式
EraseByPoint,//擦除模式
EraseByStroke
}