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

[UWP]通过自定义XamlCompositionBrushBase实现图片平铺的更多相关文章

  1. ie8下背景图片平铺问题

    IE9+及其他浏览器实现背景图片平铺可能需要一个属性就可以background-size:100%/cover; 但是ie8下background-size是不兼容的,因此我们需要用到滤镜,来解决背景 ...

  2. Duilib技巧:背景图片平铺

    贴图的描述 方式有两种    // 1.aaa.jpg    // 2.file='aaa.jpg' res='' restype='0' dest='0,0,0,0' source='0,0,0,0 ...

  3. android实现图片平铺效果&WebView多点触控实现缩放

    1.图片平铺效果实现非常简单,只要在xml中添加一个 android:tileMode的属性就可以了.首先在drawable文件夹中添加自己的my.xml文件.代码: Java代码 <?xml ...

  4. Canvas 图片平铺设置

    /** * 图片平铺 */ function initDemo7(){ var canvas = document.getElementById("demo7"); if (!ca ...

  5. iOS UIButton 设置图片平铺

    UIImage *image2 = [UIImage imageNamed:imgName]; CGFloat top = ; // 顶端盖高度 CGFloat bottom = ; // 底端盖高度 ...

  6. Android中设定背景图片平铺。

    注:本文由Colin撰写,版权所有!转载请注明原文地址,谢谢合作! 在做Android开发时,我们常常需要为程序设定一个背景,但由于现在的Android设备尺寸不一,如果随便设置一个图片为背景,那么很 ...

  7. 一款js控制背景图片平铺

    背景图片的平铺方法有很多种,纯色背景,渐变背景,图片背景,今天讲的是移动端的图片背景~~~~ <style> html,body{;;} .body{background: url(ima ...

  8. [ATL/WTL]_[0基础]_[CBitmap复制图片-截取图片-平铺图片]

    场景: 1.当你须要截取图片部分区域作为某个控件的背景. 2.须要平铺图片到一个大区域让他自己主动放大时. 3.或者须要合并图片时. 代码: CDC sdc; CDC ddc; sdc.CreateC ...

  9. LODOP中设置设置图片平铺水印,超文本透明

    之前的博文:LODOP中平铺图片 文本项Repeat. 该博文中是平铺的图片,上面是文本.如果是图片add_print_image和add_print_text纯文本,这两个打印项设计的,可以直接通过 ...

随机推荐

  1. springboot 快速开发的定制补充

    增强 SpringBoot 快速开发工具 项目地址:https://gitee.com/sanri/web-ui 优点:这是一个 web 通用配置的组件,即插即用,可用于新项目或私活.是对 Sprin ...

  2. 给iOS中高级求职者的一份面试题解答

    前段时间更新了一篇 给iOS中高级面试官的一份招聘要求 收到很多小伙伴的点赞与关注.可能有很多小伙伴已经带着我在那篇文章给大家提供的一些面试技巧 & 其中的面试题 已经开始招聘或者应聘了!这里 ...

  3. php能在手机上运行吗

    php能在手机上运行吗? php能在手机上运行.但是需要你的手机具有PHP运行环境. 比如一款安卓手机上面的php运行环境软件:anmpp. ANMPP是Android NGINX MYSQL PGS ...

  4. .net调用阿里短信接口

    一.创建一个空的api项目 二.应用阿里的短信包 aliyun-net-sdk-core 三.登录阿里添加签名和模板 四.创建创建AccessKey 注意 AccessKey创建后,无法再通过控制台查 ...

  5. 【XSY2495】余数

    Input Output Input 3 4 Output 4 HINT 原式 =n*m-n除以i向下取整 用数论分块做就可以了 #include<bits/stdc++.h> #defi ...

  6. Spring Boot实战之定制type Formatters

    本文首发于个人网站:Spring Boot实战之定制type Formatters 前面我们有篇文章介绍了PropertyEditors,是用来将文本类型转换成指定的Java类型,不过,考虑到Prop ...

  7. windows 利用环境变量%PATH%中目录可写提权

    使用PowerUp的时候有时候会有这种结果 [*] Checking %PATH% for potentially hijackable DLL locations... Permissions : ...

  8. csp-s模拟测试101的T3代码+注释

    因为题目过于大神所以单独拿出来说.而且既然下发std了颓代码貌似也不算可耻233 很难讲啊,所以还是写在代码注释里面吧 因为比较认真的写了不少注释,所以建议缩放到80%观看,或者拿到gedit上 1 ...

  9. Asp.net Core 系列之--1.事件驱动初探:简单事件总线实现(SimpleEventBus)

    ChuanGoing 2019-08-06  前言 开篇之前,简单说明下随笔原因.在园子里游荡了好久,期间也起过要写一些关于.NET的随笔,因各种原因未能付诸实现. 前段时间拜读daxnet的系列文章 ...

  10. [LLL邀请赛]参观路线(图论+dfs)

    emmmm....学校的oj被查水表了,扒不到原题面,所以.... 但是我还是扒到了题面... 题目大意:给定一个完全图,删掉其中一些边,然后求其字典序最小的遍历顺序 有点像去年day2T1啊.... ...