FIXED: Xamarin Forms - How do i add a back button in the navigation bar?

Question

I want to give the user the ability to go the previous page when using the app on any page. But I don't know how to go about it.

In the XAML code:

<Grid Grid.Row="0" Grid.Column="0">
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="50*" />
   </Grid.ColumnDefinitions>
      <Image Margin="0,20,0,0"
         HeightRequest="25"
         HorizontalOptions="Center"
         Source="back"
         VerticalOptions="Center"
         WidthRequest="25" />
    <Grid.GestureRecognizers>
       <TapGestureRecognizer Command="{Binding  Source={RelativeSource AncestorType={x:Type vm:KlinectBaseViewModel}}, Path=BackView}" />
    </Grid.GestureRecognizers>
 </Grid>

CS:

  public ICommand BackView => new Command(async () => await NavigationService.GoBack());

This looks like a duplicate of this: https://stackoverflow.com/questions/30417671/xamarin-forms-can-i-embed-one-contentpage-or-contentview-into-another-contentpa — Dan Gerchcovich, Aug 19 '20 at 10:20

score 1 · Accepted Answer · answered Aug 19 '20 at 09:49

You could set the TitleView of ContentPage as you want . For example

<NavigationPage.TitleView>
        <Grid Grid.Row="0" Grid.Column="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.1*"/>
                <ColumnDefinition Width="0.1*"/>
                <ColumnDefinition Width="0.6*" />
                <ColumnDefinition Width="0.1*"/>
                <ColumnDefinition Width="0.1*"/>
            </Grid.ColumnDefinitions>
            
            <!--back to preview page-->
            <ImageButton Margin="0,20,0,0"
            Grid.Column="0"
         HeightRequest="25"
         HorizontalOptions="Center"
         Source="back.png" 
         VerticalOptions="Center"
         WidthRequest="25" 
         Command="{Binding xxx}"/>

            <!--back to last page ,  if necerssary-->
            <ImageButton Margin="0,20,0,0"
            Grid.Column="1"
         HeightRequest="25"
         HorizontalOptions="Center"
         Source="back.png" 
         VerticalOptions="Center"
         WidthRequest="25" 
         Command="{Binding xxx}"/>


            <!--Title Label-->
            <Label Grid.Column="2" Text="Title" TextColor="White" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />

        </Grid>
    </NavigationPage.TitleView>

For more details you could check https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical#displaying-views-in-the-navigation-bar .

On the Command="{Binding xxx}" how do i tell it to send the user back to the last page? — Kyle Lindsay, Aug 19 '20 at 12:57
Check https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical . — Lucas Zhang, Aug 19 '20 at 13:04
Yes haha. I have managed to sort this out by using public ICommand BackView => new Command(async () => await NavigationService.GoBack()); — Kyle Lindsay, Aug 19 '20 at 13:17

FIXED: Xamarin Forms - How do i add a back button in the navigation bar?

1 Answers1