C# 如何将背景图像添加到Xamarin.Forms中的条目中?
我的设计师创建了一个背景图像来设置输入的样式,如下所示: 我怎样才能在Xamarin.表单中实现这一点? 我猜最简单的部分是删除边框,但我还需要将其放置在该图像的顶部(我假设使用RelativeLayout?),最难的部分(在我看来)是设置其适当的大小以“填充”图像的其余部分。 我使用的是XAML,但如果你知道在C中,我可以推断出来,没问题。 有什么想法吗 编辑: 到目前为止,我已经做到了这一点: 守则:C# 如何将背景图像添加到Xamarin.Forms中的条目中?,c#,xaml,xamarin,xamarin.forms,C#,Xaml,Xamarin,Xamarin.forms,我的设计师创建了一个背景图像来设置输入的样式,如下所示: 我怎样才能在Xamarin.表单中实现这一点? 我猜最简单的部分是删除边框,但我还需要将其放置在该图像的顶部(我假设使用RelativeLayout?),最难的部分(在我看来)是设置其适当的大小以“填充”图像的其余部分。 我使用的是XAML,但如果你知道在C中,我可以推断出来,没问题。 有什么想法吗 编辑: 到目前为止,我已经做到了这一点: 守则: <RelativeLayout> <Image Source="
<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>
谢谢 你肯定走对了方向。只需在
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,以在每侧用8dpx填充填充整个RelativeLayout。然后因为条目
被设置为填充和展开
,它将占用堆栈布局
中ico_密码未占用的所有空间。谢谢Joel,但我可能误解了某些内容。。。这就是插入约束后的情况:正如您所看到的,输入不仅按下了图标,而且向下移动了。@eestein很抱歉听到这样做不起作用。看起来RelativeLayout可能占据了整个空间,这取决于它所在的容器类型。如果你把它放在一个StackLayout中,给它一个HeightRequest和WidthRequest,使其与input_selected.png的尺寸(倾斜)相匹配,布局是否排列得更好?嘿,Joel,请检查EDIT2,这是我的完整代码。我能够让它看起来像这样:使用填充和缩放,正如您在注释代码中看到的那样,在测试代码之前,我注释了所有更改,这样它们就不会干扰您的解决方案。看到代码有帮助吗?@eestein感谢您发布完整的XAML。一旦有机会,我会在VS中启动它,看看是否能找出我遗漏了什么。@eestein,我更新了答案,明确设置了StackLayout的高度,而不是填充它的容器,因为在同一个RelativeLayout中有多个StackLayout。我不能确定没有图像资源它是否可以工作,因为它们在某些方面决定了布局,但我认为这可能会有所帮助。