您可以使用VisualState
AppBarButton 附带的来解决您的问题。
AppBarButton 有两种模式:normal
状态和overflow
状态。它在正常状态下显示圆角,在溢出状态下去除圆角。你可以这样写:
<Style TargetType="AppBarButton" x:Key="BasicAppButtonStyle">
<Setter Property="Background" Value="{ThemeResource AppBarButtonRevealBackground}" />
<Setter Property="Foreground" Value="{ThemeResource AppBarButtonForeground}" />
<Setter Property="BorderThickness" Value="{ThemeResource AppBarButtonRevealBorderThemeThickness}" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="Width" Value="Auto" />
<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
<Setter Property="AllowFocusOnInteraction" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="AppBarButton">
<Grid x:Name="Root" MinWidth="{TemplateBinding MinWidth}" MaxWidth="{TemplateBinding MaxWidth}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}" Margin="1,0">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullSize" />
<VisualState x:Name="Compact">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentViewbox" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonContentViewboxCompactMargin}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="LabelOnRight">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentViewbox" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonContentViewboxMargin}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="MinHeight">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarThemeCompactHeight}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="(Grid.Row)">
<DiscreteObjectKeyFrame KeyTime="0" Value="0" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="(Grid.Column)">
<DiscreteObjectKeyFrame KeyTime="0" Value="1" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="TextAlignment">
<DiscreteObjectKeyFrame KeyTime="0" Value="Left" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonTextLabelOnRightMargin}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="LabelCollapsed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentRoot" Storyboard.TargetProperty="MinHeight">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarThemeCompactHeight}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextLabel" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentViewbox" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource AppBarButtonContentViewboxCompactMargin}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Overflow">
<VisualState.Setters>
<Setter Target="ContentRoot.MinHeight" Value="0" />
<Setter Target="ContentViewbox.Visibility" Value="Collapsed" />
<Setter Target="TextLabel.Visibility" Value="Collapsed" />
<Setter Target="OverflowTextLabel.Visibility" Value="Visible" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="OverflowWithToggleButtons">
<VisualState.Setters>
<Setter Target="ContentRoot.MinHeight" Value="0" />
<Setter Target="ContentViewbox.Visibility" Value="Collapsed" />
<Setter Target="TextLabel.Visibility" Value="Collapsed" />
<Setter Target="OverflowTextLabel.Visibility" Value="Visible" />
<Setter Target="OverflowTextLabel.Margin" Value="38,0,12,0" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="OverflowWithMenuIcons">
<VisualState.Setters>
<Setter Target="ContentRoot.MinHeight" Value="0" />
<Setter Target="ContentViewbox.HorizontalAlignment" Value="Left" />
<Setter Target="ContentViewbox.VerticalAlignment" Value="Center" />
<Setter Target="ContentViewbox.Width" Value="16" />
<Setter Target="ContentViewbox.Height" Value="16" />
<Setter Target="ContentViewbox.Margin" Value="12,0,12,0" />
<Setter Target="TextLabel.Visibility" Value="Collapsed" />
<Setter Target="OverflowTextLabel.Visibility" Value="Visible" />
<Setter Target="OverflowTextLabel.Margin" Value="38,0,12,0" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="OverflowWithToggleButtonsAndMenuIcons">
<VisualState.Setters>
<Setter Target="ContentRoot.MinHeight" Value="0" />
<Setter Target="ContentViewbox.HorizontalAlignment" Value="Left" />
<Setter Target="ContentViewbox.VerticalAlignment" Value="Center" />
<Setter Target="ContentViewbox.Width" Value="16" />
<Setter Target="ContentViewbox.Height" Value="16" />
<Setter Target="ContentViewbox.Margin" Value="38,0,12,0" />
<Setter Target="TextLabel.Visibility" Value="Collapsed" />
<Setter Target="OverflowTextLabel.Visibility" Value="Visible" />
<Setter Target="OverflowTextLabel.Margin" Value="76,0,12,0" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Target="Root.CornerRadius" Value="20"/>
</VisualState.Setters>
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="ContentRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="Root.CornerRadius" Value="20"/>
<Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
<Setter Target="Root.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPointerOver}" />
<Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
</VisualState.Setters>
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="Root.CornerRadius" Value="15"/>
<Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
<Setter Target="Root.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPressed}" />
<Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
</VisualState.Setters>
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Target="Root.CornerRadius" Value="15"/>
<Setter Target="Root.Background" Value="{ThemeResource AppBarButtonRevealBackgroundDisabled}" />
<Setter Target="Border.BorderBrush" Value="{ThemeResource AppBarButtonRevealBorderBrushDisabled}" />
<Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}" />
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}" />
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundDisabled}" />
<Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundDisabled}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="OverflowNormal">
<VisualState.Setters>
<Setter Target="Root.CornerRadius" Value="0"/>
</VisualState.Setters>
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="ContentRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="OverflowPointerOver">
<VisualState.Setters>
<Setter Target="Root.CornerRadius" Value="0"/>
<Setter Target="Root.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPointerOver}" />
<Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
<Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundPointerOver}" />
</VisualState.Setters>
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="ContentRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="OverflowPressed">
<VisualState.Setters>
<Setter Target="Root.CornerRadius" Value="0"/>
<Setter Target="Root.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPressed}" />
<Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
<Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
<Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
<Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundPressed}" />
</VisualState.Setters>
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="ContentRoot" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="InputModeStates">
<VisualState x:Name="InputModeDefault" />
<VisualState x:Name="TouchInputMode">
<VisualState.Setters>
<Setter Target="OverflowTextLabel.Padding" Value="{ThemeResource AppBarButtonOverflowTextTouchMargin}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="GameControllerInputMode">
<VisualState.Setters>
<Setter Target="OverflowTextLabel.Padding" Value="{ThemeResource AppBarButtonOverflowTextTouchMargin}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="KeyboardAcceleratorTextVisibility">
<VisualState x:Name="KeyboardAcceleratorTextCollapsed" />
<VisualState x:Name="KeyboardAcceleratorTextVisible">
<VisualState.Setters>
<Setter Target="KeyboardAcceleratorTextLabel.Visibility" Value="Visible" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeMinHeight}" Margin="-1,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Viewbox x:Name="ContentViewbox"
Height="{ThemeResource AppBarButtonContentHeight}"
Margin="{ThemeResource AppBarButtonContentViewboxCollapsedMargin}"
HorizontalAlignment="Stretch"
AutomationProperties.AccessibilityView="Raw" >
<ContentPresenter x:Name="Content"
Content="{TemplateBinding Icon}"
Foreground="{TemplateBinding Foreground}"/>
</Viewbox>
<TextBlock x:Name="TextLabel"
Grid.Row="1"
Text="{TemplateBinding Label}"
Foreground="{TemplateBinding Foreground}"
FontSize="12"
FontFamily="{TemplateBinding FontFamily}"
TextAlignment="Center"
TextWrapping="Wrap"
Margin="{ThemeResource AppBarButtonTextLabelMargin}"
AutomationProperties.AccessibilityView="Raw" />
<TextBlock x:Name="OverflowTextLabel"
Text="{TemplateBinding Label}"
Foreground="{TemplateBinding Foreground}"
FontSize="15"
FontFamily="{TemplateBinding FontFamily}"
TextAlignment="Left"
TextTrimming="Clip"
TextWrapping="NoWrap"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Margin="12,0,12,0"
Padding="{ThemeResource AppBarButtonOverflowTextLabelPadding}"
Visibility="Collapsed"
AutomationProperties.AccessibilityView="Raw" />
<TextBlock x:Name="KeyboardAcceleratorTextLabel"
Grid.Column="1"
Style="{ThemeResource CaptionTextBlockStyle}"
Text="{TemplateBinding KeyboardAcceleratorTextOverride}"
MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KeyboardAcceleratorTextMinWidth}"
Margin="24,0,12,0"
Foreground="{ThemeResource AppBarButtonKeyboardAcceleratorTextForeground}"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Visibility="Collapsed"
AutomationProperties.AccessibilityView="Raw" />
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" Grid.RowSpan="2" Grid.ColumnSpan="2" Margin="1,0" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
用法
<AppBarButton Style="{StaticResource BasicAppButtonStyle}" Icon="Shuffle" Label="Shuffle"/>
此致。