微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Silverlight之UI设计学Blend五【基本布局控件1】

Expression Blend开发三要素:

- 掌握布局控件(Layout)

- 理解动画设计(Animations)

 理解状态和模板 (StatesTemplates

首先,从基本布局控件开始,后面将会学习动画设计和状态、模板:

如果您有HTML的设计经验,也可以简单的把布局控件理解为HTML中的Table标签。在任何一个Silverlight或者WPF项目中,都离不开布局控件。
以下是几个基本的布局控件,分别为:
Grid、Canvas、StackPanel、ScrollViewer、Border、ViewBox

Silverlight之UI设计学Blend五【基本布局控件1】


下面先介绍一下Grid的使用。

Grid控件和HTML的Table是最近似的。设计人员可以根据需要,自定义设置行数和列数,放置不同的内容和控件到每行每列中。在Blend中创建行和列,只需要将鼠标放在界面窗口上深蓝色带上,就可以看到黄色的分割线,鼠标点击后,行和列即可产生。

Silverlight之UI设计学Blend五【基本布局控件1】


以下是拖拽Grid控件之后设计面板中的控件效果

Silverlight之UI设计学Blend五【基本布局控件1】


这个按钮,可以切换布局控制模式,布局设计模式:

Silverlight之UI设计学Blend五【基本布局控件1】



- Canvas界面设计模式,该设计模式是认设计模式,

- Grid界面设计模式

Grid Layout Mode下,每行和每列前都会显示一个状图标,认是非锁定状态,点击后,会锁定该行或者列,大家可以在代码中看一下变化。

 1     <Grid x:Name="LayoutRoot" Background="White">
 2         <Grid.ColumnDeFinitions>
 3             <ColumnDeFinitioWidth="0.505*"/>
 4             <ColumnDeFinitioWidth="0.495*"/>
 5         </Grid.ColumnDeFinitions>
 6         <Grid.RowDeFinitions>
 7             <RowDeFinitioHeight="0.479*"/>
 8             <RowDeFinitioHeight="0.521*"/>
 9         </Grid.RowDeFinitions>
10     </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中嵌套不同控件。很多控件,可以直接分组在Grid下,方便项目控件的控制。

可以使用Group功能,将控件嵌套在同一个布局下,方便开发中控件的布局控制。

Grid布局中嵌入控件的属性

Silverlight之UI设计学Blend五【基本布局控件1】


在右侧的属性中,可以看到当前处于的行列数是什么,RowSpan是行数,ColumnSpan是列数。

可以设定对齐方式。

可以使用Margin数据设置,来定义控件在Grid中的位置和控件大小。

Margin = "0,1,2,3",表示:

对布局控件左边的距离为0

对布局控件的顶端距离为1

对布局控件的右边距离为2

对布局控件的下端距离为3

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐