Scale the entire contents of the canvas

Question

I have this xaml:

<Grid x:Name="DrawingGrid" Visibility="Collapsed"> <AppBarButton x:Name="ExitDrawingButton" Icon="Cancel" Click="ExitDrawingButton_Click"></AppBarButton> <ScrollViewer x:Name="DScrollViewer" ManipulationMode="All" MaxZoomFactor="2.0" MinZoomFactor="1.0" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" DoubleTapped="DScrollViewer_DoubleTapped" Width="1140" Height="770"> <Canvas x:Name="inkCanvas" Background="Transparent" Width="1140" Height="770"> <StackPanel x:Name="DStackPanel" Orientation="Horizontal" Margin="0,0,0,0"> <Image x:Name="DImage0" HorizontalAlignment="Left" Source="{Binding nextImage}" Width="570" Canvas.ZIndex="0"/> <Image x:Name="DImage1" HorizontalAlignment="Left" Source="{Binding nextImage}" Width="570" Canvas.ZIndex="0"/> </StackPanel> </Canvas> </ScrollViewer> </Grid> 

I am using the Canvas class using the CanvasManager.cs class and it works fine. Now I need to zoom in on the Canvas : increase the Canvas (ink) and increase what it contains ( StackPanel + images).

In the doubleTapping ScrollViewer containing the Canvas , I have this method:

  private async void DScrollViewer_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e) { Point point = e.GetPosition(DScrollViewer); if (DScrollViewer.ZoomFactor == 1) { await Task.Delay(300); DScrollViewer.ChangeView(point.X, point.Y, 2.0F, false); } else { await Task.Delay(300); DScrollViewer.ChangeView(point.X, point.Y, 1.0F, false); } } 

Result: only the Canvas (its ink) is scaled, and the StackPanel and its images remain in place, the same scale, intact!

What am I doing wrong?

Answer 1

Your mistake is that you assign a constant value to the width of each image ( Width="570" ) so that it never increases or decreases, unless you change its width programmatically.

The best way to change the image width is to link the value of the variable for it, you can create a converter that divides the width of the canvas into two (canvas.width / 2) and associates the width of each image with this converter. Then your zoom will work fine.