1. 什麼是XamlCompositionBrushBase
我早就想試試自定義XamlCompositionBrushBase,但一直沒機會。上一篇文章介紹到,原理很簡單,但每次都要寫這些代碼很繁瑣,正好就用這個作為例子試試XamlCompositionBrushBase。
CompositionBrush靈活多變,它的基本用法如下:
- 通過Compositor創建CompositionBrush;
- 配置CompositionBrush;
- 創建SpriteVisual並將它的Brush設置為CompositionBrush;
- 使用 將SpriteVisual設置到某個UIElement的可視化層里。
這些步驟很繁瑣,而且不能用在XAML中。XamlCompositionBrushBase提供了將CompositionBrush用在XAML中一個橋樑,他繼承自Brush
類,可以直接像普通的XAML 畫筆(如SolidColorBrush)那樣直接用在XAML中。
如上圖所示,中已經提了很不少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;
}
}
首先重寫,當畫筆在屏幕上首次用於繪製元素時會調用這個函數。在這個函數里創建CompositionBrush並賦值給。
然後重寫,它在畫筆不再用於繪製任何元素時被調用。在這個函數里盡可能地釋放各種資源,例如CompositionBrush
。這兩步就是實現XamlCompositionBrushBase
的基本步驟。
創建CompositionBrush有很多種玩法,我之前寫過兩篇文章分別介紹 及 。這裏使用這篇文章里介紹到的代碼,首先使用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就完成了,完整的代碼可以在這裏查看:
3. 參考
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※網頁設計公司推薦更多不同的設計風格,搶佔消費者視覺第一線
※廣告預算用在刀口上,網站設計公司幫您達到更多曝光效益
※自行創業 缺乏曝光? 下一步"網站設計"幫您第一時間規劃公司的門面形象
※台灣寄大陸海運貨物規則及重量限制?
※大陸寄台灣海運費用試算一覽表