1. 什么是XamlCompositionBrushBase
我早就想試試自定義XamlCompositionBrushBase，但一直沒機會，上一篇文章介紹到使用Win2D的BorderEffect實作圖片的平鋪功能，原理很簡單，但每次都要寫這些代碼很繁瑣，正好就用這個作為例子試試XamlCompositionBrushBase，
CompositionBrush靈活多變，它的基本用法如下：
- 通過Compositor創建CompositionBrush；
- 配置CompositionBrush；
- 創建SpriteVisual并將它的Brush設定為CompositionBrush；
- 使用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
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/1703.html
標籤：UWP