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规定的方向排列。

1     <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>

 

原文地址:https://www.cnblogs.com/shen6041/p/1989797.html