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

Question

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);
}

score 6 · Accepted Answer · edited May 23 '17 at 12:30

6

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.

edited May 23 '17 at 12:30

Community

1
1

answered Jun 21 '15 at 20:19

Demitrian

3,200
1
24
41

Thanks. I am already showing the modal and now I am struggling with adding **ToolbarItems** to the top of screen. I would like to add "Cancel" and "Done" – gjfonte Jun 24 '15 at 10:08
I've updated my answer with a code example. Please remember to up vote my answer and mark it as "Accepted" if it helped you out. Thanks. – Demitrian Jun 24 '15 at 23:27
Just a quick question, @gjfonte: are you in need of help in regards to Xaml or Code behind (C#)? It'd be nice if you had stated that more clearly in your question instead of simply tagging "xaml" Also, just a quick note: if your Modal is not wrapped in a NavigationPage, your ToolbarItems will not shown: http://stackoverflow.com/a/26651140/2399772 – Demitrian Jun 25 '15 at 13:57
Thanks David for your notes and suggestions. I have edit my question including the example of View. How I can now move the `cancel` button to the left side? – gjfonte Jun 30 '15 at 09:44
@gjfonte Unfortunately, Xamarin doesn't support this at this very moment, but [many people are complaining over this on the forums](https://forums.xamarin.com/discussion/21004/navigation-bar-left-toolbar-button), so hopefully we'll see a change in the coming versions of Forms. Currently, the only thing to do, is to make a custom renderer, as also suggested in the discussion above. Good luck! – Demitrian Jun 30 '15 at 21:02
I will have a look but I am almost there, I just need to change some code. Thanks for your help! – gjfonte Jul 01 '15 at 08:50
@Demitrian How to set background color of toolbaritems from codebehind – Parth Savadiya Feb 19 '16 at 06:28
@pArth savadiya Why not submit a new question on SO if you've got an issue you want to resolve? The comments aren't meant for asking questions – Demitrian Feb 19 '16 at 08:14

score 1 · Answer 2 · edited Jul 25 '19 at 00:57

1

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

edited Jul 25 '19 at 00:57

Rmalmoe

993
11
13

answered Jun 09 '15 at 19:28

MyKuLLSKI

5,285
3
20
39

I am including this code in the constructor and doesn't work. My view constructor only contains the bindingContext, your code and InitializeComponent(). Do you have further idea? I have read something in Xamarin Form that it is not possible.... – gjfonte Jun 10 '15 at 14:04

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

2 Answers2

Linked