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 #"

Now we can write some code in android project for set

Then we create in Ios Project Also

Please make sure add view reference.....
xmlns:local="clr-namespace:CustomSliderApp"
then write xaml code in main page.
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 #".

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))]

Then we create an Ios Project Also

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

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 #"

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

Then we will create in Ios Project Also

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

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

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 #"

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


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.


Please make sure to add view reference xmlns:local="clr-namespace:CustomButtonApp" and write Xaml code in main page.
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.
Then we use the  BindableProperty to the code behind.
Please make sure to add view reference.....
xmlns:local="clr-namespace:MyNewApp"

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

Xamarin.Forms Custom Entry With Image and Password

Hello Xamarin Friends,
Today, I am going to create a custom ImageEntry. Whenever we are creating a login page, we can not understand which control we have to use for the username and password. I am creating a custom control today to solve this problem. We don't need to write more code with its use and page design will also looks good.
So let's start.

Firstly we create a ContentView and set the image and entry. 
then we are using the  BindableProperty to create this custom control.
Please make sure to add view reference.....
xmlns:controls="clr-namespace:CustomImageEntry.CustomControls"
 
TADAA!,

I have not yet told about the Borderless entry and CustomImage in this blog that I will tell in the next post.

All this  my original code.


Features of Image Entry controls:-

1. Accent Color = ( AccentColor="BlueViolet")
2. Text Property = (Text="Xamarin Skills")
3. Keyboard Property = (Keyboard="Default")
4. Placeholder Property = (Placeholder="Xamarin Skills")
5. IsPassword Property = (IsPassword="False")
6. Left ImageSource Property = (LImageSource="email")
7. Right ImageSource Property = (RImageSource="eyeshow")
8. ImageEntry RightImage = Clicked Property(RightImageClicked="ImageEntry_RightImageClicked")
9. ImageEntry LeftImage Clicked Property = (LeftImageClicked="ImageEntry_LeftImageClicked")
10. ImageAlignment Property = (ImageAlignment="Password")

You want to full source code Click Here
If you want to watch this video Click Here

Xamarin.Forms Animation With Triggers

Hi All,

In this post I have created  an example of animation with triggers, This time we are talking about the triggers.

Xamarin Forms have a powerful class  named Trigger.  I want to show you stacklayout flipping with animation which I have created with Trigger.

Firstly we create a folder whose name is Triggers,  then create a class with name SwitchLayout.
Then write this code......

Here is the  XAML code......

You need  to add the reference like this.
xmlns:triggers="clr-namespace:FlipAnimation.Triggers"

if you want watch this demo video click here
TADDA !

you want to full source code click Here
If you want to watch this video Click Here

Xamarin.Forms Animation

Hello friends animation is a great way to help you make your app even more attractive and smoother.
Note that there is no XAML interface for the Xamarin.Forms animation classes. However, animations can be encapsulated in behaviors and then referenced from XAML.
The ViewExtensions class provides the following extension methods that can be used to create simple animations

• TranslateTo animates the TranslationX and TranslationY properties of a VisualElement.
• ScaleTo animates the Scale property of a VisualElement.
• RotateTo animates the Rotation property of a VisualElement.
• RotateXTo animates the RotationX property of a VisualElement.
• RotateYTo animates the RotationY property of a VisualElement.
• FadeTo animates the Opacity property of a VisualElement.

Simple Animations

Each extension method in the ViewExtensions implements a single animation operation that progressively changes a property from one value to another value over a period of time.

Scalling

The scale method increases or decreases the size of an element (according to the parameters given for the width and height). Scaling refers to the resizing of a element.Scaling is used to change the visual appearance of an image, to alter the quantity of information stored in a scene representation, or as a low-level preprocessor in multi-stage image processing chain which operates on features of a particular scale.

await image.ScaleTo (2, 2000);

Rotation

A rotation is a circular movement of an object around a center (or point) of rotation.
The rotate method rotates an element clockwise or counter-clockwise according to a given degree.

await image.RotateTo (360, 2000);

Translation

The translate method moves an element from its current position (according to the parameters given for the X-axis or TranslationX and the Y-axis or TranslationY).

await image.TranslateTo (-100, -100, 1000);

Fading

There is no property such as transparency. But, you can achieve transparency by inserting a pseudo element with regular opacity the exact size of the element behind it. The opacity-level describes the transparency-level, it ranges from 0.0 to 1.0. The level 0.0 is completely transparent, 0.5 is 50% see-through and level 1.0 is not transparent. Opacity has a default initial value of 1 (100% opaque).
The opacity property specifies the opacity/transparency of an element. The opacity property can take a value from 0.0 - 1.0.

image.Opacity = 0;
await image.FadeTo (1, 4000);

Compound Animations

A compound animation is a sequential combination of animations, and can be created with the await operator.

Composite Animations

A composite animation is a combination of animations where two or more animations run simultaneously. Composite animations can be created by mixing awaited and non-awaited animations.

await Task.WhenAll (


  image.RotateTo (307 * 360, 2000),


  image.RotateXTo (251 * 360, 2000),


  image.RotateYTo (199 * 360, 2000)


);

Canceling Animations

An application can cancel one or more animations with a call to the static ViewExtensions.CancelAnimations method.

ViewExtensions.CancelAnimations (image);

Let`s Start Animation Demo
Create a XAML and design:

Now we write c# code:

TADDA !

Animation In Android

 

Xamarin Forms Lottie Animations

What is Lottie ?

Lottie is an iOS, Android, and Xamarin.Forms Native library that renders After Effects animations in real time,allowing apps to use animations as easily as they use static images with the Json file.

Why Lottie?

• This tool or library is very effective and flexible to use.
• Make your animation efficient in any way.
• Small Jason File Size.
• To use the Lite Library is terrible and easy, now also available on Xamarin form. Below I'm  mentioned important URL To check the Git Repository, I want to very thank Martijn van Dijk
https://github.com/martijn00/LottieXamarin 

NuGet package:https://www.nuget.org/packages/Com.Airbnb.Xamarin.Forms.Lottie/2.3.4

Available on NuGet! 

Install-Package Com.Airbnb.Xamarin.Forms.Lottie -Version 2.3.4 

Now i am Install the Lottie Package in all your projects:

 

Here initialize Lottie plugin in both project Android(In MainActivity) and Ios(In AppDelegate) using AnimationViewRenderer.Init(); 
you initialize Lottie plugin in Android Project in MainActivity.

you initialize Lottie plugin in Ios Project AppDelegate.

  

Now we use json, if you don’t have one you can choose  JSON file from here:https://www.lottiefiles.com/

Now you add json in iOS  project and make sure you have the build action in Bundle Resource
select animation json and right, click then click on property.

In Android, add your json and make sure you have the build action in Android Asset.

select animation json and right click, then click on the property. 

Now we write code in xaml and Add the reference  

xmlns:forms=“clr-namespace:Lottie.Forms;assembly=Lottie.Forms“

TADAA!,

you should have your animation working!!

 

Lottie Animation In Android

  Click Here to Complete Source

Lottie Animation in Ios

Click Here to Complete Source Code