Center the Button Text Content in a universal app - xaml

Question

I am trying to center the text Content of a Button in Center,in my universal app,but this is what I get:
and this is my code:
<StackPanel Orientation="Vertical" >
<Border VerticalAlignment="Center" Height="40" >
<Button Background="Transparent" Content="Resultats" FontSize="16" VerticalAlignment="Stretch" Foreground="#727271" x:Name="res" Style="{Binding Source={StaticResource ButtontopStyle}}" HorizontalAlignment="Stretch" Click="res_Click" HorizontalContentAlignment="Left" VerticalContentAlignment="Center" Height="40"/>
</Border>
<StackPanel x:Name="stackVisible" Orientation="Vertical" >
<Border Margin="0" >
<Button Background="Transparent" Content="Tous les résultats" FontSize="14" VerticalAlignment="Top" Foreground="#727271" Margin="0" x:Name="ttres" Style="{Binding Source={StaticResource ButtonMenuStyle}}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left" Padding="10" VerticalContentAlignment="Center" Height="40"/>
</Border>
<Border>
<Button Background="Transparent" Content="Recherches Avancées" FontSize="14" VerticalAlignment="Top" Foreground="#727271" Margin="0" x:Name="rechavan" HorizontalAlignment="Stretch" Style="{Binding Source={StaticResource ButtonMenuStyle}}" HorizontalContentAlignment="Left" Padding="10" VerticalContentAlignment="Center" Height="40"/>
</Border>
</StackPanel>
</StackPanel>
I tried to use VerticalContentAlignment="Center",but like you see,I didn't get the result that I want
thanks for help
my styles for buttons:
<Style x:Key="ButtonMenuStyle" TargetType="Button">
<Setter Property="Foreground" Value="#e6e6e6"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Border" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Border" />
<ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Rectangle x:Name="Border" Stroke="Transparent" Fill="Transparent" Margin="0"/>
<ContentPresenter x:Name="Content"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtontopStyle" TargetType="Button">
<Setter Property="Foreground" Value="#e6e6e6"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Button" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Button" />
<ColorAnimation Duration="0" To="#e6e6e6" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Rectangle x:Name="Button" Stroke="Transparent" Fill="Transparent" Margin="0"/>
<ContentPresenter x:Name="Content"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Answer 1

You're putting too much effort into it, and most likely the ButtonMenuStyle has something that messes up your layout. By default the content of a Button is vertically centered.
I've thrown out all your unnecessary alignments, unnecessary borders (and you could even remove the inner StackPanel as well). I've also changed the font size to 8 on one button to show multiple sizes to prove they're all aligned correctly.
<StackPanel Orientation="Vertical">
<Button Background="Transparent" Content="Resultats" FontSize="16" VerticalAlignment="Stretch" Foreground="#727271" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left" Height="40"/>
<StackPanel Orientation="Vertical" >
<Button Background="Transparent" Content="Tous les résultats" FontSize="14" Foreground="#727271" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left" Height="40"/>
<Button Background="Transparent" Content="Recherches Avancées" FontSize="8" Foreground="#727271" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left" Height="40" />
</StackPanel>
</StackPanel>
Edit: as you posted your styles, I looked into them. I'd strongly advise against using them (as they break several things), but if you really want to use them, you should change your ContentPresenter too:
<ContentPresenter x:Name="Content" VerticalContentAlignment="Center" Content="{TemplateBinding Content}"/>
If you want to modify the button control template, look at default template in following file (line 2147) for a starting point:
C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic\generic.xaml