c# - 如何在 Xamarin Forms 中制作 Rounded Editor 控件

Question

我正在使用 xamarin 表单制作跨平台应用程序(Android、WinPhone)。我需要创建一个圆形文本框，就像 Whatsapp 聊天窗口中的输入框一样。文本框控件在 Xamarin Forms 中称为编辑器。

有谁知道如何创建圆角编辑器？我已经尝试在两个平台上实现渲染器，但没有找到我要找的东西。

编辑

在尝试您的方法后，未单击时编辑器看起来像这样:

点击时看起来像这样:

出于某种原因，背景形状是矩形，如果它只出现在编辑器的边框中，我会更喜欢。有什么想法吗？

Answer 1

Does anyone know how to create a rounded corner editor? I've tried implementing a renderer in both platforms but didn't find what I was looking for.

你的方向是正确的。您需要为每个平台创建自定义渲染。请按照以下步骤在两个平台上创建圆形编辑器:

1. PCL 中的自定义控件 RoundedEditor:

   public class RoundedEditor:Editor
   {
     //empty or define your custom fields
   }
   

对于 Android 平台(在 YourProject.Android 中):

1. 在 Resources/Drawable/ 中创建一个 xml RoundedEditText.xml:

   <?xml version="1.0" encoding="utf-8" ?>
   <shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle" android:padding="10dp" >
     <!--solid defines the fill color of the Editor-->
     <solid android:color="#FFFFFF"/>
     <!--stroke defines the border color-->
     <stroke android:width="2dp" android:color="#FF0000" />
     <!--the corner radius-->
     <corners
      android:bottomRightRadius="15dp"
      android:bottomLeftRadius="15dp"
      android:topLeftRadius="15dp"
      android:topRightRadius="15dp"/>
   </shape>
   

2. 像这样创建自定义渲染器:

   [assembly:ExportRenderer(typeof(RoundedEditor),
   typeof(RoundedEditorRenderer))]
   namespace RoundedEditorDemo.Droid
   {
       public class RoundedEditorRenderer:EditorRenderer
       {
   
           protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
           {
               base.OnElementChanged(e);
               if (Control != null)
               {
                   Control.Background = Xamarin.Forms.Forms.Context.GetDrawable(Resource.Drawable.RoundedEditText);
               }
           }
       }
   }
   

对于 Windows 平台(在 YourProject.UWP 中):

1. 通过右键单击您的项目->添加->新项目->资源字典->重命名为 RoundedEditorRes.xaml 创建一个 ResourceDictionary 文件并添加满TextBox default style到资源字典。

2. 编辑 Border 元素(添加 CornerRadius="15" 并将 BorderThickness="{TemplateBinding BorderThickness}" 更改为 BorderThickness="2" ) 文本框的默认样式，并为该样式添加一个键:

   <ResourceDictionary
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local="using:RoundedEditorDemo.UWP">
       ...
       <Border 
            CornerRadius="15"
            BorderThickness="2"
            x:Name="BorderElement" 
            BorderBrush="{TemplateBinding BorderBrush}" 
            Background="{TemplateBinding Background}" 
            Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="1"/>
       ...
   </ResourceDictionary>
   

3. 创建自定义渲染器:

   [assembly: ExportRenderer(typeof(RoundedEditor), 
   typeof(RoundedEditorRenderer))]
   namespace RoundedEditorDemo.UWP
   {
       public class RoundedEditorRenderer:EditorRenderer
       {
           protected override void OnElementChanged(ElementChangedEventArgs<Editor> e)
           {
               base.OnElementChanged(e);
               if (Control != null)
               {
                   Windows.UI.Xaml.ResourceDictionary dic = new Windows.UI.Xaml.ResourceDictionary();
                   dic.Source = new Uri("ms-appx:///RoundedEditorRes.xaml");
                   Control.Style = dic["RoundedEditorStyle"] as Windows.UI.Xaml.Style;
               }
           }
       }
   }
   

这是完整的演示:RoundedEditorDemo .

更新:

我无法重现背景问题，我使用的是 Windows 更新 15063。所以我认为如果您更新到最新更新，它会得到修复。

对于 Android 部分:请注意我使用的是 Xamarin.Forms.Forms.Context.GetDrawable，它由 Xamarin.Forms 提供。并且请尝试在您的计算机上运行我的完整演示以检查您是否收到错误。

如果你仍然得到错误。能否请您指出，您在哪个地方得到了错误？