如何自定義XamlCompositionBrushBase實(shí)現(xiàn)圖片平鋪

這篇文章運(yùn)用簡單易懂的例子給大家介紹自定義XamlCompositionBrushBase實(shí)現(xiàn)圖片平鋪的方法，文章內(nèi)容步步緊湊，希望大家根據(jù)這篇文章可以有所收獲。

1. 背景

我早就想試試自定義XamlCompositionBrushBase，但一直沒機(jī)會。上一篇文章介紹到使用Win2D的BorderEffect實(shí)現(xiàn)圖片的平鋪功能，原理很簡單，但每次都要寫這些代碼很繁瑣，正好就用這個作為例子試試XamlCompositionBrushBase。

CompositionBrush靈活多變，它的基本用法如下：

1. 通過Compositor創(chuàng)建CompositionBrush；
2. 配置CompositionBrush；
3. 創(chuàng)建SpriteVisual并將它的Brush設(shè)置為CompositionBrush；
4. 使用ElementCompositionPreview.SetElementChildVisual 將SpriteVisual設(shè)置到某個UIElement的可視化層里。

這些步驟很繁瑣，而且不能用在XAML中。XamlCompositionBrushBase提供了將CompositionBrush用在XAML中一個橋梁，他繼承自Brush類，可以直接像普通的XAML 畫筆（如SolidColorBrush）那樣直接用在XAML中。

Windows Community Toolkit中已經(jīng)提了很不少XamlCompositionBrushBase的實(shí)現(xiàn)，它們的使用方式已經(jīng)有很多文章介紹，這里不一一列舉。

2. 自定義XamlCompositionBrushBase

這篇文章將介紹一個自定義的畫筆：TiledImageBrush，它的主要目標(biāo)是實(shí)現(xiàn)ImageBrush沒有的圖片平鋪功能，并且它可以在XAML中使用，使用方式如下：

<Rectangle IsHitTestVisible="False">
    <Rectangle.Fill>
        <controls:TiledImageBrush Source="ms-appx:///Assets/flutter.png"/>
    </Rectangle.Fill>
</Rectangle>

順便復(fù)習(xí)下普通的ImageBrush的用法：

<Rectangle >
    <Rectangle.Fill>
        <ImageBrush ImageSource="ms-appx:///Assets/flutter.png"/>
    </Rectangle.Fill>
</Rectangle>

看起來TiledImageBrush的用法是不是和ImageBrush很像？接下來講解TiledImageBrush的實(shí)現(xiàn)步驟。TiledImageBrush繼承自XamlCompositionBrushBase，而實(shí)現(xiàn)XamlCompositionBrushBase的一般步驟如下：

protected override void OnConnected()
{
    // Delay creating composition resources until they're required.
    if (CompositionBrush == null)
    {
         CompositionBrush = CreateCompositionBrush();//Create A CompositionBrush.
    }
}

protected override void OnDisconnected()
{
    // Dispose of composition resources when no longer in use.
    if (CompositionBrush != null)
    {
        CompositionBrush.Dispose();
        CompositionBrush = null;
    }
}

首先重寫OnConnected，當(dāng)畫筆在屏幕上首次用于繪制元素時(shí)會調(diào)用這個函數(shù)。在這個函數(shù)里創(chuàng)建CompositionBrush并賦值給XamlCompositionBrushBase.CompositionBrush。

然后重寫OnDisconnected，它在畫筆不再用于繪制任何元素時(shí)被調(diào)用。在這個函數(shù)里盡可能地釋放各種資源，例如CompositionBrush。這兩步就是實(shí)現(xiàn)XamlCompositionBrushBase的基本步驟。

創(chuàng)建CompositionBrush有很多種玩法，我之前寫過兩篇文章分別介紹 CompositionBrush入門及 在CompositionBrush上使用Effect。這里使用使用Win2D的BorderEffect實(shí)現(xiàn)圖片的平鋪功能這篇文章里介紹到的代碼，首先使用LoadedImageSurface.StartLoadFromUri創(chuàng)建CompositionSurfaceBrush，然后加入到BorderEffect里實(shí)現(xiàn)圖片平鋪，然后把產(chǎn)生的CompositionEffectBrush賦值給XamlCompositionBrushBase.CompositionBrush。

TiledImageBrush中添加了Source屬性用于設(shè)置圖片Uri（實(shí)際上是個ImageSource類型），模仿ImageBrush，這里的Source也是一個ImageSource類型的屬性，雖然實(shí)際上使用的是它的UriSource。詳細(xì)代碼如下：

public ImageSource Source
{
    get => (ImageSource)GetValue(SourceProperty);
    set => SetValue(SourceProperty, value);
}

private void UpdateSurface()
{
    if (Source != null && _surfaceBrush != null)
    {
        var uri = (Source as BitmapImage)?.UriSource ?? new Uri("ms-appx:///");
        _surface = LoadedImageSurface.StartLoadFromUri(uri);
        _surfaceBrush.Surface = _surface;
    }
}

OnConnected的詳細(xì)代碼如下：

protected override void OnConnected()
{
    base.OnConnected();

    if (CompositionBrush == null)
    {
        _surfaceBrush = Compositor.CreateSurfaceBrush();
        _surfaceBrush.Stretch = CompositionStretch.None;

        UpdateSurface();

        _borderEffect = new BorderEffect()
        {
            Source = new CompositionEffectSourceParameter("source"),
            ExtendX = Microsoft.Graphics.Canvas.CanvasEdgeBehavior.Wrap,
            ExtendY = Microsoft.Graphics.Canvas.CanvasEdgeBehavior.Wrap
        };

        _borderEffectFactory = Compositor.CreateEffectFactory(_borderEffect);
        _borderEffectBrush = _borderEffectFactory.CreateBrush();
        _borderEffectBrush.SetSourceParameter("source", _surfaceBrush);
        CompositionBrush = _borderEffectBrush;
    }
}

上文描述的就是自定義XamlCompositionBrushBase實(shí)現(xiàn)圖片平鋪的方法，具體使用情況還需要大家自己動手實(shí)驗(yàn)使用過才能領(lǐng)會。如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道！