如何在 Xamarin Forms 中制作圆角编辑器控件

Question

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

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

编辑

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

点击后是这样的：

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

Answer 1

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

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

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

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

Android平台（YourProject.Android）：

1. 在Resources/Drawable/中创建一个xmlRoundedEditText.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. 通过right click your project->Add->New Item->Resource Dictionary->rename to RoundedEditorRes.xaml 创建一个ResourceDictionary 文件并将完整的TextBox default style 添加到资源字典中。

2. 编辑TextBox默认样式的Border元素（添加CornerRadius="15"并将BorderThickness="{TemplateBinding BorderThickness}"更改为BorderThickness="2"）并为样式添加key：

   <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 提供。请尝试在您的计算机上运行我的完整演示，以检查您是否收到错误。

如果您仍然收到错误消息。能否请您指出，您在哪里得到了错误？

Answer 2

除非我遗漏了什么，否则您不需要自定义渲染器或类似的东西。您只需要一个框架。

这是我的做法：

<Grid>
     <Frame IsClippedToBounds="true"
            Padding="0"
            CornerRadius="25">
          <Editor />
     </Frame>
</Grid>

为我工作！