title: Prevent Image from stretching beyond actual size
body: <p>I have an <code>Image</code> control bound to a source. Here is what I want:</p>
  
  <ul>
  <li>If the source image is smaller than the Grid containing it, it should display at its original size. It should not stretch beyond 100%. This is behavior of setting <code>Stretch="None"</code>.</li>
  <li>If the source image is larger than parent Grid, it should be resized uniformly to fit the container. This behavior is available with <code>Stretch="Uniform"</code>.</li>
  </ul>
  
  <p>I have tried to bind MaxWidth and MaxHeight to parent's actual dimensions as follows:</p>
  
  <pre><code>&lt;DataTemplate x:Key="ImageDataTemplate"&gt;
      &lt;Grid&gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="auto"/&gt;
              &lt;RowDefinition Height="*"/&gt;
          &lt;/Grid.RowDefinitions&gt;
          &lt;TextBlock Text="{Binding Title}" Grid.Row="0"/&gt;
          &lt;TextBlock Text="{Binding Type}" Grid.Row="1"/&gt;
          &lt;Grid x:Name="ImageWrapper" Grid.Row="1" Tapped="ImageWrapper_Tapped" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="AliceBlue"&gt;
              &lt;Image Source="{Binding Link}" MaxWidth="{Binding ActualWidth, ElementName=ImageWrapper}" MaxHeight="{Binding ElementName=ImageWrapper, Path=ActualHeight}"/&gt;
          &lt;/Grid&gt;
      &lt;/Grid&gt;
  &lt;/DataTemplate&gt;
  </code></pre>
  
  <p>However, I just end up with no image at all. Parent Grid occupies all available space as can be seen from background color. But there's no image.</p>
  
  <p>Is there a way to achieve behavior I want?</p>