title: Align images in WPF canvas in center
body: <p>I am developing an image viewer based on gestures using Kinect. I am using the following XAML code to display images on a canvas.</p>
  
  <pre><code>    &lt;Canvas Background="Transparent" Height="732" VerticalAlignment="Top"&gt;
          &lt;Image x:Name="next" Source="{Binding NextPicture}" StretchDirection="Both" Stretch="Uniform" ClipToBounds="True" SnapsToDevicePixels="True" RenderOptions.BitmapScalingMode="HighQuality" RenderTransformOrigin="0.5,0.5" Opacity="0" Grid.ColumnSpan="2" Height="732" Width="Auto" HorizontalAlignment="Center" /&gt;
          &lt;Image x:Name="previous" Source="{Binding PreviousPicture}" StretchDirection="Both" Stretch="Uniform" ClipToBounds="True" SnapsToDevicePixels="True" RenderOptions.BitmapScalingMode="HighQuality" RenderTransformOrigin="0.5,0.5" Opacity="0" Grid.ColumnSpan="2" Height="732" Width="Auto" HorizontalAlignment="Center" /&gt;
          &lt;Image x:Name="current" Source="{Binding Picture}" StretchDirection="Both" Stretch="Uniform" ClipToBounds="True" SnapsToDevicePixels="True" RenderOptions.BitmapScalingMode="HighQuality" RenderTransformOrigin="0.5,0.5" Grid.ColumnSpan="2" Height="732" Width="Auto" HorizontalAlignment="Center" /&gt;
      &lt;/Canvas&gt;
  </code></pre>
  
  <p>This is code that runs in the back:</p>
  
  <pre><code>    /// &lt;summary&gt;
      /// Gets the previous image displayed.
      /// &lt;/summary&gt;
      public BitmapImage PreviousPicture { get; private set; }
  
      /// &lt;summary&gt;
      /// Gets the current image to be displayed.
      /// &lt;/summary&gt;
      public BitmapImage Picture { get; private set; }
  
      /// &lt;summary&gt;
      /// Gets the next image displayed.
      /// &lt;/summary&gt;
      public BitmapImage NextPicture { get; private set; }
  </code></pre>
  
  <p>Every time a gesture is recognized, the properties are changed as shown:</p>
  
  <pre><code>    // Setup corresponding picture if pictures are available.
                  this.PreviousPicture = this.Picture;
                  this.Picture = this.NextPicture;
                  this.NextPicture = LoadPicture(Index + 1);
  
                  // Notify world of change to Index and Picture.
                  if (this.PropertyChanged != null)
                  {
                      this.PropertyChanged(this, new PropertyChangedEventArgs("PreviousPicture"));
                      this.PropertyChanged(this, new PropertyChangedEventArgs("Picture"));
                      this.PropertyChanged(this, new PropertyChangedEventArgs("NextPicture"));
                  }
  </code></pre>
  
  <p>The problem however is, the images that I display on the canvas get aligned randomly to the left or right. Also their aspect ratio changes sometimes. What I want is, the images should be displayed on the center of the canvas in their original aspect ratio. Can anyone help me in that regard?</p>
  
  <p>Also, I am able to set the image to the center using the C# code as follows:</p>
  
  <pre><code>    Canvas.SetLeft(current, (1249 - current.ActualWidth) / 2);
      Canvas.SetTop(current, 0);
  </code></pre>
  
  <p>where, 'current' is the name of the current image in the XAML code. But I want it to happen automatically. Is it possible in the XAML code? If not, how do I achieve it?</p>
  
  <p>PS: I am not so good at C# or WPF. So please explain in layman terms if possible.</p>