WPF图形之纯色画刷和渐变画刷的使用

背景介绍
  在WPF中，画刷的使用无处不在，可以说画刷是整个WPF体系里不可或缺的一部分，在画刷中，从渲染效果的特征来看，可以分为纯色画刷、线性渐变画刷、径向渐变画刷。每一种画刷都有其适用的场景，下面将介绍几种画刷在一般场景中的使用。

纯色画刷
  纯色画刷，即SolidColorBrush。在颜色的渲染过程中，当指定的区域的颜色是固定的，没有其它杂色，这时就需要用到纯色画刷。纯色画刷在XAML中和代码中绘制如下：

在XAML中使用SolidColorBrush
1、系统预定义颜色使用
  通过给控件里Brush类定义的属性指定值（如：给Background指定AliceBlue)，就可以实现颜色纯色画刷的效果。具体的系统预定义颜色值，可以在Brushes和Colors类里进行查看。

<Button Background="AliceBlue">A Button</Button>

<Button>B Button
    <Button.Background>
        <SolidColorBrush Color="AliceBlue" />
    </Button.Background>
</Button>

2、自定义颜色的使用
  WPF中，通过透明度、红色、绿色、蓝色从32位调色板中选择一种颜色，从32位调色板中选择颜色的格式为"#aarrggbb"，其中aa表示指定颜色的透明度用两位十六进制数表示，rr表示红色分量、gg表示绿色分量、bb标识蓝色分量，四个分量中，aa分量不是必须的，不指定的情况下系统默认该分量为FF。

<Button Background="#FFFF0000">A Button</Button>

<Button>B Button
    <Button.Background>
        <SolidColorBrush Color="#FFFF0000" />
    </Button.Background>
</Button>

在代码中使用SolidColorBrush
1、系统预定义颜色使用

Button btn1 = new Button();
btn1.Content = "A Button";
btn1.Background = Brushes.AliceBlue;

Button btn2 = new Button();
btn2.Content = "B Button";
var scb = new SolidColorBrush();
scb.Color = Colors.AliceBlue;
btn2.Background = scb;

2、自定义颜色的使用
  在WPF的后台代码中，从32位调色板选择颜色，比较常用的方式是通过Color.FromArgb或Color.FromRgb进行指定，方法中参数a、r、g、b的值范围为0到255，如下示例代码指定按钮为红色：

Button btn = new Button();
btn.Content = "A Button";
var scb = new SolidColorBrush();
scb.Color = Color.FromArgb(255, 255, 0, 0);
btn.Background = scb;

线性渐变画刷
  线性渐变画刷也即LinearGradientBrush，通过起始位置（StartPoint）以及结束位置（EndPoint）指定渐变轴，由GradientStop指定颜色以及在渐变轴上的位置，从而实现沿着渐变轴方向颜色的线性变化效果。
下面示例显示了三种颜色创建的线性渐变代码
XAML:

<Rectangle Height="200">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5, 1">
            <GradientStop Color="Red" Offset="0.0"/>
            <GradientStop Color="Blue" Offset="0.5"/>
            <GradientStop Color="Green" Offset="1"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

C#:

Rectangle rectangle = new Rectangle();
rectangle.Height = 200;
LinearGradientBrush linearBrush = new LinearGradientBrush();
linearBrush.StartPoint = new Point(0.5, 0);
linearBrush.EndPoint = new Point(0.5, 1);
linearBrush.GradientStops.Add(new GradientStop(Colors.Red, 0.0));
linearBrush.GradientStops.Add(new GradientStop(Colors.Blue, 0.5));
linearBrush.GradientStops.Add(new GradientStop(Colors.Green, 1.0));
rectangle.Fill = linearBrush;

  从以上示例代码可以看到LinearGradientBrush的StartPoint和EndPoint属性需要赋值Point类对象，对于Point的x、y坐标，应填0.0到1.0之间的Double值，x、y为0，对应的位置为待渲染颜色区域的左上角，x、y为1，对应的位置为待渲染颜色区域的右下角，通过StartPoint和EndPoint，可以确定渐变轴在待渲染区域的渐变方向。  对于GradientStop，其属性值Color指定32位调色板中任意颜色，其属性Offset指定其沿渐变轴方向从StartPoint到EndPoint的偏移比例，值范围为0.0到1.0的Double类型值，越接近0.0，意味着GradientStop指定的颜色越靠近StartPoint，越接近1.0，则意味着指定的颜色越靠近EndPoint。

径向渐变
  与LinearGradientBrush一样，RadialGradientBrush颜色渐变渲染本质也是沿着渐变轴进行渐变的渲染，与LinearGradientBrush不同地方在于，RadialGradientBrush的渐变轴不是一条，而是无数条，其渐变轴沿着原点向外发散。
如下示例代码显示了三种颜色径向渐变的效果
XAML：

<Rectangle Height="200" Width="200">
    <Rectangle.Fill>
        <RadialGradientBrush Center="0.5, 0.5" GradientOrigin="0.75, 0.25"
                                RadiusX="0.5" RadiusY="0.5">
            <GradientStop Color="Red" Offset="0.0"/>
            <GradientStop Color="Blue" Offset="0.5"/>
            <GradientStop Color="Green" Offset="1.0"/>
        </RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

C#：

Rectangle rectangle = new Rectangle();
rectangle.Height = 200;
rectangle.Width = 200;
RadialGradientBrush radialBrush = new RadialGradientBrush();
radialBrush.Center = new Point(0.5, 0.5);
radialBrush.RadiusX = 0.5;
radialBrush.RadiusY = 0.5;
radialBrush.GradientOrigin = new Point(0.75, 0.25);
radialBrush.GradientStops.Add(new GradientStop(Colors.Red, 0.0));
radialBrush.GradientStops.Add(new GradientStop(Colors.Blue, 0.5));
radialBrush.GradientStops.Add(new GradientStop(Colors.Green, 1.0));
rectangle.Fill = radialBrush;

  在使用径向渐变画刷的过程中，其Center属性指定颜色渲染的中心点，RadiusX和RadiusY指定相对于中心点沿x轴和y轴的半径，以确定渲染圆的范围。GradientOrigin确定渐变轴的起始位置，也即是确定上文提到的原点。这几个属性的值比较常用的都是设置在0.0到1.0范围之间。

  以上就是WPF中颜色画刷的使用，每种画刷有自己的适用范围，某个待渲染区域是单一颜色，我们就选择SolidColorBrush。某个待渲染区域是沿着一个方向颜色渐变的，就选择LinearGradientBrush。对某个区域是沿着某个点发散渐变渲染的，例如使控件具有三维外观，那这种时候加入RadialGradientBrush元素将会达到不一样的效果。