画刷

一、画刷是什么？

画刷 = 给 WPF 控件 “上色 / 填充” 的工具

 

所有能显示颜色、图片、渐变、纹理的地方，全靠画刷实现。

必须记住：

WPF 中这些属性 只能用 Brush：

• Background（背景）
• Foreground（文字颜色）
• BorderBrush（边框）
• Fill（形状填充）
• Stroke（形状轮廓）

二、WPF 5 种最常用画刷（全部掌握）

1. SolidColorBrush 纯色画刷（最常用）

2. LinearGradientBrush 线性渐变画刷

3. RadialGradientBrush 径向渐变画刷

4. ImageBrush 图片画刷

5. VisualBrush 视觉画刷

1. SolidColorBrush 纯色画刷

单一颜色填充

写法

<SolidColorBrush Color="Red"/>
<SolidColorBrush Color="#FF0077D4"/>

例子

<!-- 直接用颜色名，系统自动转 SolidColorBrush -->
<Button Background="Red" Content="纯色按钮"/>

<!-- 完整写法 -->
<Button Content="标准写法">
    <Button.Background>
        <SolidColorBrush Color="#0077D4"/>
    </Button.Background>
</Button>

资源中定义（全局使用）

<Window.Resources>
    <SolidColorBrush x:Key="ThemeBrush" Color="#0077D4"/>
</Window.Resources>

<Button Background="{StaticResource ThemeBrush}"/>

2. LinearGradientBrush 线性渐变画刷

颜色沿直线渐变

核心属性

• StartPoint 起点
• EndPoint 终点
• GradientStop 渐变颜色点

例子：从上到下蓝色渐变

<Button Content="渐变按钮" Height="50">
    <Button.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
            <GradientStop Color="#LightBlue" Offset="0"/>
            <GradientStop Color="#DarkBlue" Offset="1"/>
        </LinearGradientBrush>
    </Button.Background>
</Button>

例子：从左到右彩虹渐变

<Border Height="50">
    <Border.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
            <GradientStop Color="Red" Offset="0"/>
            <GradientStop Color="Orange" Offset="0.2"/>
            <GradientStop Color="Yellow" Offset="0.4"/>
            <GradientStop Color="Green" Offset="0.6"/>
            <GradientStop Color="Blue" Offset="0.8"/>
            <GradientStop Color="Purple" Offset="1"/>
        </LinearGradientBrush>
    </Border.Background>
</Border>

3. RadialGradientBrush 径向渐变画刷

从中心向外扩散渐变

例子：圆形发光按钮

<Button Width="100" Height="100" Content="圆形渐变">
    <Button.Background>
        <RadialGradientBrush GradientOrigin="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
            <GradientStop Color="White" Offset="0"/>
            <GradientStop Color="Blue" Offset="1"/>
        </RadialGradientBrush>
    </Button.Background>
</Button>

4. ImageBrush 图片画刷

用图片填充控件

例子：图片背景按钮

<Button Width="200" Height="100" Content="图片按钮">
    <Button.Background>
        <ImageBrush ImageSource="Images/background.png"/>
    </Button.Background>
</Button>

注意：图片属性 生成操作 要设为 Resource

5. VisualBrush 视觉画刷

把一个控件 / 界面当成画刷

例子：按钮显示文字图案

<Button Width="200" Height="100">
    <Button.Background>
        <VisualBrush>
            <VisualBrush.Visual>
                <TextBlock Text="视觉画刷" FontSize="20" Foreground="Red"/>
            </VisualBrush.Visual>
        </VisualBrush>
    </Button.Background>
</Button>

三、画刷综合实战：超美样式按钮（可直接用）

<Style TargetType="Button" x:Key="GradientButton">
    <Setter Property="FontSize" Value="18"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Padding" Value="20,8"/>
    
    <!-- 渐变画刷 -->
    <Setter Property="Background">
        <Value>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <GradientStop Color="#4FC3F7" Offset="0"/>
                <GradientStop Color="#0288D1" Offset="1"/>
            </LinearGradientBrush>
        </Value>
    </Setter>
    
    <!-- 鼠标悬浮渐变加深 -->
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background">
                <Value>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Color="#81D4FA" Offset="0"/>
                        <GradientStop Color="#01579B" Offset="1"/>
                    </LinearGradientBrush>
                </Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

使用：

<Button Style="{StaticResource GradientButton}" Content="渐变按钮"/>

四、超级总结（必背）

1. 画刷 = 填充控件颜色 / 图片的工具
2. SolidColorBrush → 纯色（最常用）
3. LinearGradientBrush → 线性渐变
4. RadialGradientBrush → 径向渐变
5. ImageBrush → 图片填充
6. VisualBrush → 控件填充