Awesome

XamEffects - UI effects for Xamarin.Forms

Setup

Install-Package XamEffects

• You have to install this nuget package to Xamarin.Forms project and each platform project.
• Call after Forms.Init(...):
  • XamEffects.iOS.Effects.Init(); for iOS AppDelegate in FinishedLaunching
  • XamEffects.Droid.Effects.Init(); for Android MainActivity in OnCreate

Features

• TouchEffect - Add touch effect to views.
• Commands - Add command to views.
• BorderView - View with borders, corner radius and clipping to bounds.
• EffectsConfig - Config for effects.

TouchEffect

Add touch effect to views.

For Android API >=21 using Ripple effect, for Android API <21 and iOS using animated highlighted view.

Example

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamEffects.Sample"
             xmlns:xe="clr-namespace:XamEffects;assembly=XamEffects"
             x:Class="XamEffects.Sample.MainPage">
    <Grid HorizontalOptions="Center"
          VerticalOptions="Center"
          HeightRequest="100"
          WidthRequest="200"
          BackgroundColor="LightGray" 
          xe:TouchEffect.Color="Red">
        <Label Text="Test touch effect"
               HorizontalOptions="Center"
               VerticalOptions="Center"/>
    </Grid>
</ContentPage>

TouchEffect.SetColor(view, Color.Red);

Important & known issues

• Effect may not work in views with enabled Fast Renderers.
• Effect may not work in views with another gestures and effects like Button, Slider, Picker, Entry, Editor etc.
• Effect may not work correctly with standard gestures in Xamarin.Forms. If you need some gestures with touch effect, use not GestureRecognizer, but Commands.

If effect doesn't work, try wrap view with ContentView and add effect to wrapper.

Commands

Add command to views.

Example

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamEffects.Sample"
             xmlns:xe="clr-namespace:XamEffects;assembly=XamEffects"
             x:Class="XamEffects.Sample.MainPage">
    <Grid HorizontalOptions="Center"
          VerticalOptions="Center"
          HeightRequest="100"
          WidthRequest="200"
          BackgroundColor="LightGray" 
          xe:Commands.Tap="{Binding TapCommand}"
          xe:Commands.LongTap="{Binding LongTapCommand}">
        <Label Text="Test commands"
               HorizontalOptions="Center"
               VerticalOptions="Center"/>
    </Grid>
</ContentPage>

Commands.SetTap(view, new Command(() => {
  //do something
}));
Commands.SetTapParameter(view, someObject);

BorderView

View with borders, corner radius and clipping to bounds. View based on ContentView, you can specify child through Content property.

Example

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamEffects.Sample"
             xmlns:xe="clr-namespace:XamEffects;assembly=XamEffects"
             x:Class="XamEffects.Sample.MainPage">
    <xe:BorderView 
          HeightRequest="100"
          WidthRequest="200"
          HorizontalOptions="Center"
          VerticalOptions="Center"
          BackgroundColor="LightGray"
          CornerRadius="15"
          BorderColor="Green"
          BorderWidth="2">
        <Label HorizontalOptions="Center"
               VerticalOptions="Center"
               Text="Some content"/>
    </xe:BorderView>
</ContentPage>

Why view, not effect like other features? Firstly I planned to do this. For iOS there are no problems, but for Android for clipping to rounded corners need override DispatchDraw from native view, that isn't possible from effect.

Important & known issues

• Padding work incorrectly in Android. Use margin in child view.

EffectsConfig

Configs and helpers for effects.

License

MIT Licensed.

To do

Support UWP

Release notes

Moved to Release notes