现在可以添加Label控件了。遗憾的是,Label不会出现在工具窗口中。注意Asset Library工具窗口底部两个右边的指示箭头。单击这个控件,你会看到下图中的Asset Library窗口。单击Label输入,会看到该控件已经添加到工具窗口。双击Label,Expression Blend会将其添加到Canvas。Expression Blend用TextBox把Label添加到左上角。为了改变位置,单击Selection工具,把Label移到新位置即可。
基于这一点,你或许选错了Objects和Timeline窗口中的对象。再次点击Canvas,使其成为高亮度项,然后双击Button。和Label一起,使用Selection工具来定位Button。所有控件现在应该都出现在了Canvas中(如下图所示)。
现在你有一系列控件可以使用,先抽出些时间设置一下属性。只需用属性窗口来执行任务。你已经访问了所有属性,包括大小和定位信息。当然,你可以用Selection工具来移动控件。控件名称是最重要的属性:txtInput用于TextBox,IblOutput用于Label,btnTest用于Button。下图显示了Design窗口的最终属性。保持MainPage.xaml,关闭Expression Blend。
创建代码隐藏
Expression Blend不是编码工具,VS才是。我们已经拥有了一个完整的用户界面,可以添加代码隐藏了。在VS中点击Solution Explorer的条目重新打开MainPage.xaml。很快你就会看到熟悉的分屏显示,其顶部呈现了用户视觉效果,底部有相关XAML。你会发现用Expression Blend生成的XAML和手动编写的XAML没有区别。
为了在btnTest和代码隐藏之间添加联系,在XAML的btnTest部分输入Click= "btnTest_Click"。标签看上去像这样:
< Button x:Name="btnTest"
Content="Click Me"
Canvas.Top="70"
Canvas.Left="20"
Width="80"
Height="25"
Click="btnTest_Click"/>
右键单击Click= "btnTest_Click"条目,然后在Context菜单中选择Navigate to Event Handler。这样就可以输入一些有趣的事件控制器代码,如:
private void btnTest_Click(object sender, RoutedEventArgs e)
{
lblOutput.Content = txtInput.Text.ToUpper();
}
你可以在Debug菜单中选取一个选项测试应用。VS将启动ASP.NET Development Server并为浏览器指明正确方向。如果你选择调试应用,将看到Debugging Not Enabled对话框。选择适当选项,然后点"确认"。几分钟后,应用就会在浏览器上运行了。
结语
本文教会了我们一种更简便地创建XAML的方法。示例中的用户界面很简单。但是你可以用同样的方法为复杂程序编写XAML。使用Expression Blend节约了大量时间和精力。此外,整个开发过程会变得更愉快。
不过,还有一些值得考虑的事情要注意。Expression Blend和VS的结合使用让设计师和程序员可以成为一个团队。如我们在之前的示例中所讲述的,两个部分都可以使用单独的项目。设计师可以创建用户界面,而程序员可以做代码隐藏方面的工作。因此,团队可以紧密协作,工作效率也相应提高。