相對佈局（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）中的佈局項目

回答

相關問題