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 に答える