NavigationPage, PushModalAsync and back button

oscarjoscarj ESMember

Its a Xamarin Forms app that I'm testing in android.

I have a tabbed page with a list item, when user clicks in list item I show a modal new page. Shomething like

private void NewsListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
{
var navigationPage = new NavigationPage(new NewsDetailPage());
Navigation.PushModalAsync(navigationPage,true);
}

I need to use PushModalAsync because if I use pushAsync it shows me the tabs in new page. Everything works well but it doesnt show back button in the navigation bar and I need it to come back. If I press back button in bottombar it works well.
I have tried several things: NavigationPage.SetHasBackButton, NavigationPage.SetHasNavigationBar...but they doestn works. How I can show the back button?

I dont know if I need to create a toolbaritem...in this case Do I need add the image of the left arrow etc or are there a predefinied item for that?

Thanks

Posts

  • ShawnCastrianni.5092ShawnCastrianni.5092 US ✭✭✭
    edited June 2016

    By creating a new NavigationPage (which is correct if you plan on showing a series of pages for your modal task or you just want a title to your page), you start a new navigation stack so there is nothing to go back to, technically. You would need to add a toolbar item to close/cancel the modal task bringing you back to the tabbed page.

    There are many ways to handle this, but my preference is a toolbar item to close/cancel the modal task.

  • JassimRahmaJassimRahma USMember ✭✭✭✭
    edited November 2017

    Do you have a simple sample please for a Cancel toolbar button?

  • NMackayNMackay GBInsider, University mod
    edited November 2017

    It's just a simple toolbaritem, you use to cancel the modal dialog. Bind to a command or an event handle and pop the modal page.

    https://developer.xamarin.com/api/type/Xamarin.Forms.ToolbarItem/

    There's a guide here if your not familiar with the toolbar.
    https://xamarinhelp.com/xamarin-forms-toolbar/

    It's easier to open a new thread, this question relate to a limitation in Xamarin Forms, lots of people in this scenario want a back button but you either have to fake it which has it's own drawbacks or use a toolbar button like Shaun suggests....and we currently do.

  • SidataSidata Member ✭✭

    Nice but now the master question how can i place the button on the same place like the back button.
    I'm a fan of style guides and wanna respect the ios and android user expierience :)

  • NMackayNMackay GBInsider, University mod
    edited October 2018

    @Sidata said:
    Nice but now the master question how can i place the button on the same place like the back button.
    I'm a fan of style guides and wanna respect the ios and android user expierience :)

    I've written my own toolbar to replicate that, with TitleView in Forms 3.2 you can just set your own toolbar to replace the Forms generated one. The TitleView has some padding so it may not replicate exactly the experience but it's pretty close. It a bit like Android native where you can plonk a toolbar anywhere in the layout and inflate it.

    <NavigationPage.TitleView>
            <customControls:CustomToolbar
                Title="My Modal Page"
                ToolbarBackground="{StaticResource TabBackgroundColor}" ToolbarTextColor="White" 
                Command="{Binding BindingContext.CloseCommand, Source={x:Reference Name=PhotoView}}">
                <customControls:CustomToolbar.ToolbarItems>
                    <customControls:CustomToolbarItem Icon="IconHelp" 
                        Command="{Binding BindingContext.ShowShareCommand, Source={x:Reference Name=PhotoView}}" 
                        IsShown="{Binding BindingContext.ShowShareIcon, Source={x:Reference Name=PhotoView}}"/>
                 </customControls:CustomToolbar.ToolbarItems>
            </customControls:CustomToolbar>
        </NavigationPage.TitleView>
    
  • SidataSidata Member ✭✭

    Ok not my preference but a workaround, first i use the priotity now. with this i can order the items in the navbar.
    is it possible to insert a custom toolbaritems controle in the view which is customized with possibilite to set align left ?

  • NMackayNMackay GBInsider, University mod
    edited October 2018

    @Sidata

    Yes, I'm still playing about with this but it's a view so you can align the content whatever way you want, there are a couple of bugs in iOS (centers content) and UWP (sometimes doesn't show) but there are fixes in the pipeline of 3.2.0 of service releases.

    https://github.com/xamarin/Xamarin.Forms/issues/3834

    That's my modal page (wrapped in a navigation page).

Sign In or Register to comment.