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

Question

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

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

编辑

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

单击时看起来像这样:

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

Answer 1

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

你的方向是正确的.您需要为每个平台创建自定义渲染.请按照以下步骤在两个平台中创建一个舍入的编辑器:

1. RoundedEditorPCL中的自定义控件:

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

对于Android平台(in YourProject.Android):

2. RoundedEditText.xml在Resources/Drawable/:创建一个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>
   

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

   [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平台(in YourProject.UWP):

2. 通过创建ResourceDictionary文件right click your project->Add->New Item->Resource Dictionary->rename to RoundedEditorRes.xaml并将完整的TextBox默认样式添加到资源字典中.

3. 编辑 TextBox默认样式的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>
   

4. 创建自定义渲染器:

   [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>

为我工作！