2 xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
4 x:Class ="SilverlightBlendDemo.MainPage"
5 WIDth ="640" Height ="480" >
6
7 < GrID x:name ="LayoutRoot" Background ="White" />
8 </ UserControl > 在我个人使用的经验中理解,GrID控件和HTML的table是最近似的。设计人员可以根据需要,自定义设置行数和列数,放置不同的内容和控件到每行每列中。Blend对GrID的设计支持非常的直接和简单。这里我还是用上一篇创建的例程项目,SilverlightBlendDemo,如果你没有该项目,可以在本文后面下载,或者按照上一篇介绍方法创建。 在Blend中创建行和列,只需要将鼠标放在界面窗口上深蓝色带上,就可以看到黄色的分割线,鼠标点击后,行和列即可产生。 按照上面说的方法,我将创建一个2行2列的效果如下: 创建完成后,会以蓝色现条显示在设计界面,而XAML代码则会自动生成, 1 < GrID x:name ="LayoutRoot" Background ="White" >
2 < GrID.ColumnDeFinitions >
3 < ColumnDeFinition WIDth ="0.505*" />
4 < ColumnDeFinition WIDth ="0.495*" />
5 </ GrID.ColumnDeFinitions >
6 < GrID.RowDeFinitions >
7 < RowDeFinition Height ="0.479*" />
8 < RowDeFinition Height ="0.521*" />
9 </ GrID.RowDeFinitions >
10 </ GrID > 这样看来GrID设计相当简单,在布局设计过程中,为了方便那些没有设计经验的开发人员,Blend提供了两个布局设计模式: - Canvas界面设计模式,该设计模式是默认设计模式, - GrID界面设计模式 点击该按钮,会自动切换界面设计模式 在上图中可以看到,在GrID Layout Mode下,每行和每列前都会显示一个“锁”状图标,默认是非锁定状态,点击后,会锁定该行或者列,从代码中可以看出明显变化。 当我点击锁定一列,代码将变化为: 1 < GrID x:name ="LayoutRoot" Background ="White" >
2 < GrID.ColumnDeFinitions >
3 < ColumnDeFinition WIDth ="323" />
4 < ColumnDeFinition />
5 </ GrID.ColumnDeFinitions >
6 < GrID.RowDeFinitions >
7 < RowDeFinition Height ="0.479*" />
8 < RowDeFinition Height ="0.521*" />
9 </ GrID.RowDeFinitions >
10 </ GrID > 这里可以看到ColumnDeFinition的宽度变成了固定数字,后面不再有“*”号,这样也就表明,该列不再根据内容的改变而改变,一直以固定宽度显示。相反,如果在数值后,有“*”号,该行或者列宽度将会跟着内容的改变而改变。 再次点击锁定的列,会显示自动获取宽度状态图标: 代码则自动改变为 WIDth ="auto": 1 < GrID x:name ="LayoutRoot" Background ="White" >
2 < GrID.ColumnDeFinitions >
3 < ColumnDeFinition WIDth ="auto" MinWIDth ="323" />
4 < ColumnDeFinition />
5 </ GrID.ColumnDeFinitions >
6 < GrID.RowDeFinitions >
7 < RowDeFinition Height ="0.479*" />
8 < RowDeFinition Height ="0.521*" />
9 </ GrID.RowDeFinitions >
10 </ GrID > 根据上文所述,GrID如同HTML中的table,也就是说我们可以按照使用table的方法,设置GrID的内容。 例如,我想放置四个TextBlock控件在GrID中,首先点击左边工具栏菜单 然后在设计界面进行简单的绘制,创建四个TextBlock控件: 选中任一个TextBlock控件,在右边“propertIEs”属性栏则会显示出该控件的所有属性,这里我们将关注Layout栏属性 这里我们可以看出,Blend已经自动将控件绘制到相对应的列和行中。通过该属性设置,可以轻松的控制控件在GrID中的位置。这里我们看一下后台代码: 1 < GrID x:name ="LayoutRoot" Background ="White" >
2 < GrID.ColumnDeFinitions >
3 < ColumnDeFinition WIDth ="0.505*" />
4 < ColumnDeFinition WIDth ="0.495*" />
5 </ GrID.ColumnDeFinitions >
6 < GrID.RowDeFinitions >
7 < RowDeFinition Height ="0.479*" />
8 < RowDeFinition Height ="0.521*" />
9 </ GrID.RowDeFinitions >
10 < TextBlock margin ="46,71,73,90" Text ="第0行,第0列" textwrapPing ="Wrap" FontSize ="18.667" />
11 < TextBlock margin ="40,57,90" GrID.Column ="1" Text ="第0行,第1列" textwrapPing ="Wrap" FontSize ="18.667" />
12 < TextBlock margin ="46,110" GrID.Row ="1" Text ="第1行,第0列" textwrapPing ="Wrap" FontSize ="18.667" />
13 < TextBlock margin ="40,79,110" GrID.Column ="1" GrID.Row ="1" Text ="第1行,第1列" textwrapPing ="Wrap" FontSize ="18.667" />
14 </ GrID > 在以上代码中可以看到,Blend省略了一些布局代码,如果在布局控件中,如果控件不填写GrID.Column,GrID.Row,则默认值为0.所以说,第一个TextBlock的位置被默认为: < TextBlock margin ="46,90" Text ="第0行,第0列" GrID.Row="0" GrID.Column="0" textwrapPing ="Wrap" FontSize ="18.667" /> 第二个Textblock位置则为: <TextBlock margin="40,90" GrID.Row="0" GrID.Column="1" Text="第0行,第1列" textwrapPing="Wrap" FontSize="18.667"/>
第三个TextBlock位置则为: <TextBlock margin="46,110" GrID.Row="1" GrID.Column="0" Text="第1行,第0列" textwrapPing="Wrap" FontSize="18.667"/> 第四个TextBlock位置代码不变,是完整的。 也就是说,从Xaml代码部分,我们可以通过GrID.Column,GrID.Row两个属性控制控件的位置。 对于GrID的布局,上面的方法是最通用而且最简单的。 但是在项目中,我们还会使用一些常见属性,配合GrID控制布局,例如margin,Horizontal Alignment,Vertical Alignment以及Group方法等。 熟悉CSS的设计人员,应该知道margin的作用,主要是控制控件内部对应布局控件的边距的。该属性的赋值方法在CSS中有详解,这里不再赘述,简单的赋值,margin = "0,1,2,3",表示: 对布局控件左边的距离为0 对布局控件的顶端距离为1 对布局控件的右边距离为2 对布局控件的下端距离为3 其中0,1,2,3是随意设置的数值,这样就控制了控件在布局控件中的具体位置。 对于Horizontal Alignment,Vertical Alignment属性,也是CSS中出现过的属性,简单的说是对齐属性,水平对齐和垂直对齐。 这两个属性默认有四个值: 左边/顶端对齐 中间对齐 右边/下端对齐 拉伸 在上例的代码中,我们可以看到margin属性都在改变,相对GrID对应行和列的位置都有不同,你可以尝试修改一下,相关数值,查看其位置更改情况。 < TextBlock margin ="46,90" Text ="第0行,第0列" GrID.Row="0" GrID.Column="0" textwrapPing ="Wrap" FontSize ="18.667" /> <TextBlock margin="40,90" GrID.Row="0" GrID.Column="1" Text="第0行,第1列" textwrapPing="Wrap" FontSize="18.667"/> <TextBlock margin="46,110" GrID.Row="1" GrID.Column="0" Text="第1行,第0列" textwrapPing="Wrap" FontSize="18.667"/> < TextBlock margin ="40,110" GrID.Column ="1" GrID.Row ="1" Text ="第1行,第1列" textwrapPing ="Wrap" FontSize ="18.667" /> 在Blend中控制margin,是点击以下图标,然后在PropertIEs属性栏目中可以修改margin数值。 在属性栏可以修改其数值: 而对于Horizontal Alignment,Vertical Alignment属性,同样可以通过属性栏进行修改, 修改后,在Xaml代码中也会自动更新修改: < TextBlock margin ="40,110" GrID.Column ="1" GrID.Row ="1" Text ="第1行,第1列" textwrapPing ="Wrap" FontSize ="18.667" HorizontalAlignment ="left" /> 在开发过程中,经常会面对不同分辨率的情况下,项目布局应该随之改变,自适应客户端的终端。GrID控件支持,设置“auto”自动属性,该GrID将随着内部控件内容的增加而改变,这样有利于动态适应控件尺寸。说到这里,有些人可能对布局控件的尺寸设计有一些困惑,这里我详细描述一下,GrID的尺寸设置策略。默认情况下,GrID支持三种尺寸设置策略, 第一种,绝对数值尺寸设置; 该设置是最简单的,但是是最不灵活的。例如上面例程代码中,可以直接设置列宽度为绝对数值: < GrID.ColumnDeFinitions >
< ColumnDeFinition WIDth ="100" />
< ColumnDeFinition WIDth ="50" />
</ GrID.ColumnDeFinitions > 第二种,自动数值尺寸设置; 该设置对宽度和高度赋值“auto”,该GrID尺寸将会随着内部内容的增加而增加,这个设置方法是最常用的一种; < GrID.ColumnDeFinitions >
< ColumnDeFinition WIDth ="auto" />
</ GrID.ColumnDeFinitions > 第三种,比例数值尺寸设置; 该设置对宽度和高度赋值"*",或者"2*",GrID将按照设置的比例倍数进行分割布局; < GrID.ColumnDeFinitions >
< ColumnDeFinition WIDth ="*" />
< ColumnDeFinition WIDth ="3*" />
</ GrID.ColumnDeFinitions > 以上设置,将把GrID划分为两列,第二列宽度永远是第一列宽度的3倍。第一列永远是第二列的1/3宽度。 在实际项目中,如果需要复杂的项目布局,可以将以上三种尺寸设置方法综合应用,达到最灵活的应用效果。 另外需要留意的是GrID支持无限的嵌入,也就是可以嵌套无限个布局控件,这样也提供了非常灵活的布局方式,在GrID中嵌套不同控件。Silverlight和WPF项目设计中,可以使用Group功能,将控件嵌套在同一个布局下,方便开发中控件的布局控制。 以上对GrID的描述,是GrID控件在开发中常用的功能和属性,如果想要灵活运用,还需要更多的实践,大家可以按照本文介绍的步骤和方法,多练习几次,就能熟练掌握GrID布局控件。 本文出自 “ 专注Silverlight” 博客,请务必保留此出处 http://www.voidcn.com/article/p-eusdofjm-bke.html 总结
以上是内存溢出为你收集整理的Expression Blend实例中文教程(3) - 布局控件快速入门Grid全部内容,希望文章能够帮你解决Expression Blend实例中文教程(3) - 布局控件快速入门Grid所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)