Win10系列：UWP界面布局基础12

画刷

画刷（Brush）用于为图形元素填充颜色。在XAML中，画刷有许多属性，其中较常使用的是Fill属性和Stroke属性，Fill用于填充图形的背景色，而Stroke用于设置图形的线条颜色。

在实际应用中，可以采用不同的填充方式填充背景色或设置线条颜色，以达到不同的视觉效果。这里我们简单介绍一下纯色画刷（SolidColorBrush）和线性渐变画刷（LinearGradientBrush），有关画刷的详细内容和图形绘制在后面章节中会单独介绍。

（1）纯色画刷

纯色画刷（SolidColorBrush）是画刷中最基本的填充方式，用来给元素填充某种单一纯色。在XAML语法中，SolidColorBrush元素的定义格式如下所示：

<SolidColorBrush Color="ColorName"/>

-or-

<SolidColorBrush Color="#RGB"/>

-or-

<SolidColorBrush Color="#RRGGBB"/>

其中，ColorName指的是颜色名称；RGB表示长度为3个字符的十六进制值，第一个字符指定颜色的R值，第二个字符指定G值，第三个字符指定B值，如#00F；RRGGBB表示长度为6个字符的十六进制值，用前两个字符指定颜色的R值，中间两个字符指定G值，最后两个字符指定B值，如#0000FF。

例如，在向一个页面中添加一个矩形时，在Rectangle.Fill属性元素中定义SolidColorBrush元素并通过Color属性设置矩形的填充色为红色，相应的XAML代码片段如下所示：

<Rectangle>

<Rectangle.Fill>

<SolidColorBrush Color="Red"/>

</Rectangle.Fill>

</Rectangle>

-或-

<Rectangle>

<Rectangle.Fill>

<SolidColorBrush Color="#F00"/>

</Rectangle.Fill>

</Rectangle>

-或-

<Rectangle>

<Rectangle.Fill>

<SolidColorBrush Color="#FF0000"/>

</Rectangle.Fill>

</Rectangle>

（2）线性渐变画刷

线性渐变就是沿着一条直线定义不同颜色之间的渐变，该直线的起点和终点分别由画刷的StartPoint属性和EndPoint属性设置。之后，线性渐变画刷就沿着这条直线来对图形元素填充颜色，展现颜色渐变的效果。

在XAML语法中，LinearGradientBrush元素的定义格式如下所示：

<LinearGradientBrush StartPoint="X,Y" EndPoint="X,Y">

<!--define GradientStops-->

<GradientStop Color="ColorValue" Offset="OffsetValue"/>

……

</LinearGradientBrush>

其中，StartPoint属性用于设置渐变线的起始点坐标，EndPoint属性用于设置终点坐标；X是二维坐标轴中的横坐标值，Y是纵坐标值；GradientStop是渐变画刷的渐变点对象，Color属性用于设置渐变点的颜色，Offset属性用于设置渐变点的开始位置，是一个数值类型。

在默认情况下，线性渐变是沿主对角线方向进行的，起点是被绘制区域的左上角点，终点是被绘制区域的右下角点。

3.3.4 动画

快速而流畅的动画能够为应用程序注入活力，在Windows 8中可以发现，动画已与用户体验完美融合，成为用户体验中不可或缺的一部分。例如，对于开始屏中的项目，当把鼠标放到某个应用程序的图标上时，相应的图标会凸显；当鼠标离开时，应用程序的图标又会还原成原状。当启动开始屏中的某个项目时，也会产生翻转的动画效果。因此，合理的使用动画效果能够让用户更直观地了解某一特定操作的结果，这种视觉反馈将使用户对应用程序的响应程度充满信心。

在XAML中，StoryBoard（演示图板）是动画的核心内容，通过StoryBoard可以定义各种动画效果，如插值动画、关键帧动画等。使用StoryBoard定义动画的语法格式如下所示：

<Storyboard ...>

<AnimationTypeName Storyboard.TargetName="objectName" Storyboard.TargetProperty="PropertyName" ...>

</AnimationTypeName>

</Storyboard>

其中，AnimationTypeName表示动画类型，如插值动画中的DoubleAnimation和ColorAnimation，DoubleAnimation动画可以作用于界面元素的Double类型的属性，而ColorAnimation动画可以作用于元素的Color类型的属性。无论是定义哪种类型的动画，都需要通过Storyboard的TargetName属性指定要使用动画的元素，通过TargetProperty属性设置在元素的哪个属性上使用动画，除了这两个属性之外，针对不同类型的动画还需要设置其他的属性。

有关各种动画类型的详细内容，将在第10章具体介绍，在此就不多细讲了。