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.

 

Implementation:-

Open Visual Studio and select a New Project.



Now, select Cross-Platform App, give the project a name, and set the project path. Then, click OK.

Select the template as "Blank App" and code sharing as "PCL".




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



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

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.

 Then, we set all the properties when initializing the PCL Project.

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.

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.

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