在相对布局(XAML)中布局项

本文关键字：布局 相对 XAML | 更新日期: 2023-09-27 18:00:52

我正在尝试一个水平居中的图像，然后在其下方放置一个文本框，也水平居中。

从我看到的所有例子来看，在硬编码之前，需要知道相对视图的宽度和高度。当然不是这样吗？

以下是我迄今为止所做的尝试。

        <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>

在相对布局(XAML)中布局项

不确定这是否是您所需要的，但为了实现您的目标，您需要将图像和文本放在RelativeLayout内的同一StackLayout中。

<?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>
相关文章：