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

Question

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

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

编辑

尝试您的方法后，未单击时编辑器如下所示：

单击时看起来像这样：

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

score 9 · Accepted Answer

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

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

RoundedEditorPCL 中的自定义控件：

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

对于 Android 平台（in YourProject.Android）：

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

<?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）：

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

编辑 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>

创建您的自定义渲染器：

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

如果你仍然得到错误。你能指出，你在哪里得到错误？

score 5 · Accepted Answer

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

这是我的做法：

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

为我工作！

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

编辑

2 回答 2

Related

Reference