如何对齐图像和文本？ XAML

Question

So I have a few buttons on my project and I would like to align the images and the text so that it looks something like this. (Made in Photoshop)

And this is what mine looks like

What would be the propper way to accomplish this?

XAML

<Button x:Name="BtnPlay" Width="Auto" Background="Transparent" BorderThickness="0" Height="35"
                Margin="-1,69,687,262" Style="{DynamicResource MenuButtonStyle}">
            <StackPanel Orientation="Horizontal" Width="89">
                <Image Source="Icons/newPower.png" Width="30" Height="27" />
                <TextBlock FontWeight="Bold" Foreground="White" Text="Play" VerticalAlignment="Center"
                           Margin="3,-1,3,-2" Height="18" Width="32" />
            </StackPanel>
        </Button>

        <Button x:Name="BtnSettings" Width="Auto" Background="Transparent" BorderThickness="0" Height="35"
                Margin="0,265,686,66" Style="{DynamicResource MenuButtonStyle}">
            <StackPanel Orientation="Horizontal">
                <Image Source="Icons/newWrench.png" Width="20" Height="20" />
                <TextBlock FontWeight="Bold" Foreground="White" Text="Settings" VerticalAlignment="Center"
                           Margin="3,-1,3,3" />
            </StackPanel>
        </Button>
        <Button x:Name="BtnUsers" Width="Auto" Background="Transparent" BorderThickness="0" Height="35"
                Margin="1,139,687,191" Style="{DynamicResource MenuButtonStyle}">
            <StackPanel Orientation="Horizontal">
                <Image Source="Icons/newUser.png" Width="20" Height="20" Margin="1,1,25,1" />
                <TextBlock FontWeight="Bold" Foreground="White" Text="Users" VerticalAlignment="Center"
                           Margin="3,-1,3,3" />
            </StackPanel>
        </Button>
        <Button x:Name="BtnPortforward" Width="Auto" Background="Transparent" BorderThickness="0" Height="35"
                Margin="1,104,687,226" Style="{DynamicResource MenuButtonStyle}">
            <StackPanel Orientation="Horizontal">
                <Image Source="Icons/newWorld.png" Width="20" Height="20" />
                <TextBlock FontWeight="Bold" FontSize="10" Foreground="White" Text="Portforward"
                           VerticalAlignment="Center" Margin="3,-1,3,3" />
            </StackPanel>
        </Button>

        <Button Name="BtnUpdate" Width="Auto" Background="Transparent" BorderThickness="0" Height="35"
                Margin="-1,331,686,0" Style="{DynamicResource MenuButtonStyle}">
            <StackPanel Orientation="Horizontal">
                <Image Source="Icons/newUpdate.png" Width="20" Height="20" />
                <TextBlock FontWeight="Bold" Foreground="White" Text="Update" VerticalAlignment="Center"
                           Margin="3,-1,3,3" />
            </StackPanel>
        </Button>

        <Label Content="Up to date!" Foreground="White" HorizontalAlignment="Left" Margin="10,305,0,0"
               VerticalAlignment="Top" />

Answer 1

Grid is more powerful then StackPanel and suited for more granular and complex designs/layouts

Exmaple

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="28" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="200" />
    </Grid.ColumnDefinitions>
    <Label Grid.Row="0" Grid.Column="0" Content="Name:"/>
    <Label Grid.Row="1" Grid.Column="0" Content="E-Mail:"/>
    <Label Grid.Row="2" Grid.Column="0" Content="Comment:"/>
    <TextBox Grid.Column="1" Grid.Row="0" Margin="3" />
    <TextBox Grid.Column="1" Grid.Row="1" Margin="3" />
    <TextBox Grid.Column="1" Grid.Row="2" Margin="3" />
    <Button Grid.Column="1" Grid.Row="3" HorizontalAlignment="Right" MinWidth="80" Margin="3" Content="Send"  />
</Grid>

Answer 2

You can use usercontrol.

<UserControl x:Class="StackoverflowTest.UserControl1"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:StackoverflowTest"
         mc:Ignorable="d" 
         d:DesignHeight="100" d:DesignWidth="300"
         Name="TestBtn">
<Button>
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
    <Image Grid.Column="0" Source="{Binding Path=Source,ElementName=TestBtn}"  />
        <TextBlock Grid.Column="1" Text="{Binding Path=CustomText,ElementName=TestBtn}" Background="Aqua" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</Button>

Code in usercontrol.cs(Add dependencyproperty)

    public UserControl1()
    {
        InitializeComponent();
    }

    public ImageSource Source
    {
        get { return (ImageSource)GetValue(SourceProperty); }
        set { SetValue(SourceProperty, value); }
    }

    public string CustomText
    {
        get { return (string)GetValue(textProperty); }
        set { SetValue(textProperty, value); }
    }

    public static readonly DependencyProperty SourceProperty =
    DependencyProperty.Register("Source", typeof(ImageSource), typeof(UserControl1));


    public static readonly DependencyProperty textProperty =
    DependencyProperty.Register("CustomText", typeof(string), typeof(UserControl1));
}

And you can easy to use this usercontrol.

<Grid>
    <local:UserControl1 x:Name="PlayBtn" Width="100" Height="30" Source="play.png" CustomText="Play" />
</Grid>