Layout elements in relative layout (XAML)

I am trying to create a horizontally oriented image and then the textbox below it, also centered horizontally.

Of all the examples I've seen, the width and height of relative views must be known ahead of time in order to hard code it. Is it really not so?

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>

      

+3


source to share


1 answer


Not sure if this is necessary, but to achieve your goal, you need to put the image and text in the same StackLayout that 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>

      

+2


source







All Articles