my designer created a background image for styling inputs that looks like this:
How could I do this in Xamarin.Forms? The easy part that I guess is removing the border, but I also need to place it on top of this image (suppose using RelativeLayout?), And the most difficult (from my point of view) setting it to the right size to fill the “remaining image. I use XAML, but if you know in C #, I can extrapolate this without a problem. Any ideas?
EDIT: This is what I have managed to do so far:
The code:
<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}">
<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>
<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>
Thank!