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>

Answer 1

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>