CODEWITHSUNDEEP
xamlxamarin.forms
lonelydev101
lonelydev101

Reputation: 1911

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

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: back button and logo

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: enter image description here

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

Upvotes: 1

Views: 882

Answers (1)

Cfun
Cfun

Reputation: 9721

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

Upvotes: 0

Related Questions