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

Question

我正在使用 xamarin 表单制作一个跨平台应用程序（Android，WinPhone）。我需要创建一个圆形文本框，就像 Whatsapp 聊天中的输入框一样 window。文本框控件在 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.

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

PCL 中的自定义控件 RoundedEditor:

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

对于 Android 平台（在 YourProject.Android 中）：

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

像这样创建自定义渲染器：

[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 中）：

通过right click your project->Add->New Item->Resource Dictionary->rename to RoundedEditorRes.xaml创建一个ResourceDictionary文件并将完整的TextBox default style添加到资源字典。

编辑文本框默认样式的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>

创建自定义渲染器：

[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 part:Please 请注意，我使用的是 Xamarin.Forms.Forms.Context.GetDrawable，它由 Xamarin.Forms 提供。并且请在您的计算机上尝试运行我的完整演示以检查是否出现错误。

如果您仍然遇到错误。能否请您指出，您是在哪个地方出错的？

Answer 2

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

这是我的做法：

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

为我工作！

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

How to make Rounded Editor control in Xamarin Forms

c#

xamarin

xamarin.android

xamarin.forms

xamarin.winphone

编辑