WPF布局：在按比例缩小的图像下方显示按钮

Question

我有点难以实现一个相当简单的布局要求。我想显示一个图像，并在图像下方显示一个按钮。图片应显示为整体-如有必要，应将其缩小，但不应放大。

这是我想要的：

似乎很简单，但我无法弄清楚在XAML中这是否有可能。显然Stackpanel不起作用，DockPanel也不起作用，我也看不到Grid的解决方案。

这是我尝试的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>

显然，图像视图框将始终填充剩余空间，因此按钮将始终位于整个容器的底部，而不是图像的底部。

有什么想法吗？

Answer 1

这应该做您想要的：

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

Answer 2

<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>

您只能使用一个网格。将StretchDirection设置为DownOnly，无需指定最大大小。