UWP - 如何创建具有重复图案的 CompositionSurfaceBrush

Question

我想要一个面板，其背景显示重复的图案（例如，点，平均间隔 30 个像素）。

到目前为止，我设法创建了 XamlCompositionBrushBase 的子类，它允许我们创建自己的形状（例如，一个点）。但我不明白如何重复这种模式。

这是我的自定义画笔：

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;
        }
    }
}

我怎样才能使圆无限复制，而不是只有一个实例？

Answer 1

为此，您想要创建一个 CompositionEffectBrush as your main brush, using a Win2D BorderEffect - 它执行实际的平铺 - 并将其源设置为您的 SurfaceBrush。

示例（改编自我的repo，所以可能有点迂回）

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();
        }
    }
}

很长一段时间以来，我一直打算将它添加到 WindowsCommunityToolkit，但很长一段时间以来，我一直在猛烈抨击可视化层的错误，这些错误阻止了我。但是，这种特殊情况应该可以正常工作。