WPF笔记(2.4 Grid)——Layout

时间：2015-11-13 18:37:10 阅读：405 评论：0 收藏：0 [点我收藏+]

第一章已经简单介绍过这个容器，这一节详细介绍。
Grid一般是用表格(Grid.Row 和Grid.Column )的，比StackPanel更细致一些，但是，这么玩很麻烦，先横着竖着定义一大堆，然后把元素指定其表格位置，即插入数据，和我们平常习惯的HTML表格不太一样，甚至更麻烦了。
原因如下：Html空单元格要放占位符，这样会放很多；Grid玩法则是用什么元素就指定单元格位置，不用的单元格默认是空，不用指定。另外，Grid单元格中的多个控件可以按照Z轴堆叠，这个顺序是由控件在xaml上的出现顺序决定的。

Grid列宽的定义：

<Grid.ColumnDefinitions>
技术分享

<ColumnDefinition Width="50" />
技术分享

<ColumnDefinition Width="Auto" />
技术分享

<ColumnDefinition Width="2*" />
技术分享

<ColumnDefinition Width="*" />
技术分享

</Grid.ColumnDefinitions>

第一种，固定长度——宽度不够，会裁剪，不好用。单位pixel。
第二种，自动长度——自动匹配列中最长元素的宽度。
第三种，比例长度——*表示占用剩余的全部宽度；两行都是*，将平分剩余宽度；像上面的一个2*，一个*，表示前者2/3宽度。

单元格合并，1.4已经介绍过，这里强调一点，虽然一个控件A跨越2个单元格，但是并未改变原来Grid的所有单元格，也就是说，这是两个对象Grid和控件A，互相不影响。那么，另一个控件B仍然可以使用这两个单元格中的一个，最后根据A与B的先后出现顺序会有重叠效果。这是不同于html单元格合并概念的。这段话是我自己想的，多精辟啊，一针见血。终于对xaml有点感觉了。

接下来讲的是多个Grid共享宽度组的技术。smaple讲的是把grid放入ScrollViewer中，但是一旦滚动ScollBar，grid的Title会跟着一起滚动，为了做到滚动时Title定住不动，要做两个Grid：一个放Title；另一个放主体，并嵌套进ScrollViewer中。这样滚动问题解决了，另一个问题又出现了，就是两个Grid的字段对不齐，于是要使用shared-size组。

<DockPanel Grid.IsSharedSizeScope="True">
技术分享

<Grid DockPanel.Dock="Top">
技术分享

<Grid.ColumnDefinitions>
技术分享

<ColumnDefinition Width="*" />
技术分享

<ColumnDefinition Width="Auto" SharedSizeGroup="Location" />
技术分享

<ColumnDefinition Width="Auto" SharedSizeGroup="Rank" />
技术分享

<ColumnDefinition Width="Auto" />

//省略若干行代码
技术分享

<Border Grid.Column="0" Grid.Row="0" BorderThickness="1"
技术分享

Background="LightGray" BorderBrush="Gray">
技术分享

<TextBlock>Title</TextBlock>
技术分享

</Border>

<Border Grid.Column="1" Grid.Row="0" BorderThickness="1"
技术分享

Background="LightGray" BorderBrush="Gray">
技术分享

<TextBlock>Location</TextBlock>
技术分享

</Border>

<Border Grid.Column="2" Grid.Row="0" BorderThickness="1"
技术分享

Grid.ColumnSpan="2"
技术分享

Background="LightGray" BorderBrush="Gray">
技术分享

<TextBlock>Rank</TextBlock>
技术分享

</Border>

<FrameworkElement Grid.Column="3"
技术分享

Width="{DynamicResource {x:Static SystemParameters.ScrollWidthKey}}" />
技术分享

</Grid>

<ScrollViewer>
技术分享

<Grid>

<Grid.ColumnDefinitions>
技术分享

<ColumnDefinition Width="*" />
技术分享

<ColumnDefinition Width="Auto" SharedSizeGroup="Location" />
技术分享

<ColumnDefinition Width="Auto" SharedSizeGroup="Rank" />
技术分享

</Grid.ColumnDefinitions>

//省略若干行代码

技术分享

</Grid>

</ScrollViewer>
技术分享

</DockPanel>
技术分享

首先，在DockPanel 设置共享：Grid.IsSharedSizeScope="True"。这样做的目的是使得DockPanel外的同名列不受影响。
DockPanel中两个容器，Grid和ScrollViewer，前者设置标题，后者内嵌Grid，装载内容行(红色字体)。
先说Grid，有4列，接着，设置第二列第三列为Shared-size Group，第一列宽度为*(自适用)；第四列的增加是因为width=*对SharedSize无效，所以增加这一列为ScrollBar占位：
技术分享

<ColumnDefinition Width="*" />
技术分享

<ColumnDefinition Width="Auto" SharedSizeGroup="Location" />
技术分享

<ColumnDefinition Width="Auto" SharedSizeGroup="Rank" />
技术分享

<ColumnDefinition Width="Auto" />

Rank跨占了2列，为了兼容多生成的第四列，
技术分享

<Border Grid.Column="2" Grid.Row="0" BorderThickness="1"
技术分享

Grid.ColumnSpan="2"
技术分享

Background="LightGray" BorderBrush="Gray">
技术分享

<TextBlock>Rank</TextBlock>
技术分享

</Border>
接着，设置Grid第4列为滚动条宽度，于是因为Rank跨占了2列，所以Rank宽度为自己最大宽度+滚动条宽度，这样就保证了后面的都对齐了，从而前面第一列也对齐了：
<FrameworkElement Grid.Column="3"
技术分享

Width="{DynamicResource {x:Static SystemParameters.ScrollWidthKey}}" />

再说ScrollViewer容器，在内嵌的Grid中设置Shared-size Group与第一个Grid中的列相对应：
技术分享

<ColumnDefinition Width="Auto" SharedSizeGroup="Location" />
技术分享

<ColumnDefinition Width="Auto" SharedSizeGroup="Rank" />

注：这里用到了DynamicResource ，而不是StaticResource，具体技术见第6章。

分析完毕。

WPF笔记(2.4 Grid)——Layout

原文：http://www.cnblogs.com/lonelyxmas/p/4962806.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)