UWP-如何使用重复模式创建构图表面刷

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

为此，您想使用win2d bordereftect创建一个构图效果作为主刷 - 它可以执行实际的瓷砖 - 并将其设置为源以成为您的SurfaceBrush。

示例（根据我的存储库改编，所以可能有点回旋处）

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中，但是在最长的时间里，我一直在用可阻止我的视觉层撞向错误。但是，这种特殊情况应该可以正常工作。