如何在Xamarin Forms登录页的Entry控件前添加图标

嘿，我看你正在用Xamarin Forms打造带图标的登录输入框，已经尝试了Frame+StackLayout的方案，这个思路完全可行！我来帮你优化下现有代码，再分享几种更优雅、可复用的实现方式～

一、优化你现有的代码 #

你原来的代码里MaterialEntry的WidthRequest="50"明显太小了，会导致输入框显示不全，另外可以给图片加些边距让布局更美观，调整后的代码如下：

<Frame CornerRadius="4" 
       HasShadow="false" 
       OutlineColor="White" 
       BackgroundColor="{StaticResource MocoBlue}" 
       HeightRequest="50"
       Padding="10,0">
    <StackLayout Orientation="Horizontal" 
                 VerticalOptions="CenterAndExpand">
        <!-- 给图标加边距，调整位置 -->
        <Image x:Name="emailImage" 
               Source="nav_user" 
               HorizontalOptions="Start"
               WidthRequest="24"
               HeightRequest="24"
               Margin="0,0,10,0"/>
        <!-- 让输入框占满剩余空间，去掉固定WidthRequest -->
        <suave:MaterialEntry Placeholder="Your email address" 
                             HorizontalOptions="FillAndExpand"
                             Text="{Binding Email}"
                             PlaceholderColor="White"
                             TextColor="White"/>
    </StackLayout>
</Frame>

这里做了几个关键调整：

• 给Frame加了Padding，让内部控件不会贴边
• 给Image设置了固定的宽高和右侧边距，保证图标大小统一且和输入框有间距
• 把MaterialEntry的HorizontalOptions设为FillAndExpand，让它自动占满剩余的空间，去掉不合理的固定宽度

二、封装成可复用的ContentView（推荐） #

如果登录页有多个带图标的输入框（比如密码框），可以把这个布局封装成自定义的ContentView，减少重复代码：

1. 创建带图标的Entry控件（IconEntry.xaml） #

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:suave="clr-namespace:SuaveControls.MaterialForms;assembly=SuaveControls.MaterialForms"
             x:Class="YourApp.Controls.IconEntry">
    <Frame CornerRadius="4" 
           HasShadow="false" 
           OutlineColor="White" 
           BackgroundColor="{StaticResource MocoBlue}" 
           HeightRequest="50"
           Padding="10,0">
        <StackLayout Orientation="Horizontal" VerticalOptions="CenterAndExpand">
            <Image Source="{Binding IconSource}" 
                   WidthRequest="24"
                   HeightRequest="24"
                   Margin="0,0,10,0"/>
            <suave:MaterialEntry Placeholder="{Binding PlaceholderText}" 
                                 HorizontalOptions="FillAndExpand"
                                 Text="{Binding EntryText}"
                                 PlaceholderColor="White"
                                 TextColor="White"
                                 IsPassword="{Binding IsPassword}"/>
        </StackLayout>
    </Frame>
</ContentView>

2. 后台代码（IconEntry.xaml.cs） #

public partial class IconEntry : ContentView
{
    public static readonly BindableProperty IconSourceProperty =
        BindableProperty.Create(nameof(IconSource), typeof(string), typeof(IconEntry));

    public static readonly BindableProperty PlaceholderTextProperty =
        BindableProperty.Create(nameof(PlaceholderText), typeof(string), typeof(IconEntry));

    public static readonly BindableProperty EntryTextProperty =
        BindableProperty.Create(nameof(EntryText), typeof(string), typeof(IconEntry), defaultBindingMode: BindingMode.TwoWay);

    public static readonly BindableProperty IsPasswordProperty =
        BindableProperty.Create(nameof(IsPassword), typeof(bool), typeof(IconEntry), false);

    public string IconSource
    {
        get => (string)GetValue(IconSourceProperty);
        set => SetValue(IconSourceProperty, value);
    }

    public string PlaceholderText
    {
        get => (string)GetValue(PlaceholderTextProperty);
        set => SetValue(PlaceholderTextProperty, value);
    }

    public string EntryText
    {
        get => (string)GetValue(EntryTextProperty);
        set => SetValue(EntryTextProperty, value);
    }

    public bool IsPassword
    {
        get => (bool)GetValue(IsPasswordProperty);
        set => SetValue(IsPasswordProperty, value);
    }

    public IconEntry()
    {
        InitializeComponent();
        BindingContext = this;
    }
}

3. 在登录页使用这个自定义控件 #

<StackLayout Spacing="15" Padding="20">
    <controls:IconEntry IconSource="nav_user" 
                        PlaceholderText="Your email address"
                        EntryText="{Binding Email}"/>
    <controls:IconEntry IconSource="nav_lock" 
                        PlaceholderText="Your password"
                        EntryText="{Binding Password}"
                        IsPassword="True"/>
</StackLayout>

这样一来，不管你有多少个带图标的输入框，都可以一行代码搞定，维护起来也方便！

三、用Grid布局替代StackLayout（性能更优） #

如果你的页面控件比较多，用Grid布局会比StackLayout更高效，因为StackLayout需要逐个计算控件尺寸，而Grid可以提前规划布局：

<Frame CornerRadius="4" 
       HasShadow="false" 
       OutlineColor="White" 
       BackgroundColor="{StaticResource MocoBlue}" 
       HeightRequest="50"
       Padding="10,0">
    <Grid ColumnDefinitions="Auto,*">
        <Image Grid.Column="0"
               Source="nav_user" 
               WidthRequest="24"
               HeightRequest="24"
               Margin="0,0,10,0"
               VerticalOptions="Center"/>
        <suave:MaterialEntry Grid.Column="1"
                             Placeholder="Your email address" 
                             HorizontalOptions="FillAndExpand"
                             Text="{Binding Email}"
                             PlaceholderColor="White"
                             TextColor="White"/>
    </Grid>
</Frame>

Grid的ColumnDefinitions="Auto,*"表示第一列根据图标宽度自动调整，第二列占满剩余空间，布局计算更高效。

内容的提问来源于stack exchange，提问作者Krishna Shinde