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

时间:2021-04-16 05:19:30

画刷

画刷(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章具体介绍,在此就不多细讲了。