Home

Awesome

TouchEffect was merged into XamarinCommunityToolkit https://github.com/xamarin/XamarinCommunityToolkit/pull/566 I highly recommed to use TouchEffect from XCT

TouchEff effect for Xamarin Forms (Repsonisve touches without TapGestureRecognizer)

This plugin provides opportunity to create views with touch effects without using TapGestureRecognizer. It makes it possible to change the appearance of any control in response to touch events, either directly via xaml or with your custom logic hooked up to the events which this plugin exposes.

With this plugin it is also possible to respond to hover events (if the platform exposes them) and to display native touch feedback events (Tilt on UWP, Ripple on Android, Opacity/Color changing on iOS).

Build Status

GIF

<html> <table style="width:100%"> <tr> <th>TouchImage</th> <th>Fade / Ripple</th> <th>Background color / Transformations</th> <th>IsToggled / image</th> </tr> <tr> <td><img src="https://github.com/AndreiMisiukevich/TouchEffect/blob/master/images/1.gif?raw=true"></td> <td><img src="https://github.com/AndreiMisiukevich/TouchEffect/blob/master/images/2.gif?raw=true"></td> <td><img src="https://github.com/AndreiMisiukevich/TouchEffect/blob/master/images/3.gif?raw=true"></td> <td><img src="https://github.com/AndreiMisiukevich/TouchEffect/blob/master/images/4.gif?raw=true"></td> </tr> </table> </html>

Setup

PlatformVersion
Xamarin.iOS8.0+
Xamarin.Android15+
Xamarin.MacAll
Xamarin.UWP10+
Tizen.NET4.0+
Xamarin.UWP - Build on Release with .NET Native tool chain note
using System.Reflection;
...
var assembliesToInclude = new List<Assembly>
{
    typeof(PlatformTouchEff).GetTypeInfo().Assembly,
    ...
};
Xamarin.Forms.Forms.Init(e, assembliesToInclude);

TouchEffectPreserver.Preserve();

Samples

The samples you can find here https://github.com/AndreiMisiukevich/TouchEffect/tree/master/TouchEffectSample

XAML: use TouchEff for achieving repsonsive UI (Changing background image or/and background color or/and opacity or/and scale).

Use TouchEff attached properties for setting up touch visual effect.

...
  xmlns:touch="clr-namespace:TouchEffect;assembly=TouchEffect"
...
       <ContentView
            touch:TouchEff.PressedAnimationDuration="800"
            touch:TouchEff.RegularAnimationDuration="800"
            touch:TouchEff.PressedScale="0.9"
            touch:TouchEff.PressedOpacity="0.6"
            touch:TouchEff.RippleCount="-1"
            touch:TouchEff.Command="{Binding Command}">
            
            Padding="10, 5"
            BackgroundColor="Black"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand">
            
            <Label Text="CLICK ME" 
                   TextColor="White" 
                   FontSize="60"/>
            
        </ContentView>
...
       <StackLayout
            touch:TouchEff.RegularBackgroundColor="Green"
            touch:TouchEff.PressedBackgroundColor="Red"
            touch:TouchEff.PressedScale="1.2"
            touch:TouchEff.RippleCount="1"
            touch:TouchEff.PressedRotation="10"
            touch:TouchEff.PressedRotationX="15"
            touch:TouchEff.PressedRotationY="15"
            touch:TouchEff.PressedTranslationX="5"
            touch:TouchEff.PressedTranslationY="5"
            touch:TouchEff.PressedAnimationDuration="500"
            touch:TouchEff.RegularAnimationDuration="500"
            touch:TouchEff.Command="{Binding Command}">

            Padding="10, 5"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand">

            <Label Text="CLICK ME" 
                   TextColor="Black" 
                   FontSize="60"/>
        </StackLayout>

If you wish to change Image Source on touch, you should use TouchImage control. It has several bindable properties for managing Pressed/Regular Source/Aspect of the image.

...
  xmlns:touch="clr-namespace:TouchEffect;assembly=TouchEffect"
...
       <touch:TouchImage
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand"
            HeightRequest="250"
            WidthRequest="250"
            RegularBackgroundImageSource="button"
            PressedBackgroundImageSource="button_pressed"
            touch:TouchEff.Command="{Binding Command}"
            />

TouchEff Attached Properties

PropertyTypeDefaultDescription
IsAvailablebooltrueMakes effect available
ShouldMakeChildrenInputTransparentbooltrueMakes layout's children input trasparent
CommandICommandnullTouch Command handler
CommandParameterobjectnullTouch Command handler parameter
StatusTouchStatusCompletedCurrent touch status
StateTouchStateRegularCurrent touch state
RegularBackgroundColorColorDefaultBackground color of regular state
PressedBackgroundColorColorDefaultBackground color of pressed state
HoveredBackgroundColorColorDefaultBackground color of hovered state
RegularOpacitydouble1.0Opacity of regular state
PressedOpacitydouble1.0Opacity of pressed state
HoveredOpacitydouble1.0Opacity of hovered state
RegularScaledouble1.0Scale of regular state
PressedScaledouble1.0Scale of pressed state
HoveredScaledouble1.0Scale of hovered state
RegularTranslationXdouble0.0TranslationX of regular state
PressedTranslationXdouble0.0TranslationX of pressed state
HoveredTranslationXdouble0.0TranslationX of hovered state
RegularTranslationYdouble0.0TranslationY of regular state
PressedTranslationYdouble0.0TranslationY of pressed state
HoveredTranslationYdouble0.0TranslationY of hovered state
RegularRotationdouble0.0Rotation of regular state
PressedRotationdouble0.0Rotation of pressed state
HoveredRotationdouble0.0Rotation of hovered state
RegularRotationXdouble0.0RotationX of regular state
PressedRotationXdouble0.0RotationX of pressed state
HoveredRotationXdouble0.0RotationX of hovered state
RegularRotationYdouble0.0RotationY of regular state
PressedRotationYdouble0.0RotationY of pressed state
HoveredRotationYdouble0.0RotationY of hovered state
AnimationDurationint0The common duration of animation
AnimationEasingEasingnullThe common easing of animation
PressedAnimationDurationint0The duration of animation by applying PressedOpacity and/or PressedBackgroundColor and/or PressedScale
PressedAnimationEasingEasingnullThe easing of animation by applying PressedOpacity and/or PressedBackgroundColor and/or PressedScale
HoveredAnimationDurationint0The duration of animation by applying HoveredOpacity and/or HoveredBackgroundColor and/or HoveredScale
HoveredAnimationEasingEasingnullThe easing of animation by applying HoveredOpacity and/or HoveredBackgroundColor and/or HoveredScale
RegularAnimationDurationint0The duration of animation by applying RegularOpacity and/or RegularBackgroundColor and/or RegularScale
RegularAnimationEasingEasingnullThe easing of animation by applying RegularOpacity and/or RegularBackgroundColor and/or RegularScale
RippleCountint0This property allows to set ripple of animation (Pressed/Hovered/Regular animation loop). '0: disabled'; '-1: infinite loop'; '1, 2, 3 ... n: Ripple's interations'
IsToggledbool?nullThis property allows to achieve "switch" behavior. null means that feature is disabled and view will return to inital state after touch releasing
DisallowTouchThresholdint0Movement threshold for considering android touch as canceled
NativeAnimationboolfalseIf native platform touch feedback animations are present (Tilt on UWP, Ripple on Android, Opacity/Color on iOS)
NativeAnimationColorColorColor.DefaultThe color used for the native touch feedback animation
NativeAnimationRadiusint-1The radius of the native ripple animation on Android or Layer radius on iOS

TouchEff Attached events

EventTypeDefaultDescription
StatusChangedTEffectStatusChangedHandlernullTouch status changed
StateChangedTEffectStateChangedHandlernullTouch state changed
HoverStatusChangedTEffectHoverStatusChangedHandlernullHover status changed
HoverStateChangedTEffectHoverStateChangedHandlernullHover state changed
CompletedTEffectCompletedHandlernullUser tapped
AnimationStartedAnimationStartedHandlernullAnimation started

TouchImage Bindable Properties

PropertyTypeDefaultDescription
RegularBackgroundImageSourceImageSourcenullBackground image source of regular state
PressedBackgroundImageSourceImageSourcenullBackground image source of pressed state
HoveredBackgroundImageSourceImageSourcenullBackground image source of hovered state
RegularBackgroundImageAspectAspectAspectFitBackground image aspect of regular state
PressedBackgroundImageAspectAspectAspectFitBackground image aspect of pressed state
HoveredBackgroundImageAspectAspectAspectFitBackground image aspect of hovered state

If you want to customize/extend existing controls, you may observe State property via triggers

Check source code for more info, or just ask me =)

License

The MIT License (MIT) see License file

Contribution

Feel free to create issues and PRs 😃