TouchEffect

by AndreiMisiukevich

AndreiMisiukevich /TouchEffect

UI-responsive touch effects for Xamarin.Forms πŸ‡§πŸ‡Ύ

164 Stars 22 Forks Last release: 2 months ago (4.1.78) MIT License 145 Commits 53 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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

  • Azure DevOps: Build status

GIF

TouchImage Fade / Ripple Background color / Transformations IsToggled / image

Setup

  • Available on NuGet: TouchView NuGet
  • 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+|

Xamarin.UWP - Build on Release with .NET Native tool chain note
using System.Reflection;
...
var assembliesToInclude = new List
{
    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"
...
       

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

        <label text="CLICK ME" textcolor="White" fontsize="60"></label>

    </contentview>

...

        Padding="10, 5"
        VerticalOptions="CenterAndExpand"
        HorizontalOptions="CenterAndExpand"&gt;

        <label text="CLICK ME" textcolor="Black" fontsize="60"></label>
    </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"
...
       

TouchEff Attached Properties

Property

Type Default Description
IsAvailable

bool
true Makes effect available
ShouldMakeChildrenInputTransparent
bool
true Makes layout's children input trasparent
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
HoveredBackgroundColor
Color
Default Background color of hovered state
RegularOpacity
double
1.0 Opacity of regular state
PressedOpacity
double
1.0 Opacity of pressed state
HoveredOpacity
double
1.0 Opacity of hovered state
RegularScale
double
1.0 Scale of regular state
PressedScale
double
1.0 Scale of pressed state
HoveredScale
double
1.0 Scale of hovered state
RegularTranslationX
double
0.0 TranslationX of regular state
PressedTranslationX
double
0.0 TranslationX of pressed state
HoveredTranslationX
double
0.0 TranslationX of hovered state
RegularTranslationY
double
0.0 TranslationY of regular state
PressedTranslationY
double
0.0 TranslationY of pressed state
HoveredTranslationY
double
0.0 TranslationY of hovered state
RegularRotation
double
0.0 Rotation of regular state
PressedRotation
double
0.0 Rotation of pressed state
HoveredRotation
double
0.0 Rotation of hovered state
RegularRotationX
double
0.0 RotationX of regular state
PressedRotationX
double
0.0 RotationX of pressed state
HoveredRotationX
double
0.0 RotationX of hovered state
RegularRotationY
double
0.0 RotationY of regular state
PressedRotationY
double
0.0 RotationY of pressed state
HoveredRotationY
double
0.0 RotationY of hovered 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
HoveredAnimationDuration
int
0 The duration of animation by applying HoveredOpacity and/or HoveredBackgroundColor and/or HoveredScale
HoveredAnimationEasing
Easing
null The easing of animation by applying HoveredOpacity and/or HoveredBackgroundColor and/or HoveredScale
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/Hovered/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
DisallowTouchThreshold
int
0 Movement threshold for considering android touch as canceled
NativeAnimation
bool
false If native platform touch feedback animations are present (Tilt on UWP, Ripple on Android, Opacity/Color on iOS)
NativeAnimationColor
Color
Color.Default The color used for the native touch feedback animation
NativeAnimationRadius
int
-1 The radius of the native ripple animation on Android or Layer radius on iOS

TouchEff Attached events

Event

Type Default Description
StatusChanged

TEffectStatusChangedHandler
null Touch status changed
StateChanged
TEffectStateChangedHandler
null Touch state changed
HoverStatusChanged
TEffectHoverStatusChangedHandler
null Hover status changed
HoverStateChanged
TEffectHoverStateChangedHandler
null Hover 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
HoveredBackgroundImageSource
ImageSource
null Background image source of hovered state
RegularBackgroundImageAspect
Aspect
AspectFit Background image aspect of regular state
PressedBackgroundImageAspect
Aspect
AspectFit Background image aspect of pressed state
HoveredBackgroundImageAspect
Aspect
AspectFit Background 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 πŸ˜ƒ

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.