How do I place a text over a image in a button in

Question

I want to create a button using a image as background and on top of the background I want to place my text.

I tried something like this:

<Button Style="{StaticResource ImageButtonStyle}">
    <StackPanel>
        <TextBlock Text="test"></TextBlock>
        <Image Source="ms-appx:///Skins/Images/buton.png" Stretch="None" />
    </StackPanel>
</Button>

The text will not be centered correctly.

<Button Style="{StaticResource ImageButtonStyle}">
    <StackPanel>
        <TextBlock Text="test"></TextBlock>
        <Label Padding="0">My Button Text</Label>
    </StackPanel>
</Button>

The control Label doesn't exists.

How do I center correctly my text on the image in my first attempt? Do you know a better way?

Answer 1

You should use a grid instade the stackpanel. Try something like this:

 <Button >
        <Grid>
            <Image Source="..." Stretch="None" />
            <TextBlock Text="test" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        </Grid>
  </Button>