WPF 布局管理器之 Grid、GridSplit、UniformGrid (7)

2016-08-20 10:36:02来源:http://studybao.blog.51cto.com/1772164/1135495作者:StudyBao人点击



1、Grid



Grid是以表格形式组织控件的一种布局方式,与JavaAWT中的GridLayout类似,但区别在于


·WPF中的Grid的每一个单元格中可以放置多个控件,但控件可能会层叠在一起


·WPF中的Grid支持单元格的合并,类似于HTML中的tabletd中的rowspan和colspan


·Grid中的行和列可以自定义高度(Height)和宽度(Width)
在设置高度和宽度时可以采用两种写法:
1)Height=”60”:不加“星号”表示固定的高度
2)Height=”60*”:加“星号”表示“加权”的高度,在调整窗体大小时,此高度或宽度会按窗体大小改变的比例进行缩放


如:


<Grid>


<Grid.RowDefinitions>


<RowDefinitionHeight="60"/>


<RowDefinitionHeight="202*"/>


</Grid.RowDefinitions>


<Grid.ColumnDefinitions>


<ColumnDefinition/>


<ColumnDefinition/>


</Grid.ColumnDefinitions>


<ButtonGrid.Column="0"Grid.Row="0"Height="30"VerticalAlignment="Top">ButtonA</Button>


<ButtonGrid.Column="0"Grid.Row="0"Height="30"VerticalAlignment="Bottom">ButtonB</Button>


<ButtonGrid.Column="1"Grid.Row="0">ButtonC</Button>


<ButtonGrid.Column="0"Grid.Row="1"Grid.ColumnSpan="2">ButtonD</Button>


</Grid>


2、使用GridSplit分割


可以使用GridSplit控件结合Grid控件实现类似于Windows应用程序中SplitContainer的功能,如下面的应用程序:要实现以下的功能


ButtonA和ButtonB、ButtonC组成的整体,可以左右拖动,改变两者的宽度


·ButtonB和ButtonC可以上下拖动,改变两者的高度


实现以上功能的XAML代码如下:


<Grid>


<Grid.ColumnDefinitions>


<ColumnDefinitionWidth="88*"/>


<ColumnDefinitionWidth="Auto"/>


<ColumnDefinitionWidth="190*"/>


</Grid.ColumnDefinitions>


<Grid.RowDefinitions>


<RowDefinitionHeight="172*"/>


<RowDefinitionHeight="Auto"/>


<RowDefinitionHeight="90*"/>


</Grid.RowDefinitions>


<ButtonContent="ButtonA"Margin="3"Grid.Row="0"Grid.Column="0"Grid.RowSpan="3"/>


<ButtonContent="ButtonB"Margin="3"Grid.Row="0"Grid.Column="2"/>


<ButtonContent="ButtonC"Margin="3"Grid.Row="2"Grid.Column="2"/>


<GridSplitterWidth="3"HorizontalAlignment="Stretch"VerticalAlignment="Stretch"


Grid.Row="0"Grid.Column="1"Grid.RowSpan="3"></GridSplitter>


<GridSplitterHeight="3"VerticalAlignment="Stretch"HorizontalAlignment="Stretch"


Grid.Row="1"Grid.Column="2"></GridSplitter>


</Grid>


其核心想法为:


·定义3*3的表格,其中放置分割线的列(下标为1)和行(下标为1)的宽度和高度设置为Auto


·ButtonA放置在Row=0、Column=0、RowSpan=3的单元格中


·ButtonB放置在Row=0、Column=2的单元格中


·ButtonC放置在Row=2、Column=2的单元格中


·竖直分割线放置在Row=0、Column=1、ColSpan=3的单元格中


·水平分割线放置在Row=1、Column=2的单元格中


3、UniformGrid


UniformGrid控件为控件提供了一种简化的网格布局。当控件添加到UniformGrid时,它们会排列在一个网格模式中,该网格模式会自动调整以使控件之间的距离保持均匀。单元格的数目将进行调整,以适应控件的数目。


在使用UniformGrid的时候:


·各单元格的大小完全相同


·单元格的数量取决于放入的控件的数量,且单元格一定是行、列数相同的,即1*1、2*2、3*3、4*4…的单元格分布





最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台