Как разместить иконку перед входом в Xamarin Forms

Question

Я работаю над созданием экрана входа в Xamarin Forms и хочу добиться чего-то подобного.

Желаемый интерфейс

Я пробовал это с использованием Frame в XAML ( см. Ниже )

<Frame CornerRadius="4" HasShadow="false" OutlineColor="White" BackgroundColor="{StaticResource MocoBlue}" HeightRequest="50">
                            <StackLayout Orientation="Horizontal">
                                <Image x:Name="emailImage" Source="nav_user" HorizontalOptions="Start"/>
                                <suave:MaterialEntry Placeholder="Your email address" WidthRequest="50" Text="{Binding UserName}" HorizontalOptions="FillAndExpand" />
                            </StackLayout>
                        </Frame>

Код выше дает мне это: (см. Ниже)

Result.iOS

Result.Android

Это работает только на iOS, а не на Android Я также пробовал пользовательские средства визуализации, но не смог достичь желаемого пользовательского интерфейса.

Любая помощь будет оценена.

Спасибо

Answer 1

К сожалению, свойство Цвет контура фрейма не работает на Android. Но вы можете просто добавить собственный рендерер в ваш проект Android, чтобы он работал.

Вот код:

[assembly: ExportRenderer(typeof(Frame), typeof(OutlinedFrameRenderer))]
namespace haveThat.Droid.CustomDroid
{
    public class OutlinedFrameRenderer : FrameRenderer
    {
        public OutlinedFrameRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
        {
            base.OnElementChanged(e);
        }
        public override void Draw(Canvas canvas)
        {
            base.Draw(canvas);

            using (var paint = new Paint { AntiAlias = true })
            using (var path = new Path())
            using (Path.Direction direction = Path.Direction.Cw)
            using (Paint.Style style = Paint.Style.Stroke)
            using (var rect = new RectF(0, 0, canvas.Width, canvas.Height))
            {
                float px = Forms.Context.ToPixels(Element != null ? Element.CornerRadius : 10); //Default Corner Radius = 10
                float py = Forms.Context.ToPixels(Element != null ? Element.CornerRadius : 10); //Default Corner Radius = 10
                path.AddRoundRect(rect, px, py, direction);

                //Set the Width of the Border here
                paint.StrokeWidth = 1f;
                paint.SetStyle(style);

                //Take OutLineColor from XAML Frame element and set it natively here.
                //string FrameBorderColorHex = String.Format("#{0:X2}{1:X2}{2:X2}", (int)(Element.OutlineColor.R * 255), (int)(Element.OutlineColor.G * 255), (int)(Element.OutlineColor.B * 255));

                string FrameBorderColorHex = String.Format("#{3:X2}{0:X2}{1:X2}{2:X2}", (int)(Element.OutlineColor.R * 255), (int)(Element.OutlineColor.G * 255), (int)(Element.OutlineColor.B * 255), (int)(Element.OutlineColor.A * 255));
                try
                {
                    paint.Color = Android.Graphics.Color.ParseColor(FrameBorderColorHex);
                }
                catch
                {
                    paint.Color = Android.Graphics.Color.White;
                }
                canvas.DrawPath(path, paint);
            }
        }
    }
}

Answer 2

ИЛИ ... вы можете следовать этому очень простому руководству от XamlGirl:

https://xamgirl.com/image-entry-in-xamarin-forms/

Answer 3

Вы можете использовать как это,

<Grid>
      <Grid.ColumDefinition>
      <ColumnDefinition width="40" />
  <ColumnDefinition width="*" />
      </Grid.RowDefinitions>
 <AbsoluteLayout


                        VerticalOptions="Center">

                                <Image
                            HeightRequest="20"
                            HorizontalOptions="EndAndExpand"
                            Source="{Binding PasswordIcon}"
                            WidthRequest="20" />
              </AbsoluteLayout>
               <Entry Grid.Column=1
Grid.ColumnSpan=1
                    x:Name="entryPassword"  
                    HeightRequest="50"
                    HorizontalOptions="FillAndExpand"          
                    Text="{Binding Password}"
                    Placeholder="Password">                                   
               </Entry>


  </Grid>

Answer 4

Для Android создайте customEntryRenderer, используя приведенный ниже код, чтобы сделать запись без полей.

[assembly: ExportRenderer(typeof(Entry), typeof(CustomEntryRender))]
namespace Graysons.Droid.Renderers
{
    public class CustomEntryRender : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);
            Control?.SetBackgroundColor(Android.Graphics.Color.Transparent);            
        }
    }
}

Для IOS:

[assembly: ExportRenderer(typeof(Entry),typeof(CustomEntryRender))]
namespace Graysons.iOS.Renderers
{
    public class CustomEntryRender : EntryRenderer
    {
        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            Control.Layer.BorderWidth = 0;
            Control.BorderStyle = UITextBorderStyle.None;
        }
    }
}

Answer 5

Вы можете создать пользовательский рендерер Entry для отображения записи закругленного угла (как показано на рисунке) и размещения изображения следующим образом:

  <Grid>
      <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>
               <custom:CustomEntry
                    x:Name="entryPassword"  
                    HeightRequest="50"
                    HorizontalOptions="Fill"          
                    ReturnKeyType="Done"                  
                    Text="{Binding Password}"
                    Placeholder="Password">                                   
               </custom:CustomEntry>

               <AbsoluteLayout
                        Margin="0,5,20,0"
                        HorizontalOptions="End"
                        VerticalOptions="Center">

                                <Image
                            HeightRequest="20"
                            HorizontalOptions="EndAndExpand"
                            Source="{Binding PasswordIcon}"
                            WidthRequest="20" />
              </AbsoluteLayout>
  </Grid>