13.画刷（Brush）-.NET技术 - 天枫信息技术

来源：时间：2024/5/27 11:41:40 点击：3

在进行WPF界面设计时，我们需要在很多地方设置颜色属性，比如元素的背景色、前景色以及边框的颜色，还有形状的内部填充和笔画，这些颜色的设置在WPF中都以画刷（Brush）的形式实现。比如最常用的画刷就是SolidColorBrush，它表示一种纯色。

public abstract class Brush : Animatable, IFormattable, IResource
{
    public static readonly DependencyProperty OpacityProperty;
    public static readonly DependencyProperty TransformProperty;
    public static readonly DependencyProperty RelativeTransformProperty;
 
    protected Brush();
 
    public double Opacity { get; set; }
    public Transform Transform { get; set; }
    public Transform RelativeTransform { get; set; }
 
    public Brush Clone();
    public Brush CloneCurrentValue();
    public override string ToString();
    public string ToString(IFormatProvider provider);
 
}

Brush继承于Animatable基类和Freezable基类，说明它支持更改通知。如果改变了画刷，任何使用该画刷的控件的颜色都会自动重绘。

Opacity 属性表示它支持部分透明。

Brush一共有7个子类，下表中列出了它们的信息。

画刷名称功能说明 SolidColorBrush 使用单一的连续颜色填充区域 LinearGradientBrush 使用线性渐变绘制区域。 RadialGradientBrush 使用径向渐变绘制区域。焦点定义渐变的开始，而圆定义渐变的终点。 ImageBrush 使用图像绘制区域。 VisualBrush 使用一个视图绘制区域。 BitmapCacheBrush 绘制带有缓存的内容的区域。 DrawingBrush 使用包括形状、文本、视频、图像或其他绘制项等填充区域。

Brush基类和子类的继承关系

SolidColorBrush纯色画刷

SolidColorBrush继承于Brush抽象类，表示用某一种颜色填充区域。从定义上看，它拥有一个Color属性，表示具体的颜色值。

public sealed class SolidColorBrush : Brush
{
    public static readonly DependencyProperty ColorProperty;
 
    public SolidColorBrush();
    public SolidColorBrush(Color color);
 
    public Color Color { get; set; }
 
    public static object DeserializeFrom(BinaryReader reader);
    public SolidColorBrush Clone();
    public SolidColorBrush CloneCurrentValue();
}

Color 在WPF中代表颜色值，被设计成一个结构体，主要是4个属性，即A、R、G、B，分别表示Alpha透明通道值，红色通道值、绿色通道值和蓝色通道值。它们的取值范围都是0-255

案列：

设置Grid的背景颜色

<Grid>
    <Grid.Background>
        <SolidColorBrush>
            <SolidColorBrush.Color>
                <Color A="255" R="255" G="0" B="0"/>
            </SolidColorBrush.Color>
        </SolidColorBrush>
    </Grid.Background>
</Grid>

C#代码的方式去设置背景颜色

SolidColorBrush solidColorBrush = new SolidColorBrush();
//使用系统自定义的颜色
solidColorBrush.Color = Colors.Green;
//或者从Color的FromRgb成员中得到颜色
solidColorBrush.Color = Color.FromRgb(0, 0x80, 0);
grid.Background = solidColorBrush;

实例化成一个资源：

<Window.Resources>
    <SolidColorBrush x:Key="BackgroundBrush" Color="#123456"/>
</Window.Resources>
<Grid x:Name="grid" Background="{StaticResource BackgroundBrush}"/>

LinearGradientBrush渐变画刷

LinearGradientBrush是一个比较有意思的画刷，它可以从一种颜色过渡到另一种颜色，使被填充的区域呈现渐变效果

public sealed class LinearGradientBrush : GradientBrush
{
    public static readonly DependencyProperty StartPointProperty;
    public static readonly DependencyProperty EndPointProperty;
 
    public LinearGradientBrush();
    public LinearGradientBrush(GradientStopCollection gradientStopCollection);
    public LinearGradientBrush(GradientStopCollection gradientStopCollection, double angle);
    public LinearGradientBrush(Color startColor, Color endColor, double angle);
    public LinearGradientBrush(GradientStopCollection gradientStopCollection, Point startPoint, Point endPoint);
    public LinearGradientBrush(Color startColor, Color endColor, Point startPoint, Point endPoint);
 
    public Point StartPoint { get; set; }
    public Point EndPoint { get; set; }
 
    public LinearGradientBrush Clone();
    public LinearGradientBrush CloneCurrentValue();
}

从定义上看，它有StartPoint 和EndPoint 两个点，表示获取和设置线性渐变的二维起始坐标和结束坐标。而它因为继承于GradientBrush基类，所以它的颜色都保存在GradientStops集合属性中。GradientStops集合中的元素类型必须为GradientStop，表示渐变中转换点的位置和颜色。所以，GradientStop拥有Color属性和Offset属性，分别表示颜色值和偏移值。

案例：

一个Grid，希望从左上角设置一个绿色，右下角设置一个蓝色，中间是两种颜色的渐变效果

<Grid>
    <Grid.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Green" Offset="0"/>
            <GradientStop Color="Blue" Offset="1"/>
        </LinearGradientBrush>
    </Grid.Background>        
</Grid>

LinearGradientBrush将整个Grid看成是一个0-1的矩形，所以StartPoint=（0，0）表示左上角，EndPoint=（1，1）表示右下角，这就控制了渐变的方向是从左上角到右下角的斜线。GradientStop 对象中的Offset表示在渐变方向上各颜色的占比或起点。假如我们将第一个GradientStop对象的Offset设置为0.5，那么此时的代码和效果如下所示：

<Grid>
    <Grid.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Green" Offset="0.5"/>
            <GradientStop Color="Blue" Offset="1"/>
        </LinearGradientBrush>
    </Grid.Background>        
</Grid>

RadialGradientBrush径向渐变

RadialGradientBrush径向渐变像一个圆一样，从焦点中心位置开始向四周渐变，LinearGradientBrush线性渐变具有用于定义渐变矢量的起点和终点，而径向渐变具有一个圆和一个焦点，用于定义渐变行为。圆定义渐变的终点。换句话说，渐变停止点为 1.0 定义圆周的颜色。焦点定义渐变的中心。渐变停止点为 0.0 定义焦点处的颜色。

public sealed class RadialGradientBrush : GradientBrush
{
    public static readonly DependencyProperty CenterProperty;
    public static readonly DependencyProperty RadiusXProperty;
    public static readonly DependencyProperty RadiusYProperty;
    public static readonly DependencyProperty GradientOriginProperty;
 
    public RadialGradientBrush();
    public RadialGradientBrush(GradientStopCollection gradientStopCollection);
    public RadialGradientBrush(Color startColor, Color endColor);
 
    public Point Center { get; set; }
    public double RadiusX { get; set; }
    public double RadiusY { get; set; }
    public Point GradientOrigin { get; set; }
 
    public RadialGradientBrush Clone();
    public RadialGradientBrush CloneCurrentValue();
}

Center属性：获取或设置径向渐变的最外面圆的中心。

RadiusX属性：获取或设置径向渐变的最外面圆的水平半径。默认值为 0.5。

RadiusY属性：获取或设置径向渐变的最外面圆的垂直半径。默认值为 0.5。

GradientOrigin属性：获取或设置用于定义渐变开始的二维焦点的位置。默认值为 0.5。

以Ellipse控件为例，演示一下RadialGradientBrush 的用法：

<Grid x:Name="grid">
    <Ellipse Width="200" Height="200">
        <Ellipse.Fill>
            <RadialGradientBrush GradientOrigin="0.5,0.5" 
                                 RadiusX="0.75" 
                                 RadiusY="0.75">
                <RadialGradientBrush.GradientStops>
                    <GradientStop Color="White" Offset="0" />
                    <GradientStop Color="Black" Offset="0.65" />
                    <GradientStop Color="Gray" Offset="0.8" />
                </RadialGradientBrush.GradientStops>
            </RadialGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
</Grid>

在上面的代码中，处于圆中心的白色渐变点由GradientOrigin属性控制，如果将值改成：GradientOrigin="0.25,0.25"，那么它会呈现下面的样子。

根据这个特性，我们可以实现一个有趣的示例。那就是当鼠标移动到椭圆内，这个径向渐变的起点坐标跟随鼠标位置变化而变化。

 <Grid x:Name="grid">
        <Ellipse x:Name="ellipse" 
                 Width="200" 
                 Height="200" 
                 MouseMove="ellipse_MouseMove">
            <Ellipse.Fill>
                <RadialGradientBrush GradientOrigin="0.25,0.25" 
                                     RadiusX="0.75" 
                                     RadiusY="0.75">
                    <RadialGradientBrush.GradientStops>
                        <GradientStop Color="White" Offset="0" />
                        <GradientStop Color="Goldenrod" Offset="0.65" />
                        <GradientStop Color="Gray" Offset="0.8" />
                    </RadialGradientBrush.GradientStops>
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>            
    </Grid>

private void ellipse_MouseMove(object sender, MouseEventArgs e)
{
    Ellipse ellipse = e.Source as Ellipse;
    Point point = e.GetPosition(ellipse);
    double width = ellipse.Width;
    double height = ellipse.Height;
    RadialGradientBrush brush = ellipse.Fill as RadialGradientBrush;
    double x = point.X / width;
    double y = point.Y / height;
    brush.GradientOrigin = new Point(x, y);
}

ImageBrush图像画刷

ImageBrush表示使用图像绘制区域。它继承于TileBrush抽象基类，另外，DrawingBrush和VisualBrush也继承于TileBrush抽象基类。

TileBrush 有三种不同类型，其中每一种都使用不同类型的内容进行绘制。下面列出它3个子类的情况。

若使用ImageBrush子类，则画刷的填充内容是图像；
若使用DrawingBrush子类，则画刷的填充内容是绘图；
若使用VisualBrush子类，则画刷的填充内容是视觉对象（视觉树或控件）；

public abstract class TileBrush : Brush
{
    public static readonly DependencyProperty ViewportUnitsProperty;
    public static readonly DependencyProperty ViewboxUnitsProperty;
    public static readonly DependencyProperty ViewportProperty;
    public static readonly DependencyProperty ViewboxProperty;
    public static readonly DependencyProperty StretchProperty;
    public static readonly DependencyProperty TileModeProperty;
    public static readonly DependencyProperty AlignmentXProperty;
    public static readonly DependencyProperty AlignmentYProperty;
 
    protected TileBrush();
 
    public TileMode TileMode { get; set; }
    public Stretch Stretch { get; set; }
    public Rect Viewbox { get; set; }
    public Rect Viewport { get; set; }
    public AlignmentY AlignmentY { get; set; }
    public BrushMappingMode ViewportUnits { get; set; }
    public AlignmentX AlignmentX { get; set; }
    public BrushMappingMode ViewboxUnits { get; set; }
 
    public TileBrush Clone();
    public TileBrush CloneCurrentValue();
    protected abstract void GetContentBounds(out Rect contentBounds);
}

TileMode 属性：获取或设置基本图块如何填充区域。枚举型，它一共有5个值，Tile表示在可用区域复制图像；FlipX表示复制图像但垂直翻转每个第二列；FlipY表示复制图像但水平翻转每个第二行；FlipXY表示复制图像，但是垂直翻转每个第二列，半水平翻转每个第二行。
Stretch 属性：获取或设置内容如何拉伸。
Viewbox 属性：获取或设置图块中内容的位置和尺寸。
Viewport 属性：获取或设置基本图块的位置和尺寸。它的类型是Rect，也就是用它来指定截取原图片的某个区域进行填充，这个区域的设置可以用绝对值和相对值两种方式设置，对应属性是ViewboxUnits，它有两个值，Absolute表示取绝对坐标，RelativeToBoundingBox表示取相对坐标。
AlignmentY属性：获取或设置基本图块的垂直对齐方式。
AlignmentX属性：获取或设置基本图块的垂直水平方式。
ViewboxUnits属性：获取或设置Viewbox的值是相对内容的边界框而言，还是绝对值。
ViewportUnits属性：获取或设置Viewport的值是否是相对于输出区域的大小。

ImageBrush的定义：

public sealed class ImageBrush : TileBrush
{
    public static readonly DependencyProperty ImageSourceProperty;
 
    public ImageBrush();
    public ImageBrush(ImageSource image);
 
    public ImageSource ImageSource { get; set; }
 
    public ImageBrush Clone();
    public ImageBrush CloneCurrentValue();
    protected override Freezable CreateInstanceCore();
    protected override void GetContentBounds(out Rect contentBounds);
}

ImageBrush 画刷只需要设置它的ImageSource 属性，其它的属性都是从它的基类TileBrush继承而来

案例：

 <Grid x:Name="grid">
        <Grid.Background>
            <ImageBrush ImageSource="/Images/lyf.png" 
                    Stretch="UniformToFill"                     
                    TileMode="Tile">
                <ImageBrush.Viewport>
                    <Rect X="0" Y="0" Width="1" Height="1"/>
                </ImageBrush.Viewport>
            </ImageBrush>
        </Grid.Background>
    </Grid>

在上面的代码中，我们给Grid控件设置了一个ImageBrush 图像画刷，并设置Stretch为UniformToFill，即自适应填充，同时设置了Viewport。那么它运行之后呈现的效果如下：

此时的Grid的背景其实就是一张图片。我们给Window对象的MouseWheel事件订阅了一个回调函数，并在其实改变了Viewport的宽度和高度。滚动鼠标的滚轮，此时Grid的背景图像的填充将会呈现如下的样子：

private void Window_MouseWheel(object sender, MouseWheelEventArgs e)
{
    double offset = e.Delta / 3600.0;
    ImageBrush imageBrush = grid.Background as ImageBrush;
    Rect rect = imageBrush.Viewport;
    if (rect.Width + offset <= 0 && rect.Height + offset <= 0)
        return;
 
    rect.Width += offset;
    rect.Height += offset;
    imageBrush.Viewport = rect;
}

13.画刷（Brush）

阅读排行

最新资讯