答案:
感谢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官方微软网站说:
应用栏按钮控件的特点是图标和 相关标签。它们有两种尺寸;正常而紧凑。默认情况下, 显示文本标签。当IsCompact属性设置为true时, 文本标签是隐藏的。当在CommandBar控件中使用时, 命令栏会自动覆盖按钮的IsCompact属性 当命令栏打开和关闭时。
这有点问题。我有什么想法IsCompact=False
可以工作吗?
答案 0 :(得分:2)
这可以通过编辑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
)。