WPF开发快速入门【1】WPF的布局

概述
本文描述几款WPF中常用的布局控件。
 
Grid
Grid是WPF最常用的布局控件。 它把面板分割为固定长和宽的网格，子控件就放置在网格内。

1.     <Grid>
2.         <Grid.ColumnDefinitions>
3.             <ColumnDefinition Width="100"/>
4.             <ColumnDefinition Width="*"/>
5.             <ColumnDefinition Width="2*"/>
6.         </Grid.ColumnDefinitions>
8.         <TextBlock Text="hello" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" Margin="10"/>
9.     </Grid>

复制代码

Grid控件有两个显著的特点：
1、行高和列宽可以设定为固定值，也可以按比例分配；
2、可以跨行或跨列。
 
StackPanel
StackPanel按顺序依次排列控件，通过Orientation="Horizontal"或Orientation="Vertical"来控制列表的方向。 

1.     <StackPanel Orientation="Horizontal">
2.         <TextBlock Text="Hello"/>
3.     </StackPanel>

复制代码

 
GridSplitter
通过GridSplitter可以调整两个网格的宽度或高度。 

1.     <Grid>
2.         <Grid.ColumnDefinitions>
3.             <ColumnDefinition Width="100"/>
4.             <ColumnDefinition Width="*"/>
5.             <ColumnDefinition Width="2*"/>
6.         </Grid.ColumnDefinitions>
8.         <TextBlock Text="hello" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" Margin="10"/>
9.     </Grid>    <Grid>
10.         <Grid.ColumnDefinitions>
11.             <ColumnDefinition Width="100"/>
12.             <ColumnDefinition Width="*"/>
13.             <ColumnDefinition Width="2*"/>
14.         </Grid.ColumnDefinitions>
16.         <TextBlock Text="hello" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" Margin="10"/>
17.     </Grid>    <StackPanel Orientation="Horizontal">
18.         <TextBlock Text="Hello"/>
19.     </StackPanel>            

复制代码

GridSplitter的宽度和颜色都可以设置。
 
DockPanel
DockPanel控件可以在主要的显示面板周五显示可以停靠的面板。 

1.     <Grid>
2.         <Grid.ColumnDefinitions>
3.             <ColumnDefinition Width="100"/>
4.             <ColumnDefinition Width="*"/>
5.             <ColumnDefinition Width="2*"/>
6.         </Grid.ColumnDefinitions>
8.         <TextBlock Text="hello" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" Margin="10"/>
9.     </Grid>    <Grid>
10.         <Grid.ColumnDefinitions>
11.             <ColumnDefinition Width="100"/>
12.             <ColumnDefinition Width="*"/>
13.             <ColumnDefinition Width="2*"/>
14.         </Grid.ColumnDefinitions>
16.         <TextBlock Text="hello" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" Margin="10"/>
17.     </Grid>    <Grid>
18.         <Grid.ColumnDefinitions>
19.             <ColumnDefinition Width="100"/>
20.             <ColumnDefinition Width="*"/>
21.             <ColumnDefinition Width="2*"/>
22.         </Grid.ColumnDefinitions>
24.         <TextBlock Text="hello" Grid.Column="0" Grid.ColumnSpan="2" HorizontalAlignment="Center" Margin="10"/>
25.     </Grid>    <StackPanel Orientation="Horizontal">
26.         <TextBlock Text="Hello"/>
27.     </StackPanel>    <StackPanel Orientation="Horizontal">
28.         <TextBlock Text="Hello"/>
29.     </StackPanel>   

复制代码

需要注意的是，主面板一定要放在最后描述。通过下面代码可以显示或隐藏Dock面板： 

1.     public class PageLayoutViewModel : Screen
2.     {
3.         public bool IsLeftShow { get; set; } = true;
4.         public bool IsRightShow { get; set; } = true;
6.         public Visibility LeftVisibility => IsLeftShow ? Visibility.Visible : Visibility.Collapsed;
7.         public Visibility RightVisibility => IsRightShow ? Visibility.Visible : Visibility.Collapsed;
9.         public void LeftClick()
10.         {
11.             IsLeftShow = !IsLeftShow;
12.         }
14.         public void RightClick()
15.         {
16.             IsRightShow = !IsRightShow;
17.         }
18.     }

复制代码

View Code  
DockPanelSplitter
有没有既可以停靠又可以调整宽度的面板呢？官方没有提供，但git上有。
下载地址：JVimes/DockPanelSplitter: Like WPF's GridSplitter, but for DockPanel instead of Grid. (github.com)
 
资源
系列目录：WPF开发快速入门【0】前言与目录 
代码下载：Learn WPF: WPF学习笔记 (gitee.com)

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！