Set back button in upper left corner aligned with logo in Xamarin.Forms

Question

What is the best way to add back image with TapRecognizer in top left corner? I have only one condition and that is that back button must be aligned with logo which is on center of the page. I started with RelativeLayout which is a part of StackLayout.

Only thing is that my HeightRequest of the logo is Binding property to code behind, and therefore I cant know size on a different screens (Binding property takes App.Height and divide with some number, to be proportional on all phones the same).

Present:

XAML:

    <ContentPage.Content>
        <ScrollView>
        <StackLayout 
            Padding="{Binding MainStackSidePadding}" 
            Spacing="15">
            <RelativeLayout 
            Padding="{Binding MainStackSidePadding}" 
            BackgroundColor="Red">
                <Image x:Name="logo" Source="testbar.png" HorizontalOptions="Center" HeightRequest="{Binding LogoSmallHeight}" 
                       RelativeLayout.XConstraint =
                            "{ConstraintExpression Type=RelativeToParent,
                                Property=Width,
                                Factor=0.5,
                                Constant=0}"
                        RelativeLayout.YConstraint =
                            "{ConstraintExpression Type=RelativeToParent,
                                Property=Height,
                                Factor=0,
                                Constant=0}"/>
                <Image x:Name="backButton" Source="back.png" HeightRequest="30"
                        RelativeLayout.XConstraint =
                            "{ConstraintExpression Type=RelativeToParent,
                                Property=Width,
                                Factor=0.025,
                                Constant=0}"
              RelativeLayout.YConstraint =
                            "{ConstraintExpression Type=RelativeToView,
                                ElementName = logo,
                                Property=Height,
                                Factor=0,
                                Constant=50}">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer
                    Command="{Binding GoBackCommand}"/>
                    </Image.GestureRecognizers>
                </Image>
            </RelativeLayout>
            <!--Some other elements and labels etc. -->
        </StackLayout>
    </ScrollView>
</ContentPage.Content>

I want to achieve this:

Maybe the RelativeLayout isn't the best solution for this problem? Thanks.

@Jason how can I do that? Because, my entire row will expand as image logo has a height? then how I can set my back image to top of the cell? — Stefan0309, May 24 '18 at 18:13
each image can be aligned relative to it's container (grid cell) — Jason, May 24 '18 at 18:17

score 0 · Answer 1 · answered Nov 29 '20 at 20:55

If you are open to use Shell as a base of your a Xamarin.Forms app, then you can easily achieve this using Shell.TitleView without the need of a custom renderer, or extra code just define your title content, bind it or even style it as you like. Navigation icon like hamburger for flyout if required and arrows comes built-in inside Shell.

You could refer to the documentation linked or to my similar answers in:

Center align toolbar items in Xamarin Forms

Xamarin.Forms: How to add custom view in Center of ToolbarItem from Renderer

Set back button in upper left corner aligned with logo in Xamarin.Forms

1 Answers1