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

Question

我想在按钮模板内使用一个堆栈面板，但它不工作的图像下的文本。只有图像可见，文字不可见。使用模板，我可以将图像作为填充所有按钮的背景。见下：

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

我该怎么做才能使我的标签出现在图像和小字体下居中？

Answer 1

您有2个问题。您将Button的Height和Width设置为36，但文本“我的按钮文本”的宽度为36。如果Add.png高于36像素，则不会显示文本。

这就是为什么我会建议设置的ImageWidth和Height代替ButtonWidth和Height。

要在图像下方显示中心的文字，您应该将Label的HorizontalAlignment属性设置为“中心”。

结果可能看起来像这样

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