【IT168 专稿】
用Visual Studio2008玩转Silverlight(一)
四、使用XAML建立用户接口
我们在上面提及过，Visual Studio 2008有支持XAML内容的智能编辑器。使用这项功能可以使建立UI变得更高效。但不幸的是在Visual Studio 2008以前的版本并不支持这个功能。这就意味着每次我们写完XAML代码后，都必须运行它才能知道结果是不是我们所需要的。
好消息是我们可以使用微软提供的另一个工具来编写XAML代码，这就是Expression Blend。微软Expression Blend是一个用于为Windows程序建立专业UI的专业设计器。Blend的最新版本是Expression Blend 2，是今年八月出的预览版，这一版本允许我们建立基于Silverlight的应用程序。
为了使用Expression Blend 2打开Page.xaml页，在Visual Studio 2008中右击这页，并选择使用Expression Blend打开，如图4所示：
图4 使用Expression Blend打开XAML页
这时Expression Blend 2将启动，我们将看到和Visual Studio 2008类似的开发环境，如图5所示：
图5 使用Expression Blend 2编辑Page.xaml文件
现在让我们在这个页中加入一些控件。首先，我们将在Page.xaml页中建立一个圆角的按钮。如图6所示。在这个按钮中，我们还加入了一个文本区，可以使用它来演示一些信息。
图6 在Page.xaml中建立一个圆角按钮和一个文本区
单击如图7的画布控件，将它加到Page.xaml中。这个画布将作为所有控件的载体。
图7将一个画布加到Page.xaml中
为了在按钮上建立一个边框，在页面上加一个长方形控件，并覆盖我们刚才加的那个画布，如图8所示：
图8 向画布中加入一个长方形框
为了建立有四个圆角的方框，单击Direction Selection图标，然后选择我们刚刚加的Rectangle控件，如图9所示。并设黑这个控件的属性如下：
RadiusX - 8
RadiusY - 8
StrokeThickness - 3
另外，我们还可以设置边框的背景颜色为黄色，如图9所示
图9 设置背景颜色为黄色
为了在按钮中显示文本信息，我们需要在画布上加一个TextBlock控件，并设置字体为Comic Sans MS。
图10 在画布中加入一个TextBlock
为了使按钮显示当前时间，我们需要每秒更新一次时间信息。为了完成这个任务，需要在XAML文件中加入一个Timeline。首先，单击Objects和Timeline组中的>箭头，然后按+按钮，如图11所示：
图11 向XAML文件中加一个Timeline
我们会被问是否为这个Timeline重新命名，在本例中使用默认的名子：Timeline1，然后单击OK按钮。
现在我们的XAML文件看上去象图12所示，最后保存XAML文件。
图12 加完Timeline后的XAML文件效果
当我们现在返回到Visual Studio2008后，由于Page.xaml在外部被Expression Blend编辑过了，因此，VS2008会询问是否要重新装载Page.xaml文件。一但我们重新转载这个文件，就会得到以下的XAML内容：
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="parentCanvas"
Loaded="Page_Loaded"
x:Class="OurFirstSilverlightProject.Page;assembly=ClientBin/
OurFirstSilverlightProject.dll"
Width="640"
Height="480"
Background="White"
>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard x:Name="Timeline1"/>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
<Canvas Width="189" Height="44" Canvas.Left="8" Canvas.Top="8">
<Rectangle Width="189" Height="44" Fill="#FFF4FB04"
Stroke="#FF000000" StrokeThickness="3" RadiusX="8"
RadiusY="8"/>
<TextBlock Width="168" Height="23" Canvas.Left="10"
Canvas.Top="11" Text="TextBlock" TextWrapping="Wrap"
FontFamily="Comic Sans MS"/>
</Canvas>
</Canvas>
为了使画布对象在编程时可访问，需要按如下方式将x-Name属性设置为btnTime。
<Canvas x:Name="btnTime" Width="189" Height="44"
Canvas.Left="8" Canvas.Top="8">
要注意的是在Expression Blend2中，我们可以在设计器和XAML代码视图之间切换，如图13所示：
图13 在Expression Blend2中切换设计器和XAML视图
