WPF layout: Show button below a scaled down image

I am a bit stuck implementing a rather simple layout requirement. I want to show an image and below the image a button. The image should be shown as a whole - so it should be scaled down if necessary but it should not be scaled up.

Here is what I want:

Seems simple but I can't figure out if this is even possible in XAML. Obviously a Stackpanel isn't working, neither is a DockPanel and I can't see a solution with a Grid either.

Here is my try with a DockPanel:

<DockPanel>
    <Button DockPanel.Dock="Bottom">Button</Button>
    <Viewbox 
        Stretch="Uniform"
        MaxWidth="{Binding ElementName=bigImage, Path=ActualWidth}" 
        MaxHeight="{Binding ElementName=bigImage, Path=ActualHeight}">
        <Image x:Name="bigImage"/>
    </Viewbox>
</DockPanel>

Obviously the image viewbox will always fill the remaining space so the button will alwa开发者_JAVA百科ys be at the bottom of the whole container and not at the bottom of the image.

Any ideas?

This should do what you want:

  <Grid>  
    <DockPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button DockPanel.Dock="Bottom">Button</Button>
        <Image x:Name="bigImage" StretchDirection="DownOnly" />
    </DockPanel>
  </Grid>

<Grid>
   <Grid.RowDefinitions>
     <RowDefinition Height="*"/>
     <RowDefinition Height="Auto"/>
   </Grid.RowDefinitions>
   <Image Source="photo.PNG" Stretch="Uniform" StretchDirection="DownOnly"/>
   <Button Content="Button" Grid.Row="1" HorizontalAlignment="Left"/>
</Grid>

You can use a single grid only. With the StretchDirection set to DownOnly there is no need to specify a max size.