This plugin provides opportunity to create views with touch effects without using TapGestureRecognizer
TouchImage | Fade / Ripple | Background color / Transformations | IsToggled / image |
---|---|---|---|
- 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+ |
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}"
/>
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 |
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 |
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 =) ๐ง๐พ
The MIT License (MIT) see License file
Feel free to create issues and PRs ๐