Xamarin Forms – Platform Specifics (iOS): Blur Effect

Screen Shot 2018-04-12 at 22.28.54

As a Xamarin mobile developer ever wonder, why we need to write some much of code in PCL and iOS projects to do simple Native feature, some of which are usually one-liners code natively.
Xamarin has now introduced a nice nifty feature that helps us to write code in Xamarin Forms in the form of Platform Specifics.
In short, Platform Specifics helps us to consume the features or functionalities that are only available on iOS, without needing to implement custom renderers or effects in the required platform project.
One of the best example to understand these features is the Blur effect. Platform specifics are baked into the Xamarin and it is ready to use.
Below are the steps to test this feature
Create a Xamarin Forms project
Namespaces: It is important to understand Xaml namespaces to get to know about Xamarin specifics. Below is the required namespace on each page.
xmlns:ios=“clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core“ 
Blur Effect
Below the way we can define Blur effect on a box view, this effect can be implemented on any visual elements in Xamarin Forms.
<BoxView x:Name=“boxView“ ios:VisualElement.BlurEffect=“Dark“ HeightRequest=“50“ WidthRequest=“50“ />
Blur effect has enumeration options to be set to it.

  1. Dark – applies a Dark blur effect
  2. Light – applies the light blur effect
  3. ExtraLight – applies an extra light blur effect
  4. None – applies no blur effect
Screen Shot 2018-04-12 at 22.50.55

Below is sample code for various blur effects we can  notice
<StackLayout>
    <Image Source=“Aus.png“ HeightRequest=“50“ WidthRequest=“50“ />
    <BoxView x:Name=“boxView“ ios:VisualElement.BlurEffect=“Dark“ HeightRequest=“50“ WidthRequest=“50“ />
</StackLayout>
<StackLayout>
    <Image Source=“Aus.png“ HeightRequest=“50“ WidthRequest=“50“ />
    <BoxView x:Name=“boxView1“ ios:VisualElement.BlurEffect=“Light“ HeightRequest=“50“ WidthRequest=“50“ />
</StackLayout>
<StackLayout>
    <Image Source=“Aus.png“ HeightRequest=“50“ WidthRequest=“50“ />
    <BoxView x:Name=“boxView2“ ios:VisualElement.BlurEffect=“ExtraLight“ HeightRequest=“50“ WidthRequest=“50“ />
</StackLayout>
Below is the sample output on iOS

Here is the sample available in Github
https://github.com/divikiran/PlatformSpecficBlurEffect.git
 

Advertisements