如何使AppBarToggleButton的Label覆盖整个控件并消除图标占位？

我之前也碰到过这个情况——默认的AppBarToggleButton会固定预留出图标的位置，哪怕你删掉Icon属性，那块空白区域还是会保留。要让Label完全覆盖整个按钮，得从修改它的控件模板入手，下面给你两种可行的方案：

方案一：自定义完整的ControlTemplate（推荐） #

直接重写模板，去掉图标容器，让Label的容器占满整个按钮空间，同时保留按钮的交互状态（悬停、按下、选中时的视觉反馈）。

先定义一个自定义样式：

<Style x:Key="LabelOnlyAppBarToggleButtonStyle" TargetType="AppBarToggleButton">
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="VerticalAlignment" Value="Top"/>
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="AppBarToggleButton">
                <Grid x:Name="Root" Width="Auto" Background="{TemplateBinding Background}"
                      MinHeight="{ThemeResource AppBarThemeMinHeight}">
                    <!-- 移除默认的IconPresenter，或者设置Visibility="Collapsed" -->
                    <!-- <IconPresenter x:Name="Icon" Width="20" Height="20" Margin="0,14,0,4" /> -->
                    
                    <!-- 让Label的容器横向拉伸，占满整个按钮 -->
                    <ContentPresenter x:Name="Content"
                                      Content="{TemplateBinding Label}"
                                      HorizontalAlignment="Stretch"
                                      VerticalAlignment="Center"
                                      Margin="16,0"
                                      TextWrapping="Wrap"
                                      AutomationProperties.AccessibilityView="Raw"/>

                    <!-- 保留按钮的交互状态视觉效果 -->
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Unchecked"/>
                            <VisualState x:Name="Checked">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltChromeWhiteBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Indeterminate"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后在使用AppBarToggleButton时应用这个样式：

<AppBarToggleButton Label="仅显示文本" Style="{StaticResource LabelOnlyAppBarToggleButtonStyle}" />

方案二：修改默认模板的局部元素 #

如果你不想完全重写模板，可以通过Blend提取默认的AppBarToggleButton模板，找到其中的IconPresenter控件，设置它的Visibility="Collapsed"，然后调整ContentPresenter的HorizontalAlignment="Stretch"和Margin属性，让文本占满整个按钮。

举个简化的修改示例：

<ControlTemplate TargetType="AppBarToggleButton">
    <Grid x:Name="Root" Width="Auto" Background="{TemplateBinding Background}">
        <!-- 隐藏图标容器 -->
        <IconPresenter x:Name="Icon" Width="20" Height="20" Margin="0,14,0,4" Visibility="Collapsed"/>
        <!-- 调整Label容器的布局 -->
        <ContentPresenter x:Name="Content"
                          Content="{TemplateBinding Label}"
                          HorizontalAlignment="Stretch"
                          VerticalAlignment="Center"
                          Margin="12,14"
                          AutomationProperties.AccessibilityView="Raw"/>
        <!-- 保留默认的VisualStates -->
        <!-- ... 这里复制默认的VisualState代码 ... -->
    </Grid>
</ControlTemplate>

关键说明 #

默认的AppBarToggleButton模板中，IconPresenter有固定的尺寸和边距，即使Icon为空，它依然会占据空间。所以我们要么直接移除这个元素，要么隐藏它，再让ContentPresenter（Label的容器）横向拉伸，填充整个按钮的宽度，这样就能实现仅显示Label且占满整个按钮的效果了。

内容的提问来源于stack exchange，提问作者siddiq shameer