TouchView control for Xamarin Forms (based on Xamarin Forms AbsoluteLayout)

This plugin provides opportunity to create views with touch effects without using TapGestureRecognizer

Build Status

• Azure DevOps:

GIF

TouchImage	Fade / Ripple	Background color / Transformations	IsToggled / image

Setup

• Available on NuGet: TouchView
• Add nuget package to your Xamarin.Forms .netStandard/PCL project and to your platform-specific projects (iOS and Android)
• Add TouchEffectPreserver.Preserve() line to your AppDelegate and MainActivity (preserve from linker)

Platform	Version
Xamarin.iOS	8.0+
Xamarin.Android	15+
Xamarin.Mac	All
Xamarin.UWP	10+

Samples

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

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

Add TouchEff to element's Effects collection and use TouchEff attached propertis for setting up touc 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"
            
            Padding="10, 5"
            BackgroundColor="Black"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand">
            
            <ContentView.Effects>
                <touch:TouchEff Completed="Handle_TouchCompleted"/>
            </ContentView.Effects>
            
            <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"
            Padding="10, 5"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand">
            <StackLayout.Effects>
                <touch:TouchEff Completed="Handle_TouchCompleted" />
            </StackLayout.Effects>

            <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

Property	Type	Default	Description
Command	ICommand	null	Touch Command handler
CommandParameter	object	null	Touch Command handler parameter
Status	TouchStatus	Completed	Current touch status
State	TouchState	Regular	Current touch state
RegularBackgroundColor	Color	Default	Background color of regular state
PressedBackgroundColor	Color	Default	Background color of pressed state
RegularOpacity	double	1.0	Opacity of regular state
PressedOpacity	double	1.0	Opacity of pressed state
RegularScale	double	1.0	Scale of regular state
PressedScale	double	1.0	Scale of pressed state
RegularTranslationX	double	0.0	TranslationX of regular state
PressedTranslationX	double	0.0	TranslationX of pressed state
RegularTranslationY	double	0.0	TranslationY of regular state
PressedTranslationY	double	0.0	TranslationY of pressed state
RegularRotation	double	0.0	Rotation of regular state
PressedRotation	double	0.0	Rotation of pressed state
RegularRotationX	double	0.0	RotationX of regular state
PressedRotationX	double	0.0	RotationX of pressed state
RegularRotationY	double	0.0	RotationY of regular state
PressedRotationY	double	0.0	RotationY of pressed state
PressedAnimationDuration	int	0	The duration of animation by applying PressedOpacity and/or PressedBackgroundColor and/or PressedScale
PressedAnimationEasing	Easing	null	The easing of animation by applying PressedOpacity and/or PressedBackgroundColor and/or PressedScale
RegularAnimationDuration	int	0	The duration of animation by applying RegularOpacity and/or RegularBackgroundColor and/or RegularScale
RegularAnimationEasing	Easing	null	The easing of animation by applying RegularOpacity and/or RegularBackgroundColor and/or RegularScale
RippleCount	int	0	This property allows to set ripple of animation (Pressed/Regular animation loop). '0: disabled'; '-1: infinite loop'; '1, 2, 3 ... n: Ripple's interations'
IsToggled	bool?	null	This property allows to achieve "switch" behavior. null means that feature is disabled and view will return to inital state after touch releasing

TouchEff Attached events

Event	Type	Default	Description
StatusChanged	TEffectStatusChangedHandler	null	Touch status changed
StateChanged	TEffectStateChangedHandler	null	Touch state changed
Completed	TEffectCompletedHandler	null	User tapped
AnimationStarted	AnimationStartedHandler	null	Animation started

TouchImage Bindable Properties

Property	Type	Default	Description
RegularBackgroundImageSource	ImageSource	null	Background image source of regular state
PressedBackgroundImageSource	ImageSource	null	Background image source of pressed state
RegularBackgroundImageAspect	Aspect	AspectFit	Background image aspect of pressed state
PressedBackgroundImageAspect	Aspect	AspectFit	Background image aspect of pressed 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 😃