Question

我正在努力在Xamarin Forms中创建一个登录屏幕，并希望实现这样的目标。

我在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 我也尝试过自定义渲染器，但无法实现所需的UI。

任何帮助都将不胜感激。

由于

Answer 1

您可以创建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>

Answer 2

你可以这样使用，

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

对于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 4

或者......，你可以按照XamlGirl这个非常简单的教程：

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

Answer 5

不幸的是，Frame的Outline颜色属性在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);
            }
        }
    }
}

如何在进入Xamarin Forms之前放置一个图标

5 个答案: