user-interface - uwp 命令栏总是显示标签

Question

回答:

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

我实现了他在下面的回答中提供的样式，并且正如他所说，在 App.xaml 中添加了这个:(我将高度更改为 66 - 更适合我)

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

然后在我的 CommandBar

Height="{StaticResource AppBarThemeCompactHeight}"

---

问题:

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

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

Command Bar 的 Microsoft 官方网站是这样说的:

The app bar button controls are characterized by an icon and associated label. They have two sizes; normal and compact. By default, the text label is shown. When the IsCompact property is set to true, the text label is hidden. When used in a CommandBar control, the command bar overwrites the button's IsCompact property automatically as the command bar is opened and closed.

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

Answer 1

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

首先使用Blend生成默认样式，然后定位到Compact视觉状态，将Visibility目标值形式Collapsed改为可见。这样无论 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)。