Add flyout support to NavigationViewItem

[vgromfeld]

Add flyout support to NavigationViewItem. It can either be done directly on NavigationViewItem or through a new NavigationViewButtonItem type;

Summary

We often need to add a "global"/primary action at the beginning of our navigation items.
We can add custom controls but they do not always integrate well in all display modes (top, left or compact). When a single action is needed, we can use a NavigationViewItem with SelectsOnInvoked="False" but when more is needed, it would be great to have the ability to automatically display a custom flyout. Basically having the same behaviors as Buttons.

Rationale

• Have an unified way to attach several actions to a navigation item
• Have an always coherent rendering without anything being cropped.

Scope

Capability	Priority
NavigationViewItem (or another sub control) have a FlyoutProperty that will accept a FlyoutBase instance	Must
NavigationViewItem should not be selectable when a flyout is attached (SelectsOnInvoked=False)	Should
NavigationViewItem should display a chevron when a flyout is attached	Should

Important Notes

I've attached a sample application showing the expected behavior using some tweaks.

<mux:NavigationView ItemInvoked="OnItemInvoked">
    <mux:NavigationView.MenuItems>
        <mux:NavigationViewItem
            x:Name="openMenuNavigationViewItem"
            FlyoutBase.AttachedFlyout="{StaticResource OpenMenuCommandFlyout}"
            SelectsOnInvoked="False">
            <mux:NavigationViewItem.Icon>
                <SymbolIcon Symbol="Add" />
            </mux:NavigationViewItem.Icon>
            <mux:NavigationViewItem.Content>
                <StackPanel VerticalAlignment="Center" Orientation="Horizontal">
                    <TextBlock
                        Margin="0"
                        VerticalAlignment="Center"
                        Text="Add" />
                    <TextBlock
                        Margin="6,0,0,0"
                        VerticalAlignment="Center"
                        AutomationProperties.AccessibilityView="Raw"
                        FontFamily="Segoe MDL2 Assets"
                        FontSize="12"
                        Text="&#xE70D;" />
                </StackPanel>
            </mux:NavigationViewItem.Content>
        </mux:NavigationViewItem>

        <mux:NavigationViewItemSeparator />

        <mux:NavigationViewItem Content="Tab 1">
            <mux:NavigationViewItem.Icon>
                <SymbolIcon Symbol="People" />
            </mux:NavigationViewItem.Icon>
        </mux:NavigationViewItem>
        <mux:NavigationViewItem Content="Tab 2">
            <mux:NavigationViewItem.Icon>
                <SymbolIcon Symbol="Account" />
            </mux:NavigationViewItem.Icon>
        </mux:NavigationViewItem>
    </mux:NavigationView.MenuItems>
</mux:NavigationView>

private void OnItemInvoked(Mux.NavigationView sender, Mux.NavigationViewItemInvokedEventArgs args)
{
    if (args.InvokedItemContainer == openMenuNavigationViewItem)
    {
        var flyout = FlyoutBase.GetAttachedFlyout(openMenuNavigationViewItem);
        flyout.ShowAt(openMenuNavigationViewItem);
    }
}

This feels related to the work been done for #79 and request #1488

NavViewItemFlyout.zip

[shaheedmalik]

This issue:

#79

[jevansaks]

I think #79 covers this request, does it not? @vgromfeld what would you like to see out of hierachical navigationview that #79 doesn't encompass? We aren't currently planning support for arbitrary content in the flyouts, is that what you are looking for?

[ad1Dima]

@jevansaks As for me - HierarchicalNavigationView may be too complicated for several scenarios: it will have different states for different pane position that may be not necessary.
Flyout property that act same way as button's one will make NavigationViewItem good building block for custom scenarios like three dot menu in Microsoft Store or Side menu at Start

[ad1Dima]

NavigationViewItem should display a chevron when a flyout is attached

disagree. It can be easily added to the Content of NavigationViewItem if necessary

[vgromfeld]

@jevansaks, for my current needs, HiearchicalNavigationView + SelectsOnInvoked="False" should be enough. For now, I'm only planning to add "direct" actions as in the sample.

If later I want to do something more complicated like having a complete flyout menu with sub items, separators, etc.. or having a fully custom flyout, the HiearchicalNavigationView will not be enough.

@ad1Dima I agree that adding the chevron is easy to do but this is something that should be handled at the control level to gracefully integrate with the different states (top, left, compact).
To make it right, I will have to write custom visual states in my sample to change the chevron glyph when navigation view display mode changes (top from/to left) as well as its position (after/before the content or over the icon depending on the left pane size and the language RTL/LTR)

[mdtauk]

I have a couple of points to mention.

When you have a NavigationViewItem selected within a flyout, do you use a different selection indicator style on the "always visible" sidebar/top bar?

Will these flyouts only work when there is not enough space to display items? If not could say a Logon/Account NavigationViewItem always show a flyout with options like Log Off, Account Management, etc?

What will the auto-collapse behaviour be with overflow items (thinking specifically when in a Top orientation) which may contain flyouts?

[msft-github-bot]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 7 days of this comment.