title: How can I get my WPF scrollviewer to work with zooming?
body: <p>I've got some kind of fundemental misunderstanding of how I should approach this problem.</p>
  
  <p>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.</p>
  
  <p>Here's the code:</p>
  
  <p>XAML:</p>
  
  <pre><code>&lt;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"&gt;
      &lt;ScrollViewer Name="scroller" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"&gt;
          &lt;Canvas Background="AntiqueWhite" Name="content" MouseLeftButtonDown="content_MouseLeftButtonDown" MouseRightButtonDown="content_MouseRightButtonDown"&gt;
              &lt;Rectangle Width="100" Height="100" Canvas.Top="50" Canvas.Left="50" Fill="PaleGoldenrod"&gt;&lt;/Rectangle&gt;
          &lt;/Canvas&gt;
      &lt;/ScrollViewer&gt;
  &lt;/Window&gt;
  </code></pre>
  
  <p>And codebehind:</p>
  
  <pre><code>using System.Windows;
  using System.Windows.Input;
  using System.Windows.Media;
  
  namespace scrollerProblem
  {
      /// &lt;summary&gt;
      /// Interaction logic for Window1.xaml
      /// &lt;/summary&gt;
      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;
          }
      }
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>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?</p>