使用 Xamarin Effect 在 Xamarin.iOS 中刪除 TextEntry 上的圓角

Question

擁有帶有 TextEntry 的 Xamarin.Forms 應用程序。 它在 iOS 上是這樣呈現的：

我正在嘗試刪除圓角。 因此，我在 iOS 項目中添加了以下 Effect：

[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 會移除整個邊框。 那不是我想要的。

編輯：

這是 TextEntry 與 Lucas Zhang - MSFT 假定的CustomRenderer樣子：

存在矩形邊框，但不幸的是圓角也存在。 順便說一下，我用CustomRenderer和我上面的Effect進行了測試。 沒有不同。 我認為在這里使用Effect是更好的選擇（請參閱為什么在自定義渲染器上使用效果？ ）。

Answer 1

它將去除圓角

參考鏈接https://docs.microsoft.com/en-us/dotnet/api/uikit.uitextborderstyle?view=xamarin-ios-sdk-12

 uiTextField. UITextBorderStyle = UITextBorderStyle.None

Answer 2

您可以使用CustomRenderer

在 iOS 項目中

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

終於找到解決辦法了！

去除邊框。 這也將刪除填充，因此請確保在左側和右側添加一些。 （ 來自 stackoverflow 的來源）

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>

結果：