使用 Xamarin Effect 移除 Xamarin.iOS 中 TextEntry 的圆角

Question

有一个带有 TextEntry 的 Xamarin.Forms 应用程序。在 iOS:

上是这样渲染的

我正在尝试删除圆角。因此，我在 iOS 项目中添加了以下效果：

[assembly: ResolutionGroupName("Effects")]
[assembly: ExportEffect(typeof(EntryWithClearButtonEffect), "EntryWithClearButtonEffect")]
namespace C4S.MobileApp.iOS.Effects
{
    public class EntryWithClearButtonEffect : PlatformEffect
    {

        protected override void OnAttached()
        {
            ConfigureControl();
        }

        protected override void OnDetached()
        {
        }

        private void ConfigureControl()
        {
           var uiTextField = ((UITextField)Control);

           //Add iOS specific "clear button" to TextEntry
           uiTextField.ClearButtonMode = UITextFieldViewMode.WhileEditing;

           //Excpect to remove rounded corners
           uiTextField.Layer.CornerRadius = 0;
        }
    }
}

并在共享项目中使用它：

<Entry x:Name="SearchEntry" VerticalOptions="End" Placeholder="Suchen..." ReturnType="Done" IsTextPredictionEnabled="False"
               Focused="VisualElement_OnFocused"  Completed="Entry_OnCompleted" TextChanged="Entry_OnCompleted">
      <Entry.Effects>
             <customControls:EntryWithClearButton />
      </Entry.Effects>
</Entry>

不幸的是，圆角仍然存在。还尝试将以下代码添加到 ConfigureControl():

        uiTextField.ClipsToBounds = true;
        uiTextField.Layer.MasksToBounds = true;

同样没有效果。将 UITextField.BorderStyle 设置为 None 会删除整个边框。那不是我想要的。

编辑：

Lucas Zhang - MSFT 假设的 CustomRenderer 中的 TextEntry 看起来像这样：

存在矩形边框，但不幸的是还有圆角。顺便说一句，我用 CustomRenderer 和上面的 Effect 进行了测试。没有不同。我认为在这里使用 Effect 是更好的选择（请参阅为什么在自定义渲染器上使用效果？ ).

Answer 1

它将去除圆角

参考linkhttps://docs.microsoft.com/en-us/dotnet/api/uikit.uitextborderstyle?view=xamarin-ios-sdk-12

 uiTextField. UITextBorderStyle = UITextBorderStyle.None

Answer 2

您可以使用CustomRenderer

in iOS project

using Foundation;
using UIKit;

using App7;
using App7.iOS;

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

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

            if(Control!=null)
            {
                Control.Layer.MasksToBounds = true;
                Control.Layer.CornerRadius = 0;
                Control.Layer.BorderColor = UIColor.Black.CGColor;
                Control.Layer.BorderWidth = 1;
            }

        }

    }
}

<Entry x:Name="SearchEntry" VerticalOptions="End" Placeholder="Suchen..." ReturnType="Done" IsTextPredictionEnabled="False"
               Focused="VisualElement_OnFocused"  Completed="Entry_OnCompleted" TextChanged="Entry_OnCompleted">

</Entry>

Answer 3

终于找到解决方法了！

去掉边框。这也将删除填充，因此请确保在左侧和右侧添加一些。 ()

private void ConfigureControl()
{
   var uiTextField = ((UITextField)Control);

   //Add padding left and right (UITextBorderStyle.None removes padding)
   uiTextField.LeftView = new UIView(new CGRect(0, 0, 8, this.Control.Frame.Height));
   uiTextField.RightView = new UIView(new CGRect(0, 0, 8, this.Control.Frame.Height));
   uiTextField.LeftViewMode = UITextFieldViewMode.Always;
   uiTextField.RightViewMode = UITextFieldViewMode.Always;

   //remove border
   uiTextField.BorderStyle = UITextBorderStyle.None;
 }

在文本条目上方添加一个 BoxView。

<BoxView HeightRequest="0.4" Color="#A9ABAC" />    
<Entry x:Name="SearchEntry" VerticalOptions="End" Placeholder="Suchen..." ReturnType="Done" IsTextPredictionEnabled="False"
               Focused="VisualElement_OnFocused"  Completed="Entry_OnCompleted" TextChanged="Entry_OnCompleted">
      <Entry.Effects>
             <customControls:EntryWithClearButton />
      </Entry.Effects>
</Entry>

结果：

使用 Xamarin Effect 移除 Xamarin.iOS 中 TextEntry 的圆角

Remove rounded corners on TextEntry in Xamarin.iOS with Xamarin Effect

uitextfield

uikit

xamarin.ios

ios

xamarin.forms