图像作为背景图案或平铺 - UWP答案

【问题标题】：Image as background pattern or tiling - UWP图像作为背景图案或平铺 - UWP
【发布时间】：2019-01-04 16:54:22
【问题描述】：

我已经开发 wpf 应用程序几年了，我曾经使用以下代码平铺图像并将其用作背景图案：

<ImageBrush ImageSource="/Images/GroupPattern.png"  TileMode="Tile" ViewportUnits="Absolute" Viewport="0,0,32,32"/>

但是，平铺似乎在 UWP 中不起作用，经过一些研究我没有找到任何东西。

那么，有没有人是等价的？

谢谢！

【问题讨论】：

UWP - How to tile a background image?的可能重复
没有内置的等价物。如果要将其用作画笔，则必须从 XamlCompositionBrushBase 创建自己的画笔，并将其与启用平铺的 Win2D 的 BorderEffect 结合使用。 here 有一个未记录的示例，但它不是值得生产的代码（我用它来报告错误）
我试试看，不知道为什么没有这样的基本功能...谢谢
我试过了，它的工作，但是平铺太大，我控制它几乎整个页面，有没有办法将它设置为 24x24？
如果这是您使用视口的目的，那么没有简单的方法可以做到这一点。（从技术上讲，通常可以将 Win2D CropEffect 链接到效果图来完成这项工作，但它不适用于组合 API）。您可以使用合成 API 缩放用于画笔的表面，也可以创建自己的 CompositionDrawingSurface 并使用 Win2D API 在其上绘制您想要的任何内容。这当然不是微不足道的！最简单的方法是实际调整源图像的大小。

标签： c# uwp uwp-xaml

【解决方案1】：

正如@JohnnyWestlake 所说，您可以使用 Microsoft Win2D 库。只需将此代码 sn-p 添加到您的 xaml：

<Page .....
     xmlns:win2d="using:Microsoft.Graphics.Canvas.UI.Xaml"
      .....>

  <Grid>
    <win2d:CanvasControl CreateResources="BackgroundCanvas_CreateResources" 
                         Draw="BackgroundCanvas_Draw" />
  </Grid>
</Page>

并在 .xaml.cs 文件中如下：

    using Microsoft.Graphics.Canvas;
    using Microsoft.Graphics.Canvas.Brushes;
    using Microsoft.Graphics.Canvas.UI;
    using Microsoft.Graphics.Canvas.UI.Xaml;
    .......

    private CanvasBitmap backgroundImage;
    private CanvasImageBrush backgroundBrush;

    private void BackgroundCanvas_CreateResources(CanvasControl sender, CanvasCreateResourcesEventArgs args)
    {
        args.TrackAsyncAction(Task.Run(async () =>
        {
            string uri = "ms-appx:///Assets/Images/GroupPattern.png";

            backgroundImage = await CanvasBitmap.LoadAsync(sender, new Uri(uri));
            backgroundBrush = new CanvasImageBrush(sender, backgroundImage);

            // Set the brush's edge behaviour to wrap, so the image repeats if the drawn region is too big
            backgroundBrush.ExtendX = backgroundBrush.ExtendY = CanvasEdgeBehavior.Wrap;
            backgroundBrush.Transform = System.Numerics.Matrix3x2.CreateScale(0.5f);
        }).AsAsyncAction());
    }

    private void BackgroundCanvas_Draw(CanvasControl sender, CanvasDrawEventArgs args)
    {
        var session = args.DrawingSession;
        session.FillRectangle(new Rect(new Point(), sender.RenderSize), backgroundBrush);
    }

希望对你有帮助）

【讨论】：