How to make a page with cross icon rather than go back button in Xamarin.Forms?

Question

Found I am too new to ask a question in Xamarin Community Forums, hope get some ideas from here. Thanks in advance.

When I go through some apps, some pages look like this:

So for this kind of pages, it has a "cross" icon instead of a left arrow, and when I click the cross icon, or click a save button after operations on this page, the page fades out from top to bottom.

For a normal navigation page, it has go back button and usually fades out from left to right.

So usually when to use this kind of pages? Is it still a Navigation Page? Is it possible to achieve this using Xamarin.Forms? Any tutorials or learning samples?

score 2 · Accepted Answer · answered Jul 26 '20 at 11:24

"the page fades out from top to bottom" sounds like a modal page.

Use TitleView

Modal page:

<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XFormPlayground.CustomPushModelPage">
<NavigationPage.TitleView>
    <Grid>

        <Label
            Text="Add Timesheet"
            FontSize="Title"
            HorizontalOptions="Center"
            VerticalOptions="CenterAndExpand" />
        <Button
            Text="X"
            Command="{Binding PushModelCommand}"
            BackgroundColor="Transparent"
            WidthRequest="40"
            HorizontalOptions="Start" />

    </Grid>

</NavigationPage.TitleView>
<ContentPage.Content>
    <StackLayout>
        <Label
            Text="This is a modal page"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage.Content>

Wrap ModelPage inside a Navivation for the TitleView to show up, optional can set the color for the bar too.

 [DesignTimeVisible(false)]
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void ViewModelPageButton_OnClicked(object sender, EventArgs e)
    {
        Navigation.PushModalAsync(new NavigationPage(new CustomPushModelPage())
        {
            //Set toolbar color here
            BarBackgroundColor = Color.FromHex("FFFFFF") //White colors
        });
    }
}

MainPage xaml:

<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="XFormPlayground.MainPage">

<StackLayout>
    <!--  Place new controls here  -->
    <Button
        x:Name="ViewModelPageButton"
        Clicked="ViewModelPageButton_OnClicked"
        VerticalOptions="Center"
        Text="Click" />
</StackLayout>

Result:

Thanks. I think your answer is closer to what I want, still Morse's answer is a good choice. For those who uses this method but is disturbed by the in-built padding in TitleView I refer [here](https://stackoverflow.com/questions/60829018/remove-left-space-in-title-view-xamarin-forms) to remove it. — Vanderwood, Jul 31 '20 at 15:35

score 1 · Answer 2 · answered Jul 26 '20 at 01:25

You can achieve this by Modal page, I suggest you use Rotorgames Plugins PopUp

Add X icon through Label or ImageButton to the top left most of the popup page.

If you use Label add TapGestureRecognizer otherwise use Button pressed event and close the pop up like below

await Rg.Plugins.Popup.Contracts.INavigation.Instance.PopAsync()

And for top to bottom fading you can use Animations in this nuget.

They have samples in the github you can see for yourself.

How to make a page with cross icon rather than go back button in Xamarin.Forms?

2 Answers2