使用ExpressionBlend进行WPF界面开发

### 使用 Expression Blend 进行 WPF 界面开发 #### 1. Expression Blend 简介 Expression Blend 不仅是一个能快速定义丰富 XAML 界面的优秀应用程序，它本身也是用 WPF 编写的，是使用 WPF 创建动态、丰富、基于矢量的用户界面的绝佳示例。可以从 [www.microsoft.com/products/expression/en/Expression-Blend/default.mspx](www.microsoft.com/products/expression/en/Expression-Blend/default.mspx) 下载其测试版。 #### 2. 启动与创建项目 下载并安装 Blend 后，启动它即可看到 Blend IDE。如果熟悉使用 Visual Studio，那么上手过程会很熟悉。从“文件”菜单中选择“新建项目”，可以选择标准应用程序（.exe）或控件库，以及编程语言（Visual Basic 或 C#）。 创建标准应用程序后，IDE 会创建一个新的工作区，其中包含项目、核心引用、一个 assemblyinfo 文件和两个 XAML 文件：App.xaml 和 Window1.xaml。 - **References 文件夹**：包含项目使用的每个程序集的引用。首次设置项目时，它会引用 WPF 中的 PresentationCore.dll、PresentationFramework.dll 和 WindowsBase.dll，以及 .NET Framework 中的 System.dll 和 System.Xml.dll。 - **App.xaml**：这是一个应用程序文件，用于包含应用程序全局的设置和资源。例如，可以指定标记来配置应用程序启动时的行为，或定义要在所有窗口中共享的资源。默认的 App.xaml 代码如下： ```xml <Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="BlendProject1.App" StartupUri="Window1.xaml"> <Application.Resources> <!-- Resources scoped at the Application level should be defined here. --> </Application.Resources> </Application> ``` - **Window1.xaml**：这是模板提供的默认窗口，是一个定义窗口的基本 XAML 页面，上面放置了一个网格（Grid）。Grid 是基本的布局控件，放置在其中的控件可以使用“网格布局”方法显示。以下是 Window1.xaml 的代码： ```xml <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xml:lang="en-US" x:Class="BlendProject1.Window1" x:Name="Window" Title="Window" Width="640" Height="480"> <Grid x:Name="LayoutRoot"/> </Window> ``` #### 3. Blend IDE 布局 编辑项目时，Blend IDE 的基本布局如下： |区域|功能| | ---- | ---- | |最左侧|工具栏| |工具栏右侧|交互工具，用于设计时间线、触发器和动画| |中心区域|设计器/XAML 编辑器。按 F11 进入可视化设计模式，可以将 XAML 控件拖放到页面上，并使用代码编辑器调整当前的 XAML 代码| |屏幕右侧|管理区域，用于控制项目、与外部数据源的连接以及当前正在编辑的组件的属性| #### 4. 使用 Blend 创建 UI 屏幕左侧是控制栏。当按住任何带有右下角三角形的控制图标时，该家族的控件将弹出。例如，按住“按钮”图标，可选择的控件列表（如复选框和单选按钮）将出现。 选择任何控件后，可以将鼠标拖动到设计表面以放置和调整其大小，或者双击它以在设计表面获得默认的位置和大小。由于 Window1.xaml 当前使用网格布局方法，因此可以将控件放置在任何位置。 控件放置在设计表面后，可以使用屏幕右侧的属性编辑器编辑其属性。WPF 为最简单的控件（如按钮）提供了大量属性，这些属性被分为画笔、外观和布局等类别。幸运的是，Blend 提供了属性搜索功能。例如，在搜索框中输入“f”，属性窗口将关闭所有不包含以“f”开头的属性的面板；再输入“o”，它将再次重新绘制。 #### 5. WPF 布局控件 WPF 有多种布局控件，可作为其他控件的容器，控制控件在屏幕上的显示位置和方式，以及窗口调整大小时控件的行为。以下是可用的布局控件： |布局控件|特点| | ---- | ---- | |Canvas|简单的布局控件，可自由放置控件，但屏幕调整大小时灵活性较差| |Grid|可将区域划分为行和列，并将子控件放置在生成的每个单元格中，屏幕布局时控件将出现在其网格单元格内| |StackPanel|将子控件水平或垂直堆叠，适用于实现工具栏或垂直按钮栏等 UI 元素| |DockPanel|将屏幕的整个边缘分配给其子控件，Blend IDE 的工具栏交互窗口和管理区域就是 DockPanel 的典型示例| |WrapPanel|将子控件从左到右依次排列，到达边界时控件会换行| #### 6. 使用网格布局控件 创建新项目时，Blend 创建的默认窗口已经有一个网格控件。这是一个单单元格网格，行为类似于 Canvas，允许自由放置控件。要充分利用网格，应创建行和列，可在属性编辑器中完成。默认情况下，这个网格名为 LayoutRoot，确保在屏幕左侧的“对象和时间线”窗格中选择它。 创建行和列的步骤如下： 1. 选择 LayoutRoot 网格，它将以黄色突出显示。 2. 使用属性编辑器创建行和列，这些位于属性窗口的扩展布局部分。可以展开“布局”，然后点击布局面板底部的扩展按钮，或者按照前面描述的方法搜索“行”或“列”。 3. ColumnDefinitions 和 RowDefinitions 是集合，在属性编辑器中它们旁边会有一个省略号（...）按钮。点击该按钮，将出现“集合编辑器”。 4. 点击“添加另一项”按钮以在集合中创建新定义。添加三列和三行后，主窗口的 XAML 代码如下： ```xml <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xml:lang="en-US" x:Class="BlendProject1.Window1" x:Name="Window" Title="Window" Width="640" Height="480"> <Grid x:Name="LayoutRoot" HorizontalAlignment="Left"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> </Grid> </Window> ``` 添加按钮到网格时，默认会添加到网格的左上角。要将按钮放置在特定位置，可选择设计器中的任何按钮，查看其布局属性，在其中输入行和列的值。网格单元格是从 0 开始编号的，例如在三乘三的网格中，将“行”设置为 1 且“列”设置为 1 会将按钮放置在网格的中心。 #### 7. 使用其他布局控件 理解一个布局控件后，就基本能理解所有布局控件。重要的是要记住布局控件可以嵌套，这样可以很好地控制窗口的行为。 以下是一个使用多个 DockPanel 和 StackPanel 控件创建典型 MDI 风格应用程序的示例，该应用程序有一个工具栏、一个状态栏、左右停靠区域和一个客户端区域： ```xml <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xml:lang="en-US" x:Class="BlendProject1.Window1" x:Name="Window" ```