Remove the chevron/arrow added to the AppBarButton when a Flyout is attached

Question

I have two AppBarButton which are placed in a grid. They display as intended when there is no flyout attached, however at the point I attach a flyout the system is adding a chevron/arrow to the right of the icon.

How can I remove chevron/arrow? I realise this may be for usability purposes, but given the ... implies a menu and the other is displaying a Flyout with a text box, I feel these are redundant.

XAML is as follows:

            <AppBarButton Icon="NewFolder" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Center" Height="40">
                <AppBarButton.Flyout>
                    <Flyout>
                        <!-- Removed for brevity -->
                    </Flyout>
                </AppBarButton.Flyout>
            </AppBarButton>

Does the following answer work? – Nico Zhu - MSFT Mar 08 '19 at 07:18 — Nico Zhu - MSFT, Mar 08 '19 at 07:18

Nico Zhu - MSFT · Accepted Answer · 2019-03-11T07:25:17.967

The chevron is FontIcon and name is SubItemChevron in AppBarButton control. It's Foreground is MenuFlyoutSubItemChevron. So the easy way is make the Foreground transparent, you could custom MenuFlyoutSubItemChevron like the following.

<StaticResource x:Key="MenuFlyoutSubItemChevron" ResourceKey="SystemControlDisabledTransparentBrush" />

The above way just make FontIcon transparent but not hidden. If you want to hide FontIcon you need custom AppBarButton style. Find HasFlyout VisualState and change SubItemChevron.Visibility to Collapsed.

<VisualStateGroup x:Name="FlyoutStates">
    <VisualState x:Name="NoFlyout" />
    <VisualState x:Name="HasFlyout">
        <VisualState.Setters>
            <Setter Target="SubItemChevron.Visibility" Value="Collapsed" />
        </VisualState.Setters>
    </VisualState>    
</VisualStateGroup>

Update

<Style 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="{StaticResource UseSystemFocusVisuals}" />
    <Setter Property="AllowFocusOnInteraction" Value="False" />
    <Setter Property="KeyboardAcceleratorPlacementMode" Value="Hidden" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="AppBarButton">
                <Grid x:Name="Root"
                    MinWidth="{TemplateBinding MinWidth}"
                    MaxWidth="{TemplateBinding MaxWidth}"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    CornerRadius="{TemplateBinding CornerRadius}" >

                    <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>
                                </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="{StaticResource 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>
                                </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">

                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="OverflowTextLabel" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="PointerOver">
                                <VisualState.Setters>
                                    <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonBackgroundPointerOver}" />
                                    <Setter Target="Root.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushPointerOver}" />
                                    <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="OverflowTextLabel" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="Pressed">
                                <VisualState.Setters>
                                    <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonBackgroundPressed}" />
                                    <Setter Target="Root.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushPressed}" />
                                    <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="OverflowTextLabel" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="Disabled">
                                <VisualState.Setters>
                                    <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonBackgroundDisabled}" />
                                    <Setter Target="Root.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushDisabled}" />
                                    <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">

                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="ContentRoot" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="OverflowPointerOver">
                                <VisualState.Setters>
                                    <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonBackgroundPointerOver}" />
                                    <Setter Target="Root.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushPointerOver}" />
                                    <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}" />
                                    <Setter Target="SubItemChevron.Foreground" Value="{ThemeResource AppBarButtonSubItemChevronForegroundPointerOver}" />
                                </VisualState.Setters>

                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="ContentRoot" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="OverflowPressed">
                                <VisualState.Setters>
                                    <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonBackgroundPressed}" />
                                    <Setter Target="Root.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushPressed}" />
                                    <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}" />
                                    <Setter Target="SubItemChevron.Foreground" Value="{ThemeResource AppBarButtonSubItemChevronForegroundPressed}" />
                                </VisualState.Setters>

                                <Storyboard>
                                    <PointerDownThemeAnimation Storyboard.TargetName="ContentRoot" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="OverflowSubMenuOpened">
                                <VisualState.Setters>
                                    <Setter Target="Root.Background" Value="{ThemeResource AppBarButtonBackgroundSubMenuOpened}" />
                                    <Setter Target="Root.BorderBrush" Value="{ThemeResource AppBarButtonBorderBrushSubMenuOpened}" />
                                    <Setter Target="Content.Foreground" Value="{ThemeResource AppBarButtonForegroundSubMenuOpened}" />
                                    <Setter Target="TextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundSubMenuOpened}" />
                                    <Setter Target="OverflowTextLabel.Foreground" Value="{ThemeResource AppBarButtonForegroundSubMenuOpened}" />
                                    <Setter Target="KeyboardAcceleratorTextLabel.Foreground" Value="{ThemeResource AppBarButtonKeyboardAcceleratorTextForegroundSubMenuOpened}" />
                                    <Setter Target="SubItemChevron.Foreground" Value="{ThemeResource AppBarButtonSubItemChevronForegroundSubMenuOpened}" />
                                </VisualState.Setters>

                                <Storyboard>
                                    <PointerUpThemeAnimation 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="{StaticResource AppBarButtonOverflowTextTouchMargin}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="GameControllerInputMode">
                                <VisualState.Setters>
                                    <Setter Target="OverflowTextLabel.Padding" Value="{StaticResource 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>
                        <VisualStateGroup x:Name="FlyoutStates">
                            <VisualState x:Name="NoFlyout" />
                            <VisualState x:Name="HasFlyout">
                                <VisualState.Setters>
                                    <Setter Target="SubItemChevron.Visibility" Value="Collapsed" />
                                </VisualState.Setters>
                            </VisualState>

                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeMinHeight}">

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Viewbox x:Name="ContentViewbox"
                            Height="20"
                            Margin="{ThemeResource AppBarButtonContentViewboxCollapsedMargin}"
                            HorizontalAlignment="Stretch"
                            AutomationProperties.AccessibilityView="Raw" >
                            <ContentPresenter x:Name="Content"
                                Height="20"
                                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="2,0,2,6"
                            AutomationProperties.AccessibilityView="Raw" />
                        <TextBlock x:Name="OverflowTextLabel"
                            Text="{TemplateBinding Label}"
                            Foreground="{TemplateBinding Foreground}"
                            FontFamily="{TemplateBinding FontFamily}"
                            TextAlignment="Left"
                            TextTrimming="Clip"
                            TextWrapping="NoWrap"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Center"
                            Margin="12,0,12,0"
                            Padding="{StaticResource 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" />
                        <FontIcon x:Name="SubItemChevron"
                            Grid.Column="2"
                            Glyph="&#xE0E3;"
                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
                            FontSize="12"
                            AutomationProperties.AccessibilityView="Raw"
                            Foreground="{ThemeResource MenuFlyoutSubItemChevron}"
                            Margin="12,0,12,0"
                            MirroredWhenRightToLeft="True"
                            Visibility="Collapsed" />

                    </Grid>

                </Grid>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Thanks for the answer. I need to remove the item (i.e. the space occupied needs to go), which means the second part. "Find `HasFlyout` VisualState..." where do I find that? — Sam, Mar 11 '19 at 06:41
You could get the style in the generic.xaml file. For get it you could press F12 in this line ``. — Nico Zhu - MSFT, Mar 11 '19 at 06:44
For costuming it, you need copy complete `AppBarButton` style and modify the `VisualState` like above, if you can not find it, I will post the complete style. — Nico Zhu - MSFT, Mar 11 '19 at 06:46
What I really need is for the answer to be edited with the exact steps to hide the chevrons (i.e. the second part of your answer). Sorry, it's too vague at the moment. — Sam, Mar 11 '19 at 07:16
@Sam, I have add the complete appbarbutton style, you could use it directly — Nico Zhu - MSFT, Mar 11 '19 at 07:25
Thanks, I have it working by pasting all of that into the Page.Resources. I am overriding a lot of built in behaviour, is there a bare minimum that I can do? Also, can you please suggest where I can submit a change for this because I think this should be a property on the AppBarButton itself and should not require changes like this to remove. — Sam, Mar 11 '19 at 20:52
Yep, you are right, but appbarbutton does not provide such property to hide chevron icon. So you need to copy the complete style and edit the `HasFlyout` visual state. And this will not override the default behavior, if you don't want to all appbarbutton render this style, you could give the style separate `x:key` such as `customAppbarbutton`. — Nico Zhu - MSFT, Mar 12 '19 at 08:31
This causes issues if your app supports back to older versions of windows such as 1709 or older. This is a big problem. You can't target 1809 because the new default styles cause issues and you can support back to 1709 if you do... — tony.adx, May 08 '19 at 14:06
Copying the whole style and modifying it works on 1909. But my app supports backwards up to 1709. Testing on an 1803 still crashes. There needs to be a way to hide that chevron as Sam suggested. — Olumide Oyetoke, Jan 25 '20 at 20:34

Remove the chevron/arrow added to the AppBarButton when a Flyout is attached

1 Answers1