Xamarin.Forms Custom Button

In this post, I am going to show you how to customize the Xamarin.Forms button

Today I am creating another new post in which I am going to show you how to customize the button, so let's start,

So we will first create a class whose name "CustomButtons" and then we will write a code in "C #"

public class CustomButton: Button
    {
         public static readonly BindableProperty CustomBorderColorProperty =
           BindableProperty.Create(
               nameof(CustomBorderColor),
               typeof(Color),
               typeof(CustomButton),
               Color.Default);

        public Color CustomBorderColor
        {
            get { return (Color)GetValue(CustomBorderColorProperty); }
            set { SetValue(CustomBorderColorProperty, value); }
        }

        public static readonly BindableProperty CustomBorderRadiusProperty =
             BindableProperty.Create(
                 nameof(CustomBorderRadius),
                 typeof(int),
                 typeof(CustomButton),
                 4);

        public int CustomBorderRadius
        {
            get { return (int)GetValue(CustomBorderRadiusProperty); }
            set { SetValue(CustomBorderRadiusProperty, value); }
        }

        public static readonly BindableProperty CustomBorderWidthProperty =
             BindableProperty.Create(
                 nameof(CustomBorderWidth),
                 typeof(double),
                 typeof(CustomButton),
                 4.0);

        public double CustomBorderWidth
        {
            get { return (double)GetValue(CustomBorderWidthProperty); }
            set { SetValue(CustomBorderWidthProperty, value); }
        }

        public static readonly BindableProperty CustomBackgroundColorProperty =
           BindableProperty.Create(
               nameof(CustomBorderColor),
               typeof(Color),
               typeof(CustomButton),
               Color.Default
              );

        public Color CustomBackgroundColor
        {
            get { return (Color)GetValue(CustomBackgroundColorProperty); }
            set { SetValue(CustomBackgroundColorProperty, value); }
        }
    }

Now we can write some code in Android project for rendering and setting the Border Color, Width, Radius and Background Color....

[assembly: ExportRenderer(typeof(CustomButton), typeof(CurvedCornersButtonRenderer))]
namespace MyNewApp.Droid.CustomRenderer
{
    public class CurvedCornersButtonRenderer: ButtonRenderer
    {
        private GradientDrawable _gradientBackground;
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);
            var view = (CustomButton)Element;
            if (view == null) return;
            Paint(view);
        }

 protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            if(e.PropertyName ==  CustomButton.CustomBorderColorProperty.PropertyName ||
                 e.PropertyName == CustomButton.CustomBorderRadiusProperty.PropertyName ||
                 e.PropertyName == CustomButton.CustomBorderWidthProperty.PropertyName)
            {
             if (Element != null)
                {
                    Paint((CustomButton)Element);
                }
            }
        }
        private void Paint(CustomButton view)
        {
            _gradientBackground = new GradientDrawable();
            _gradientBackground.SetShape(ShapeType.Rectangle);
            _gradientBackground.SetColor(view.CustomBackgroundColor.ToAndroid());
            // Thickness of the stroke line
            _gradientBackground.SetStroke((int)view.CustomBorderWidth, view.CustomBorderColor.ToAndroid());
            // Radius for the curves
            _gradientBackground.SetCornerRadius(
                DpToPixels(this.Context,Convert.ToSingle(view.CustomBorderRadius)));
            // set the background of the label
            Control.SetBackground(_gradientBackground);
        }

       public static float DpToPixels(Context context, float valueInDp)
        {
            DisplayMetrics metrics = context.Resources.DisplayMetrics;
            return TypedValue.ApplyDimension(ComplexUnitType.Dip, valueInDp, metrics);
        }
    }
}

Then we do this:

[assembly: ExportRenderer(typeof(CustomButton), typeof(CurvedCornersButtonRenderer))]
namespace MyNewApp.iOS.CustomRenderer
{
    public  class CurvedCornersButtonRenderer: ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);
            var view = (CustomButton)Element;
            if (view == null) return;
            Paint(view);
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            if (e.PropertyName == CustomButton.CustomBorderRadiusProperty.PropertyName ||
               e.PropertyName == CustomButton.CustomBorderColorProperty.PropertyName||
               e.PropertyName == CustomButton.CustomBorderWidthProperty.PropertyName )
            {
                if (Element != null)
                {
                    Paint((CustomButton)Element);
                }
            }
        }
        private void Paint(CustomButton view)
        {
            this.Layer.CornerRadius = (float)view.CustomBorderRadius;
            this.Layer.BorderColor = view.CustomBorderColor.ToCGColor();
            this.Layer.BackgroundColor = view.CustomBackgroundColor.ToCGColor();
            this.Layer.BorderWidth = (int)view.CustomBorderWidth;
        }
    }
}

Now again please make sure to add view reference.....

xmlns:local="clr-namespace:CustomButtonApp" then write xaml code in main page.

<ContentPage.Content>
<StackLayout VerticalOptions="StartAndExpand" Padding="20,5" Spacing="10">
                <customview:CustomButton x:Name="btnSignin"
                                         CustomBorderColor="#24C4FF"
                                         CustomBackgroundColor="#24C4FF"
                                         Text="Log In" TextColor="White"
                                         Clicked="btnSignin_Clicked"
                                         CustomBorderRadius="4"
                                         CustomBorderWidth="4"
                                         VerticalOptions="Center"/>
        </StackLayout>
    </ContentPage.Content>

You should have your CustomButton working!!

If You want to watch related video click Here Custom Rendered Button

Features of CustomButton controls

1. Custom Border Color Property=(CustomBorderColor="#24C4FF")
2. Custom Background Color Property=(CustomBackgroundColor="#24C4FF")
3. Custom Border Radius Property=(CustomBorderRadius="4")
4. Custom Border Width Property=(CustomBorderWidth="4")

NOTE

IN THE SOURCE CODE , ONLY HAVE CODE PLZ DOWNLOAD REFERENCE

In the new version Of Xamarin Studio or Visual Studio(4.7.10.38) you don't need to customize these properties, this property is working well in the new version (4.7.10.38).