WPF笔记(2.4 Grid)
第一章已经简单介绍过这个容器,这一节详细介绍。
Grid一般是用表格(Grid.Row 和Grid.Column )的,比StackPanel更细致一些,但是,这么玩很麻烦,先横着竖着定义一大堆,然后把元素指定其表格位置,即插入数据,和我们平常习惯的HTML表格不太一样,甚至更麻烦了。
原因如下:Html空单元格要放占位符,这样会放很多;Grid玩法则是用什么元素就指定单元格位置,不用的单元格默认是空,不用指定。另外,Grid单元格中的多个控件可以按照Z轴堆叠,这个顺序是由控件在xaml上的出现顺序决定的。
Grid列宽的定义:
 <Grid.ColumnDefinitions>
<Grid.ColumnDefinitions> <ColumnDefinition Width="50" />
    <ColumnDefinition Width="50" /> <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="2*" />
    <ColumnDefinition Width="2*" /> <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions>
</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">
    <DockPanel Grid.IsSharedSizeScope="True"> <Grid DockPanel.Dock="Top">
        <Grid DockPanel.Dock="Top"> <Grid.ColumnDefinitions>
            <Grid.ColumnDefinitions> <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" SharedSizeGroup="Location" />
                <ColumnDefinition Width="Auto" SharedSizeGroup="Location" /> <ColumnDefinition Width="Auto" SharedSizeGroup="Rank" />
                <ColumnDefinition Width="Auto" SharedSizeGroup="Rank" /> <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />//省略若干行代码

 <Border Grid.Column="0" Grid.Row="0" BorderThickness="1"
            <Border Grid.Column="0" Grid.Row="0" BorderThickness="1" Background="LightGray" BorderBrush="Gray">
                    Background="LightGray" BorderBrush="Gray"> <TextBlock>Title</TextBlock>
                <TextBlock>Title</TextBlock> </Border>
            </Border> <Border Grid.Column="1" Grid.Row="0" BorderThickness="1"
            <Border Grid.Column="1" Grid.Row="0" BorderThickness="1" Background="LightGray" BorderBrush="Gray">
                    Background="LightGray" BorderBrush="Gray"> <TextBlock>Location</TextBlock>
                <TextBlock>Location</TextBlock> </Border>
            </Border> <Border Grid.Column="2" Grid.Row="0" BorderThickness="1"
            <Border Grid.Column="2" Grid.Row="0" BorderThickness="1" Grid.ColumnSpan="2"
                    Grid.ColumnSpan="2" Background="LightGray" BorderBrush="Gray">
                    Background="LightGray" BorderBrush="Gray"> <TextBlock>Rank</TextBlock>
                <TextBlock>Rank</TextBlock> </Border>
            </Border>
 <FrameworkElement Grid.Column="3"
            <FrameworkElement Grid.Column="3" Width="{DynamicResource {x:Static SystemParameters.ScrollWidthKey}}" />
               Width="{DynamicResource {x:Static SystemParameters.ScrollWidthKey}}" />
 </Grid>
        </Grid> <ScrollViewer>
        <ScrollViewer> <Grid>
            <Grid> <Grid.ColumnDefinitions>
                <Grid.ColumnDefinitions> <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" SharedSizeGroup="Location" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Location" /> <ColumnDefinition Width="Auto" SharedSizeGroup="Rank" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Rank" /> </Grid.ColumnDefinitions>
                </Grid.ColumnDefinitions>//省略若干行代码
 </Grid>
            </Grid> </ScrollViewer>
        </ScrollViewer> </DockPanel>
    </DockPanel>
首先,在DockPanel 设置共享:Grid.IsSharedSizeScope="True"。这样做的目的是使得DockPanel外的同名列不受影响。
DockPanel中两个容器,Grid和ScrollViewer,前者设置标题,后者内嵌Grid,装载内容行(红色字体)。
先说Grid,有4列,接着,设置第二列第三列为Shared-size Group,第一列宽度为*(自适用);第四列的增加是因为width=*对SharedSize无效,所以增加这一列为ScrollBar占位: <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" SharedSizeGroup="Location" />
                <ColumnDefinition Width="Auto" SharedSizeGroup="Location" /> <ColumnDefinition Width="Auto" SharedSizeGroup="Rank" />
                <ColumnDefinition Width="Auto" SharedSizeGroup="Rank" /> <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
Rank跨占了2列,为了兼容多生成的第四列, <Border Grid.Column="2" Grid.Row="0" BorderThickness="1"
            <Border Grid.Column="2" Grid.Row="0" BorderThickness="1" Grid.ColumnSpan="2"
                    Grid.ColumnSpan="2" Background="LightGray" BorderBrush="Gray">
                    Background="LightGray" BorderBrush="Gray"> <TextBlock>Rank</TextBlock>
                <TextBlock>Rank</TextBlock> </Border>
            </Border>
接着,设置Grid第4列为滚动条宽度 ,于是因为Rank跨占了2列,所以Rank宽度为自己最大宽度+滚动条宽度,这样就保证了后面的都对齐了,从而前面第一列也对齐了:
          <FrameworkElement Grid.Column="3" Width="{DynamicResource {x:Static SystemParameters.ScrollWidthKey}}" />
               Width="{DynamicResource {x:Static SystemParameters.ScrollWidthKey}}" />
再说ScrollViewer容器,在内嵌的Grid中设置Shared-size Group与第一个Grid中的列相对应: <ColumnDefinition Width="Auto" SharedSizeGroup="Location" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Location" /> <ColumnDefinition Width="Auto" SharedSizeGroup="Rank" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Rank" />
注:这里用到了DynamicResource ,而不是StaticResource,具体技术见第6章。
分析完毕。
WPF笔记(2.4 Grid)的更多相关文章
- WPF笔记(2.4 Grid)——Layout
		原文:WPF笔记(2.4 Grid)--Layout 第一章已经简单介绍过这个容器,这一节详细介绍.Grid一般是用表格(Grid.Row 和Grid.Column )的,比StackPanel更细致 ... 
- WPF笔记(2.9和2.10)——Layout
		原文:WPF笔记(2.9和2.10)--Layout 2.9讲的是,如果内部设定超过容器大小,怎么办?StackPanel会裁剪越界部分DockPanel和Grid会智能判断,从而决定换行. 2.10 ... 
- WPF笔记(1.4 布局)——Hello,WPF!
		原文:WPF笔记(1.4 布局)--Hello,WPF! 这一节只是第2章的引子.布局要使用Panel控件,有四种Panel,如下:DockPanel,就是设置停靠位置布局模型.StackPanel, ... 
- WPF笔记(2.8 常用的布局属性)——Layout
		原文:WPF笔记(2.8 常用的布局属性)--Layout 这一节老没意思,啰里啰唆的尽是些HTML的属性,挑几个好玩的List出来,备忘:Padding与Margin的区别:Margin指控件边界与 ... 
- WPF笔记(2.7 文字布局)——Layout
		原文:WPF笔记(2.7 文字布局)--Layout 这一节介绍的是文字布局的几个控件:1.TextBlock 最基本的文字控件可以配置5个Font属性.TextWraping属性,&quo ... 
- WPF笔记(2.5 Canvas)——Layout
		原文:WPF笔记(2.5 Canvas)--Layout Canvas是最精确的布局容器--绝对定位,此书作者不建议使用,以为控件的大小一般会随着内部字体图片的动态生成而自动变化,所以使用前三种布局是 ... 
- WPF笔记(2.6 ViewBox)——Layout
		原文:WPF笔记(2.6 ViewBox)--Layout 在Canvas外面包一层ViewBox,可以使Canvas内的控件填充整个ViewBox,并随着ViewBox的大小变化而同步变化,这是因为 ... 
- WPF笔记(2.2 DockPanel)——Layout
		原文:WPF笔记(2.2 DockPanel)--Layout 读完了这一节,发现DockPanel就是过去winform中的Dock属性.原来的Dock属性是子控件设置,而其父亲级别不用设置.现在W ... 
- WPF笔记(2.3 StackPanel)——Layout
		原文:WPF笔记(2.3 StackPanel)--Layout StackPanel用于小规模的排版布局,比如说一个局部下几个textbox和Button啦.Orientation属性有Vertic ... 
随机推荐
- java指令重排序的问题
			转载自于:http://my.oschina.net/004/blog/222069?fromerr=ER2mp62C 指令重排序是个比较复杂.觉得有些不可思议的问题,同样是先以例子开头(建议大家跑下 ... 
- CSS基础知识(颜色、伪类、盒子模型)
			6.设置颜色单位 L 普通英文单词 {color : 属性值red;} 此方法简单,便捷.但设置的颜色在不同浏览器中,可能显示的颜色出现差异 * 三原色 - 红.绿.蓝 L 颜色的八进制方式 ... 
- Codechef:Path Triples On Tree
			Path Triples On Tree 题意是求树上都不相交或者都相交的路径三元组数量. 发现blog里没什么树形dp题,也没有cc题,所以来丢一道cc上的树形dp题. 比较暴力,比较恶心 #inc ... 
- POJ 1321 棋盘问题(DFS板子题,简单搜索练习)
			棋盘问题 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 44012 Accepted: 21375 Descriptio ... 
- Vijos P1035 贪婪的送礼者【模拟】
			贪婪的送礼者 描述 对于一群要互送礼物的朋友,你要确定每个人送出的礼物比收到的多多少. 在这一个问题中,每个人都准备了一些钱来送礼物,而这些钱将会被平均分给那些将收到他的礼物的人. 然而,在任何一群朋 ... 
- 二叉排序树BST+求树深度算法
			#include "stdio.h" #include "malloc.h" typedef struct node { int key; struct nod ... 
- NEFU_117素数个数的位数
			题目传送门:点击打开链接 Problem : 117 Time Limit : 1000ms Memory Limit : 65536K description 小明是一个聪明的孩子,对数论有着很浓烈 ... 
- 浅尝辄止WPF自定义用户控件(实现颜色调制器)
			主要利用用户控件实现一个自定义的颜色调制控件,实现一个小小的功能,具体实现界面如下. 首先自己新建一个wpf的用户控件类,我就放在我的wpf项目的一个文件夹下面,因为是一个很小的东西,所以就没有用mv ... 
- [国嵌攻略][153][I2C裸机驱动设计]
			eeprom简介 eeprom电可擦除可编程只读存储器,是一种类似于flash的固态存储器,但是与flash相比又存在一些区别: 1.eeprom可以按位擦写,而flash只能大片擦除. 2.eepr ... 
- vue引入新版 vue-awesome-swiper填坑
			关于新版 vue-awesome-swiper 问题 为什么我的vue-awesome-swiper组件pagination小圆点不显示问题? 为什么我的vue-awesome-swiper不会自动播 ... 
