Proposal: Enable "bottom-pinned" NavigationMenuItems in the NavigationView control

[jskollin]

Proposal: Enable "bottom-pinned" NavigationMenuItems in the NavigationView control

Summary

There are 3 issues that prevent users from easily being able to add new items to the Footer of the NavigationView (elaborated on in the rationale section):

1. Narrator issues
2. There is no SelectionIndicator for Footer items
3. Animation inconsistency

Rationale

Similar to the built-in Settings NavigationMenuItem, users may want to add additional pages to the Footer of the NavigationView. There are several issues that come about with this:

1. Adding additional pages to the Footer of the NavigationView causes the narrator to read the built-in Settings NavigationMenuItem as being part of its own list, and the rest of the NavigationMenuItems in the Footer as being part of a different list. For example, if there is a "Profile" Footer NavigationMenuItem in addition to the built-in Settings item, the narrator will read: "Profile 1/1, Settings 1/1", as opposed to: "Profile 1/2, Settings 2/2".
2. There is no easy way to "turn on" the SelectionIndicator for the selected Footer NavigationMenuItem. In order to enable the SelectionIndicator, users have to traverse the UI tree of the selected Footer NavigationMenuItem for the SelectionIndicator, and turn the opacity of the indicator to 1.
3. When a user selects a different NavigationMenuItem in the "top" part of the NavigationView, the SelectionIndicator animates from the previously selected item to the newly selected item. This animation cannot be turned off (and animations cannot easily be added to the Footer items), causing inconsistency between the top NavigationViewItems and the NavigationViewItems in the Footer (if users choose to turn on the SelectionIndicator via the method described in 2).

Functional Requirements

Important Notes

Open Questions

[YuliKl]

@jskollin - thank you for the great suggestion. Unfortunately, it will be a little while before we have the resources to be able to implement this proposal.

[ad1Dima]

I found some workaround, but it still working bad, because top navigation item still stays selected inside control:

    <muxc:NavigationView x:Name="NavigationView">
        <muxc:NavigationView.MenuItems>
            <muxc:NavigationViewItem>
                <muxc:NavigationViewItem.Icon>
                    <SymbolIcon Symbol="Audio"/>
                </muxc:NavigationViewItem.Icon>
                Audio
            </muxc:NavigationViewItem>
        </muxc:NavigationView.MenuItems>
        <muxc:NavigationView.PaneFooter>
            <StackPanel>
                <muxc:NavigationViewItem Tapped="NavigationViewItem_Tapped">
                    <muxc:NavigationViewItem.Icon>
                        <SymbolIcon Symbol="Add"/>
                    </muxc:NavigationViewItem.Icon>
                    Add
                </muxc:NavigationViewItem>
            </StackPanel>
        </muxc:NavigationView.PaneFooter>
    </muxc:NavigationView>

private void NavigationViewItem_Tapped(object sender, TappedRoutedEventArgs e)
{
    NavigationView.SelectedItem = sender;
}

Result:

[mdtauk]

Bottom placement for the horizontal navigation view (as with the top placement) makes a lot of sense. Same with explicit right hand side placement of the vertical orientation navigation view. (not just in RtL scenarios)

This should also extend to the tab control to give maximum flexibility with navigation app layouts

[ad1Dima]

Bottom placement for the horizontal navigation view (as with the top placement) makes a lot of sense. Same with explicit right hand side placement of the vertical orientation navigation view. (not just in RtL scenarios)

I guess you are asking for different feature and it's better to create new proposal

[YuliKl]

I found some workaround, but it still working bad, because top navigation item still stays selected inside control

@ad1Dima are you running into #957?

[mdtauk]

Bottom placement for the horizontal navigation view (as with the top placement) makes a lot of sense. Same with explicit right hand side placement of the vertical orientation navigation view. (not just in RtL scenarios)

I guess you are asking for different feature and it's better to create new proposal

Yes, I misunderstood the ask. I blame responding via mobile :P

[ad1Dima]

@ad1Dima are you running into #957?

Kind of.

[ad1Dima]

How many items does anybody need at the bottom?
My guess that Settings and Profile would be enough for most users.
If i'm right, it this proposal may be simplified..

[YuliKl]

How many items does anybody need at the bottom?
My guess that Settings and Profile would be enough for most users.
If i'm right, it this proposal may be simplified..

@ad1Dima, #1488 is an interesting idea that many apps are likely to find helpful but probably doesn't solve 100% of app scenarios. Keeping both proposals makes sense to me.

[ad1Dima]

@ad1Dima, #1488 is an interesting idea that many apps are likely to find helpful but probably doesn't solve 100% of app scenarios. Keeping both proposals makes sense to me.

that's true. We need both.

My question was about: should it be list of bottom items, or adding one or two item to the bottom will be fine?
After all, space is limited and scrolling list of bottom items will cause bad UX

[ad1Dima]

Copy here from my PR:

Usage example and screenshots:

<muxc:NavigationView x:Name="NavigationView" ItemInvoked="NavigationView_ItemInvoked" IsSettingsVisible="{x:Bind SettingsCheckbox.IsChecked.Value, Mode=OneWay}">
        <muxc:NavigationView.MenuItems>
            <muxc:NavigationViewItem Icon="Audio" Content="Audio"/>
            <muxc:NavigationViewItem Icon="Video" Content="Video"/>
            <muxc:NavigationViewItem Icon="View" Content="View"/>
        </muxc:NavigationView.MenuItems>
        <muxc:NavigationView.FooterMenuItems>
            <muxc:NavigationViewItem Icon="Account" Content="Account" />
        </muxc:NavigationView.FooterMenuItems>
        <muxc:NavigationView.PaneFooter>
            <Grid Background="Red">
                <TextBlock Text="PaneFooter"/>
            </Grid>
        </muxc:NavigationView.PaneFooter>
        <Grid>
            <StackPanel Margin="12">
                <Button Click="Button_Click">
                    Left/Top switch
                </Button>
                <CheckBox x:Name="SettingsCheckbox" Content="IsSettingsVisible" IsChecked="True"/>
                <TextBlock Text="{x:Bind ((muxc:NavigationViewItem)NavigationView.SelectedItem).Content.ToString(), Mode=OneWay}"/>
            </StackPanel>
        </Grid>
    </muxc:NavigationView>

[SavoySchuler]

@ranjeshj or @YuliKl, does this issue need to sit in the backburner for tracking if its closed?

[ranjeshj]

Right.. it sits in the back burner until we have docs/samples.

[anawishnoff]

Hey @ad1Dima, now that the implementation for this feature is complete (a huge thank you to you!), have you tried out the feature and added it to an app yet? If so it would be great to hear more about your scenario and any more feedback you might have. Let me know! 😊

[ad1Dima]

Hey @ad1Dima, now that the implementation for this feature is complete (a huge thank you to you!), have you tried out the feature and added it to an app yet? If so it would be great to hear more about your scenario and any more feedback you might have. Let me know! 😊

I used it for almost year since my first PR )

hope #3101 will be on the way soon. It'll keep my code cleaner

[anawishnoff]

@ad1Dima Awesome, thanks so much! Glad it's been working for you.