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?
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:
Custom Control
RoundedEditor
in PCL:For Android Platform(in
YourProject.Android
):Create an xml
RoundedEditText.xml
inResources/Drawable/
:Create your Custom Renderer like this:
For Windows Platform (in
YourProject.UWP
):Create a
ResourceDictionary
file byright click your project->Add->New Item->Resource Dictionary->rename to RoundedEditorRes.xaml
and add the fullTextBox
default style to the resource dictionary.Edit the
Border
element(addCornerRadius="15"
and changeBorderThickness="{TemplateBinding BorderThickness}"
toBorderThickness="2"
) of the TextBox's default style and add a key to the style:Create your Custom Renderer:
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?