Search code examples
xamarin.formscustomizationxamarin.uwpcustom-rendererxamarin.forms.entry

Rounded corner for Entry - Xamarin forms UWP


Is there anything possible to customize the radius of Entry to having a slightly rounded corner?

enter image description here


Solution

  • You can use Custom Renderer in xamarin.forms

    in iOS

    //...
    using App11;
    using App11.iOS;
    using Xamarin.Forms;
    using Xamarin.Forms.Platform.iOS;
    
    [assembly: ExportRenderer(typeof(MyEntry), typeof(MyiOSEntry))]
    namespace App11.iOS
    {
      public class MyiOSEntry:EntryRenderer
      {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);
    
            if (Control != null)
            {
                Control.Layer.MasksToBounds = true;
                Control.Layer.CornerRadius = 10;  //set the rounded corner
                Control.Layer.BorderColor = UIColor.Red.CGColor;
                Control.Layer.BorderWidth = 3;
            }
        }
     }
    }
    

    in Android

    creat a xml file in the folder Resource->drawable edit_text_style.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item>
       <shape
         android:shape="rectangle">
        <solid
          android:color="#ffffff" />
        <corners
          android:radius="10dp" />
        <stroke
          android:width="2dp"
          android:color="#3bbdfa" />
       </shape>
    </item>
    

    in Custom Renderer

    using Android.Support.V4.Content.Res;
    using App11;
    using App11.Droid;
    using Xamarin.Forms;
    using Xamarin.Forms.Platform.Android;
    
    [assembly: ExportRenderer(typeof(MyEntry), typeof(MyAndriodEntry))]
    namespace App11.Droid
    {
     public class MyAndriodEntry:EntryRenderer
     {
       public MyAndriodEntry(Context context):base(context)
        {
    
        }
    
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);
    
            if(Control!=null)
            {
                Control.SetBackground(ResourcesCompat.GetDrawable(Resources, Resource.Drawable.edit_text_style, null) );
            }
    
        }
      }
    }
    

    in UWP

    create a folder named Styles and add a new item as type Resource Dictionary and name it Dictionary1.xaml in Dictionary1.xaml put this code for a rounded Textbox .

    in Custom Renderer

    using App11;
    using App11.UWP;
    using Windows.UI.Xaml.Controls;
    using Xamarin.Forms;
    using Xamarin.Forms.Platform.UWP;
    
    [assembly: ExportRenderer(typeof(MyEntry), typeof(MyUWPEntry))]
    namespace App11.UWP
    {
      public class MyUWPEntry:EntryRenderer
      {
    
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);
    
            if(Control!=null)
            {
               Control.Style = (Windows.UI.Xaml.Style)App11.UWP.App.Current.Resources["StyleRoundedTextBox"];
            }
    
        }
      }
    }
    

    how do I changed this style and how do I create this code ? It's simple , in msdn.com search for "objectName" default style in uwp then you will find default style for the object you need . change it in the way you want and add it to application resources directly or link it (like what I did here) then load your style in CustomRenderer

    for more detail about UWP yo can refer here

    in Forms

    using System;
    using System.Collections.Generic;
    using System.Text;
    using Xamarin.Forms;
    
    namespace App11
    {
     public class MyEntry : Entry
     {
        public MyEntry()
        {
    
        }
     }
    }
    

    in xxx.cs file

    Content = new StackLayout
     {
        Children = {
                     new MyEntry {Text = "In Shared Code",}
                    },
        VerticalOptions = LayoutOptions.CenterAndExpand,
        HorizontalOptions = LayoutOptions.CenterAndExpand,
     };