Skip to content
UI-responsive touch effects for Xamarin.Forms
Branch: master
Clone or download

README.md

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

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

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)
  • iOS: add TouchViewRenderer.Initialize() line to your AppDelegate (preserve from linker)
using TouchEffect.iOS;
namespace YourApp.iOS
{
    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
    {
        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            global::Xamarin.Forms.Forms.Init();
            TouchViewRenderer.Initialize();
            LoadApplication(new App());
            return base.FinishedLaunching(app, options);
        }
    }
}
Platform Version
Xamarin.iOS 8.0+
Xamarin.Android 15+

Samples

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

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

...
        <touch:TouchView
            RegularBackgroundImageSource="button"
            PressedBackgroundImageSource="button_pressed"
            PressedOpacity="1"
            Completed="Handle_TouchCompleted" />
...
        <touch:TouchView
            PressedAnimationDuration="500"
            RegularAnimationDuration="500"  
            RippleCount="-1"           
            Completed="Handle_TouchCompleted">

            <Label Text="CLICK ME" />

        </touch:TouchView>
...
       <touch:TouchView
            PressedBackgroundColor="Red"
            PressedOpacity="1"
            PressedScale = "1.1"
            RippleCount="-1"  
            Completed="Handle_TouchCompleted">

            <Label Text="CLICK ME"/>

        </touch:TouchView>
...

All 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 0.6 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
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
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'
BackgroundImage Image null Background control (it will be created automatically, if RegularBackgroundImageAspect isn't null or PressedBackgroundImageSource isn't null

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

       <touch:TouchView x:Name="container"
            HeightRequest="250"
            WidthRequest="250"
            Completed="Handle_TouchCompleted">
            <Image>
                <Image.Triggers>
                    <DataTrigger TargetType="Image" 
                                 Binding="{Binding Source={x:Reference container}, Path=State}"
                                 Value="Regular">
                        <Setter Property="Source" Value="icon_regular" />
                    </DataTrigger>
                    <DataTrigger TargetType="Image" 
                                 Binding="{Binding Source={x:Reference container}, Path=State}"
                                 Value="Pressed">
                        <Setter Property="Source" Value="icon_pressed" />
                    </DataTrigger>
                </Image.Triggers>
            </Image>
        </touch:TouchView>

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 😃

You can’t perform that action at this time.