WPF 布局 : Show button below a scaled down image

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>

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

有任何想法吗？

Answer 1

这应该做你想做的:

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