WPF：按钮模板中图像下的文本

Posted 2023-02-22

【中文标题】WPF：按钮模板中图像下的文本

【英文标题】：WPF: Text under image in button template

【发布时间】：2017-11-16 05:43:38

【问题描述】：

我正在尝试使用堆栈面板将文本放在按钮模板内的图像下，但它不起作用。只有图像可见，文本不可见。使用模板，我可以将图像作为背景填充所有按钮。见下文：

            <Button Name="btnAdd" Height="36" Width="36" Click="btnAdd_Click" HorizontalAlignment="Center" Margin="10">
                <Button.Template>
                    <ControlTemplate>     
                        <StackPanel Orientation="Vertical">
                           <Image Source="/MyPath/Add.png"/>                               
                           <Label Padding="0">My Button Text</Label>
                        </StackPanel>
                    </ControlTemplate>
                </Button.Template>                    
            </Button>

如何使我的标签在图像下方居中显示并以小字体显示？

【参考方案1】：

你有两个问题。您将 Button 的 Height 和 Width 设置为 36，但文本“我的按钮文本”比 36 宽。如果 Add.png 高于 36 像素，您将没有任何空间用于显示文本。

这就是为什么我建议设置 Image Width 和 Height 而不是 Button Width 和 Height。

为了在图像下方的中心显示文本，您必须将Label 的HorizontalAlignment 属性设置为“Center”。

结果可能是这样的

<Button>
    <Button.Template>
        <ControlTemplate>
            <StackPanel Orientation="Vertical">
                <Image Source="/MyPath/Add.png" 
                       Height="36" 
                       Width="36"/>
                <Label HorizontalAlignment="Center"
                       Content="My Button Text" />
            </StackPanel>
        </ControlTemplate>
    </Button.Template>
</Button>

更短的形式

<Button>
    <StackPanel Orientation="Vertical">
        <Image Source="/MyPath/Add.png" 
               Height="36" 
               Width="36"/>
        <Label HorizontalAlignment="Center"
               Content="My Button Text" />
    </StackPanel>
</Button>