WPF中的基本面板,可以看成是一个个容器。他们里面可以装很多的控件。不同的面板,在不同的使用场景会有各自的优势,要学会视具体情况而进行选择。
Grid面板,可以通过行和列的定义,从而将面板划分成为很多个格子。而每一个格子,其实还可以嵌套grid面板,然后又可以划分。所以最后可以细分到整个窗口的每一个角落。可以说是非常好用,我也经常用。 其宽高有三种长度格式:固定长度、自动长度、比例长度。示例都有啦,自动对号入座即可。
<Grid>
<Grid.RowDefinitions>
<!--固定高度-->
<RowDefinition Height = "100"/> //
<!--剩余的高度,占其中1份-->
<RowDefinition Height = "1*"/>
<!--剩余的高度,占其中2份-->
<RowDefinition Height = "2*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<!--自动宽度Auto,随里面控件大小的最小值-->
<ColumnDefinition Width = "Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
</Grid>
这样我们就定义了三行两列的布局。我们也可以定义行(列)的高(宽)。其中还有MaxHeight或者MAXWidth或者MinHeight或者MinWidth。结果如图: 注释:由于第一列宽度设置是Auto,而且没有放置控件,所以在图里没有显示
在具体某一个各自中放置组件,在其属性Grid.Row或者Grid。Column说明这个组件放在其所在Grid面板的哪一行哪一列就可以了!
UniformGrid是继承于Panel的,Grid的简化版。可以快速定义行列,但是每个格子只有固定大小。
<UniformGrid Rows="3" Columns="3">
<Button Content="B" Margin="10 10"/>
<Button Content="B" Margin="10 10"/>
<Button Content="B" Margin="10 10"/>
<Button Content="B" Margin="10 10"/>
<Button Content="B" Margin="10 10"/>
<Button Content="B" Margin="10 10"/>
<Button Content="B" Margin="10 10"/>
<Button Content="B" Margin="10 10"/>
<Button Content="B" Margin="10 10"/>
</UniformGrid>
正如其名,像一个栈一样的Panel(面板或者容器)。里面的空间会从上到下放置。当然我们也可以设置Orientation属性设置横向或者竖向排列。
<StackPanel Orientation="Horizontal">
<Button Content="按钮"/>
<Button Content="按钮"/>
<Button Content="按钮"/>
</StackPanel>
组件按程序里的顺序,从上到下(Vertical)或者从左到右(Horizontal)放置。
DockPanel具有停靠的功能。可以让组件停靠在上(Top)左(Left)下(Bottom)右(Right)。其他面板不好做。Grid只能划分,StackPanel只能让组件往一边靠。
<DockPanel>
<Button Content="Top" DockPanel.Dock="Top"/>
<Button Content="Left" DockPanel.Dock="Left"/>
<Button Content="Right" DockPanel.Dock="Right"/>
<Button Content="Bottom" DockPanel.Dock="Bottom"/>
<Button Content="Center"/>
</DockPanel>
<!--相当于Margin = "1 1 1 1"->
<Button Margin = "1">
<!--相当于Margin = "1 2 1 2"->
<Button Margin = "1 2">
<Button Margin = "1 2 3 4">
Margin有四个值,分别对应Left,Top,Right,Bottom四个方位的距离,其中距离是指控件边缘离外部的距离。
这个用来做控件的微调十分有用。由于面板知识不牢靠,所以在使用的时候,常常离预期效果差那么一点。这个时候,试用一下Margin来微调,就很好用了。但是缺点也很明显,由于是固定的样式所以不能自适应,如果整体面板有一点改动,那具体的每个控件的Margin可能都要修改,这样做起来挺麻烦。
HorizontalAlignment="Center" VerticalAlignment="Center"
这个是用来调整竖向和横向的居中或者左对齐或者右对齐的。
本文章使用limfx的vscode插件快速发布