在通用应用程序中将按钮文本内容居中

Question

我试图在我的通用应用程序中将按钮的文本内容居中，但这是我得到的：

这是我的代码：

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

我尝试使用 VerticalContentAlignment="Center"，但如您所见，我没有得到想要的结果感谢帮助

我的按钮样式：

<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

您在其中投入了太多精力，很可能 ButtonMenuStyle 有一些东西弄乱了您的布局。默认情况下 Button 的内容垂直居中。

我已经去掉了你所有不必要的对齐方式、不必要的边框（你甚至可以删除内部的 StackPanel）。我还在一个按钮上将字体大小更改为 8 以显示多个大小以证明它们都正确对齐。

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

编辑：当你发布你的样式时，我调查了它们。我强烈建议不要使用它们（因为它们会破坏一些东西），但如果你真的想使用它们，你也应该改变你的 ContentPresenter：

<ContentPresenter x:Name="Content" VerticalContentAlignment="Center" Content="{TemplateBinding Content}"/>

如果要修改按钮控件模板，请查看以下文件（第 2147 行）中的默认模板作为起点：

C:\Program Files (x86)\Windows Kits\DesignTime\CommonConfiguration\Neutral\UAP.0.10240.0\Generic\generic.xaml

在通用应用程序中将按钮文本内容居中

Center the Button Text Content in a universal app

xaml

win-universal-app

windows-10-universal