Xamarin Forms - Show Cancel button in toolbar items instead of Back (iOS)

14.2k views Asked by At

I want to change the standard Back button in the NavigationBar on iOS to a Cancel button like the "New contact" screen in iOS.
I am using Xamarin Forms.

EDIT:

XAML of modal

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             x:Class="Xrm.Mca.Views.MyModalView">

    <ContentPage.ToolbarItems>
            <ToolbarItem x:Name="Cancel" Text="Cancel" ></ToolbarItem>  
            <ToolbarItem x:Name="Save" Text="Save" ></ToolbarItem>  
    </ContentPage.ToolbarItems>

    <ContentPage.Content>

        <TableView Intent="Form">
            <TableRoot>
                <TableSection Title="Details">
                    <EntryCell Label="Name" Placeholder="Entry your name" />
                    <EntryCell Label="Age" Placeholder="Entry your age" />
                </TableSection>
            </TableRoot>
        </TableView>

    </ContentPage.Content>

</ContentPage>

Code-behind in the prior screen to open modal

async Task OpenModal()
{
    var page = new NavigationPage(new MyModalView ());
    await App.Current.Navigation.PushModalAsync (page);
}
2

There are 2 answers

8
Demitrian On BEST ANSWER

The standard convention of accomplishing your request is to push a Modal and use ToolBarItems. You can find an example of applying a ToolBarItem to your page on the Xamarin Forums.

Let me know if you need a more concrete example.


UPDATED WITH EXAMPLE

The two ToolbarItems would like like so:

var cancelItem = new ToolbarItem
{
    Text = "Cancel"
};

var doneItem = new ToolbarItem
{
    Text = "Done"
};

Now you can add these to your view:

this.ToolbarItems.Add(cancelItem);
this.ToolbarItems.Add(doneItem);

You can even bind the CommandProperty:

doneItem.SetBinding(MenuItem.CommandProperty, "DoneClicked");

Or simply handle the event when the user taps the item:

doneItem.Clicked += (object sender, System.EventArgs e) => 
{
    // Perform action
};

Remember to wrap your Modal in a NavigationPage, as the ToolbarItems otherwise will not appear.

Hope this helps.

1
MyKuLLSKI On

Do the following in the constructor of the page doing the navigation push. This will work for all pages pushed on to the stack.

NavigationPage.SetBackButtonTitle(this, "Cancel");

Where this is the ContentPage (or any type of page) of course