UWP NavigationView How To Cancel a NavigationViewSelectionChangedEventArgs

Question

We setup the SelectionChanged event of NavigationView to run a few conditions check.

private void ApplicationNavigationView_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
{

}

We would only allow the user to navigate from Page A to Page B when the conditions are met.

The problem is even if we can stop the navigation from Page A to Page B, the selection indicator of NavigationView always changes from NavigationViewItem A (Page A) to NavigationViewItem B (Page B) upon user click/tap. This is misleading because selection indicator shows NavigationViewItem B is selected, whereas the pages remains to be Page A.

Is there any way to cancel the SelectionChanged event and stop selection indicator change?

Tried with following code without success

        private NavigationViewItem previousNavigationViewItemSelected = null;
        private async void ApplicationNavigationView_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
        {

                var selectedItem = (args.SelectedItem) as NavigationViewItem;

                if (selectedItem.Tag != null)
                {
                    string pageName = "NavigationViewTest." + ((string)selectedItem.Tag);
                    Type pageType = Type.GetType(pageName);
                    contentFrame.Navigate(pageType);
                    previousNavigationViewItemSelected = selectedItem;
                }
                else
                {
                    sender.SelectedItem = previousNavigationViewItemSelected;
                }

        }

NavigationViewItem.Tag contains the target page. When it is NOT null, we navigate to the target page, and cache the current NavigationViewItem. When it's null, we set the previous cached NavigationViewItem to be the NavigationView.SelectedItem. We expect this will restore the SelectionIndicator to the cached NavigationViewItem, but it didn't. The SelectionIndicator still changed to the clicked NavigationViewItem. Anything wrong here?

score 0 · Answer 1 · answered Mar 06 '18 at 16:48

0

I think it would be appropriate to either hide the disabled NavigationViewItems using Visibility property or use IsEnabled property to disable them. You could update the property when the conditions you are describing change proactively, so that the user cannot click the select the item at all.

Otherwise you cannot cancel a SelectionChanged event, the only thing you could do then is to set the NavigationView.SelectedItem to null or to another item.

answered Mar 06 '18 at 16:48

Martin Zikmund

38,440
7
70
91

1

Thank you for your advice, Martin. The problem is that we can only check the condition when we know which NavigationViewItem user clicks on. So we need to keep IsHitTestVisible, Visibility and IsEnabled to True to take user click. Once user clicks, the SelectionIndictor moves to the new NavigationViewItem and cannot be reverted with sender.SelectedItem = previousNavigationViewItemSelected. – Jack Mar 07 '18 at 15:46

score 0 · Answer 2 · answered Nov 26 '18 at 05:36

The best way is set .IsHitTestVisible or .IsEnabled to make the item is not clickable. In your situation, You may re-template NavigationViewItem and control the selection indicator by yourself. I don't suggest this since it's only for advanced user and it's not guranteed that it will work in future version of Windows.

Open generic.xaml and search <Style TargetType="NavigationViewItem">. Your directory may looks different depends on your SDK version and VS installation location. "C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.16299.0\Generic\generic.xaml"

copy the style to your page and app.xaml, and remove, rename or modify SelectionIndicator(eg: Visibility="Collapsed").

                <Grid 
                    HorizontalAlignment="Left"
                    VerticalAlignment="Center">

                    <Rectangle
                        x:Name="SelectionIndicator"
                        Width="6"
                        Height="24"
                        Fill="{ThemeResource NavigationViewSelectionIndicatorForeground}"
                        Opacity="0.0"/>
                </Grid>

Since we destroyed the default selectinoindicator, we may need to create our own SelectionIndicator, and create animation, control it's opacity/visibility by ourselves.

Note: If you are working on Windows insider OS and using new SDK like 10.0.17763.0, you may see SelectionIndicator is not in <Style TargetType="NavigationViewItem">. You can copy the style from 10.0.16299.0 and it should still works.

UWP NavigationView How To Cancel a NavigationViewSelectionChangedEventArgs

2 Answers2