Half Circle Overlay in Background on the Bottom of Page in Xamarin

user_14515147 0
Viewed 120

I'm working on adding a fix half circle overlay in background on the bottom of page.

Structure of all Pages in App (all pages are responsive)

<ContentPage.Content>
    <StackLayout>
        
        // Top Bar => Icons e.t.c
        <StackLayout VerticalOptions="Start">
        </StackLayout>

        // Center => Content
        <StackLayout HorizontalOptions="CenterAndExpand"
                     VerticalOptions="CenterAndExpand">
        </StackLayout>

        // End => Button
        <StackLayout HorizontalOptions="Center"
                         VerticalOptions="End">
        </StackLayout>

    </StackLayout>
</ContentPage.Content>

Now, I wanted to add an Half Circle Overlay, but I couldn't do that by code, so, I used the Image for this half circle overlay.

I wanted to add it in last StackLayout, but can't put RelativeLayout in StackLayout. So, I remove the last StackLayout and pasted the RelativeLayout code instead.

<RelativeLayout
    HorizontalOptions="End">
    <Image
        Source="drawable/background_halfcircle.png"
        RelativeLayout.WidthConstraint=
        "{ConstraintExpression Type=RelativeToParent, Property=Width}"
        RelativeLayout.HeightConstraint=
        "{ConstraintExpression Type=RelativeToParent, Property=Height}"/>
    <Grid
        RelativeLayout.WidthConstraint=
        "{ConstraintExpression Type=RelativeToParent, Property=Width}"
        RelativeLayout.HeightConstraint=
        "{ConstraintExpression Type=RelativeToParent, Property=Height}">

        <Button
            Text="Button"
            Margin="0,0,0,10"/>
    </Grid>
</RelativeLayout>

Now, the problem is that it pushed all the code in Start & Center StackLayout to the top (stretched it, looking terrible).

How could I add this Half Circle Overlay in the bottom of every page and the above StackLayout aren't get effected?

xamarin.forms xamarin .net c#
1 Answers

Easier to overlay using a one-row Grid:

<ContentPage.Content>
    <Grid>
        <!-- Grid Row/Column default to 0. -->
        <StackLayout>
            ... everything that isn't in the overlay ...
        </StackLayout>
        <!-- Grid Row/Column default to 0; so overlaid on StackLayout -->
        <RelativeLayout ...
            ...
        </RelativeLayout>
    </Grid>
</ContentPage.Content>

In fact, I never use RelativeLayout. Can do everything you want using Grid rows and columns.

  • Overlay by specifying same row/column.
  • Proportions using row/column specifiers, e.g. "2*", "3*'.
  • stack-like layouts using "Auto" height or width. (I do use StackLayout when convenient; just mentioning that Grid can incorporate stack-like areas.)

On paper, sketch desired layout. Draw vertical and horizontal lines to separate the areas. Then can determine how to put into a grid. For example, one area might span two columns.

user_1993640
Related