under
under

Reputation: 3067

How to cancel navigation on validation in UWP XAML NavigationView control

This is my scenario.

I have a settings page which needs to be validated. I used to do validation in settings page's OnNavigatingFrom event. So, a happy days scenario is user makes some changes and navigates away, app validates and saves the changes in the background without user having to do anything. If validation fails I cancel navigation and display a dialog box, so I only bother the user if there is an issue. This has worked well and was simple to implement:

    protected async override void OnNavigatingFrom(NavigatingCancelEventArgs e)
    { 
        if (!ValidateSettings())
        {
            e.Cancel = true;

            Dialog dialog = new Dialog();
            await dialog.ShowDialogAsync("Validation Error", "Validation error encountered", "",   "Close");
        }
    }

After adding NavigationView control, the above approach no longer works. I am using NavigationView SelectionChanged event to perform navigation. Problem is that this event fires BEFORE the child page's OnNavigatingFrom event and navigation cannot be cancelled. What's worse I cannot even save the changes, or rather they are saved after the navigation is complete. So I cannot move some of that logic to the navigation root page.

How can I perform form validation and cancel navigation in NavigationView control?

Please note that I do not want to have a save button because it is a bad user experience. I'd rather bug the user if they make a mistake instead of every time they want to make a change.

I also do not want to validate the changes on every little change because that would also result in bad UX. For example if a user wants to clear all the check boxes before selecting one, this would not be allowed because having all check boxes unchecked is invalid. I hate it when you have to "wrestle" with an app in this way. If I want to clear the form before completing it, that is a valid approach, I don't want to annoy the user with unnecessary validation errors while they are filling up the form.

I use NavigationView control from Microsoft.UI.XAML NuGet v2.4.2

Upvotes: 1

Views: 719

Answers (1)

It's possible to stop navigation by using the property SelectsOnInvoked on the NavigationViewItem.

Setting this to False will stop the NavigationView from selecting the NavigationViewItem when pressed, but the ItemInvoked event is still called, so you can handle your validation there.

https://learn.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.controls.navigationviewitem.selectsoninvoked?view=winui-2.8

Upvotes: 1

Related Questions