win2d 图像平铺在 UWP 滚动查看器中不起作用

Question

我正在尝试在滚动查看器中使用 win2d 平铺图像。这是我到目前为止的代码：

private void myCanvasControl_CreateResources(Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender, Microsoft.Graphics.Canvas.UI.CanvasCreateResourcesEventArgs args)
{
        args.TrackAsyncAction(Task.Run(async () =>
        {
                // Load the background image and create an image brush from it
                this.backgroundImage = await CanvasBitmap.LoadAsync(sender, new Uri("ms-appx:///Assets/background.jpg"));
                this.backgroundBrush = new CanvasImageBrush(sender, this.backgroundImage);
                // Set the brush's edge behaviour to wrap, so the image repeats if the drawn region is too big
                this.backgroundBrush.ExtendX = this.backgroundBrush.ExtendY = CanvasEdgeBehavior.Wrap;
                this.resourcesLoaded = true;
        }).AsAsyncAction());
}
// win2d draw method
private void myCanvasControl_Draw(Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender, Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
{
        // Just fill a rectangle with our tiling image brush, covering the entire bounds of the canvas control
        var session = args.DrawingSession;
        session.FillRectangle(new Rect(new Point(), sender.RenderSize), this.backgroundBrush);
}

使用此代码，我的图像打印到画布上，但是当我尝试滚动时，图像不会移动(即，即使在滚动时，平铺图像的同一部分也始终可见(。关于如何让图像相应地滚动的任何建议？

编辑：这是我的XAML代码：

<Page
x:Class="HelloWorld2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:HelloWorld2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml" 
mc:Ignorable="d">
<Grid>
    <RelativePanel>
        <Button Name="AddTextButton" 
                        Content="New Text Node" 
                       Click="AddTextButton_Click" 
                Height="48"/>
        <Button Name="AddInkButton" 
                        Content="New Ink Node" 
                        Height="48"
                        Click="AddInkButton_Click"
                RelativePanel.RightOf="AddTextButton"
                        />
        <Button Name="AddImageButton"
                Content="Add Image"
                Click="AddImageButton_Click"
                Height="48" 
                RelativePanel.RightOf="AddInkButton"/>
        <Button Name="AddVideoButton"
                Content="Add Video"
                Click="AddVideoButton_Click"
                Height="48"
                RelativePanel.RightOf="AddImageButton" />
        <ToggleButton Name="inkCapabilities" IsThreeState="False" 
                      Checked="inkCapabilities_Checked" Unchecked="inkCapabilities_Unchecked"
                      Content="Ink Capabilities OFF"
                      Height="48" Width="200"
                      RelativePanel.RightOf="AddVideoButton"/>
        <InkToolbar TargetInkCanvas="{x:Bind inkCanvas}"
                    RelativePanel.RightOf="inkCapabilities"/>
        <ScrollViewer
    VerticalScrollMode="Auto"
    HorizontalScrollMode="Auto"
    HorizontalScrollBarVisibility="Visible"
    VerticalScrollBarVisibility="Visible"
    ZoomMode="Enabled"
    MinZoomFactor="1"
    MaxZoomFactor="5"
    HorizontalAlignment="Left"
    VerticalAlignment="Top"
        RelativePanel.Below="AddTextButton">
            <canvas:CanvasControl Name="myCanvasControl"
                                      Draw="myCanvasControl_Draw"
                                      CreateResources="myCanvasControl_CreateResources"
                                      HorizontalAlignment="Stretch"
                                      VerticalAlignment="Stretch">
                <Canvas Name="parentCanvas" Height="10000" Width="10000"
                        RelativePanel.Below ="AddTextButton">

                    <InkCanvas Name="inkCanvas" Height="10000" Width="10000"
                            Visibility="Visible"   />
                </Canvas>
            </canvas:CanvasControl>
        </ScrollViewer>
    </RelativePanel>
</Grid>

谢谢！

Answer 1

您可以

尝试为 ScrollViewer 指定属性高度，然后将 的高度设置为 canvas:CanvasControl 的较大值。如以下示例，

        <ScrollViewer Height="500"
VerticalScrollMode="Auto"
HorizontalScrollMode="Auto"
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Visible"
ZoomMode="Enabled"
MinZoomFactor="1"
MaxZoomFactor="5"
HorizontalAlignment="Left"
VerticalAlignment="Top"
    RelativePanel.Below="AddTextButton">
                <canvas:CanvasControl Name="myCanvasControl"
                                  Height="10000" Width="10000"
                                  ...
                                  HorizontalAlignment="Stretch"
                                  VerticalAlignment="Stretch">
                                  ...
                </canvas:CanvasControl>
        </ScrollViewer>