1. 程式人生 > >[UWP]通過自定義XamlCompositionBrushBase實現圖片平鋪

[UWP]通過自定義XamlCompositionBrushBase實現圖片平鋪

1. 什麼是XamlCompositionBrushBase

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

CompositionBrush靈活多變,它的基本用法如下:

  1. 通過Compositor建立CompositionBrush;
  2. 配置CompositionBrush;
  3. 建立SpriteVisual並將它的Brush設定為CompositionBrush;
  4. 使用ElementCompositionPreview.SetElementChildVisual 將SpriteVisual設定到某個UIElement的視覺化層裡。

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

如上圖所示,Windows Community Toolkit中已經提了很不少XamlCompositionBrushBase的實現,它們的使用方式已經有很多文章介紹,這裡不一一列舉。

2. 自定義XamlCompositionBrushBase

這篇文章將介紹一個自定義的畫筆:TiledImageBrush,它的主要目標是實現ImageBrush沒有的圖片平鋪功能,並且它可以在XAML中使用,使用方式如下:

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

順便複習下普通的ImageBrush的用法:

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

看起來TiledImageBrush的用法是不是和ImageBrush很像?接下來講解TiledImageBrush的實現步驟。TiledImageBrush繼承自XamlCompositionBrushBase,而實現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,當畫筆在螢幕上首次用於繪製元素時會呼叫這個函式。在這個函式裡建立CompositionBrush並賦值給XamlCompositionBrushBase.CompositionBrush。

然後重寫OnDisconnected,它在畫筆不再用於繪製任何元素時被呼叫。在這個函式裡儘可能地釋放各種資源,例如CompositionBrush。這兩步就是實現XamlCompositionBrushBase的基本步驟。

建立CompositionBrush有很多種玩法,我之前寫過兩篇文章分別介紹 CompositionBrush入門及 在CompositionBrush上使用Effect。這裡使用使用Win2D的BorderEffect實現圖片的平鋪功能這篇文章裡介紹到的程式碼,首先使用LoadedImageSurface.StartLoadFromUri建立CompositionSurfaceBrush,然後加入到BorderEffect裡實現圖片平鋪,然後把產生的CompositionEffectBrush賦值給XamlCompositionBrushBase.CompositionBrush

TiledImageBrush中添加了Source屬性用於設定圖片Uri(實際上是個ImageSource型別),模仿ImageBrush,這裡的Source也是一個ImageSource型別的屬性,雖然實際上使用的是它的UriSource。詳細程式碼如下:

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的詳細程式碼如下:

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;
    }
}

這樣一個基本的XamlCompositionBrush就完成了,完整的程式碼可以在這裡檢視:

OnePomodoro_TiledImageBrush.cs at master

3. 參考

XamlCompositionBrushBase Class (Windows.UI.Xaml.Media) - Windows UWP applications _ Microsoft Docs

WindowsCommunityToolkit_Microsoft.Toolkit.Uwp.UI.Media_Brushes at master

UWP TiledBrush - CodeProject

Working with Brushes and Content – XAML and Visual Layer Interop, Part One - Windows Developer Blog