5. 画笔

本节演示了如何使用XAML的画笔绘制背景和前景。本节将学习如何使用纯色和线性渐变的笔刷，使用笔刷绘制图像，使用新的AcrylicBrush和RevealBrush。

1. SolidColorBrush

下图中的按钮使用了SolidColorBrush，顾名思义，这只画笔使用纯色。全部区域用同一种颜色绘制。

把Backgroud特性设置为定义纯色的字符串，就可以定义纯色。使用BrushValueSerializer把该字符串转换为一个SolidColorBrush元素。

        <Button Content="Solid Color" Background="#FFC9659C"/>

当然，通过设置Background子元素并把SolidColorBrush元素添加为它的内容，也可以得到同样的效果。示例按钮使用十六进制值用作纯背景色：

            <Button Content="Solkid Color 2">
                <Button.Background>
                    <SolidColorBrush Color="#FFC9659C"/>
                </Button.Background>
            </Button>

2. LinearGradientBrush

对于平滑的颜色变换，可以使用LinearGradientBrush，如下图所示。这个画笔定义了StartPoint和EndPoint属性。使用这些属性可以为线性渐变指定2D坐标。默认的渐变方向是从(0,0)到(1,1)的对角线。定义其他值可以给渐变指定不同的方向。例如，StartPoint指定为(0,0)，EndPoint指定为(0,1)，就得到了一个垂直渐变。StartPoint或EndPoint值指定为(1,0)，就得到一个水平渐变。

通过该画笔的内容，可以用GradientStop元素定义指定偏移位置的颜色值。在各个偏移位置之间，颜色是平滑过渡的。

            <Button Content="Linear Gradient Brush">
                <Button.Background>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Offset="0" Color="LightBlue"/>
                        <GradientStop Offset="0.4" Color="Pink"/>
                        <GradientStop Offset="1" Color="Yellow"/>
                    </LinearGradientBrush>
                </Button.Background>
            </Button>

3. ImageBrush

要把图像加载到画笔中，可以使用ImageBrush元素。通过这个元素，显示ImageSource属性定义的图像。图像可以在文件系统中访问，或从程序集的资源中访问。在代码示例中，添加文件系统中的图像：

            <Button Content="Image Brush" FontWeight="ExtraBold" FontSize="28" 
                    RenderTransformOrigin="0.5,0.5">
                <Button.Background>
                    <ImageBrush ImageSource="msbuild.png" Opacity="0.5"/>
                </Button.Background>
            </Button>

运行应用程序时，尅看到如下图所示的按钮。

5. AcrylicBrush

Windows 10构建版本16299的一个新画笔是AcrylicBrush。这种画笔是新Fluent Desing的一部分。AcrylicBrush提供了透明效果，让应用或主机的其他元素通过该画笔显示出来。

发布为Windows 10一部分的一个应用程序是Calculator。这个计算器有一些透明度，可以让其他应用程序或壁纸图像在应用程序中显示出来(参见下图)。这种效果并不适用于计算器中额主数字按钮，但是计算器的其他元素可以让背景光线透出来。

示例中，给按钮的Background属性分配了AcrylicBrush。TintOpacity的值取自Slider的值。这样，移动应用程序中的Slider时，就可以根据不透明度来查看画笔的不同效果。TintColor属性指定笔刷的主色。

使用BackgroundSource属性，可以在HostBackdrop或Backdrop之间进行选择。使用Backdrop时，应用程序本身的颜色就会透出来。这就是所谓的in-app acrylic。控件中使用该画笔覆盖的元素会显示出来。而使用HostBackdrop时，会选取应用程序下面的颜色，这就是background acrylic。由于acrylic的UI效果需要GPU的功能，因此这一功能会额外消耗电池电量。当系统的电量较低时，AcrylicBrush使用由FallbackColor属性定义的纯色。还可以配置属性AlwaysUseFallback以始终使用FallbackColor。用户配置可以触发此设置，以提高电池使用时间：

            <Slider x:Name="slider" Minimum="0" Maximum="1" StepFrequency="0.1"/>
            <Button Content="Acrylic Brush Host Backdrop" HorizontalAlignment="Center"
                    Margin="-200,0,0,0">
                <Button.Background>
                    <AcrylicBrush BackgroundSource="HostBackdrop" TintColor="#FFFF0000"
                                  TintOpacity="{x:Bind slider.Value,Mode=OneWay}"
                                  FallbackColor="SkyBlue"/>
                </Button.Background>
            </Button>
        <Rectangle Height="100" Width="300" Fill="DarkBlue" Grid.Row="1"/>
        <Button Content="Acrylic Brush Backdrop" Grid.Row="1" HorizontalAlignment="Center"
                Margin="-200,0,0,0">
            <Button.Background>
                <AcrylicBrush BackgroundSource="Backdrop" TintColor="#FFFF0000"
                              TintOpacity="{x:Bind slider.Value,Mode=OneWay}"
                              FallbackColor="SkyBlue"/>
            </Button.Background>
        </Button>

下图显示了当前的TintOpacity设置为0.2的AcrylicBrush。顶部的按钮用HostBackdrop配置。这里可以看到应用程序下面的背景透出来。底部的按钮用Backdrop配置。这里可以看到按钮下面的蓝色矩形透出来。

注意：

何时使用acrylic画笔？acrylic给应用程序增加了纹理和深度。应用程序内的导航和命令在acrylic背景下看起来令人印象深刻。然而，应用程序的主要内容应该使用纯粹的背景。

5. RevealBrush

Windows 10 构建版 16299 的另一个新画笔是RevealBrush。这个画笔突出显示用户使用灯光效果移动鼠标的区域。使用此画笔样式化按钮的一种简单方法是使用ButtonRevealStyle，如下面的代码片段所示：

        <Button Content="Button with Reveal Brush" Style="{ThemeResource ButtonRevealStyle}"
                Padding="12" Margin="12"/>

使用ButtonRevealStyle时，需要仔细观察应用程序在运行时的效果。下面的按钮定义了一个较厚的边框，该边框使用主题资源SystemControlHighlightAccentRevealBorderBrush中定义的BorderBrush，以帮助更清楚地看到效果。在按钮周围移动鼠标时，按钮的边框会突出显示出来。

        <Button Margin="4" BorderThickness="8" BorderBrush="{ThemeResource SystemControlHighlightAccentRevealBorderBrush}"
                Background="{ThemeResource SystemControlHighlightAccentRevealBackgroundBrush}"
                Content="With Reveal Border"/>