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

Grid列宽的定义:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="50" />
    <ColumnDefinition Width="Auto" />
    <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)的更多相关文章

  1. WPF笔记(2.4 Grid)——Layout

    原文:WPF笔记(2.4 Grid)--Layout 第一章已经简单介绍过这个容器,这一节详细介绍.Grid一般是用表格(Grid.Row 和Grid.Column )的,比StackPanel更细致 ...

  2. WPF笔记(2.9和2.10)——Layout

    原文:WPF笔记(2.9和2.10)--Layout 2.9讲的是,如果内部设定超过容器大小,怎么办?StackPanel会裁剪越界部分DockPanel和Grid会智能判断,从而决定换行. 2.10 ...

  3. WPF笔记(1.4 布局)——Hello,WPF!

    原文:WPF笔记(1.4 布局)--Hello,WPF! 这一节只是第2章的引子.布局要使用Panel控件,有四种Panel,如下:DockPanel,就是设置停靠位置布局模型.StackPanel, ...

  4. WPF笔记(2.8 常用的布局属性)——Layout

    原文:WPF笔记(2.8 常用的布局属性)--Layout 这一节老没意思,啰里啰唆的尽是些HTML的属性,挑几个好玩的List出来,备忘:Padding与Margin的区别:Margin指控件边界与 ...

  5. WPF笔记(2.7 文字布局)——Layout

    原文:WPF笔记(2.7 文字布局)--Layout 这一节介绍的是文字布局的几个控件:1.TextBlock      最基本的文字控件可以配置5个Font属性.TextWraping属性,&quo ...

  6. WPF笔记(2.5 Canvas)——Layout

    原文:WPF笔记(2.5 Canvas)--Layout Canvas是最精确的布局容器--绝对定位,此书作者不建议使用,以为控件的大小一般会随着内部字体图片的动态生成而自动变化,所以使用前三种布局是 ...

  7. WPF笔记(2.6 ViewBox)——Layout

    原文:WPF笔记(2.6 ViewBox)--Layout 在Canvas外面包一层ViewBox,可以使Canvas内的控件填充整个ViewBox,并随着ViewBox的大小变化而同步变化,这是因为 ...

  8. WPF笔记(2.2 DockPanel)——Layout

    原文:WPF笔记(2.2 DockPanel)--Layout 读完了这一节,发现DockPanel就是过去winform中的Dock属性.原来的Dock属性是子控件设置,而其父亲级别不用设置.现在W ...

  9. WPF笔记(2.3 StackPanel)——Layout

    原文:WPF笔记(2.3 StackPanel)--Layout StackPanel用于小规模的排版布局,比如说一个局部下几个textbox和Button啦.Orientation属性有Vertic ...

随机推荐

  1. SQL Server-聚焦sp_executesql执行动态SQL查询性能真的比exec好?

    前言 之前我们已经讨论过动态SQL查询呢?这里为何再来探讨一番呢?因为其中还是存在一定问题,如标题所言,很多面试题也好或者有些博客也好都在说在执行动态SQL查询时sp_executesql的性能比ex ...

  2. Java设计模式总汇二(小白也要飞)

    PS:上一篇我介绍了适配器设计模式.单例设计模式.静态代理设计模式.简单工厂设计模式,如果没有看过第一篇的小火鸡可以点这个看看http://www.cnblogs.com/cmusketeer/p/8 ...

  3. Python => ValueError: unsupported format character 'Y' (0x59)

    产生问题的原因是:SQL语句的'%Y-%m-%d'部分被再次解释为字符串格式,并抛出错误 解决方案一:字符串%形式进行替换 '%string' % string. '%Y-%m-%d'改写为'%%%% ...

  4. 基于FPGA驱动VGA显示图片的小问题

    学习VGA显示图片的过程中,遇到了一个小问题,我在显示屏上开了一个60x60的框,放了一张图片进去显示,但是最终的结果如下图所示. 出现了一个竖黑边,看了看代码,分析了一下逻辑没问题,然而看这个显示那 ...

  5. 让两个数x,y一直保持互质的模版

    int gcd(int x,int y) { )return x; else return gcd(y,x%y); }

  6. 在 .NET中,一种更方便操作配置项的方法

    在应用程序的开发过程中,我们往往会为软件提供一些配置项,以允许软件根据配置项灵活来做事情,比如配置日志文件路径等,此外,我们还可以用配置项来为用户存储其偏好设置等. .NET 为我们默认提供了配置机制 ...

  7. java中JFrame类中函数addWindowListener(new WindowAdapter)

    转自:http://blog.csdn.net/datouniao1/article/details/46984987:侵删. 在java编写的过程中常常遇到样的一段代码: frame.addWind ...

  8. 什么是命名空间?php命名空间的基本应用分享

    什么是命名空间? php中声明的函数名.类名和常量的名称,在同一次运行中是不能重复的,否则会产生一个致命的错误,常见的解决方法是约定一个前缀.例如 ,在项目开发时,用户 User 模块中的控制器和数据 ...

  9. GMP大法教你重新做人(从入门到实战)

    一.引言 GMP(The GNU Multiple Precision Arithmetic Library)又叫GNU多精度算术库,是一个提供了很多操作高精度的大整数,浮点数的运算的算术库,几乎没有 ...

  10. Spark算子--partitionBy

    转载请标明出处http://www.cnblogs.com/haozhengfei/p/923b11fce561e82748baa016bcfb8421.html partitionBy--Trans ...