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中创建行和列,只需要将鼠标放在界面窗口上深蓝色带上,就可以看到黄色的分割线,鼠标点击后,行和列即可产生。
创建完成后,会以蓝色现条显示在设计界面,而XAML代码则会自动生成,
- Canvas界面设计模式,该设计模式是默认设计模式,
- Grid界面设计模式
点击该按钮,会自动切换界面设计模式
在上图中可以看到,在Grid Layout Mode下,每行和每列前都会显示一个“锁”状图标,默认是非锁定状态,点击后,会锁定该行或者列,从代码中可以看出明显变化。
当我点击锁定一列,代码将变化为:
例如,我想放置四个TextBlock控件在Grid中,首先点击左边工具栏菜单
然后在设计界面进行简单的绘制,创建四个TextBlock控件:
选中任一个TextBlock控件,在右边“properties”属性栏则会显示出该控件的所有属性,这里我们将关注Layout栏属性
这里我们可以看出,Blend已经自动将控件绘制到相对应的列和行中。通过该属性设置,可以轻松的控制控件在Grid中的位置。这里我们看一下后台代码:
TextBlock
Margin ="46,71,73,90" Text ="第0行,第0列" textwrapping ="Wrap" FontSize ="18.667" 11 ="40,57,0)"> Grid.Column ="1" ="第0行,第1列" 12 Grid.Row ="第1行,第0列" 13 ="第1行,第1列" 14 在以上代码中可以看到,Blend省略了一些布局代码,如果在布局控件中,如果控件不填写Grid.Column,Grid.Row,则默认值为0.所以说,第一个TextBlock的位置被默认为:<TextBlock Margin 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位置则为:
Grid.Row="1" Grid.Column="0"="第1行,第0列"/>
第四个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对应行和列的位置都有不同,你可以尝试修改一下,相关数值,查看其位置更改情况。
FontSize="18.667"/>
Grid.Column="1"="第1行,第1列" 在Blend中控制Margin,是点击以下图标,然后在Properties属性栏目中可以修改Margin数值。
而对于Horizontal Alignment,Vertical Alignment属性,同样可以通过属性栏进行修改,
="18.667" HorizontalAlignment="Left" 在开发过程中,经常会面对不同分辨率的情况下,项目布局应该随之改变,自适应客户端的终端。Grid控件支持,设置“Auto”自动属性,该Grid将随着内部控件内容的增加而改变,这样有利于动态适应控件尺寸。说到这里,有些人可能对布局控件的尺寸设计有一些困惑,这里我详细描述一下,Grid的尺寸设置策略。默认情况下,Grid支持三种尺寸设置策略,
第一种,绝对数值尺寸设置;
该设置是最简单的,但是是最不灵活的。例如上面例程代码中,可以直接设置列宽度为绝对数值:
Grid.ColumnDeFinitions>
ColumnDeFinition ="100"/>="50"</>
第二种,自动数值尺寸设置;
该设置对宽度和高度赋值“Auto”,该Grid尺寸将会随着内部内容的增加而增加,这个设置方法是最常用的一种;
="Auto" 第三种,比例数值尺寸设置;
该设置对宽度和高度赋值"*",或者"2*",Grid将按照设置的比例倍数进行分割布局;
="*"="3*" 以上设置,将把Grid划分为两列,第二列宽度永远是第一列宽度的3倍。第一列永远是第二列的1/3宽度。
在实际项目中,如果需要复杂的项目布局,可以将以上三种尺寸设置方法综合应用,达到最灵活的应用效果。
另外需要留意的是Grid支持无限的嵌入,也就是可以嵌套无限个布局控件,这样也提供了非常灵活的布局方式,在Grid中嵌套不同控件。Silverlight和WPF项目设计中,可以使用Group功能,将控件嵌套在同一个布局下,方便开发中控件的布局控制。
以上对Grid的描述,是Grid控件在开发中常用的功能和属性,如果想要灵活运用,还需要更多的实践,大家可以按照本文介绍的步骤和方法,多练习几次,就能熟练掌握Grid布局控件。