uwp命令行始终显示标签

时间:2017-06-09 10:58:17

标签: user-interface uwp commandbar

答案:

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

我在他的回答中实现了他在下面提供的风格,并在App.xaml中添加了这个:(我把高度改为66 - 对我来说更合适)

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

然后在我的CommandBar

Height="{StaticResource AppBarThemeCompactHeight}"

问题:

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

enter image description here

现在我只看到图标,下方没有标签。

Command Bar官方微软网站说:

  

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

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

1 个答案:

答案 0 :(得分:2)

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

Working demo

首先,使用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)。