Xamarin.Forms Custom Slider

Hello My Xamarin Friends,

welcome back to my new post, today i would like to talk about xamarin forms CustomSlider, so let's start,

Slider is  the input control for a linear value. 
So we will first create a class whose name "CustomSlider" and then we will write a code in "C #"

	public class CustomSlider : Slider
	{
	public static readonly BindableProperty MaxColorProperty =
	BindableProperty.Create(nameof(MaxColor),
	typeof(Color), typeof(CustomSlider),
	Color.Default);
	public Color MaxColor
	{
	get { return (Color)GetValue(MaxColorProperty); }
	set { SetValue(MaxColorProperty, value); }
	}
	public static readonly BindableProperty MinColorProperty =
	BindableProperty.Create(nameof(MinColor),
	typeof(Color), typeof(CustomSlider),
	Color.Default);
	public Color MinColor
	{
	get { return (Color)GetValue(MinColorProperty); }
	set { SetValue(MinColorProperty, value); }
	}
	public static readonly BindableProperty ThumbColorProperty =
	BindableProperty.Create(nameof(ThumbColor),
	typeof(Color), typeof(CustomSlider),
	Color.Default);
	public Color ThumbColor
	{
	get { return (Color)GetValue(ThumbColorProperty); }
	set { SetValue(ThumbColorProperty, value); }
	}
	public static readonly BindableProperty ThumbImageProperty =
	BindableProperty.Create(nameof(ThumbImage),
	typeof(string),
	typeof(CustomSlider),
	string.Empty);
	public string ThumbImage
	{
	get { return (string)GetValue(ThumbImageProperty); }
	set { SetValue(ThumbImageProperty, value); }
	}
	}

view raw CustomSlider.cs hosted with ❤ by GitHub

Now we can write some code in android project for set

	public class MySliderRenderer : SliderRenderer
	{
	protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Slider> e)
	{
	base.OnElementChanged(e);
	if (e.OldElement != null || e.NewElement == null)
	return;
	var view = (CustomSlider)Element;
	if (!string.IsNullOrEmpty(view.ThumbImage)||
	view.ThumbColor != Xamarin.Forms.Color.Default ||
	view.MaxColor != Xamarin.Forms.Color.Default ||
	view.MinColor != Xamarin.Forms.Color.Default)
	{
	// Set Thumb Icon
	Control.SetThumb(Resources.GetDrawable(view.ThumbImage));
	}
	Control.Thumb.SetColorFilter(view.ThumbColor.ToAndroid(), PorterDuff.Mode.SrcIn);
	Control.ProgressTintList = Android.Content.Res.ColorStateList.ValueOf(view.MinColor.ToAndroid());
	Control.ProgressTintMode = PorterDuff.Mode.SrcIn;
	//this is for Maximum Slider line Color
	Control.ProgressBackgroundTintList = Android.Content.Res.ColorStateList.ValueOf(view.MaxColor.ToAndroid());
	Control.ProgressBackgroundTintMode = PorterDuff.Mode.SrcIn;
	}
	protected override void OnLayout(bool changed, int l, int t, int r, int b)
	{
	base.OnLayout(changed, l, t, r, b);
	if (Android.OS.Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.JellyBean)
	{
	if (Control == null)
	{
	return;
	}
	SeekBar ctrl = Control;
	Drawable thumb = ctrl.Thumb;
	int thumbTop = ctrl.Height / 2 - thumb.IntrinsicHeight / 2;
	thumb.SetBounds(thumb.Bounds.Left, thumbTop,
	thumb.Bounds.Left + thumb.IntrinsicWidth, thumbTop + thumb.IntrinsicHeight);
	}
	}
	}
	}

view raw MySliderRenderer.cs hosted with ❤ by GitHub

Then we create in Ios Project Also

	public class MySliderRenderer : SliderRenderer
	{
	protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Slider> e)
	{
	base.OnElementChanged(e);
	if (e.OldElement != null || e.NewElement == null)
	return;
	var view = (CustomSlider)Element;
	if (!string.IsNullOrEmpty(view.ThumbImage)||
	view.ThumbColor != Xamarin.Forms.Color.Default ||
	view.MaxColor != Xamarin.Forms.Color.Default ||
	view.MinColor != Xamarin.Forms.Color.Default)
	{
	//Assigns a thumb image to the specified control states.
	Control.SetThumbImage(UIImage.FromFile(view.ThumbImage), UIControlState.Normal);
	}
	// Set Progress bar Thumb color
	Control.ThumbTintColor = view.ThumbColor.ToUIColor();
	//this is for Minimum Slider line Color
	Control.MinimumTrackTintColor = view.MinColor.ToUIColor();
	//this is for Maximum Slider line Color
	Control.MaximumTrackTintColor = view.MaxColor.ToUIColor();
	}
	}

view raw CustomSlider.cs hosted with ❤ by GitHub

Please make sure add view reference.....
xmlns:local="clr-namespace:CustomSliderApp"
then write xaml code in main page.

	<StackLayout Padding="20">
	<Label Text="Custom Slider" FontSize="Large"/>
	<cs:CustomSlider x:Name="customSlider"
	MaxColor="Red"
	MinColor="Yellow"
	ThumbImage="icon.png"
	/>
	<cs:CustomSlider MaxColor="Red"
	MinColor="Yellow"
	ThumbColor="Black"
	ThumbImage="icon.png"/>
	</StackLayout>

view raw MainPage.xaml hosted with ❤ by GitHub

TADDAAAA!

You should have your CustomSlider working!!
If You want to watch related video click Here Custom Rendered Slider

Public Property of Slider:-

1. Maximum Double. =(Maximum="100")
2. Minimum Double. =(Minimum="0")
3. Value Double. =(Value="20")

Features of CustomSlider controls:-

1. Custom Max Color Property=(MaxColor="Red")
2. Custom Min Color Property=(MinColor="Yellow")
3. Custom ThumbColor Radius Property=(ThumbColor="Black")
4. Custom ThumbImage Property=(ThumbImage="icon.png")

Xamarin.Forms Curved Entry

Hello My Xamarin Friends,
This is my new post in which I am going to tell you how  to customize the Entry. 
Entry is a rectangular input frame control in which we can give any type of text input and in this post, we are going to discuss custom entry, this entry will make curved Corner entry.
Let's start........

First, we will  create a class whose name is "CustomEntry" and then we will write a code in "C #".

	public class CustomEntry : Entry
	{
	public static readonly BindableProperty BorderColorProperty =
	BindableProperty.Create(
	nameof(BorderColor),
	typeof(Color),
	typeof(CustomEntry),
	Color.Gray);
	// Gets or sets BorderColor value
	public Color BorderColor
	{
	get { return (Color)GetValue(BorderColorProperty); }
	set { SetValue(BorderColorProperty, value); }
	}
	public static readonly BindableProperty BorderWidthProperty =
	BindableProperty.Create(
	nameof(BorderWidth),
	typeof(int),
	typeof(CustomEntry),
	Device.OnPlatform<int>(1, 2, 2));
	// Gets or sets BorderWidth value
	public int BorderWidth
	{
	get { return (int)GetValue(BorderWidthProperty); }
	set { SetValue(BorderWidthProperty, value); }
	}
	public static readonly BindableProperty CornerRadiusProperty =
	BindableProperty.Create(
	nameof(CornerRadius),
	typeof(double),
	typeof(CustomEntry),
	Device.OnPlatform<double>(6, 7, 7));
	// Gets or sets CornerRadius value
	public double CornerRadius
	{
	get { return (double)GetValue(CornerRadiusProperty); }
	set { SetValue(CornerRadiusProperty, value); }
	}
	public static readonly BindableProperty IsCurvedCornersEnabledProperty =
	BindableProperty.Create(
	nameof(IsCurvedCornersEnabled),
	typeof(bool),
	typeof(CustomEntry),
	true);
	// Gets or sets IsCurvedCornersEnabled value
	public bool IsCurvedCornersEnabled
	{
	get { return (bool)GetValue(IsCurvedCornersEnabledProperty); }
	set { SetValue(IsCurvedCornersEnabledProperty, value); }
	}
	}

view raw CustomEntry.cs hosted with ❤ by GitHub

Now, we will write some code in android project to set the Border Color, Width, Radius and Background Color, IsCurvedCornersEnabled ....
Please make sure to dependency reference.....
[assembly: ExportRenderer(typeof(CustomLabel), typeof(CurvedLabelRenderer))]

	public class CustomEntryRenderer : EntryRenderer
	{
	protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
	{
	base.OnElementChanged(e);
	if (e.NewElement != null)
	{
	var view = (CustomEntry)Element;
	if (view.IsCurvedCornersEnabled)
	{
	// creating gradient drawable for the curved background
	var _gradientBackground = new GradientDrawable();
	_gradientBackground.SetShape(ShapeType.Rectangle);
	_gradientBackground.SetColor(view.BackgroundColor.ToAndroid());
	// Thickness of the stroke line
	_gradientBackground.SetStroke(view.BorderWidth, view.BorderColor.ToAndroid());
	// Radius for the curves
	_gradientBackground.SetCornerRadius(
	DpToPixels(this.Context,
	Convert.ToSingle(view.CornerRadius)));
	// set the background of the label
	Control.SetBackground(_gradientBackground);
	}
	// Set padding for the internal text from border
	Control.SetPadding(
	(int)DpToPixels(this.Context, Convert.ToSingle(12)),
	Control.PaddingTop,
	(int)DpToPixels(this.Context, Convert.ToSingle(12)),
	Control.PaddingBottom);
	}
	}
	public static float DpToPixels(Context context, float valueInDp)
	{
	DisplayMetrics metrics = context.Resources.DisplayMetrics;
	return TypedValue.ApplyDimension(ComplexUnitType.Dip, valueInDp, metrics);
	}
	}

view raw CustomEntryRenderer.cs hosted with ❤ by GitHub

Then we create an Ios Project Also

	public class CustomEntryRenderer : EntryRenderer
	{
	protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
	{
	base.OnElementChanged(e);
	if (e.NewElement != null)
	{
	var view = (CustomEntry)Element;
	Control.LeftView = new UIView(new CGRect(0f, 0f, 9f, 20f));
	Control.LeftViewMode = UITextFieldViewMode.Always;
	Control.KeyboardAppearance = UIKeyboardAppearance.Dark;
	Control.ReturnKeyType = UIReturnKeyType.Done;
	Control.Layer.CornerRadius = Convert.ToSingle(view.CornerRadius);
	Control.Layer.BorderColor = view.BorderColor.ToCGColor();
	Control.Layer.BorderWidth = view.BorderWidth;
	Control.ClipsToBounds = true;
	}
	}
	}

view raw CustomEntryRenderer.cs hosted with ❤ by GitHub

Please make sure to add view reference.....
xmlns:local="clr-namespace:CustomEntryApp"
then write xaml code in main page.

	<StackLayout Padding="10">
	<custom:CustomEntry
	CornerRadius="18"
	IsCurvedCornersEnabled="True"
	BorderColor="BlueViolet"
	HorizontalTextAlignment="Center"
	FontSize="17"
	HeightRequest="40"
	Placeholder="Custom Entry"
	PlaceholderColor="Gray"
	TextColor="Black"
	FontAttributes="Bold"
	WidthRequest="100"/>
	<Entry TextColor="Red"
	PlaceholderColor="#7AB0DE"
	Placeholder="Normal Entry" />
	</StackLayout>

view raw MainPage.xaml hosted with ❤ by GitHub

TADDAAAA!

 Now, you will  have your CustomEntry working!!

Public Property Entry controls

1. FontAttributes FontAttributes=(FontAttributes="Bold")
2. FontSize Double=(FontSize="Default")
3. IsPassword Boolean=(IsPassword="True")
4. Placeholder String=( Placeholder="Xamarin Buddy")
5. Text String (Text="Xamarin Buddy")
6. PlaceholderColor Color=( PlaceholderColor="Red")
7. TextColor Color=(TextColor="DarkBlue")
8. FontFamily String=(FontFamily="")
9. HorizontalTextAlignment TextAlignment=(HorizontalTextAlignment="Start")

 Features of CustomEntry 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")
5. Custom IsCurvedCornersEnabled =(IsCurvedCornersEnabled ="True")

To get full source code Click Here

To watch video Click Here

Xamarin.Forms Custom Label

Hello My Xamarin Friends,

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

Introduction:-
Label is a graphical control that is used to display text on the form or page, usually label to determine the entry or other widget.
When building any application, a label is the general control which is used most often.
"A Label is something describe a person or thing"
For Exa. A label is a father introducing his sons as "the smart one".

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

	public class CustomLabel : Label
	{
	public static readonly BindableProperty CurvedCornerRadiusProperty =
	BindableProperty.Create(
	nameof(CurvedCornerRadius),
	typeof(double),
	typeof(CustomLabel),
	12.0);
	public double CurvedCornerRadius
	{
	get { return (double)GetValue(CurvedCornerRadiusProperty); }
	set { SetValue(CurvedCornerRadiusProperty, value); }
	}
	public static readonly BindableProperty CurvedBackgroundColorProperty =
	BindableProperty.Create(
	nameof(CurvedCornerRadius),
	typeof(Color),
	typeof(CustomLabel),
	Color.Default);
	public Color CurvedBackgroundColor
	{
	get { return (Color)GetValue(CurvedBackgroundColorProperty); }
	set { SetValue(CurvedBackgroundColorProperty, value); }
	}
	}

view raw CustomLabel.cs hosted with ❤ by GitHub

Now we can write some code in android project for set the Radius and Background Color....

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Text;
	using Android.App;
	using Android.Content;
	using Android.OS;
	using Android.Runtime;
	using Android.Views;
	using Android.Widget;
	using Xamarin.Forms;
	using CustomControlApp.Droid;
	using Xamarin.Forms.Platform.Android;
	using Android.Graphics.Drawables;
	using Android.Util;
	using CustomControlApp;
	[assembly: ExportRenderer(typeof(CustomLabel), typeof(CurvedLabelRenderer))]
	namespace XYZApp.Droid
	{
	public class CurvedLabelRenderer : LabelRenderer
	{
	private GradientDrawable _gradientBackground;
	protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
	{
	base.OnElementChanged(e);
	var view = (CustomLabel)Element;
	if (view == null) return;
	// creating gradient drawable for the curved background
	_gradientBackground = new GradientDrawable();
	_gradientBackground.SetShape(ShapeType.Rectangle);
	_gradientBackground.SetColor(view.CurvedBackgroundColor.ToAndroid());
	// Thickness of the stroke line
	_gradientBackground.SetStroke(4, view.CurvedBackgroundColor.ToAndroid());
	// Radius for the curves
	_gradientBackground.SetCornerRadius(DpToPixels(this.Context,
	Convert.ToSingle(view.CurvedCornerRadius)));
	// set the background of the label
	Control.SetBackground(_gradientBackground);
	}
	//Px to Dp Conver
	public static float DpToPixels(Context context, float valueInDp)
	{
	DisplayMetrics metrics = context.Resources.DisplayMetrics;
	return TypedValue.ApplyDimension(ComplexUnitType.Dip, valueInDp, metrics);
	}
	}
	}

view raw CurvedLabelRenderer.cs hosted with ❤ by GitHub

Then we will create in Ios Project Also

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Text;
	using Foundation;
	using UIKit;
	using Xamarin.Forms;
	using CustomControlApp;
	using CustomControlApp.iOS;
	using Xamarin.Forms.Platform.iOS;
	[assembly: ExportRenderer(typeof(CustomLabel), typeof(CurvedLabelRenderer))]
	namespace XYZApp.iOS
	{
	public class CurvedLabelRenderer : LabelRenderer
	{
	protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
	{
	base.OnElementChanged(e);
	if (e.NewElement != null)
	{
	var _xfViewReference = (CustomLabel)Element;
	this.Layer.CornerRadius = (float)_xfViewReference.CurvedCornerRadius;
	this.Layer.BackgroundColor = _xfViewReference.CurvedBackgroundColor.ToCGColor();
	}
	}
	}
	}

view raw CurvedLabelRenderer.cs hosted with ❤ by GitHub

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

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

	<?xml version="1.0" encoding="utf-8" ?>
	<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:local="clr-namespace:CustomControlApp"
	xmlns:control="clr-namespace:CustomControlApp"
	x:Class="CustomControlApp.MainPage">
	<ContentPage.Content>
	<StackLayout Padding="20">
	<control:CustomLabel FontSize="14.5"
	CurvedBackgroundColor="#6DB040"
	TextColor="White"
	Text="Custom Label"
	HorizontalOptions="FillAndExpand"
	CurvedCornerRadius="16"
	HeightRequest="40"
	VerticalTextAlignment="Center"
	HorizontalTextAlignment="Center"/>
	<Label Text="Simple Label"
	HeightRequest="40"
	VerticalTextAlignment="Center"
	BackgroundColor="Gray"
	HorizontalTextAlignment="Center"/>
	</StackLayout>
	</ContentPage.Content>
	</ContentPage>

view raw MainPage.xaml.cs hosted with ❤ by GitHub

TADDAAAA!

You should have your CustomLabel working!!

Features of CustomLabel controls:-

1. Custom Curved Background Color Property=(CurvedBackgroundColor="#24C4FF")
2. Custom Curved Corner Radius Property=(CurvedCornerRadius="4")

You want to full source code Click Here

If you want to watch this video Click Here

Public Properties of Label controls:-

1.  Font Font. =(Font="13")
2.  FontAttributes FontAttributes. =(FontAttributes ="Bold")
3.  FontFamily String. =(FontFamily ="Arial")
4.  FontSize Double. =(FontSize ="Default")
5.  HorizontalTextAlignment TextAlignment.=(HorizontalTextAlignment ="Start")
6.  LineBreakMode LineBreakMode =(LineBreakMode ="CharacterWrap")
7.  Text String. =(Text ="xamarin buddy")
8.  TextColor Color. =(TextColor ="Azure")
      

Xamarin.Forms Slider Lock

Hello My Xamarin Friends,

Today, I have come up with a post in which I am going to tell you how to customize the Slider Lock.  Let's start,

First, we will create a class whose name is "SlideToActView", then we will write a code in "C #"

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Text;
	using System.Threading.Tasks;
	using Xamarin.Forms;
	namespace XamarinControlsApp.SliderLock
	{
	public class SlideToActView : AbsoluteLayout
	{
	public static readonly BindableProperty ThumbProperty =
	BindableProperty.Create(
	nameof(Thumb), typeof(View), typeof(SlideToActView),
	defaultValue: default(View));
	public View Thumb
	{
	get { return (View)GetValue(ThumbProperty); }
	set { SetValue(ThumbProperty, value); }
	}
	public static readonly BindableProperty TrackBarProperty =
	BindableProperty.Create(
	nameof(TrackBar),
	typeof(View),
	typeof(SlideToActView),
	defaultValue: default(View));
	public View TrackBar
	{
	get { return (View)GetValue(TrackBarProperty); }
	set { SetValue(TrackBarProperty, value); }
	}
	public static readonly BindableProperty FillBarProperty =
	BindableProperty.Create(
	nameof(FillBar), typeof(View), typeof(SlideToActView),
	defaultValue: default(View));
	public View FillBar
	{
	get { return (View)GetValue(FillBarProperty); }
	set { SetValue(FillBarProperty, value); }
	}
	private PanGestureRecognizer _panGesture = new PanGestureRecognizer();
	private View _gestureListener;
	public SlideToActView()
	{
	_panGesture.PanUpdated += OnPanGestureUpdated;
	SizeChanged += OnSizeChanged;
	_gestureListener = new ContentView { BackgroundColor = Color.White, Opacity = 0.05 };
	_gestureListener.GestureRecognizers.Add(_panGesture);
	}
	public event EventHandler SlideCompleted;
	private const double _fadeEffect = 0.5;
	private const uint _animLength = 50;
	async void OnPanGestureUpdated(object sender, PanUpdatedEventArgs e)
	{
	if (Thumb == null || TrackBar == null || FillBar == null)
	return;
	switch (e.StatusType)
	{
	case GestureStatus.Started:
	await TrackBar.FadeTo(_fadeEffect, _animLength);
	break;
	case GestureStatus.Running:
	// Translate and ensure we don't pan beyond the wrapped user interface element bounds.
	var x = Math.Max(0, e.TotalX);
	if (x > (Width - Thumb.Width))
	x = (Width - Thumb.Width);
	//Uncomment this if you want only forward dragging.
	//if (e.TotalX < Thumb.TranslationX)
	// return;
	Thumb.TranslationX = x;
	SetLayoutBounds(FillBar, new Rectangle(0, 0, x + Thumb.Width / 2, this.Height));
	break;
	case GestureStatus.Completed:
	var posX = Thumb.TranslationX;
	SetLayoutBounds(FillBar, new Rectangle(0, 0, 0, this.Height));
	// Reset translation applied during the pan
	await Task.WhenAll(new Task[]{
	TrackBar.FadeTo(1, _animLength),
	Thumb.TranslateTo(0, 0, _animLength * 2, Easing.CubicIn),
	});
	if (posX >= (Width - Thumb.Width - 10/* keep some margin for error*/))
	SlideCompleted?.Invoke(this, EventArgs.Empty);
	break;
	}
	}
	void OnSizeChanged(object sender, EventArgs e)
	{
	if (Width == 0 || Height == 0)
	return;
	if (Thumb == null || TrackBar == null || FillBar == null)
	return;
	Children.Clear();
	SetLayoutFlags(TrackBar, AbsoluteLayoutFlags.SizeProportional);
	SetLayoutBounds(TrackBar, new Rectangle(0, 0, 1, 1));
	Children.Add(TrackBar);
	SetLayoutFlags(FillBar, AbsoluteLayoutFlags.None);
	SetLayoutBounds(FillBar, new Rectangle(0, 0, 0, this.Height));
	Children.Add(FillBar);
	SetLayoutFlags(Thumb, AbsoluteLayoutFlags.None);
	SetLayoutBounds(Thumb, new Rectangle(0, 0, this.Width / 5, this.Height));
	Children.Add(Thumb);
	SetLayoutFlags(_gestureListener, AbsoluteLayoutFlags.SizeProportional);
	SetLayoutBounds(_gestureListener, new Rectangle(0, 0, 1, 1));
	Children.Add(_gestureListener);
	}
	}
	}

view raw SlideToActView.cs hosted with ❤ by GitHub

Please make sure to add view reference.....
xmlns:local="clr-namespace:XamarinControlsApp.SliderLock"
then write xaml code in main page.

	<?xml version="1.0" encoding="utf-8" ?>
	<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:local1="clr-namespace:XamarinControlsApp"
	x:Class="XamarinControlsApp.MainPage"
	xmlns:local="clr-namespace:XamarinControlsApp.SliderLock"
	Title="Slider Lock">
	<StackLayout Margin="35">
	<local:SlideToActView HeightRequest="50"
	SlideCompleted="Handle_SlideCompleted">
	<local:SlideToActView.Thumb>
	<Frame CornerRadius="15"
	HasShadow="false"
	BackgroundColor="Silver"
	Padding="0">
	<Image Source="icon.png"
	HorizontalOptions="Center"
	VerticalOptions="Center"
	HeightRequest="35"
	WidthRequest="35" />
	</Frame>
	</local:SlideToActView.Thumb>
	<local:SlideToActView.TrackBar>
	<Frame CornerRadius="15"
	HasShadow="false"
	BackgroundColor="Gray"
	Padding="0">
	<Label Text="Slide 'x' to cancel"
	HorizontalOptions="CenterAndExpand"
	VerticalOptions="CenterAndExpand" />
	</Frame>
	</local:SlideToActView.TrackBar>
	<local:SlideToActView.FillBar>
	<Frame CornerRadius="15"
	HasShadow="false"
	BackgroundColor="Red"
	Padding="0" />
	</local:SlideToActView.FillBar>
	</local:SlideToActView>
	<Label x:Name="MessageLbl"
	FontAttributes="Bold"
	TextColor="Green" />
	</StackLayout>
	</ContentPage>

view raw MainPage.xaml.cs hosted with ❤ by GitHub

TADDAAAA!

Now, you will have your Slider Lock working!!
If You want to watch related video click Here Custom Slider Lock

Xamarin.Forms Custom Button

Hello Friends,
Today, in this post we are taking about button and how we can use it in xamarin project. Also I can demonstrate how to access and overwrite the behavior of button from Android and Ios in PCL project. Button is a simple element which binds two different pieces of code. Similarly in Ios and Android button binds UI with the code with that we are able to perform some action on button click etc.


In Xamarin we have limitation in button UI design. So with the help pf Rendered we can we can use the native properties of button from IOS and Android into PCL project and customize the view of button as per the user requirement.

Let's start with the Implementation...

So, we will first create a class whose name is "CustomButtons" and then we will write a code in C#. we can write some code in android project to set the Border Color, Width, Radius and Background Color etc. Then we create Ios project also.

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

view raw CurvedCornersButtonRenderer hosted with ❤ by GitHub

Please make sure to add view reference xmlns:local="clr-namespace:CustomButtonApp" and 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>

view raw MainPage.xaml.cs hosted with ❤ by GitHub

TADDAAAA!

You should have your CustomButton working!!

If you are lazzy download here here 

If you want to watch video Click Here 

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 New Version Of  Xamarin Studio or Visual Studio(4.7.10.38) Don't Need to Customize this properties, this Property is working well in new Version(4.7.10.38).

Public Property Button controls......

1. BorderColor    Color. =(BorderColor="AliceBlue")
2. BorderRadius    Int32. =(BorderRadius="5")
3. BorderWidth    Double. =(BorderWidth="4")
4. CornerRadius    Int32. =(CornerRadius="5")
5. Font    Font. =(Font="13")
6. FontAttributes    FontAttributes. =(FontAttributes="Bold")
7. FontFamily    String. =(FontFamily="")
8. FontSize    Double. =(FontSize="Default")
9. Image    FileImageSource. =(Image="icon")
10. Text    String. =(Text="Submit")
11. TextColor    Color. =(TextColor="Aqua")       

Xamarin.Forms Custom Underline Label

Hello Xamarin Friends ,
I came across the task of underline on a label in the design of a login and I also needed the underline label, that's why I have created a custom underline label today.

So let's start friends,

First, we create a ContentView whoes name is UnderLineLabel.xaml and then set the Label and Boxview.

	<ContentView.Content>
	<StackLayout Grid.Row="0" Padding="0" VerticalOptions="Center">
	<Label x:Name="customLabel" Text="{Binding Text, Mode=TwoWay}" TextColor="{Binding TextColor,Mode=TwoWay}"/>
	<BoxView x:Name="customBox"
	BackgroundColor="{Binding LineColor,Mode=TwoWay}"
	HeightRequest="1"
	Margin="0,-8,0,0" />
	</StackLayout>
	</ContentView.Content>

view raw UnderLineLabel.xaml hosted with ❤ by GitHub

Then we use the  BindableProperty to the code behind.

	public partial class UnderLineLabel : ContentView
	{
	public UnderLineLabel ()
	{
	InitializeComponent ();
	}
	public string Text
	{
	get { return (string)GetValue(TextProperty); }
	set { SetValue(TextProperty, value); }
	}
	public static BindableProperty TextProperty = BindableProperty.Create(nameof(Text),
	typeof(string),
	typeof(UnderLineLabel),
	defaultBindingMode: BindingMode.TwoWay,
	propertyChanged: (bindable, oldVal, newVal) =>
	{
	var matEntry = (UnderLineLabel)bindable;
	matEntry.customLabel.Text = (string)newVal;
	});
	public Color LineColor
	{
	get { return (Color)GetValue(LineColorProperty); }
	set { SetValue(LineColorProperty, value); }
	}
	public static BindableProperty LineColorProperty = BindableProperty.Create(nameof(LineColor),
	typeof(Color),
	typeof(UnderLineLabel),
	Color.Default,
	defaultBindingMode: BindingMode.TwoWay,
	propertyChanged: (bindable, oldVal, newVal) =>
	{
	var matEntry = (UnderLineLabel)bindable;
	matEntry.customBox.BackgroundColor= (Color)newVal;
	});
	public static readonly BindableProperty TextColorProperty =
	BindableProperty.Create(
	nameof(TextColor),
	typeof(Color),
	typeof(UnderLineLabel),
	Color.Default,
	defaultBindingMode: BindingMode.TwoWay,
	propertyChanged: (bindable, oldVal, newVal) =>
	{
	var matEntry = (UnderLineLabel)bindable;
	matEntry.customLabel.TextColor= (Color)newVal;
	});
	public Color TextColor
	{
	get { return (Color)GetValue(TextColorProperty); }
	set { SetValue(TextColorProperty, value); }
	}
	}

view raw UnderLineLabel.xaml.cs hosted with ❤ by GitHub

Please make sure to add view reference.....
xmlns:local="clr-namespace:MyNewApp"

<local:UnderLineLabel Text="Forget Password" TextColor="Brown" LineColor="Orange" HorizontalOptions="EndAndExpand"/>

view raw MainPage.xaml hosted with ❤ by GitHub

TADAA!,

Now, you will have your Custom UnderLine working!!

Features of Custom UnderLine controls

1. Text Color Property= ( TextColor="BlueViolet")
2. Text Property = (Text="Xamarin Skills")
3. Line Color Property=( LineColor="Orange")

To get full source code Click Here

To watch the video Click Here