Repeating brush or tile of image in WinUI 3

Question

I'm finding it awfully hard to see how to simply cover a rectangular XAML element with repeating copies of a bitmap! I am using WinUI 3 with Windows App SDK. I would like to use the repeating image as a background element in my app.

It would seem to involve the composition API. Some tantalizing clues are given by Deiderik Krohls and by JetChopper ... however (a) there does not seem to be a stable released NuGet package for the required interface and (b) this seems like a very complicated way to do something that should be simple and (c) these solutions would seem to require extra work to integrate with WinUI 3 classes such as ImageSource and BitmapImage.

Any suggestions?

Answer 1

You can use a Direct2D effect, the Tile Effect for that. This effect is hardware accelerated. Microsoft provides a nuget called Win2D that enables that for WinUI: Microsoft.Graphics.Win2D

Once you have created a standard WinUI3 application project, add this nuget, and for this XAML:

<Window
    x:Class="Win2DApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Orientation="Horizontal">
        <canvas:CanvasControl
            x:Name="myCanvas"
            Width="128"
            Height="128"
            CreateResources="myCanvas_CreateResources"
            Draw="myCanvas_Draw" />
    </StackPanel>
</Window>

You can display a repetition of an image with a C# code like this:

public sealed partial class MainWindow : Window 
{
  public MainWindow() 
  {
    this.InitializeComponent();
  }

  // handle canvas' CreateResources event for Win2D (Direct2D) resources
  private void myCanvas_CreateResources(CanvasControl sender, CanvasCreateResourcesEventArgs args)
      => args.TrackAsyncAction(CreateResources(sender).AsAsyncAction());

  // create all needed resources async (here a bitmap)
  CanvasBitmap _canvasBitmap;
  private async Task CreateResources(CanvasControl sender)
  {
      // this is my 32x32 image downloaded from https://i.sstatic.net/454HU.jpg?s=32&g=1
      _canvasBitmap = await CanvasBitmap.LoadAsync(sender, @"c:\downloads\smo.jpg");
  }

  // handle canvas' Draw event
  // check quickstart https://microsoft.github.io/Win2D/WinUI3/html/QuickStart.htm
  private void myCanvas_Draw(CanvasControl sender, CanvasDrawEventArgs args)
  {
      // create an intermediate command list as a feed to the Direct2D effect
      using var list = new CanvasCommandList(sender);
      using var session = list.CreateDrawingSession();
      session.DrawImage(_canvasBitmap);

      // create the Direct2D effect (here Tile effect https://learn.microsoft.com/en-us/windows/win32/direct2d/tile)
      using var tile = new TileEffect();
      tile.Source = list;
      
      // use image size as source rectangle
      tile.SourceRectangle = _canvasBitmap.Bounds;

      // draw the effect (using bitmap as input)
      args.DrawingSession.DrawImage(tile);
  }
}

Here is the result with my StackOverflow avatar as the bitmap source:

The image is 32x32 and the canvas is 128x128 so we have 4x4 tiles.