如何在Xamarin.Forms的Entry中添加背景图像? [英] How to add background image to Entry in Xamarin.Forms?

问题描述

我的设计师创建了一个背景图像来对输入进行样式设置，如下所示:

my designer created a background image to style the inputs it looks like this:

如何在Xamarin.Forms中完成此操作? 我猜测最简单的部分是删除边框，但我还需要将其放置在该图像的顶部(我假设使用RelativeLayout?)，最困难的部分(以我的观点)将其尺寸设置为填充"图片的其余部分. 我正在使用XAML，但是如果您在C#中知道，我可以推断出来，没问题. 有什么想法吗?

How could I accomplish that in Xamarin.Forms? The easy part I'm guessing is removing the border, but I also need to position it on top of that image (I'd assume using RelativeLayout?) and the hardest (in my point of view) setting its proper size to "fill" the remaining of the image. I'm using XAML, but if you know in C# I can extrapolate that, no problem. Any ideas?

到目前为止，这是我设法做到的:

This is what I've managed to do so far:

代码:

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

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

谢谢！

推荐答案

您肯定在正确的轨道上.只需向RelativeLayout中的View之一添加一些约束.

You're definitely on the right track. Just need to add a few constraints to one of the Views in your RelativeLayout.

<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，它将占用StackLayout中未被ico_password占用的所有空间.

That will position the StackLayout to fill the entire RelativeLayout with 8dpx padding on each side. Then because the Entry is set to FillAndExpand, it will take up all the space in the StackLayout not occupied by ico_password.

这篇关于如何在Xamarin.Forms的Entry中添加背景图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！