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>