0

我正在尝试在滚动查看器中使用 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>

谢谢！

4

1 回答 1

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>
于 2018-01-04T07:05:03.290 回答