目录第1章Expression Blend 4 基础 (1)1.1概述 (1)1.2创建第一个WPF应用程序 (1)1.3工作区 (1)1.3.1工具面板 (2)1.3.2项目面板 (3)1.3.3绘画面板 (4)1.3.4属性面板 (5)第2章自定义窗体 (9)第3章自定义样式 (10)第4章弹出框 (11)第5章自定义控件 (12)第1章Expression Blend 4 基础1.1 概述Expression Blend 4 是一款功能齐全的专业设计工具，可用来针对基于C#语言构建的WPF 应用程序制作精美复杂直观的用户界面。

这样可以使设计人员专注于创作，开发人员专注于编程，最终达到设计与开发人员无缝结合的效果，从面创建一个更丰富，更令人印象深刻的用户体验。

1.2 创建第一个WPF应用程序1.选择“文件”｜“新建项目”，如图1.1所示。

图 1.1 新建项目2.在弹出窗口中的左边项目类型里选择“WPF”，右边选择“WPF 应用程序”，在下边填写项目的名称，放置的位置，选择Visual C# 语言，版本4.0，点确定。

完成项目创建。

如图1.2所示。

图 1.2 新建应用程序1.3 工作区Blend中默认的工作区包含所有可视界面元素，方便快捷操作。

这些元素包括菜单栏、工具面板、项目面板、绘画面板和属性面板等。

如图1.3所示。

图 1.3 工作区1.3.1 工具面板用来在应用程序中创建和修改对象。

可以通过使用鼠标选择工具并在绘画面板上进行绘制及修改，并结合“属性”面板进行对象属性修改。

1.选择工具：用于选择和移动对象，快捷键为“V”。

2.路径选择工具：用于选择和移动所绘制对象的路径，或者边线。

3.平移视图工具：用于移动绘画面板的视图。

通常使用方法，按着空格键不放，在绘画面板上的箭头会改变成手型，即可点击鼠标进行视图的拖动。

4.缩放视图工具：用于放大缩小绘画面板的视图。

按快捷键“Z”选择后，点击鼠标进行放大，放大后，按住“ALT”键不放，再点击鼠标可进行缩小。

按“Ctrl”键+“1”键，可恢复100%正常视图。

在放大缩小中结合空格键平移视图，可对画板中各个绘制元件进行细微观察或修改。

5.摄影轨迹工具：6.取色器工具：用于获取其它对象上的色彩属性，包括填充色和描边色。

7.油漆桶工具：将当前选取对象上的色彩属性复制到其它对象上。

同样包括填充色和描边色。

8.渐变工具：9.画笔工具：用于绘制所需的自定义形状，10.形状、画线工具：用于绘制矩形、圆形、线等形状。

在图标上长按鼠标左键，会出现矩形、圆形、线三种选择，选择所需要的形状，在绘画面板按住鼠标左键，然后拖动鼠标，绘制出一个形状。

可通过形状周围的控制点对形状进行修改，也可以结合属性面板进行调整。

11.布局工具：用于对控件布局的控制。

在图标上长按鼠标左键，会出现各种布局工具，通常使用Grid这种布局工具。

12.文本输入框工具：用于文本的输入。

在图标上长按鼠标左键，13.按钮类控件工具：用于创建按钮类，在图标上长按鼠标左键，显示同类型的按钮。

点击任意一个按钮类控件，在绘画面板上，画出控件，按F5运行，将生成一个包含已画好控件的窗口，鼠标点击控件，可体验对应的控件行为。

关闭窗口，回绘画面板，选择画板上的控件，按Delete键可以删除。

14.综合工具：包含全部控件，样式及行为等等栏目。

1.3.2 项目面板默认面板中包含项目，资产，触发器，状态，对象和时间线等，可点击对应的面板按钮进行切换。

并可对项目文件进行管理，及元件图层管理。

如图 1.4所示。

图 1.4 项目面板1.文件管理：对项目的文件进行管理选择操作。

可通过在calculator 上点击鼠标右键，进行新项的添加，或者文件夹的添加。

如图1.5所示。

图 1.5 文件管理点击MainWindow.xaml 前面的小三角，可以看到新的MainWindow.xaml.cs 文件，双击MainWindow.xaml.cs文件，在绘画面板中，可以看到文件的代码内容，此文件是对MainWindow 进行命令代码编写的文件。

再点击MainWindow.xaml 文件可以切换回来。

2.图层管理：对绘画面板里的所绘制的对象进行管理。

点击工具栏中的按钮图标，在绘画面板画出两个按钮，点击图层管理中的[Button] "Button" 可以选择面板中对应的按钮。

如图 1.6所示。

图 1.6 图层管理点击[Button] "Button" 旁的可对所选择的对象进行隐藏，再点击一次，重新显示。

同样可以点击对选择对象进行锁定和解锁。

把画板中两个按钮都选择后，按键盘的Delete 键进行删除。

1.3.3 绘画面板可以运用工具栏的控件在画板上直观的设计各种软件界面，点击画板上的标签栏可对文件进行切换。

在绘画面板右上角点击xaml 图标可切换到当前面板的代码显示。

单击拆分图标，可同时显示画板和代码，可快速的直观的显示代码修改后的效果。

再点击图标，切换回默认的单画板显示模式。

1.3.4 属性面板通过属性面板，可以对所绘制的对象进行位置，大小，色彩，效果，命令等等的修改。

由于属性面板有很多的选项，这里通过一个矩形讲解些常用重要的属性项。

点击工具栏中的图标，在画板中画出一个矩形。

按“V”键切换回选择工具，在右边的属性面板将看到当前矩形的各种属性。

分别为名称，画笔，外观，布局，公共属性，转换和杂项。

一般转换和杂项比较少用到。

首先在名称栏里给矩形命名，这样有利于对所绘制对象的辨别和管理，命名为test，点击名称栏后面的事件图标，可切换到事件行为页面，双击想要的行为栏，即可转换到代码页编写代码。

点击属性图标，切换回属性页面。

1.画笔栏：用于更改绘制对象的色彩，描边，填充模式，透明度等。

分为内部的Fill颜色填充和外部的Stroke描边填充。

如图 1.7所示。

图 1.7 画笔栏颜色属性选择画板中的矩形后，点击属性画板画笔栏的Fill（填充）的色块，系统默认为单色填充模式，在编辑器里选择所要的颜色，或者通过修改RGB数字得到所需的色值。

把A 栏目（色彩透明度）中的100%变成70%，画板中矩形填充色的透明度将变成70%。

点击渐变色填充图标，矩形的色彩将变为渐变色填充，默认为黑到白的双色渐变，方向从上往下。

属性板中，编辑器下边将多了一条从黑到白的渐变色带。

如图1.8所示。

图 1.8 渐变属性点击色带下的反转渐变图标，矩形的白色和黑色将颠倒交换，色带中的黑色滑块和白色滑块也将调换位置。

点击径向渐变图标，矩形的填充色将变成以白色为中心黑色为边缘的径向渐变，再点击线性渐变图标，矩形的填充色将变成默认的线性填充。

设计中通常通过拖动滑块来调整色彩的渐变，点击渐变色带上的白色小滑块并向右拖动一段距离，矩形的上半部分白色区域将越来越大，同时选定滑块偏移量的数值也跟着改变。

将偏移量改为0，将白色滑块恢复到原来位置。

在渐变色带上任意位置单击鼠标左键，将增加一个颜色滑块，再点击色带，增加第二个颜色滑块，如图 1.9所示。

图 1.9 添加颜色滑块点击第一个白色滑块，修改颜色的十六进制值为，点击第二个滑块，修改颜色色值为#FF686868，偏移量为50%。

点击滑块选择图标右边的小三角，即可选择到第三个滑块，修改色值为#FF4D4D4D，偏移量为50%，这样第三个滑块就与第二个滑块重叠在一起了。

画板中矩形的中部就形成一条很明显的分界线，这种渐变填色方式就是IPhone按钮常用的填色方式。

修改完后，Fill（填充）属于如图1.10所示。

图 1.10 矩形Fill属性点击画板中的矩形，点击画笔栏中的stroke（描边填充）色块，即可对矩形的边框进行颜色设置。

具体方法与上边操作一样，同样可以填充单色或者渐变色。

这里保持黑色，不做修改。

2.外观栏：用于调整所选控件的透明度，显示效果，描边属性。

点击画板中的矩形，点击外观栏中透明度，修改数值为85。

Visibility（显示模式）默认为Visible（显示），点击下拉菜单可以选择Visible（显示），Hidden （不显示），Collapsed（隐藏）。

这里选择Visible（显示）。

点击effect栏的按钮，弹出一个对话框，可为矩形添加效果，默认有BlueEffect （模糊效果）和DropShadedowEffect（投影效果），两种效果，选择BlueEffect，点击确定按钮。

点击画板上空白处，可以看到画板中的矩形周围出现模糊效果，点击画板中的矩形，点击属性板外观栏中effect前的小三角，展开属性。

KernelType（模糊形式）默认为Gaussian（高斯模糊），点击下拉菜单会出现Box（盒子形模糊），通常选择Gaussian过度比较自然。

将Radius（模糊的半径）的数值改成15，矩形的模糊程度将增大。

RenderingBias（模糊显示的精度）默认为Performance（性能，模糊的精度普通），点击下拉菜单会出现Quality（高质量，模糊的精度变高，耗资源），通常选择Performance。

点击effect新建按钮旁的白点，弹出一个对话框，点击重置，删除刚做的模糊效果。

再点击新建按钮，选择DropShadedowEffect（投影效果），点击确定。

画板上的矩形将出现投影，点击修改BlurRadius（模糊半径）的数值为8。

点击Color旁的黑色条，弹出对话框，将对话框里的十六进制色值修改为#FF2B2B2B，按回车，黑色条变为灰黑色，矩形投影也变为灰黑色，点击Color旁的色条，对话框消失。

Direction（投影的方向）按角度化分，默认为315，点击修改数值为270，投影的方向将变为向下垂直。

点击修改Opacity（投影的透明度）数值为70，矩形的投影深度降低，看起来自然些。

默认RenderingBias（模糊显示的精度）中的Performance（性能，模糊的精度普通）选择。

点击修改RadiuX（圆角半径X方向）数值为8，RadiuY（圆角半径Y方向）数值为8，矩形四角将出现等距的圆角，这里可以设置RadiuX和RadiuY不相同的数值，一般为了美观都设为相同数值。

点击修改StrokeThickness（描边大小）数值为2，此时矩形的描边将增厚。

（注意：当上面画笔栏里的Stroke（描边）选择了无画笔填充时，StrokeThickness（描边大小）的数值旧无效的。

）修改完后，整体属性如图1.11所示。

图 1.11 矩形外观属性第2章自定义窗体第3章自定义样式第4章弹出框第5章自定义控件。