4.1.1 用Expression Blend建立基本用户界面

4.1.1  用Expression Blend建立基本用户界面

下面将学习如何使用Expression Blend建立一个基本的应用程序的全过程。我们将添加窗体修饰，包括倾斜、倒影、3D及凝胶效果。Expression Blend是比较简单的工具，但是有些界面与你在Visual Studio 2005中使用的有较大的区别。学习它一个较好的方式是使用Expression Blend一步步地建立一个简单的应用程序，这正是这一章即将讲述的。在学习本章的过程中，我们需要有足够的信心相信自己可以使用XAML创建如同Expression Blend示例中那样漂亮的应用程序。

下面开始介绍建立基本的应用程序界面。

用Expression Blend可以建立一个新的Windows EXE类型的项目。项目文件与Visual Studio 2005兼容，包含了XAML和其他兼容及运行程序所需的其他项目文件。可以看到如图4-2所示那样的“新建项目”对话框。

应用程序采用主/细节模式，产品列表显示在左边，当用户从列表中选择时，在右边显示产品细节。

一个分隔控件位于界面的中间将界面划分为两个彼此可以改变大小的块，要添加分隔控件，请在场景中放置一个Grid控件并且在Grid中放置分隔控件。

图4-2  建立一个新的Windows应用程序

如果查看资源库，就可以在其中看到Grid控件，如图4-3所示，选中它，然后拖拽到界面中你想放置的位置。

图4-3  包含Grid控件的资源库

在屏幕的底部我们可以看到包含了所有元素的时间线面板（英文为Timeline）。注意：这里已经添加了一个新的Grid，将名称更改为ProductGrid，图4-4显示了对象和时间线面板。

在时间线面板中选中Grid并双击，Expression Blend会在设计器中的Grid控件外绘制一个黄色的轮廓，图4-5显示了完整的用户界面。

图4-4  Expression Blend中的对象和时间线面板

图4-5  在浏览器中管理Grid

确认你正在使用工具条中的选择工具（工具条中的箭头），将鼠标移动到蓝色边界上，将出现一个带箭头的橘黄色条，这个条我们称为格子线。将其放置到界面上方你喜欢的位置并单击，Grid将分为两列，如图4-6所示（因为我们是将界面分隔为左右结构，如果是上下结构，则需要在界面左边或右边单击放置格子线）。

当我们想在Grid中放置其他内容时，需要使用ContentControl控件，这个操作是以Grid为容器存储一个单独的控件。如果想在Grid中存储更多的控件，则需要使用Panel控件。简单地在Grid中放置一个ContentControl控件，再在ContentControl控件中添加一个Panel控件，就可以在Panel控件中放置多个你想要的子控件了。

左边的屏幕将在Grid中包含List控件，它必须位于ContentControl控件中，所以将一个ContentControl控件拖拽到Grid左边的pane中。

ContentControl将作为产品列表List控件的容器控件，因此，它需要充满整个pane。这里，我们把它的名称改为Master。

图4-6  放置格子线

接下来，需要调整ContentControl的大小让它完全充满pane，在Expression Blend中实现的方式与Visual Studio 2005中有点不同，它没有Dock属性。首先我们需要选中ContentControl并修改它的布局属性，如果没有看到布局面板出现在屏幕右边的工具中，则打开菜单中的窗口，选中属性，布局将会出现在属性Tab页面中。为了实现填充，将ContentControl的Width和Height属性设置为Auto（意思是“没有具体的值”），横向和纵向对齐方式如图4-7所示，并且Margin（边缘空隙）的选项都设置为0像素。图4-7显示了具体的设置。

图4-7  编辑控件的大小、对齐方式和边界

应用程序右边显示的是在左边选中的产品的详细信息，要实现这部分，需要在Grid中放置一个ContentControl控件，并在这个ContentControl中再放置一个Grid控件，内嵌的Grid控件包含多个子控件。

下一步是在Gird的右边添加一个ContentControl控件，命名为Details。

现在的程序界面如图4-8所示。

图4-8  放置第2个ContentControl控件

控件的大小、边界等的设置与左边的ContentControl一样，除了这项Margin：左边空白设置为20像素，这将使两个块中间有一个20像素宽的控件，我们在其中放置Splitter控件。在运行时窗体的大小和两块的分隔都是自动的，如果忘记做这步，没关系，当运行应用程序时比较一下就都清楚了。

添加Splitter，需要在工具箱中找到GridSplitter控件，在Master和Details两个块留下的小缝中画出这个控件，它会填充在一个矩形框中，如果放置起来比较困难，可以使用位于底部的Zoom工具放大页面，它可以让我们在绘制Splitter时更加精确。