How to make Rounded Editor control in Xamarin Forms

Question

I'm making a cross platform app(Android, WinPhone) using xamarin forms. I need to create a Rounded Textbox, just like the input box in Whatsapp chat window. The textbox control is called Editor in Xamarin Forms.

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.

Edit

After trying your method the Editor looks like this when unclicked:

And looks like this when clicked:

The background shape is rectangle for some reason, I'd prefer if it will be only in the borders of the editor. Any ideas how?

Solution 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.

Your direction is correct. You need to create custom render for each platform. And please follow the following steps to create a rounded Editor in both platforms:

1. Custom Control RoundedEditor in PCL:

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

For Android Platform(in YourProject.Android):

2. Create an xml RoundedEditText.xml in 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>
   

3. Create your Custom Renderer like this:

   [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);
               }
           }
       }
   }
   

For Windows Platform (in YourProject.UWP):

2. Create a ResourceDictionary file by right click your project->Add->New Item->Resource Dictionary->rename to RoundedEditorRes.xaml and add the full TextBox default style to the resource dictionary.

3. Edit the Border element(add CornerRadius="15" and change BorderThickness="{TemplateBinding BorderThickness}" to BorderThickness="2" ) of the TextBox's default style and add a key to the style:

   <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. Create your Custom Renderer:

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

And Here is the Complete Demo:RoundedEditorDemo.

Update:

I can't reproduce the background issue, I'm using Windows update 15063. So I think it will be fixed if you update to the latest update.

For Android part:Please notice that I'm using Xamarin.Forms.Forms.Context.GetDrawable, it is provided by Xamarin.Forms. And please try run my complete demo on your computer to check if you get the error.

If you still get the error. Could you please point out, in which did you get the error?

Solution 2

Unless I'm missing something, you don't need custom renderers or anything like that. All you need is a frame.

Here's how I'm doing it:

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

Working for me!