title: WPF Zoom to Rectangle with RenderTransform
body: <p>I have a question about a WPF zooming question. This question is really about a Kinect application, but I have tried to generalise it here.</p>
  
  <p>I have the following XAML:</p>
  
  <pre><code>`&lt;Window x:Class="RenderTransformViewboxTest.MainWindow"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:local="clr-namespace:RenderTransformViewboxTest"
      mc:Ignorable="d"
      Title="MainWindow" Height="350" Width="525"&gt;
  &lt;Grid&gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition Width="4*" /&gt;
          &lt;ColumnDefinition /&gt;
      &lt;/Grid.ColumnDefinitions&gt;
      &lt;Border x:Name="borderContainer" ClipToBounds="True"&gt;
          &lt;Viewbox x:Name="contentViewbox"&gt;
              &lt;Grid&gt;
                  &lt;Image x:Name="imageMoose" Source="Images\Moose.jpg" /&gt;
                  &lt;Canvas x:Name="canvasContainer"&gt;
                      &lt;Rectangle x:Name="TestRectangle" Height="600" Width="200" Canvas.Left="250" Canvas.Top="150" Stroke="Black" Fill="Yellow" Opacity="0.5" /&gt;
                  &lt;/Canvas&gt;
              &lt;/Grid&gt;
          &lt;/Viewbox&gt;
      &lt;/Border&gt;
      &lt;StackPanel Grid.Column="1"&gt;
          &lt;Button x:Name="btnZoomToRectangle" Content="Zoom to Rectangle" Click="btnZoomToRectangle_Click" /&gt;
      &lt;/StackPanel&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>
  
  <p>This looks like this:
  <a href="https://i.stack.imgur.com/qtlwr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qtlwr.png" alt="Example of Screen Before"></a></p>
  
  <p>I am having trouble writing the correct code to:</p>
  
  <ol>
  <li>Scale the whole Viewbox (the canvas and image) inside the border until the rectangle appears to be at the full height of the border control.</li>
  <li>Then, translate the whole Viewbox (the canvas and image) inside the border so that the rectangle appears to be in the centre of the border control.</li>
  <li>Since translating the Viewbox may introduce "gaps" on the left/right of the border, I'd like to trim the other side somehow so that there is an equal amount of image on the left and the right hand side of the rectangle.</li>
  </ol>
  
  <p>The result of these steps should make the screen look like this:
  <a href="https://i.stack.imgur.com/WibUx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WibUx.png" alt="Example of Screen After"></a></p>
  
  <p>Notice how that because the image was translated right, we introduced a gap at the left hand side of the frame. As per requirement 3, I introduce the same amount of gap on the right hand side.</p>
  
  <p>(I apologise for my skills with Paint here).</p>
  
  <p>I've been banging my head against a wall with this for ages and am having trouble. I have sort of managed to scale the image applying a Matrix Transform in the centre of the image but can't seem to do much else with it after! Any help would be gladly appreciated.</p>