WPF: Text under image in button template

Question

I am trying to put a text under an image within button template using a stackpanel but it is not working. Only image is visible, text is not visible. Using template, I can but image as background filling all the button. See below:

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

How can I do to make my label appear centered under the image and in a small font?

Answer 1

You have 2 problems. You set the Height and Width of your Button to 36 but the text "My Button Text" is wider then 36. And if you Add.png is higher then 36 pixel you wont have any space left for displaying the text.

That's why I would suggest setting the Image Width and Height instead of the Button Width and Height.

For displaying the text in the center under the image you should have to set the HorizontalAlignment property of the Label to "Center".

The result could look like this

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

And in a shorter form

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