Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/AndreiMisiukevich/TouchEffect

UI-responsive touch effects for Xamarin.Forms
https://github.com/AndreiMisiukevich/TouchEffect

responsive touch-effects touchview xamarin xamarin-forms

Last synced: 30 days ago
JSON representation

UI-responsive touch effects for Xamarin.Forms

Host: GitHub
URL: https://github.com/AndreiMisiukevich/TouchEffect
Owner: AndreiMisiukevich
License: mit
Created: 2018-07-27T10:00:47.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2023-02-21T06:18:04.000Z (almost 2 years ago)
Last Synced: 2024-11-09T18:41:54.595Z (about 1 month ago)
Topics: responsive, touch-effects, touchview, xamarin, xamarin-forms
Language: C#
Homepage:
Size: 18.2 MB
Stars: 194
Watchers: 12
Forks: 33
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-xamarin-forms - TouchEffect ★199

README

        # 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

* Azure DevOps: [![Build status](https://dev.azure.com/andreimisiukevich/TouchView/_apis/build/status/TouchView-nuget-CI)](https://dev.azure.com/andreimisiukevich/TouchView/_build/latest?definitionId=1)

## GIF

  

    

      TouchImage

      Fade / Ripple 

      Background color / Transformations

      IsToggled / image

    

    

      

      

      

    

    

  

## Setup

* Available on NuGet: [TouchView](http://www.nuget.org/packages/TouchView) [![NuGet](https://img.shields.io/nuget/v/TouchView.svg?label=NuGet)](https://www.nuget.org/packages/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+|

|Tizen.NET|4.0+|

##### Xamarin.UWP - Build on Release with .NET Native tool chain note

````cs

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.

```xaml

...

  xmlns:touch="clr-namespace:TouchEffect;assembly=TouchEffect"

...

       

            

            Padding="10, 5"

            BackgroundColor="Black"

            VerticalOptions="CenterAndExpand"

            HorizontalOptions="CenterAndExpand">

            

            

            

        

...

       

            Padding="10, 5"

            VerticalOptions="CenterAndExpand"

            HorizontalOptions="CenterAndExpand">

            

        

```

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.

```xaml

...

  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

AnimationDuration | `int` | 0 | The common duration of animation

AnimationEasing | `Easing` | null | The common easing of animation

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](LICENSE)

## Contribution

Feel free to create issues and PRs 😃