Wiring up back button in NavigationView for UWP app

Question

I'm using a NavigationViewin my UWP app and was trying to get the back button wired up for content changes. I have not been able to get the button enabled during content changes even if I set the enable property of the nav view. Currently I simply want to be able to navigate from the main view to a page then back to the main view. And also be able to navigate deeper into a stack so Main View -> New View -> New View and back up to the main view.

MainPage.xaml/cs

<NavigationView x:Name="MainView_NavigationView"
                    PaneTitle="Git Manager"
                    PaneDisplayMode="LeftCompact"
                    ItemInvoked="MainView_NavigationView_ItemInvoked"
                    Header="Git Manager"
                    BackRequested="MainView_NavigationView_BackRequested">

    <NavigationView.AutoSuggestBox>
        <AutoSuggestBox PlaceholderText="Search"
                            QueryIcon="Find"/>
    </NavigationView.AutoSuggestBox>

    <NavigationView.MenuItems>
        <NavigationViewItemSeparator/>
        <NavigationViewItemHeader Content="Information" />
        <NavigationViewItemSeparator/>

        <NavigationViewItem x:Name="Login_NavViewItem" 
                                Content="Login" 
                                Tag="Clone Repositories" 
                                Icon="AddFriend"/>

        <NavigationViewItem x:Name="Remote_NavViewItem" 
                                Content="Remote" 
                                Icon="World"/>

        <NavigationViewItem x:Name="Local_NavViewItem" 
                                Content="Local" 
                                Icon="Folder"/>

        <NavigationViewItem x:Name="Schedule_NavViewItem" 
                                Content="Schedule" 
                                Icon="Calendar"/>

        <NavigationViewItemSeparator/>
    </NavigationView.MenuItems>

    <NavigationView.Content>
        <Frame x:Name="ContentFrame">
            <Frame.ContentTransitions>
                <TransitionCollection>
                    <NavigationThemeTransition />
                </TransitionCollection>
            </Frame.ContentTransitions>
            <Grid>
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" HorizontalTextAlignment="Center" TextAlignment="Center" Text="asdfasdfasdfasdf" />
            </Grid>
        </Frame>
    </NavigationView.Content>
</NavigationView>

-

public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void MainView_NavigationView_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args)
        {
            if(args.IsSettingsInvoked)
            {

            }
            else
            {
                NavigationViewItem item = args.InvokedItemContainer as NavigationViewItem;

                switch(item.Content)
                {
                    case "Login":
                        ContentFrame.Navigate(typeof(Views.Login));
                        break;
                    case "Remote":
                        ContentFrame.Navigate(typeof(Views.Remote));
                        break;

                    case "Local":
                        ContentFrame.Navigate(typeof(Views.Local));
                        break;

                    case "Schedule":
                        ContentFrame.Navigate(typeof(Views.Schedule));
                        break;
                }
            }
        }

        private async void MainView_NavigationView_BackRequested(NavigationView sender, NavigationViewBackRequestedEventArgs args)
        {
            var contentBox = new ContentDialog();
            contentBox.Content = "Back clicked";

            await contentBox.ShowAsync();
        }
    }

The other pages are just new content pages that have a textblock on them. So my 2 questions are:

How do I wire up the back button to actually be enabled and able to click it when I change my content or how I would navigate to a new page inside the navigation view to enable this button/functionlity.

How do I use this to navigate nested pages back and forth?

Answer 1

How do I wire up the back button to actually be enabled and able to click it when I change my content or how I would navigate to a new page inside the navigation view to enable this button/functionlity.

To enable/disbale the BackButton in NavigationView, you need to set the IsBackEnabled=True/False property for it. And then, you could use Frame class CanGoBack and CanGoForward property to made the BackButton enable/disable.

Please see the Navigation View and Navigation history and backwards navigation for UWP apps for more information.