ImageBrush图像画刷 - WPF中文网

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

一、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继承而来。

下面的例子演示了ImageBrush 的用法。

前端代码

<Window x:Class="HelloWorld.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:HelloWorld" 
        xmlns:controls="clr-namespace:HelloWorld.Controls"
        xmlns:helper="clr-namespace:HelloWorld.MVVM"
        mc:Ignorable="d" 
        MouseWheel="Window_MouseWheel"
        Title="WPF中文网 - www.wpfsoft.com" Height="550" Width="500">    
    <Window.DataContext>
        <local:MainViewModel/>
    </Window.DataContext>
    <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>
</Window>

在上面的代码中，我们给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;
}

当前课程源码下载：（注明：本站所有源代码请按标题搜索）
文件名：097-《ImageBrush图像画刷》-源代码
链接：https://pan.baidu.com/s/1yu-q4tUtl0poLVgmcMfgBA
提取码：wpff

——重庆教主 2023年11月3日