20111024ExpressionBlend学习102布局控件Grid.docVIP

XAML概述 Silverlight的控件绘制是由XAML语言进行支持的。 什么是XAML语言？ 简单的说，XAML（Extensible Application Markup Language ）是一款基于XML的描述性语言，中文也叫做可扩展应用程序标记语言。 该语言是由微软开发创建，主要用于构建WPF和Silverlight应用程序用户界面。 XAML是Silverlight用户界面设计的基础，使用 XAML可以定义Silverlight对象以及属性，相对于后台语言定义控件来说，XAML提供了非常简洁的方式声明控件，有时仅需一句代码就可以完成一个控件的构造。 不仅如此，XAML还提供了一种便于扩展和定位的语法来定义和程序逻辑分离的用户界面，而这种实现方式和ASP.NET中的代码后置 模型非常类似。 这样有效的分离了设计人员和开发人员，在同一个项目中，对其进行分工前台程序界面设计和后台逻辑设计，使项目到达协作开发的目的。 所以说，XAML是Silverlight用户界面设计的基础，作为Silverlight设计人员，应该对XAML语言熟练掌握， 由于本系列是介绍 Blend，这里对XAML语言不再进行细述，如果需要系统化学习XAML语言，请访问本文后提供的参考学习资源。 对于XAML了一定的认识，下面进入本文正题，Silverlight控件入门。对于Silverlight控件，微软进行了简单分类， 第一类： Layout Controls（布局控件) 第二类： Item Controls （项目控件) 第三类： User Interaction Controls（用户交互控件) 首先我将介绍 布局控件，从名字上可以看出是控制用户界面总体格式的一类控件。通过这类控件，可以很轻松的对用户界面进行编排，在这类控件中，也可以放置其他的项目控件和用户交互控件，达到控制其位置的目的。 如果您有HTML的设计经验，也可以简单的把布局控件理解为HTML中的Table标签。在任何一个Silverlight或者WPF项目中，都离不开布局控件。 在Silverlight标准控件中，包括以下四种布局控件： Grid控件 Canvas控件 StackPanel控件 Border控件 由于该控件在Silverlight和WPF项目开发中占有非常重要地位所以，详细介绍Grid控件的使用和常用属性： Grid控件 Grid控件可以认为是Silverlight项目设计中，使用的最多的布局控件，在使用Blend或者Visual Studio 2008 SP1创建Silverlight项目的时候，默认控件代码中就包含了Grid. 1UserControl2 xmlns=/winfx/2006/xaml/presentation3 xmlns:x=/winfx/2006/xaml4 x:Class=SilverlightBlendDemo.MainPage5 Width=640 Height=48067 Grid x:Name=LayoutRoot Background=White/8/UserControl 在使用的经验中理解，Grid控件和HTML的Table是最近似的。 设计人员可以根据需要，自定义设置行数和列数，放置不同的内容和控件到每行每列中。Blend对Grid的设计支持非常的直接和简单。 在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.RowDefinitions10 /Grid 这样看来Grid设计相当简单，在布局设计过程中，为了方便那些没有设计经验的开发人员，Blend提供了两个布局设计模式： - Canvas界面设计模式，该设计模式是默认设计模式， - Grid界面设计模式 点击该按钮，会自动切换界面设计模式 在上图中可以看到，在Grid Layout Mode下，每行和每列前都会显示一个“锁”状图标，默认是非锁