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

【问题标题】：WPF layout: Show button below a scaled down imageWPF布局：在缩小的图像下方显示按钮
【发布时间】：2011-05-30 09:16:53
【问题描述】：

我在实现一个相当简单的布局要求时有点卡住了。我想显示图像并在图像下方显示一个按钮。图像应作为一个整体显示 - 因此如有必要应按比例缩小，但不应按比例放大。

这就是我想要的：

看起来很简单，但我不知道这在 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>

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

有什么想法吗？

【问题讨论】：

标签： wpf layout

【解决方案1】：

这应该做你想做的：

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

【讨论】：

感谢您指出 DownOnly 属性。但问题仍然存在，因为按钮将始终位于整个停靠面板容器的底部，而不是图像下方。
这就是我将水平和垂直对齐设置为中心的原因：这样 DockPanel 会采用其内容的大小，并且按钮就在图像下方。我试过了，效果很好……你用的是完全相同的代码吗？
我认为他的意思是按钮水平拉伸。您可以将 HorizontalAlignment="Left" 添加到按钮。
你是对的。谢谢你。在我的情况下， HorizontalAlignment="Stretch" 和 VerticalAlignment="Top" 正是我需要的。

【解决方案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 时，无需指定最大尺寸。

【讨论】：

但是将列的高度设置为 * 按钮仍将位于容器的最底部，而不是图像的正下方。
这取决于网格的父级。现在 Grid 没有设置，所以如果它在另一个 Grid 或 Border 中，它会像你说的那样拉伸以填充最大区域。如果网格居中，它将使用最小空间并将按钮和图像保持在一起。你能提供更多的 xaml 吗？
+1：感谢您的建议。是的，网格在另一个网格内。我接受了 Thomas 的建议，但感谢您的意见。