如何添加背景圖片到Xamarin.Forms中的Entry？

Question

我的設計師創造了一個背景圖片的風格，它看起來像這樣的投入：

我怎麼能做到在Xamarin.Forms？ 我猜的簡單部分是刪除邊框，但我還需要將其放置在該圖像的頂部（我假設使用RelativeLayout？）和最難（以我的觀點）將其正確尺寸設置爲「填充「剩餘的圖像。 我使用XAML，但如果你知道在C＃中，我可以推斷，沒有問題。 任何想法？

編輯： 這是我已經設法到目前爲止做：

代碼：

<RelativeLayout> 
    <Image Source="input_selected.png"></Image> 
    <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand"> 
    <Image Source="ico_password.png" Scale="0.7"></Image> 
    <Entry x:Name="PasswordT" Placeholder="Senha" IsPassword="True" HorizontalOptions="CenterAndExpand" Text=""></Entry> 
    </StackLayout> 
</RelativeLayout> 

EDIT2：

<?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="LoginPage" 
      Style="{StaticResource LoginBackground}"> 
    <ScrollView> 
    <RelativeLayout x:Name="RelativeLayoutLogin"> 
     <StackLayout x:Name="BackgroundLayout" Spacing="15" HorizontalOptions="Center" VerticalOptions="Start"> 
     <StackLayout.Padding> 
      <OnPlatform x:TypeArguments="Thickness" iOS="15, 38, 15, 15" Android="15, 18, 15, 15" WinPhone="15, 18, 15, 15" /> 
     </StackLayout.Padding> 
     <StackLayout.Children> 
      <Image Source="logo.png" Aspect="AspectFit" HeightRequest="75"></Image> 
      <Image x:Name="BackgroundBox" Source="box_completo.png" Aspect="AspectFill"></Image> 
     </StackLayout.Children> 
     </StackLayout> 

     <StackLayout RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=BackgroundLayout, Property=Y, Constant=111}" 
        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=BackgroundLayout, Property=Width, Factor=1}"> 
     <!--<StackLayout.Padding> 
      <OnPlatform x:TypeArguments="Thickness" iOS="15, 38, 15, 15" Android="15, 18, 15, 15" WinPhone="15, 18, 15, 15" /> 
     </StackLayout.Padding>--> 
     <RelativeLayout> 
      <Image Source="input.png" x:Name="BgUsername"></Image> 
      <Image Source="input_selected.png" x:Name="SelectedBgUsername" IsVisible="False"></Image> 
      <StackLayout RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=8}" 
        RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=8}" 
        RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Constant=-16}" 
        RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Constant=-16}" 
        Orientation="Horizontal"> 
      <Image Source="ico_user.png" Scale="0.6"></Image> 
      <Entry x:Name="UsernameOrEmail" Placeholder="Nome de usuário" IsEnabled="True" HorizontalOptions="FillAndExpand" Text="" TextColor="Black"></Entry> 
      </StackLayout> 
     </RelativeLayout> 
     <RelativeLayout> 
      <Image Source="input.png" x:Name="BgPassword"></Image> 
      <Image Source="input_selected.png" x:Name="SelectedBgPassword" IsVisible="False"></Image> 
      <StackLayout RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=8}" 
         RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=8}" 
         RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Constant=-16}" 
         RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Constant=-16}" 
         Orientation="Horizontal"> 
      <Image Source="ico_password.png" Scale="0.6"></Image> 
      <Entry x:Name="Password" Placeholder="Senha" IsPassword="True" HorizontalOptions="FillAndExpand" Text="" TextColor="Black"></Entry> 
      </StackLayout> 
     </RelativeLayout> 
     <!--<RelativeLayout Scale="0.85"> 
      <Image Source="input.png" x:Name="BgUsername"></Image> 
      <Image Source="input_selected.png" x:Name="SelectedBgUsername" IsVisible="False"></Image> 
      <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Padding="15, 5, 0, 0"> 
      <Image Source="ico_user.png" Scale="0.6"></Image> 
      <Entry x:Name="UsernameOrEmail" Placeholder="Nome de usuário" IsEnabled="True" WidthRequest="300" HorizontalOptions="CenterAndExpand" Text="" TextColor="Black"></Entry> 
      </StackLayout> 
     </RelativeLayout> 
     <RelativeLayout Scale="0.85"> 
      <Image Source="input.png" x:Name="BgPassword"></Image> 
      <Image Source="input_selected.png" x:Name="SelectedBgPassword" IsVisible="False"></Image> 
      <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Padding="10, 5, 0, 0"> 
      <Image Source="ico_password.png" Scale="0.6"></Image> 
      <Entry x:Name="Password" Placeholder="Senha" IsPassword="True" HorizontalOptions="CenterAndExpand" WidthRequest="300" Text="" TextColor="Black"></Entry> 
      </StackLayout> 
     </RelativeLayout>--> 
     <Image x:Name="LoginButtonFm" Style="{StaticResource FmLoginButton}" Scale="0.85"></Image> 
     <Label Text="OU" TextColor="Black" HorizontalOptions="CenterAndExpand"></Label> 
     <Image x:Name="LoginButtonFacebook" Style="{StaticResource FacebookLoginButton}" Scale="0.85"></Image> 
     <Image x:Name="LoginButtonGoogle" Style="{StaticResource GoogleLoginButton}" Scale="0.85"></Image> 
     <Image x:Name="LoginButtonTwitter" Style="{StaticResource TwitterLoginButton}" Scale="0.85"></Image> 
     </StackLayout> 
    </RelativeLayout> 
    </ScrollView> 
</ContentPage> 

謝謝！

Answer 1

你絕對是在正確的軌道上。只需要在RelativeLayout的View之一中添加一些限制即可。

<RelativeLayout> 
    <Image Source="input_selected.png"></Image> 
    <StackLayout 
     RelativeLayout.XConstraint="{ConstraintExpression Type=Constant, Constant=8}" 
     RelativeLayout.YConstraint="{ConstraintExpression Type=Constant, Constant=8}" 
     RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Constant=-16}" 
     RelativeLayout.HeightConstraint="{ConstraintExpression Type=Constant, Constant=48}" 
     Orientation="Horizontal"> 
     <Image Source="ico_password.png" Scale="0.7"></Image> 
     <Entry x:Name="PasswordT" Placeholder="Senha" IsPassword="True" HorizontalOptions="FillAndExpand" Text="offspring"></Entry> 
    </StackLayout> 
</RelativeLayout> 

這將定位StackLayout以填充整個RelativeLayout，每邊填充8dpx填充。然後因爲Entry設置爲FillAndExpand，它將佔用未被ico_password佔用的StackLayout中的所有空間。