圆角输入框 - Xamarin Forms UWP

Question

有没有可能自定义Entry的半径，以获得略微圆角的效果？

- user10383915

---

https://forums.xamarin.com/discussion/18056/border-radius-and-border-on-entry - cvanbeek

Answer 1

在 Xamarin.Forms 中，您可以使用自定义渲染器 Custom Renderer。

在 iOS 中

//...
using App11;
using App11.iOS;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(MyEntry), typeof(MyiOSEntry))]
namespace App11.iOS
{
  public class MyiOSEntry:EntryRenderer
  {
    protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
    {
        base.OnElementChanged(e);

        if (Control != null)
        {
            Control.Layer.MasksToBounds = true;
            Control.Layer.CornerRadius = 10;  //set the rounded corner
            Control.Layer.BorderColor = UIColor.Red.CGColor;
            Control.Layer.BorderWidth = 3;
        }
    }
 }
}

在Android中，在“资源”->“可绘制”文件夹下创建一个名为“edit_text_style.xml”的XML文件。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item>
   <shape
     android:shape="rectangle">
    <solid
      android:color="#ffffff" />
    <corners
      android:radius="10dp" />
    <stroke
      android:width="2dp"
      android:color="#3bbdfa" />
   </shape>
</item>

在自定义渲染器中

using Android.Support.V4.Content.Res;
using App11;
using App11.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(MyEntry), typeof(MyAndriodEntry))]
namespace App11.Droid
{
 public class MyAndriodEntry:EntryRenderer
 {
   public MyAndriodEntry(Context context):base(context)
    {

    }

    protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
    {
        base.OnElementChanged(e);

        if(Control!=null)
        {
            Control.SetBackground(ResourcesCompat.GetDrawable(Resources, Resource.Drawable.edit_text_style, null) );
        }

    }
  }
}

在UWP中创建一个名为Styles的文件夹，并添加一个类型为Resource Dictionary的新项，命名为Dictionary1.xaml。 在Dictionary1.xaml中放置以下代码，以实现一个圆角文本框。 在Custom Renderer中。

using App11;
using App11.UWP;
using Windows.UI.Xaml.Controls;
using Xamarin.Forms;
using Xamarin.Forms.Platform.UWP;

[assembly: ExportRenderer(typeof(MyEntry), typeof(MyUWPEntry))]
namespace App11.UWP
{
  public class MyUWPEntry:EntryRenderer
  {

    protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
    {
        base.OnElementChanged(e);

        if(Control!=null)
        {
           Control.Style = (Windows.UI.Xaml.Style)App11.UWP.App.Current.Resources["StyleRoundedTextBox"];
        }

    }
  }
}

如何更改这个样式并创建此代码？ 很简单，在msdn.com中搜索“objectName”在uwp中的默认样式，然后您将找到所需对象的默认样式。按照您想要的方式进行更改，并直接将其添加到应用程序资源或链接它（就像我在这里做的那样），然后在CustomRenderer中加载您的样式。

有关UWP的更多详细信息，请参见此处。

在Forms中

using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;

namespace App11
{
 public class MyEntry : Entry
 {
    public MyEntry()
    {

    }
 }
}

在 xxx.cs 文件中

Content = new StackLayout
 {
    Children = {
                 new MyEntry {Text = "In Shared Code",}
                },
    VerticalOptions = LayoutOptions.CenterAndExpand,
    HorizontalOptions = LayoutOptions.CenterAndExpand,
 };

- Lucas Zhang

Answer 2

对于 Windows 应用，您可以使用渲染器自定义条目。

public class CustomEntryRenderer : ViewRenderer<CustomEntry, TextBox>
{
    protected override void OnElementChanged(ElementChangedEventArgs<CustomEntry> e)
    {
        base.OnElementChanged(e);
        var textBox = new TextBox();
        textBox.BorderThickness = new Windows.UI.Xaml.Thickness(1);
        textBox.BorderBrush = new SolidColorBrush(GetSolidColorBrush("#444444").Color);
        textBox.CornerRadius = new Windows.UI.Xaml.CornerRadius(10);
        this.SetNativeControl(textBox);
    }
    public SolidColorBrush GetSolidColorBrush(string hex)
    {
        hex = hex.Replace("#", string.Empty);
        byte r = (byte)(Convert.ToUInt32(hex.Substring(0, 2), 16));
        byte g = (byte)(Convert.ToUInt32(hex.Substring(2, 2), 16));
        byte b = (byte)(Convert.ToUInt32(hex.Substring(4, 2), 16));

        SolidColorBrush myBrush = new SolidColorBrush(Windows.UI.Color.FromArgb(255, r, g, b));
        return myBrush;
    }
}

- Geethu Vinod

Answer 3

哇塞，这并不难。

除非我漏掉了什么，只需将其包装在具有设置为true的IsClippedToBounds的Frame中，然后在框架上放置一个角半径。

也许有一些原因不适用于此解决方案，但我经常使用它。

- Le Mot Juiced