如何自定义XamlCompositionBrushBase实现图片平铺-创新互联

这篇文章运用简单易懂的例子给大家介绍自定义XamlCompositionBrushBase实现图片平铺的方法,文章内容步步紧凑,希望大家根据这篇文章可以有所收获。

创新互联秉承实现全网价值营销的理念,以专业定制企业官网,做网站、成都网站设计,微信小程序定制开发,网页设计制作,成都手机网站制作全网营销推广帮助传统企业实现“互联网+”转型升级专业定制企业官网,公司注重人才、技术和管理,汇聚了一批优秀的互联网技术人才,对客户都以感恩的心态奉献自己的专业和所长。

1. 背景

我早就想试试自定义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中使用,使用方式如下:


   
     
   

顺便复习下普通的ImageBrush的用法:


   
     
   

看起来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;
   }
}

上文描述的就是自定义XamlCompositionBrushBase实现图片平铺的方法,具体使用情况还需要大家自己动手实验使用过才能领会。如果想了解更多相关内容,欢迎关注创新互联行业资讯频道!

另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页标题:如何自定义XamlCompositionBrushBase实现图片平铺-创新互联
转载源于:http://bzwzjz.com/article/gohdd.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 营销型网站建设 专业网站设计 高端网站建设 定制网站设计 高端网站设计 泸州网站建设 成都网站建设 定制网站建设多少钱 成都网站设计 重庆手机网站建设 成都网站设计 营销型网站建设 成都网站设计 成都网站设计 成都企业网站建设公司 网站制作公司 企业网站制作 网站设计 成都网站设计公司 定制网站制作 成都网站建设 成都网站设计