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

	public class BlurredImageRenderer : ViewRenderer<BlurredImage, ImageView>
	{
	private bool _isDisposed;
	private const float BITMAP_SCALE = 0.3f;
	private const float RESIZE_SCALE = 0.2f;
	public BlurredImageRenderer()
	{
	AutoPackage = false;
	}
	protected override void OnElementChanged(ElementChangedEventArgs<BlurredImage> e)
	{
	base.OnElementChanged(e);
	if (Control == null)
	{
	var imageView = new BlurredImageView(Context);
	SetNativeControl(imageView);
	}
	UpdateBitmap(e.OldElement);
	UpdateAspect();
	}
	protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
	{
	base.OnElementPropertyChanged(sender, e);
	if (e.PropertyName == Image.SourceProperty.PropertyName)
	{
	UpdateBitmap(null);
	return;
	}
	if (e.PropertyName == Image.AspectProperty.PropertyName)
	{
	UpdateAspect();
	}
	}
	protected override void Dispose(bool disposing)
	{
	if (_isDisposed)
	{
	return;
	}
	_isDisposed = true;
	BitmapDrawable bitmapDrawable;
	if (disposing && Control != null && (bitmapDrawable = (Control.Drawable as BitmapDrawable)) != null)
	{
	Bitmap bitmap = bitmapDrawable.Bitmap;
	if (bitmap != null)
	{
	bitmap.Recycle();
	bitmap.Dispose();
	}
	}
	base.Dispose(disposing);
	}
	private void UpdateAspect()
	{
	using (ImageView.ScaleType scaleType = ToScaleType(Element.Aspect))
	{
	Control.SetScaleType(scaleType);
	}
	}
	private static ImageView.ScaleType ToScaleType(Aspect aspect)
	{
	switch (aspect)
	{
	case Aspect.AspectFill:
	return ImageView.ScaleType.CenterCrop;
	case Aspect.Fill:
	return ImageView.ScaleType.FitXy;
	}
	return ImageView.ScaleType.FitCenter;
	}
	private async void UpdateBitmap(Image previous = null)
	{
	Bitmap bitmap = null;
	ImageSource source = Element.Source;
	if (previous == null || !object.Equals(previous.Source, Element.Source))
	{
	SetIsLoading(true);
	((BlurredImageView)base.Control).SkipInvalidate();
	// I'm not sure where this comes from.
	Control.SetImageResource(17170445);
	if (source != null)
	{
	try
	{
	bitmap = await GetImageFromImageSource(source, Context);
	}
	catch (TaskCanceledException)
	{
	}
	catch (IOException)
	{
	}
	catch (NotImplementedException)
	{
	}
	}
	if (Element != null && object.Equals(Element.Source, source))
	{
	if (!_isDisposed)
	{
	Control.SetImageBitmap(bitmap);
	if (bitmap != null)
	{
	bitmap.Dispose();
	}
	SetIsLoading(false);
	((IVisualElementController)base.Element).NativeSizeChanged();
	}
	}
	}
	}
	private async Task<Bitmap> GetImageFromImageSource(ImageSource imageSource, Context context)
	{
	IImageSourceHandler handler;
	if (imageSource is FileImageSource)
	{
	handler = new FileImageSourceHandler();
	}
	else if (imageSource is StreamImageSource)
	{
	handler = new StreamImagesourceHandler(); // sic
	}
	else if (imageSource is UriImageSource)
	{
	handler = new ImageLoaderSourceHandler(); // sic
	}
	else
	{
	throw new NotImplementedException();
	}
	var originalBitmap = await handler.LoadImageAsync(imageSource, context);
	// Blur it twice!
	var blurredBitmap = await Task.Run(() => CreateBlurredImage(CreateResizedImage(originalBitmap), 25));
	return blurredBitmap;
	}
	private Bitmap CreateBlurredImage(Bitmap originalBitmap, int radius)
	{
	// Create another bitmap that will hold the results of the filter.
	Bitmap blurredBitmap;
	blurredBitmap = Bitmap.CreateBitmap(originalBitmap);
	// Create the Renderscript instance that will do the work.
	RenderScript rs = RenderScript.Create(Context);
	// Allocate memory for Renderscript to work with
	Allocation input = Allocation.CreateFromBitmap(rs, originalBitmap, Allocation.MipmapControl.MipmapFull, AllocationUsage.Script);
	Allocation output = Allocation.CreateTyped(rs, input.Type);
	// Load up an instance of the specific script that we want to use.
	ScriptIntrinsicBlur script = ScriptIntrinsicBlur.Create(rs, Android.Renderscripts.Element.U8_4(rs));
	script.SetInput(input);
	// Set the blur radius
	script.SetRadius(radius);
	// Start Renderscript working.
	script.ForEach(output);
	// Copy the output to the blurred bitmap
	output.CopyTo(blurredBitmap);
	return blurredBitmap;
	}
	private Bitmap CreateResizedImage(Bitmap originalBitmap)
	{
	int width = Convert.ToInt32(Math.Round(originalBitmap.Width * BITMAP_SCALE));
	int height = Convert.ToInt32(Math.Round(originalBitmap.Height * BITMAP_SCALE));
	// Create another bitmap that will hold the results of the filter.
	Bitmap inputBitmap = Bitmap.CreateScaledBitmap(originalBitmap, width, height, false);
	Bitmap outputBitmap = Bitmap.CreateBitmap(inputBitmap);
	// Create the Renderscript instance that will do the work.
	RenderScript rs = RenderScript.Create(Context);
	Allocation tmpIn = Allocation.CreateFromBitmap(rs, inputBitmap);
	Allocation tmpOut = Allocation.CreateFromBitmap(rs, outputBitmap);
	// Allocate memory for Renderscript to work with
	var t = Android.Renderscripts.Type.CreateXY(rs, tmpIn.Element, Convert.ToInt32(width * RESIZE_SCALE), Convert.ToInt32(height * RESIZE_SCALE));
	Allocation tmpScratch = Allocation.CreateTyped(rs, t);
	ScriptIntrinsicResize theIntrinsic = ScriptIntrinsicResize.Create(rs);
	// Resize the original img down.
	theIntrinsic.SetInput(tmpIn);
	theIntrinsic.ForEach_bicubic(tmpScratch);
	// Resize smaller img up.
	theIntrinsic.SetInput(tmpScratch);
	theIntrinsic.ForEach_bicubic(tmpOut);
	tmpOut.CopyTo(outputBitmap);
	return outputBitmap;
	}
	private class BlurredImageView : ImageView
	{
	private bool _skipInvalidate;
	public BlurredImageView(Context context) : base(context)
	{
	}
	public override void Invalidate()
	{
	if (this._skipInvalidate)
	{
	this._skipInvalidate = false;
	return;
	}
	base.Invalidate();
	}
	public void SkipInvalidate()
	{
	this._skipInvalidate = true;
	}
	}
	private static FieldInfo _isLoadingPropertyKeyFieldInfo;
	private static FieldInfo IsLoadingPropertyKeyFieldInfo
	{
	get
	{
	if (_isLoadingPropertyKeyFieldInfo == null)
	{
	_isLoadingPropertyKeyFieldInfo = typeof(Image).GetField("IsLoadingPropertyKey", BindingFlags.Static | BindingFlags.NonPublic);
	}
	return _isLoadingPropertyKeyFieldInfo;
	}
	}
	private void SetIsLoading(bool value)
	{
	var fieldInfo = IsLoadingPropertyKeyFieldInfo;
	((IElementController)base.Element).SetValueFromRenderer((BindablePropertyKey)fieldInfo.GetValue(null), value);
	}
	}

view raw BlurredImageRenderer.cs hosted with ❤ by GitHub

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

	public class BlurredImageRenderer : ImageRenderer
	{
	protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
	{
	if (Control == null)
	{
	SetNativeControl(new BlurredImageView
	{
	ContentMode = UIViewContentMode.ScaleAspectFit,
	ClipsToBounds = true
	});
	}
	base.OnElementChanged(e);
	}
	private class BlurredImageView : UIImageView
	{
	public override UIImage Image
	{
	get { return base.Image; }
	set
	{
	// This may take up to a second so don't block the UI thread.
	Task.Run(() =>
	{
	using (var context = CIContext.Create())
	using (var inputImage = CIImage.FromCGImage(value.CGImage))
	using (var filter = new CIGaussianBlur() { Image = inputImage, Radius = 5 })
	using (var resultImage = context.CreateCGImage(filter.OutputImage, inputImage.Extent))
	{
	InvokeOnMainThread(() => base.Image = new UIImage(resultImage));
	}
	});
	}
	}
	}
	}

view raw BlurredImageRndered.cs hosted with ❤ by GitHub

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

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

	public class CustomSwitch : Switch
	{
	public static readonly BindableProperty SwitchOffColorProperty =
	BindableProperty.Create(nameof(SwitchOffColor),
	typeof(Color), typeof(CustomSwitch),
	Color.Default);
	public Color SwitchOffColor
	{
	get { return (Color)GetValue(SwitchOffColorProperty); }
	set { SetValue(SwitchOffColorProperty, value); }
	}
	public static readonly BindableProperty SwitchOnColorProperty =
	BindableProperty.Create(nameof(SwitchOnColor),
	typeof(Color), typeof(CustomSwitch),
	Color.Default);
	public Color SwitchOnColor
	{
	get { return (Color)GetValue(SwitchOnColorProperty); }
	set { SetValue(SwitchOnColorProperty, value); }
	}
	public static readonly BindableProperty SwitchThumbColorProperty =
	BindableProperty.Create(nameof(SwitchThumbColor),
	typeof(Color), typeof(CustomSwitch),
	Color.Default);
	public Color SwitchThumbColor
	{
	get { return (Color)GetValue(SwitchThumbColorProperty); }
	set { SetValue(SwitchThumbColorProperty, value); }
	}
	public static readonly BindableProperty SwitchThumbImageProperty =
	BindableProperty.Create(nameof(SwitchThumbImage),
	typeof(string),
	typeof(CustomSwitch),
	string.Empty);
	public string SwitchThumbImage
	{
	get { return (string)GetValue(SwitchThumbImageProperty); }
	set { SetValue(SwitchThumbImageProperty, value); }
	}
	}

view raw CustomSwitch.cs hosted with ❤ by GitHub

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

	using System;
	using UIKit;
	using Xamarin.Forms;
	using CustomSliderDemo;
	using CustomSliderDemo.iOS;
	using Xamarin.Forms.Platform.iOS;
	[assembly: ExportRenderer(typeof(CustomSwitch), typeof(MySwitchRendererd))]
	namespace CustomSliderDemo.iOS
	{
	public class MySwitchRendererd : SwitchRenderer
	{
	Version version = new Version(ObjCRuntime.Constants.Version);
	protected override void OnElementChanged(ElementChangedEventArgs<Switch> e)
	{
	base.OnElementChanged(e);
	if (e.OldElement != null || e.NewElement == null)
	return;
	var view = (CustomSwitch)Element;
	if (!string.IsNullOrEmpty(view.SwitchThumbImage))
	{
	if (version > new Version(6, 0))
	{ //n iOS 6 and earlier, the image displayed when the switch is in the on position.
	Control.OnImage = UIImage.FromFile(view.SwitchThumbImage.ToString());
	//n iOS 6 and earlier, the image displayed when the switch is in the off position.
	Control.OffImage = UIImage.FromFile(view.SwitchThumbImage.ToString());
	}
	else
	{
	Control.ThumbTintColor = view.SwitchThumbColor.ToUIColor();
	}
	}
	//The color used to tint the appearance of the thumb.
	Control.ThumbTintColor = view.SwitchThumbColor.ToUIColor();
	//Control.BackgroundColor = view.SwitchBGColor.ToUIColor();
	//The color used to tint the appearance of the switch when it is turned on.
	Control.OnTintColor = view.SwitchOnColor.ToUIColor();
	//The color used to tint the outline of the switch when it is turned off.
	Control.TintColor = view.SwitchOffColor.ToUIColor();
	}
	}
	}

view raw MySwitchRendererd hosted with ❤ by GitHub

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..

	<ContentPage.Content>
	<StackLayout Padding="20" BackgroundColor="Gray" >
	<Label Text="Custom Switch" FontSize="Large"/>
	<cs:CustomSwitch x:Name="customSwitch"
	SwitchOffColor="Yellow"
	SwitchOnColor="Black"
	SwitchThumbImage="icon"
	HorizontalOptions="CenterAndExpand"
	VerticalOptions="CenterAndExpand"/>
	<cs:CustomSwitch SwitchOffColor="Navy"
	SwitchOnColor="Green"
	SwitchThumbColor="Violet"
	HorizontalOptions="CenterAndExpand"
	VerticalOptions="CenterAndExpand"/>
	</StackLayout>
	</ContentPage.Content>

view raw MainPage.xaml hosted with ❤ by GitHub

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