win2d Image Tiling not working in UWP Scrollviewer

Question

I am trying to tile an image using win2d in a scrollviewer. This is the code I have so far:

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

With this code, my image prints to the canvas, but when I try to scroll the image does not move (i.e. the same part of the tiled image is visible the entire time, even when scrolling). Any sugestions on how to get image to scroll accordingly?

EDIT: Here is my XAML code:

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

Thanks!

I tried to add the `CanvasControl` in a `ScrollViewer`, but it can scroll correctly to display all the part of image, could you provide the xaml code that can reproduce this issue? — Breeze Liu - MSFT, Jan 04 '18 at 02:45

score 1 · Answer 1 · answered Jan 04 '18 at 07:05

You can try to give the ScrollViewer a property height then set the height of canvas:CanvasControl a larger value. Such as the following example,

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

win2d Image Tiling not working in UWP Scrollviewer

1 Answers1