CODEWITHSUNDEEP
c#xamarinxamarin.forms
David Pilkington
David Pilkington

Reputation: 13618

Layout items in Relative Layout (XAML)

I am trying to have an image that is horizontally centred, and then a text box positioned below it, also centred horizontally.

From all of the examples that I have seen, the widths and heights of the relative views need to be known before hand to hard code it. Surely this is not the case?

Here is what I have tried so far.

        <RelativeLayout>
        <Image x:Name="logo" Source="logo.png" HorizontalOptions="CenterAndExpand"/>

        <StackLayout Orientation="Horizontal"
            BackgroundColor="Lime"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, 
                                    Property=Width,
                                    Factor=0.5"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, 
                                    ElementName=logo
                                    Property=Y,
                                    Constant=100}">
            <Entry Text="{Binding Email, Mode=TwoWay}" Keyboard="Email" x:Name="signUpemailEntry" Placeholder="Email" TextColor="#2980b9" WidthRequest="270"  BackgroundColor="Fuchsia">
                <Entry.Behaviors>
                    <behave:EmailValidatorBehaviour x:Name="signUpemailValidator"/>
                 </Entry.Behaviors>
            </Entry>

            <Image x:Name="signUpemailSuccessErrorImage"
                  Style="{Binding Source={x:Reference emailValidator}, 
                          Path=IsValid, 
                          Converter={StaticResource boolToStyleImage}}"/>
       </StackLayout>
    </RelativeLayout>

Upvotes: 4

Views: 6477

Answers (1)

Art
Art

Reputation: 3167

Not sure if this is that you need, but to achieve your goal you'll need to put image and text in the same StackLayout which is inside the RelativeLayout.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="TestRelativeLayout.MyPage">
    <ContentPage.Content>
           <RelativeLayout>
        <StackLayout Orientation="Vertical">
            <Image x:Name="logo" Source="postage1.jpg" HorizontalOptions="Center"/>
            <Entry Text="Test" Keyboard="Email" x:Name="signUpemailEntry"
            Placeholder="Email" TextColor="#2980b9" WidthRequest="270"
            BackgroundColor="Fuchsia"
            HorizontalOptions="Center"/>
       </StackLayout>
    </RelativeLayout>
    </ContentPage.Content>
</ContentPage>

Upvotes: 2

Related Questions