Question

我希望将文本锚定在按钮的最底部，无论图像宽高比如何。
我希望图像能够伸展以适应按钮中的剩余空间。

此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区域。为此，您必须将HorizontalContentAlignment和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

您很可能需要告诉DockPanel将Height扩展到父容器：

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

如果尝试调整行高。

WPF图像按钮，文本锚定在按钮的底部

3 个答案: