wpf - 带有文本锚定在按钮底部的 WPF 图像按钮

Question

1. 无论图像纵横比如何，我都希望将文本锚定到按钮的最底部。
2. 我希望图像可以拉伸以适合按钮中的剩余空间。

此 xaml 确实让 Image 填充了剩余空间，但文本位于 Image 的正下方，而不是按钮的最底部。也许我需要使用 DockPanel 以外的东西，但我不确定该使用什么。如果有另一种可行的方法，则文本不需要位于标签中。

谢谢

<Button Height="150" Width="150">
    <DockPanel LastChildFill="True">
        <Label HorizontalContentAlignment="Center" DockPanel.Dock="Bottom">foo</Label>
        <Image Source="bar.png" />
    </DockPanel>
</Button>

Answer 1

Button 元素不会自动允许其内容填充整个 Button 区域。为此，您必须将 Horizo​​ntalContentAlignment 和 VerticalContentAlignment 属性都设置为“Stretch”。

<Button Height="150" Width="150"
        HorizontalContentAlignment="Stretch"
        VerticalContentAlignment="Stretch">
    <DockPanel LastChildFill="True">
        <Label HorizontalContentAlignment="Center" DockPanel.Dock="Bottom">foo</Label>
        <Image Source="bar.png" />
    </DockPanel>
</Button>

Answer 2

You most likely need to tell the DockPanel to expand to its Height to the parent container:

<Button x:Name="button" Height="150" Width="150">
  <DockPanel LastChildFill="True" Height="{Binding Height, ElementName=button}">
    <Image DockPanel.Dock="Top" Source="bar.png" />
    <Label DockPanel.Dock="Bottom" HorizontalContentAlignment="Center" 
            VerticalAlignment="Bottom">foo</Label>
  </DockPanel>
</Button>

Answer 3

刚刚做了一个快速的实验

也许这有帮助？

<Grid>
   <Grid.RowDefinitions>
        <RowDefinition Height="64*"  />
         <RowDefinition Height="30"  />
   </Grid.RowDefinitions>
         <Image Source="bar.png" Stretch="UniformToFill"  Grid.Row="0" />
         <Label DockPanel.Dock="Bottom" Content="Foo" HorizontalAlignment="Center" Grid.Row="1" x:Name="Label1" VerticalAlignment="Bottom" ></Label>
</Grid>

如果尝试调整行高。