13.画刷(Brush)

13.画刷(Brush) (Brush) Brush 画刷 13

在进行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;
}

 

评论