第一章已经简单介绍过这个容器,这一节详细介绍。
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. java指令重排序的问题

    转载自于:http://my.oschina.net/004/blog/222069?fromerr=ER2mp62C 指令重排序是个比较复杂.觉得有些不可思议的问题,同样是先以例子开头(建议大家跑下 ...

  2. CSS基础知识(颜色、伪类、盒子模型)

    6.设置颜色单位 L    普通英文单词 {color : 属性值red;} 此方法简单,便捷.但设置的颜色在不同浏览器中,可能显示的颜色出现差异 * 三原色 - 红.绿.蓝 L   颜色的八进制方式 ...

  3. Codechef:Path Triples On Tree

    Path Triples On Tree 题意是求树上都不相交或者都相交的路径三元组数量. 发现blog里没什么树形dp题,也没有cc题,所以来丢一道cc上的树形dp题. 比较暴力,比较恶心 #inc ...

  4. POJ 1321 棋盘问题(DFS板子题,简单搜索练习)

    棋盘问题 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 44012   Accepted: 21375 Descriptio ...

  5. Vijos P1035 贪婪的送礼者【模拟】

    贪婪的送礼者 描述 对于一群要互送礼物的朋友,你要确定每个人送出的礼物比收到的多多少. 在这一个问题中,每个人都准备了一些钱来送礼物,而这些钱将会被平均分给那些将收到他的礼物的人. 然而,在任何一群朋 ...

  6. 二叉排序树BST+求树深度算法

    #include "stdio.h" #include "malloc.h" typedef struct node { int key; struct nod ...

  7. NEFU_117素数个数的位数

    题目传送门:点击打开链接 Problem : 117 Time Limit : 1000ms Memory Limit : 65536K description 小明是一个聪明的孩子,对数论有着很浓烈 ...

  8. 浅尝辄止WPF自定义用户控件(实现颜色调制器)

    主要利用用户控件实现一个自定义的颜色调制控件,实现一个小小的功能,具体实现界面如下. 首先自己新建一个wpf的用户控件类,我就放在我的wpf项目的一个文件夹下面,因为是一个很小的东西,所以就没有用mv ...

  9. [国嵌攻略][153][I2C裸机驱动设计]

    eeprom简介 eeprom电可擦除可编程只读存储器,是一种类似于flash的固态存储器,但是与flash相比又存在一些区别: 1.eeprom可以按位擦写,而flash只能大片擦除. 2.eepr ...

  10. vue引入新版 vue-awesome-swiper填坑

    关于新版 vue-awesome-swiper 问题 为什么我的vue-awesome-swiper组件pagination小圆点不显示问题? 为什么我的vue-awesome-swiper不会自动播 ...