How can I get my WPF scrollviewer to work with zooming?

Question

I've got some kind of fundemental misunderstanding of how I should approach this problem.

I've got a Canvas inside a ScrollViewer. I'd like to be able to zoom in and out on that Canvas and have the ScrollViewer adjust appropriately.

Here's the code:

XAML:

<Window x:Class="scrollerProblem.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <ScrollViewer Name="scroller" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <Canvas Background="AntiqueWhite" Name="content" MouseLeftButtonDown="content_MouseLeftButtonDown" MouseRightButtonDown="content_MouseRightButtonDown">
            <Rectangle Width="100" Height="100" Canvas.Top="50" Canvas.Left="50" Fill="PaleGoldenrod"></Rectangle>
        </Canvas>
    </ScrollViewer>
</Window>

And codebehind:

using System.Windows;
using System.Windows.Input;
using System.Windows.Media;

namespace scrollerProblem
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        float Zoom = 1;

        public Window1()
        {
            InitializeComponent();
            content.Width = 700;
            content.Height = 700;
        }

        private void content_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            content.Width *= 2;  // BLAH
            content.Height *= 2;  // BLAH
            Zoom *= 2;
            TransformGroup gridTransforms = new TransformGroup();
            gridTransforms.Children.Add(new ScaleTransform(Zoom, Zoom));
            gridTransforms.Children.Add(new TranslateTransform(0, 0));
            content.RenderTransform = gridTransforms;
        }

        private void content_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
        {
            content.Width /= 2;  // BLAH
            content.Height /= 2;  // BLAH
            Zoom /= 2;
            TransformGroup gridTransforms = new TransformGroup();
            gridTransforms.Children.Add(new ScaleTransform(Zoom, Zoom));
            gridTransforms.Children.Add(new TranslateTransform(0, 0));
            content.RenderTransform = gridTransforms;
        }
    }
}

If I leave out the lines marked with the "BLAH" the scrollbars don't adjust at all...which isn't too surprising, since nothing is actually changing the size of the content Canvas. However, if I add the BLAH lines in, the canvas shrinks/grows, but it also is scaling at the same time, which means it doesn't look right compared to its contents.

I'm guessing I'm taking a fundementally incorrect approach, but I'm not clear how to resolve it. Is this the right way to go, with just a minor problem, or am I taking the completely wrong tact here?

Answer 1

I found the answer on this page, where this text was the key:

So, what is the difference between LayoutTransform and RenderTransform? The two property names reveal much in this case. Any Transform assigned to LayoutTransform is applied when layout is performed. RenderTransform is applied after layout when rendering is performed.

In my case, it was just a matter of using the correct LayoutTransform, instead of the RenderTransform, and all is good.