The width of StackPanel inside the button is very narrow.(WPF) - wpf

Question

I want to make a button with an image similar to the following:
For which I have written the following in xaml:
<Button
Style="{DynamicResource BotonRedondo2}"
Width ="AUTO"
Cursor="Hand"
Background="#3b5998"
Grid.Column="0">
<StackPanel Width ="Auto" Orientation="Horizontal" >
<Image HorizontalAlignment="Left" Source="/Test;component/Imagenes/face.png"/>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="LOGIN WITH XXXXX" />
<StackPanel>
</Button>
But the result is as follows:
The width of the StackPanel does not match the width of the button.
Any suggestions on how to solve the problem?
Comments or questions are welcome
UPDATE
Maybe I should indicate that the button is in a column of a grid as follows:
<Grid
Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button
Style="{DynamicResource BotonRedondo2}"
Width ="AUTO"
Cursor="Hand"
Background="#3b5998"
Grid.Column="0">
<StackPanel Width ="Auto" Orientation="Horizontal" >
<Image HorizontalAlignment="Left" Source="/Test;component/Imagenes/face.png"/>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="LOGIN WITH XXXXX" />
</StackPanel>
</Button>
<Button
Style="{DynamicResource BotonRedondo2}"
Grid.Column="1"
Width ="Auto"
Background="Orange"
Content="LOGIN2"
Margin="3"/>
</Grid>
If I remove "Auto", the button looks like this:
UPDATE
The style that applies to the button is as follows:
<Style TargetType="Button" x:Key="BotonRedondo2">
<Setter Property="Background" Value="Blue"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Height" Value="35"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border BorderThickness="0"
Background="{TemplateBinding Background}"
CornerRadius="4">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Answer 1

StackPanel in Horizontal orientation stacks items next to each other. It basically doesn't care about the HorizontalAlignment of items inside it.
You can use a Grid instead:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" HorizontalAlignment="Left" Source="/Test;component/Imagenes/face.png"/>
<TextBlock Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Text="LOGIN WITH XXXXX" />
</Grid>
The above will give you the desired look.

Answer 2

You need to remove Width="Auto" from the Button and to set Button's property HorizontalContentAlignment="Stretch".
Also, consider using DockPanel or Grid instead of StackPanel:
<Button HorizontalContentAlignment="Stretch">
<DockPanel>
<Image Source="/Test;component/Imagenes/face.png"/>
<TextBlock
VerticalAlignment="Center"
HorizontalAlignment="Center"
Text="LOGIN WITH XXXXX" />
</DockPanel>
</Button>

Answer 3

In the style of the button it should be written like this:
CornerRadius="4">
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center"/>