如何在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>

编辑2：

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

谢谢！

- eestein

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

- Joel Anair

---

谢谢Joel，但我可能误解了一些东西...这是在插入您的约束后的样子：http://i.imgur.com/T17J5d2.png。正如您所看到的，输入不仅推动了图标，而且还向下移动了。 - eestein

@eestein 很抱歉听到那个方法没有起作用。看起来RelativeLayout可能占据了整个空间，这取决于它所在的容器类型。如果您将其放入StackLayout中，并给它一个与input_selected.png（以dip为单位）相匹配的HeightRequest和WidthRequest，布局是否更加对齐？ - Joel Anair

@eestein感谢您发布完整的XAML。我一有机会就会在VS中启动它，看看我缺少了什么。 - Joel Anair

@eestein，我更新了我的答案，将StackLayout的高度设置为显式值，而不是填充其容器，因为同一个RelativeLayout中有多个StackLayout。由于图像资产在某种程度上确定布局，所以我不能确定它是否能够正常工作，但我认为这可能会有所帮助。 - Joel Anair

非常感谢。我对表单还不熟悉，所以我还没有掌握RelativeLayout。另外一个问题，我的WP模拟器上输入框显示白色背景，你知道如何去除吗？在我的Android设备上没有显示，所以我猜测这可能是模拟器中的一个错误。再次感谢！ - eestein