Microsoft-ui-xaml: Proposal: Add ability to easily remove chevron from AppBarButton with flyout when not contained in an CommandBar

[knightmeister]

Proposal: Add ability to easily remove chevron from AppBarButton with flyout when not contained in an CommandBar

Summary

When adding AppBarButtons to a container other than an AppBar/CommandBar and there is an attached flyout, a chevron will be shown. This can be removed with great difficulty (see this SO question).

Rationale

Developers should not need to duplicate large swathes of XAML to remove the chevron. A property ShowFlyoutIndicator or similar should be exposed.

Functional Requirements

Add a property ShowFlyoutIndicator to AppBarButton to control whether the chevron is shown.

Important Notes

This issue can be replicated with the following XAML;

<Page
    x:Class="App2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App2"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <AppBarButton Icon="Accept" HorizontalAlignment="Right" Margin="0,0,0,0" VerticalAlignment="Center" Height="40" Grid.Column="0">
            <AppBarButton.Flyout>
                <Flyout >
                    <TextBlock>Here is some content</TextBlock>
                </Flyout>
            </AppBarButton.Flyout>
        </AppBarButton>
        <AppBarButton Icon="Add" HorizontalAlignment="Right" VerticalAlignment="Center" Height="40" Grid.Column="1">
            <AppBarButton.Flyout>
                <MenuFlyout>
                    <MenuFlyoutItem Text="Menu Item" />
                </MenuFlyout>
            </AppBarButton.Flyout>
        </AppBarButton>

    </Grid>
</Page>

It looks like this:

[jevansaks]

Could you use a different control here? Like Button (it has a Flyout property too). What's the motivation to use AppBarButton outside a CommandBar?

[knightmeister]

Could you use a different control here? Like Button (it has a Flyout property too). What's the motivation to use AppBarButton outside a CommandBar?

I could probably use a button; I wanted the appearance of AppBarButtons. I'm not using an AppBar as I'm laying them out in a grid.

[jevansaks]

Seems like we're missing IconButton or similar to handle this scenario.

[adrientetar]

Seems like we're missing IconButton or similar to handle this scenario.

Paint3D has a nice icon button with an animation that shows text when you hover, and more compact than AppBarButton:

That would make a great "IconButton" I think, I would use it if it can be open-sourced.