UWP - How to create a CompositionSurfaceBrush with a repeated pattern

Question

I would like to have a Panel with a Background that shows a repeated pattern (e.g. dots, evenly separated of 30 pixels).

So far, I managed to create a subclass of XamlCompositionBrushBase that allows we to create my own shape (e.g. a single dot). but I am failing to understand how to repeat this pattern.

This is my custom Brush:

public sealed class DottedBackgroundBrush : XamlCompositionBrushBase
{
    public DottedBackgroundBrush()
    {
    }

    protected override void OnConnected()
    {
        // Delay creating composition resources until they're required.
        if (CompositionBrush == null)
        {
            var compositor = Window.Current.Compositor;

            // Actual Width/Height are going to be returned in effective pixels which
            // is going to differ from the size of the bitmap that we'll render from the XAML.
            var width = 400; 
            var height = 400; 

            // Make our visual:
            var spriteVisual = compositor.CreateSpriteVisual();
            spriteVisual.Size = new Vector2(width, height);

            CanvasDevice device = CanvasDevice.GetSharedDevice();
            var graphicsDevice = CanvasComposition.CreateCompositionGraphicsDevice(compositor, device);
            CompositionSurfaceBrush drawingBrush = compositor.CreateSurfaceBrush();
            var drawingSurface = graphicsDevice.CreateDrawingSurface(
                new Size(width, height),
                DirectXPixelFormat.B8G8R8A8UIntNormalized,
                DirectXAlphaMode.Premultiplied);
            using (var ds = CanvasComposition.CreateDrawingSession(drawingSurface))
            {
                ds.Clear(Colors.Transparent);
                ds.DrawCircle(new Vector2(10, 10), 5, Colors.Black, 3);
            }

            drawingBrush.Surface = drawingSurface;

            CompositionBrush = drawingBrush;
        }
    }

    protected override void OnDisconnected()
    {
        // Dispose of composition resources when no longer in use.
        if (CompositionBrush != null)
        {
            CompositionBrush.Dispose();
            CompositionBrush = null;
        }
    }
}

How can I enable the circle to be replicated indefinitely, instead of having as single instance?

Answer 1

For this, you want to create a CompositionEffectBrush as your main brush, using a Win2D BorderEffect - which does the actual tiling - and set it's source to be your SurfaceBrush.

Example (adapted from a repo of mine so it might be a bit roundabouts)

public class TilingBrush : XamlCompositionBrushBase
{
    protected Compositor _compositor => Window.Current.Compositor;

    protected CompositionBrush _imageBrush = null;

    protected IDisposable _surfaceSource = null;

    protected override void OnConnected()
    {
        base.OnConnected();

        if (CompositionBrush == null)
        {
            CreateEffectBrush();
            Render();
        }
    }

    protected override void OnDisconnected()
    {
        base.OnDisconnected();

        this.CompositionBrush?.Dispose();
        this.CompositionBrush = null;

        ClearResources();
    }

    private void ClearResources()
    {
        _imageBrush?.Dispose();
        _imageBrush = null;

        _surfaceSource?.Dispose();
        _surfaceSource = null;
    }

    private void UpdateBrush()
    {
        if (CompositionBrush != null && _imageBrush != null)
        {
            ((CompositionEffectBrush)CompositionBrush).SetSourceParameter(nameof(BorderEffect.Source), _imageBrush);
        }
    }

    protected ICompositionSurface CreateSurface()
    {
        double width = 20;
        double height = 20;

        CanvasDevice device = CanvasDevice.GetSharedDevice();
        var graphicsDevice = CanvasComposition.CreateCompositionGraphicsDevice(_compositor, device);
        var drawingSurface = graphicsDevice.CreateDrawingSurface(
            new Size(width, height),
            DirectXPixelFormat.B8G8R8A8UIntNormalized,
            DirectXAlphaMode.Premultiplied);

        /* Create Drawing Session is not thread safe - only one can ever be active at a time per app */
        using (var ds = CanvasComposition.CreateDrawingSession(drawingSurface))
        {
            ds.Clear(Colors.Transparent);
            ds.DrawCircle(new Vector2(10, 10), 5, Colors.Black, 3);
        }

        return drawingSurface;
    }

    private void Render()
    {
        ClearResources();

        try
        {
            var src = CreateSurface();
            _surfaceSource = src as IDisposable;
            var surfaceBrush = _compositor.CreateSurfaceBrush(src);
            surfaceBrush.VerticalAlignmentRatio = 0.0f;
            surfaceBrush.HorizontalAlignmentRatio = 0.0f;
            surfaceBrush.Stretch = CompositionStretch.None;
            _imageBrush = surfaceBrush;

            UpdateBrush();
        }
        catch
        {
            // no image for you, soz.
        }
    }

    private void CreateEffectBrush()
    {
        using (var effect = new BorderEffect
        {
            Name = nameof(BorderEffect),
            ExtendY = CanvasEdgeBehavior.Wrap,
            ExtendX = CanvasEdgeBehavior.Wrap,
            Source = new CompositionEffectSourceParameter(nameof(BorderEffect.Source))
        })
        using (var _effectFactory = _compositor.CreateEffectFactory(effect))
        {               
            this.CompositionBrush = _effectFactory.CreateBrush();
        }
    }
}

For the longest time I've meant to add it to the WindowsCommunityToolkit, but for the longest time I've been slamming into bugs with the Visual Layer that stop me. This particular case should work fine however.