Question

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 always be at the bottom of the whole container and not at the bottom of the image.

Any ideas?

Answer 1

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>