专栏首页dino.c的专栏[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 )

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [Silverlight]用ListBox实现SlideShow

    用Silverlight2整整一年了,上个星期公司全面转去Silverlight3,作为纪念就把用SL2写的最后一个东西发出来吧。效果如下:

    dino.c
  • WinUI 3 试玩报告

    在微软 Build 2020 开发者大会上,WinUI 团队宣布可公开预览的 WinUI 3 Preview 1,它让开发人员可以在 Win32 中使用 Win...

    dino.c
  • WinUI 3 Preview 3 发布了,再一次试试它的性能

    在微软 Build 2020 开发者大会上,WinUI 团队宣布可公开预览的 WinUI 3 Preview 1,它让开发人员可以在 Win32 中使用 Win...

    dino.c
  • 为Xcode6添加Empty Application选项

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

    用户1451823
  • 观点 | 图灵奖得主Judea Pearl:机器学习的理论局限性与因果推理的七大特性

    机器之心
  • bootstrap 警告 执行后返回信息 常用样式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 可...

    用户5760343
  • 抽样调查怎么做?

    全篇为5部分,主要采用5W2H的逻辑。 ? (本文框架) 01 输为什么要用抽样样本 我们经常需要调查某一批对象的某一项情况,如果所调查对象的体量比较少时,我...

    张俊红
  • 如何为Tensorflow构建自定义数据集

    Tensorflow激发开发人员在几乎任何想到的领域中尝试他们令人兴奋的AI创意。ML社区中有三个众所周知的因素构成了一个好的深度神经网络模型做了一些神奇的事情...

    代码医生工作室
  • 编程语言中间令人无语的规则

    我们都知道,软件开发人员每天都在做各种各样的决策:如何更好地实现功能、如何修复bug、如何改进应用程序性能等等。但是他们也在其他人的工作成果中继续自己的决定,例...

    企鹅号小编
  • Go Web编程--应用ORM

    上篇文章中我们在使用的开发环境中增加了 MySQL容器,然后介绍了使用 database/sql标准库结合数据库驱动包进行数据库操作的方法。不过它们是相对偏底层...

    KevinYan

扫码关注云+社区

领取腾讯云代金券