wpf学习笔记 布局

wpf的布局是靠各种布局标签实现的，既保留了winfrom中的绝对坐标定位，也有webform中的相对行列定位。

wpf的布局元素有下面这几个：

Grid：网格，最常用的布局方式；

StackPanel：栈容器；

Canvas：画布，绝对定位；

DockPanel：停泊板；

WrapPanel：自动换行版。

每一个布局标签都有不同的特点和用法，灵活地运用他们可以避免实现很多已有的功能。

1.Grid

和我们在word和excel里面接触的表格一样，Grid两个最重要的属性即是行和列。我们用ColumnDefinition和RowDefinition来规定表格有多少行多少列。例如下面的代码实现了一个两行两列的表格：

 1     <Grid>
 2         <Grid.RowDefinitions >
 3             <RowDefinition></RowDefinition>
 4             <RowDefinition></RowDefinition>
 5         </Grid.RowDefinitions>
 6         <Grid.ColumnDefinitions>
 7             <ColumnDefinition></ColumnDefinition>
 8             <ColumnDefinition></ColumnDefinition>
 9         </Grid.ColumnDefinitions>
10     </Grid>

效果如下：

一般对表格大小使用的是px单位，默认可以不写。在下面的代码里，我们规定了行的高度。

 1     <Grid  ShowGridLines="True">
 2         <Grid.RowDefinitions >
 3             <RowDefinition Height="150"></RowDefinition>
 4             <RowDefinition Height="*"></RowDefinition>
 5         </Grid.RowDefinitions>
 6         <Grid.ColumnDefinitions>
 7             <ColumnDefinition></ColumnDefinition>
 8             <ColumnDefinition></ColumnDefinition>
 9         </Grid.ColumnDefinitions>
10     </Grid>

注意第二行的高度写成了*，这个用处使得第二行在窗体放大以后可以动态的放大，如图：

 有时候我们希望在一个界面的小窗体之间能做一些大小的调整，这里用到GridSplitter就能很好地实现。

 1     <Grid>
 2         <Grid.RowDefinitions >
 3             <RowDefinition Height="25"></RowDefinition>
 4             <RowDefinition/>
 5         </Grid.RowDefinitions>
 6         <Grid.ColumnDefinitions>
 7             <ColumnDefinition Width="150"></ColumnDefinition>
 8             <ColumnDefinition Width="Auto"></ColumnDefinition>
 9             <ColumnDefinition/>
10         </Grid.ColumnDefinitions>
11         <TextBox Grid.ColumnSpan="3" BorderBrush="Blue"></TextBox>
12         <TextBox Grid.Row="1" BorderBrush="Blue"></TextBox>
13         <GridSplitter Grid.Row="1" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Center" Width="5" Background="Gray" ShowsPreview="True"></GridSplitter>
14         <TextBox Grid.Row="1" Grid.Column="2"  BorderBrush="Blue"></TextBox>
15     </Grid>

 效果如图：

2.StackPanel

StackPanel适合于处理一些列表的布局，菜单或者多选等。比如我们可以做一个简单的省份选择界面。

 1     <Grid>
 2         <GroupBox Header="大城市" >
 3             <StackPanel Margin="5">
 4             <GroupItem>
 5                 <CheckBox Content="北京"></CheckBox>          
 6             </GroupItem>
 7             <GroupItem>
 8                 <CheckBox Content="上海"></CheckBox>
 9             </GroupItem>
10             <GroupItem>
11                 <CheckBox Content="广州"></CheckBox>
12             </GroupItem>
13                 <GroupItem>
14                     <CheckBox Content="深圳"></CheckBox>
15                 </GroupItem>
16             </StackPanel>
17         </GroupBox>
18     </Grid>

实现如图：

3.Canvas

这个算是winfrom时代的遗产，我不太喜欢使用这个，绝对定位太死板，修改某一个元素的位置往往会动到全局。这个元素没有太多可说的，自己动手拿鼠标拖就行了。。。。

4.DockPanel

如果用过ios的dock，一定会对其华丽和方便印象深刻。wpf中的dock也是排排坐，吃果果，按照HorizontalAlignment规定的方向排列。

     <Grid>
2         <DockPanel HorizontalAlignment="Left" Margin="10,10,0,0" Name="dockPanel1" VerticalAlignment="Top" Width="256">
3             <TextBox DockPanel.Dock="Top" BorderBrush="Orange"></TextBox>
4             <TextBox DockPanel.Dock="Left" Height="222" Width="54" BorderBrush="Orange"></TextBox>
5             <TextBox DockPanel.Dock="Right" BorderBrush="Orange"></TextBox>
6         </DockPanel>
7     </Grid>

上边的代码实现了一个简单的常见软件外观。

5.WrapPanel

跟文字里面的wrap一样，WrapPanel中的标签如果一行放不下的话，会自动换行。而且当窗体的大小改变的时候，WrapPanel会自动调整，避免控件溢出窗体。

 1    <Grid>
 2         <WrapPanel  HorizontalAlignment="Left"  VerticalAlignment="Top" >
 3             <Button Content="点我" Height="34" Width="67"></Button>
 4             <Button Content="点我" Height="34" Width="67"></Button>
 5             <Button Content="点我" Height="34" Width="67"></Button>
 6             <Button Content="点我" Height="34" Width="67"></Button>
 7             <Button Content="点我" Height="34" Width="67"></Button>
 8             <Button Content="点我" Height="34" Width="67"></Button>
 9             <Button Content="点我" Height="34" Width="67"></Button>
10             <Button Content="点我" Height="34" Width="67"></Button>
11             <Button Content="点我" Height="34" Width="67"></Button>
12             <Button Content="点我" Height="34" Width="67"></Button>
13             <Button Content="点我" Height="34" Width="67"></Button>
14             <Button Content="点我" Height="34" Width="67"></Button>
15             <Button Content="点我" Height="34" Width="67"></Button>
16             <Button Content="点我" Height="34" Width="67"></Button>
17             <Button Content="点我" Height="34" Width="67"></Button>
18             <Button Content="点我" Height="34" Width="67"></Button>
19             <Button Content="点我" Height="34" Width="67"></Button>
20             <Button Content="点我" Height="34" Width="67"></Button>
21             <Button Content="点我" Height="34" Width="67"></Button>
22             
23         </WrapPanel>
24     </Grid>