Sunday 14 January 2018

Xamarin.Forms Blurred Image




 Introduction:-
 The image is an input control that can be used to make our UI design more user-friendly and attractive. "Image is representational of the external form of a person or thing in art" So today we have the effect of the blurred image in Samarine forms And how do we blurred the effects of the blurred image in Android and iOS.

This article demonstrates how to create and use a blurred image in Xamarin.Forms, XAML, and C#. This article starts with the introduction of the BlurredImage tag in XAML.
 BlurredImage in Xamarin
Implementation:-
Open Visual Studio and select a New Project.

BlurredImage in Xamarin

Now, select Cross-Platform App, give the project a name, and set the project path. Then, click OK.
BlurredImage in Xamarin
Select the template as "Blank App" and code sharing as "PCL".


BlurredImage in Xamarin

Right-click on PCL Project and select Add >> New Item or Add >> Class.

BlurredImage in Xamarin

We are creating a class BlurredImage.cs and writing the following C# code.
BlurredImage in Xamarin

This property is set in the Android project as well as in iOS project.
Let us start with Android. We are creating a class in Android project and rendering the image.
BlurredImage in Xamarin
 Then, we set all the properties when initializing the PCL Project.
BlurredImage in Xamarin
Please make sure of the dependency ([assembly: ExportRenderer(typeof(BlurredImage), typeof(BlurredImage Renderer))]) of Android (BlurredImageRndered) and PCL (BlurredImage).
BlurredImageRenderer.cs
Now, it's time to go to the iOS project. Again, set the PCL(BlurredImage) property in IOS Project.
We are creating a Class, so right click on iOS Project and select Apple. Then, select "Class" and give this class a name as BlurredImageRndered.cs.
BlurredImage in Xamarin
Now, let us write some code for Image and Set Property.
BlurredImageRndered.cs
Go to the PCL project and write this code in MainPage.xaml.
BlurredImage in Xamarin

As you can see in the above code, we have to set the view reference in xmlns:custom="clr-namespace:BlurImage" MainPage.xaml.
Write the following code for BlurredImage.
MainPage.xaml
TADDAA!!





Now, you will have your BlurredImage working!!
Public Property Image controls
  1. Image="Imag eis reprasantational of exteranal form of a person or thing in art"
  2. Aspect    Aspect=(Aspect="AspectFill")
  3. IsOpaque    Boolean=(IsOpaque="True")=if true hints to the rendering engine that it may safely omit drawing visual elements behind the image.
  4. Source    ImageSource=(Source="icon")

Monday 8 January 2018

Xamarin.Forms Custom Switch Button

 Hello Xamarians,
I am here with a new blog on Switch button. As you all know what is switch button and how it works. For example in general terms we have switch button for fan and it is used to mak fan tun on and off. Similary, in Xamarin form we have switch button to trun on and off the feature.


In Android, Ios and WPF  switch button is a UI widget to enable and disable some operations.
Switch button is also knows as flip flop.

In xamarin form we can customize the behavior of  switch button. Along with this we can also rendered the Android and IOS Properties of switch button.

Let's start with the implementation:


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

Now we can set properties in android project which is generated from PCL Project, also set properties in Ios Project.

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

Now we are using custom switch control in PCL Project..
TADDAAAA!

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



Publi Property of Switch Button controls
  1. IsToggeled Boolean=(IsToggeled="True")
Features of CustomSwitch controls
  1. Custom Switch On Color Property=(SwitchOnColor="Red")
  2. Custom Switch Off Color Property=(SwitchOffColor="Yellow")
  3. Custom Switch Thumb Color Property=(SwitchThumbColor="Yellow")
  4. Custom Thumb Image Property=(SwitchThumbImage="Black")


Featured Post

Sliding Entry In Xamarin.Forms

  Today, I am going to show you how to create a Custom Slide entry in Xamarin.Forms with animation and also using gradient color. here is Y...