Zooming into all content of a Canvas

问题

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 drawing on Canvas using the CanvasManager.cs class and it is working fine. Now I need to zoom on the Canvas: Zoom the Canvas (the ink) and Zoom what it contains (the StackPanel + the Images) together.

On doubleTapping the 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);
        }
    }

The result is: only the Canvas (its Ink) is Zooming and the StackPanel and its Images are left at the place, same scale, intact!

What Am I doing wrong?

回答1:

Your mistake is you are assign a constant value for the width of each image (Width="570") so that it will never zoomed in or out unless you have change it's width programmatically.

The best way to change the image's width is bind a variable value for it, you can create a converter that divide the width of canvas over two (canvas.width / 2) and bind the width of each image to this converter.. Then your zoom will work perfectly.

来源：https://stackoverflow.com/questions/30236107/zooming-into-all-content-of-a-canvas