相对布局（XAML）中的布局项目

我想要一个水平居中的图像，然后放置在它下面的一个文本框，也水平居中。相对布局（XAML）中的布局项目

从我所见过的所有例子中，相关视图的宽度和高度需要事先知道，以便对它进行硬编码。当然，情况并非如此？

这是我到目前为止尝试过的。

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

来源

2015-07-03 David Pilkington

如果你想要一个元素在另一个下面，为什么不使用垂直的StackLayout？我认为你的布局和所有这些约束对于如此简单的目的来说太复杂了......编辑：如果你需要在logo下方放置条目，但不是第二个图像，我认为这是Grid的最佳布局。只需将徽标和条目放置到第一列，第二个图像将放在第二列。 – Grisha

@Grisha我想要相对布局的原因是有更多的项目将被添加。其中一个是需要停靠在屏幕底部的按钮 –

我仍然认为Grid可以更好地为您服务。这是非常灵活的布局。你可以把这个按钮放在单独的最后一行（高度设置为自动），这将做... – Grisha

不知道这是你需要的，但要实现你的目标，你需要把图像和文字在同一StackLayout这是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>

来源

2015-07-03 11:55:09

这是什么使用相对布局？ – GvSharma

相对布局（XAML）中的布局项目

回答

相关问题