Forum Xamarin.Forms

Display Back Button In UWP App

My app has no back button. How do I just turn on the button so it's always there?

Best Answer

  • MelbourneDeveloperMelbourneDeveloper AUMember ✭✭✭
    edited February 2017 Accepted Answer

    I have resolved my issue thanks to @RyanDixon . I only had to make a slight change in my Navigation methods like so. Note: the "MainNavigationPage" control is a NavigationPage which is defined in the Xaml for the page.

        public async Task NavigateTo(MenuPanelItem masterPageItem)
        {
            if (masterPageItem != null)
            {
                await NavigateTo(masterPageItem.TargetType);
                menuPanel.ClearListView();
            }
        }
    
        public async Task NavigateTo(Type type)
        {
            await NavigateTo((Page)Activator.CreateInstance(type));
        }
    
        public async Task NavigateTo(Page page)
        {
            await MainNavigationPage.PushAsync(page);
        }
    

    It turns out that the MasterDetailPage navigation sample is all wrong. This is code from the sample that causes back functionality to be broken:

        void OnItemSelected (object sender, SelectedItemChangedEventArgs e)
        {
            var item = e.SelectedItem as MasterPageItem;
            if (item != null) {
                Detail = new NavigationPage ((Page)Activator.CreateInstance (item.TargetType));
                masterPage.ListView.SelectedItem = null;
                IsPresented = false;
            }
        }
    

    As you can see, every time a menu item is selected, a new NavigationPage is created and this breaks the back functionality. The content of the Navigation page should bet set with PushAsync instead.

    How can we notify someone that the sample code is all wrong, and that it is leading people down the garden path? Or, to put it another way, how do I make a pull request for the sample apps?

Answers

  • EBREBR FRMember
    edited February 2017

    Hi @ChristianFindlay

    There is not a lot of information on UWP NavigationBar management. Did you have found a solution ?

  • RyanDixonRyanDixon USMember ✭✭✭
    edited February 2017

    Would be helpful to see your code!
    The back button by default in Xamarin Forms is only present when you have asynchronously pushed another page onto the stack of a NavigationPage.

    For example:
    NavigationPage nav = new NavigationPage(new ContentPage() { Content = new BoxView() });
    -> Wait for onAppearing
    await nav.PushAsync(new ContentPage() { Content = new BoxView() });

    If you require different behaviour you can always leverage the native component behind the Page type you are using.
    You can find which one that is here: https://developer.xamarin.com/guides/xamarin-forms/custom-renderer/renderers/

  • EBREBR FRMember

    Yes,
    It's a stack of NavigationPage, and the BackButton is present on Android but not on UWP.

    I fear that's due to the plateform, but, as I said, I don't manage to found a lot of information on the UWP NavigationBar.

    Maybe it's because WindowsPhone must already have a physical back button....

  • RyanDixonRyanDixon USMember ✭✭✭

    Ah Windows Phone!
    Yes by spec all Windows Phones MUST have a hardware or software simulated back button which acts in place of the back button you see normally.

    If you visit this reference, your application should match with it. Otherwise file a bug report :smile:
    https://msdn.microsoft.com/en-us/library/windows/apps/dn439322.aspx
    Hope this help!

  • JohnHardmanJohnHardman GBUniversity admin

    @ChristianFindlay - On UWP desktop the back button is on the title bar. On UWP phone there is a (simulated) hardware back button. You shouldn't add an additional software one on UWP phone.

  • MelbourneDeveloperMelbourneDeveloper AUMember ✭✭✭

    I think I need to clear things up here. I think my first question is, how do I make sure that back functionality is enabled?

    I think Ryan partially answered this:

    @RyanDixon said:

    For example:
    NavigationPage nav = new NavigationPage(new ContentPage() { Content = new BoxView() });
    -> Wait for onAppearing
    await nav.PushAsync(new ContentPage() { Content = new BoxView() });

    So, it look like I should keep one NavigationPage for the entire application, and then set the content of that navigation page by calling PushAsync(). Is this the recommended pattern? I started my application with the MasterDetailPage navigation, so I have ended up with something different. Here is an example of my code:

        public async Task NavigateTo(MenuPanelItem masterPageItem)
        {
            if (masterPageItem != null)
            {
                await NavigateTo(masterPageItem.TargetType);
                menuPanel.ClearListView();
            }
        }
    
        public async Task NavigateTo(Type type)
        {
            await NavigateTo((Page)Activator.CreateInstance(type));
        }
    
        public async Task NavigateTo(Page page)
        {
            var nav = new NavigationPage();
            await nav.PushAsync(page);
            Detail = nav;
        }
    

    As you can see above, I am creating a new NavigationPage, and setting it as the detail of my MasterDetailPage which may be the reason why my code is not working. Is there a working example of the MasterDetailPage pattern being implemented with a working back button?

    @EBR said:

    It's a stack of NavigationPage, and the BackButton is present on Android but not on UWP.

    I think that maybe what is going on is that the back button has not been implemented correctly in my code. On Android the button appears, but doesn't really do anything. I'm hoping that once I implement the navigation stack correctly, the button will appear in UWP (UWP Desktop).

    @JohnHardman

    On UWP desktop the back button is on the title bar. On UWP phone there is a (simulated) hardware back button. You shouldn't add an additional software one on UWP phone.

    Yes. This is my point as said above. I want the back button to appear in the title bar. But, perhaps, I have not implemented the navigation stack correctly yet, and perhaps it may appear when I do.

  • MelbourneDeveloperMelbourneDeveloper AUMember ✭✭✭
    edited February 2017 Accepted Answer

    I have resolved my issue thanks to @RyanDixon . I only had to make a slight change in my Navigation methods like so. Note: the "MainNavigationPage" control is a NavigationPage which is defined in the Xaml for the page.

        public async Task NavigateTo(MenuPanelItem masterPageItem)
        {
            if (masterPageItem != null)
            {
                await NavigateTo(masterPageItem.TargetType);
                menuPanel.ClearListView();
            }
        }
    
        public async Task NavigateTo(Type type)
        {
            await NavigateTo((Page)Activator.CreateInstance(type));
        }
    
        public async Task NavigateTo(Page page)
        {
            await MainNavigationPage.PushAsync(page);
        }
    

    It turns out that the MasterDetailPage navigation sample is all wrong. This is code from the sample that causes back functionality to be broken:

        void OnItemSelected (object sender, SelectedItemChangedEventArgs e)
        {
            var item = e.SelectedItem as MasterPageItem;
            if (item != null) {
                Detail = new NavigationPage ((Page)Activator.CreateInstance (item.TargetType));
                masterPage.ListView.SelectedItem = null;
                IsPresented = false;
            }
        }
    

    As you can see, every time a menu item is selected, a new NavigationPage is created and this breaks the back functionality. The content of the Navigation page should bet set with PushAsync instead.

    How can we notify someone that the sample code is all wrong, and that it is leading people down the garden path? Or, to put it another way, how do I make a pull request for the sample apps?

  • JohnHardmanJohnHardman GBUniversity admin

    @MelbourneDeveloper - You can report bugs in samples at https://bugzilla.xamarin.com/ . Select Forms and then Samples.

  • MelbourneDeveloperMelbourneDeveloper AUMember ✭✭✭
    edited February 2017

    @JohnHardman

    I have reported the bug here:
    https://bugzilla.xamarin.com/show_bug.cgi?id=52348

    Let's hope someone cares enough to fix up all the samples so that other people don't get led down the garden path as well.

Sign In or Register to comment.