uwp 命令栏总是显示标签答案

【问题标题】：uwp commandbar always show labeluwp 命令栏总是显示标签
【发布时间】：2021-06-22 12:52:11
【问题描述】：

答案：

感谢Justin XL 我能够解决我的问题。

我在他的回答中实现了他在下面提供的样式，并如他所说，在 App.xaml 中添加了这一点：（我将高度更改为 66 - 更适合我）

<Application.Resources>
        <x:Double x:Key="AppBarThemeCompactHeight">66</x:Double>
    </Application.Resources>

然后这个在我的CommandBar

Height="{StaticResource AppBarThemeCompactHeight}"

问题：

我希望我的命令栏始终以标准模式显示其标签。我有辅助命令，所以IsOpen=true 不适合我。

现在我只看到图标，下面没有标签。

微软官方的命令栏网站是这样说的：

应用栏按钮控件的特点是图标和相关标签。它们有两种尺寸；正常而紧凑。默认，显示文本标签。当 IsCompact 属性设置为 true 时，文本标签被隐藏。在 CommandBar 控件中使用时，命令栏自动覆盖按钮的 IsCompact 属性随着命令栏的打开和关闭。

这有点问题。有什么想法可以让IsCompact=False 工作吗？

【问题讨论】：

标签： user-interface uwp commandbar

【解决方案1】：

这可以通过编辑AppBarButton的默认样式来完成。

首先使用Blend生成默认样式，然后定位到Compact视觉状态，将Visibility目标值从Collapsed改为Visible。这样无论IsCompact 的值是什么，标签总是可见的。

<Style x:Key="FullHeightAppBarButtonStyle"
               TargetType="AppBarButton">
            <Setter Property="Background"
                    Value="{ThemeResource AppBarButtonBackground}" />
            <Setter Property="Foreground"
                    Value="{ThemeResource AppBarButtonForeground}" />
            <Setter Property="BorderBrush"
                    Value="{ThemeResource AppBarButtonBorderBrush}" />
            <Setter Property="HorizontalAlignment"
                    Value="Left" />
            <Setter Property="VerticalAlignment"
                    Value="Top" />
            <Setter Property="FontFamily"
                    Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontWeight"
                    Value="Normal" />
            <Setter Property="Width"
                    Value="68" />
            <Setter Property="UseSystemFocusVisuals"
                    Value="True" />
            <Setter Property="AllowFocusOnInteraction"
                    Value="False" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="AppBarButton">
                        <Grid x:Name="Root"
                              BorderBrush="{TemplateBinding BorderBrush}"
                              BorderThickness="{TemplateBinding BorderThickness}"
                              Background="{TemplateBinding Background}"
                              MaxWidth="{TemplateBinding MaxWidth}"
                              MinWidth="{TemplateBinding MinWidth}">
                            <Grid.Resources>
                                <Style x:Name="LabelOnRightStyle"
                                       TargetType="AppBarButton">
                                    <Setter Property="Width"
                                            Value="NaN" />
                                </Style>
                            </Grid.Resources>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="ApplicationViewStates">
                                    <VisualState x:Name="FullSize" />
                                    <VisualState x:Name="Compact">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
                                                                           Storyboard.TargetName="TextLabel">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Visible" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="LabelOnRight">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin"
                                                                           Storyboard.TargetName="Content">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="12,14,0,14" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="MinHeight"
                                                                           Storyboard.TargetName="ContentRoot">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource AppBarThemeCompactHeight}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)"
                                                                           Storyboard.TargetName="TextLabel">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="0" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)"
                                                                           Storyboard.TargetName="TextLabel">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="1" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="TextAlignment"
                                                                           Storyboard.TargetName="TextLabel">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Left" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin"
                                                                           Storyboard.TargetName="TextLabel">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="8,15,12,17" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="LabelCollapsed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="MinHeight"
                                                                           Storyboard.TargetName="ContentRoot">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource AppBarThemeCompactHeight}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
                                                                           Storyboard.TargetName="TextLabel">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Collapsed" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Overflow">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
                                                                           Storyboard.TargetName="ContentRoot">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Collapsed" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
                                                                           Storyboard.TargetName="OverflowTextLabel">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Visible" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="OverflowWithToggleButtons">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
                                                                           Storyboard.TargetName="ContentRoot">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Collapsed" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
                                                                           Storyboard.TargetName="OverflowTextLabel">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="Visible" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin"
                                                                           Storyboard.TargetName="OverflowTextLabel">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="38,0,12,0" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                           Storyboard.TargetName="Root">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource AppBarButtonBackgroundPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                           Storyboard.TargetName="Root">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource AppBarButtonBorderBrushPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                           Storyboard.TargetName="Content">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                           Storyboard.TargetName="TextLabel">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                           Storyboard.TargetName="OverflowTextLabel">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                           Storyboard.TargetName="Root">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource AppBarButtonBackgroundPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                           Storyboard.TargetName="Root">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource AppBarButtonBorderBrushPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                           Storyboard.TargetName="Content">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource AppBarButtonForegroundPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                           Storyboard.TargetName="TextLabel">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource AppBarButtonForegroundPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                           Storyboard.TargetName="OverflowTextLabel">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource AppBarButtonForegroundPressed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerDownThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                           Storyboard.TargetName="Root">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource AppBarButtonBackgroundDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                           Storyboard.TargetName="Root">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource AppBarButtonBorderBrushDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                           Storyboard.TargetName="Content">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource AppBarButtonForegroundDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                           Storyboard.TargetName="TextLabel">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource AppBarButtonForegroundDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                           Storyboard.TargetName="OverflowTextLabel">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{ThemeResource AppBarButtonForegroundDisabled}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="InputModeStates">
                                    <VisualState x:Name="InputModeDefault" />
                                    <VisualState x:Name="TouchInputMode">
                                        <VisualState.Setters>
                                            <Setter Target="OverflowTextLabel.Padding"
                                                    Value="0,11,0,13" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState x:Name="GameControllerInputMode">
                                        <VisualState.Setters>
                                            <Setter Target="OverflowTextLabel.Padding"
                                                    Value="0,11,0,13" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid x:Name="ContentRoot"
                                  MinHeight="{ThemeResource AppBarThemeMinHeight}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <ContentPresenter x:Name="Content"
                                                  AutomationProperties.AccessibilityView="Raw"
                                                  Content="{TemplateBinding Icon}"
                                                  Foreground="{TemplateBinding Foreground}"
                                                  HorizontalAlignment="Stretch"
                                                  Height="20"
                                                  Margin="0,14,0,4" />
                                <TextBlock x:Name="TextLabel"
                                           Foreground="{TemplateBinding Foreground}"
                                           FontSize="12"
                                           FontFamily="{TemplateBinding FontFamily}"
                                           Margin="2,0,2,6"
                                           Grid.Row="1"
                                           TextAlignment="Center"
                                           TextWrapping="Wrap"
                                           Text="{TemplateBinding Label}" />
                            </Grid>
                            <TextBlock x:Name="OverflowTextLabel"
                                       Foreground="{TemplateBinding Foreground}"
                                       FontSize="15"
                                       FontFamily="{TemplateBinding FontFamily}"
                                       HorizontalAlignment="Stretch"
                                       Margin="12,0,12,0"
                                       Padding="0,5,0,7"
                                       TextAlignment="Left"
                                       TextWrapping="NoWrap"
                                       Text="{TemplateBinding Label}"
                                       TextTrimming="Clip"
                                       Visibility="Collapsed"
                                       VerticalAlignment="Center" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

将上述样式应用于所有按钮后，您还需要做一件事。由于 compact 模式下CommandBar 的高度，目前标签被切断。您将需要增加它以便标签适合。有一种简单的方法可以做到这一点，正如我在我的回答 here 中详细说明的那样。在您的情况下，您需要将高度设置为76（因为AppBarButton 的高度将为76）。

【讨论】：