Forum Xamarin.Forms

TouchView | TouchImage | TouchFadeView | TouchColorView package

AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

Hi all, let me introduce new plugin for Xamarin.Forms development.

https://github.com/AndreiMisiukevich/TouchEffect

This plugin allows developers to create UI-responsive controls/layouts with touch effect (fade control, change image source, change background color)

I will appreciate any feedback)

Posts

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    Any feedback?)

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    up.

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    https://github.com/AndreiMisiukevich/TouchEffect

    Updated documentation. Refactored code.
    Use TouchView now (All necessary properties are compiled in one view!)

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭
    edited November 2018

    Responsive UI in xamarin forms - easy.

    On touch you can change:
    Background image
    Background color (animated or not)
    Opacity (animated or not)
    Scale (animated or not)

    Ripple animation is supported

    https://github.com/AndreiMisiukevich/TouchEffect

  • GiampaoloGabbaGiampaoloGabba USMember ✭✭✭

    I'm going to try it out today.
    I have my own solution for this but i'm not satisfied. Your control seem flexible and functional :)

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @GiampaoloGabba thank you :) wait your feedback

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @GiampaoloGabba was it good?

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    I'm going to add Translation (X/Y) and Rotation (Regular, X, Y) support

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    Added couple of new properties

    More info here: https://github.com/AndreiMisiukevich/TouchEffect/releases

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @GiampaoloGabba have you tried it yet?)

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    up

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    new release :)
    bugfixes

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    https://github.com/AndreiMisiukevich/TouchEffect

    Created TouchEff
    So, you may use it as Effect (check Readme for more info)

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭
    edited May 2019

    New release: more on github

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    https://github.com/AndreiMisiukevich/TouchEffect

    iOS, Android, UWP, Mac supported

  • M0BilalM0Bilal USMember ✭✭
    edited July 2019

    Will it work for child controls too? I have a StackLayout at some level of ContentPage's content. In this StackLayout, there are number of controls. I want to bind separate touch commands to respective controls. Is it supported?
    I am trying this, but seems like to be not working.

    Update: I had to add the Control.Effect too. Only binding the command wouldn't work. For example:
    <Image Source="{imgExt:ImageResource ic_add_dark.png}" Style="{x:StaticResource SideMenuImageButton}" touch:TouchEff.PressedAnimationDuration="800" touch:TouchEff.RegularAnimationDuration="800" touch:TouchEff.PressedOpacity="0.6" touch:TouchEff.RippleCount="1" touch:TouchEff.Command="{Binding AddTimerCommand}"> <Image.Effects> <touch:TouchEff /> </Image.Effects> </Image>
    I was missing this part:
    <Image.Effects> <touch:TouchEff /> </Image.Effects>

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @M0Bilal so, does it work for you now?
    If not, could you please provide small sample project, i will help you?

  • M0BilalM0Bilal USMember ✭✭

    Yes it's working now as it should. Thanks a lot. :smile:

  • M0BilalM0Bilal USMember ✭✭

    Apart from above, I was trying to implement touch effects on a Frame. It was not working. I had to add a StackLayout inside frame and then I applied touch effects on StackLayout and it worked. Is it known? Or should it work on Frame too?

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @M0Bilal it's XF bug, which already fixed by my PR

    https://github.com/xamarin/Xamarin.Forms/pull/6412

    Just wait until it become available in newer versions and update XF :)

  • M0BilalM0Bilal USMember ✭✭

    Oh, My bad for being outdated. :neutral: Thanks a lot!

  • bravAxebravAxe Member ✭✭
    edited July 2020

    I am really impressed by this and going to implement it in my whole project.

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭
    1. TouchEff should be used instead of TapGestureRecognizer
    2. The command should work as well. Please make sure you make your binding properly.

    You can check samples on my github)

  • ErnestJErnestJ AUMember ✭✭✭
    edited February 22

    @AndreiMisiukevich_ I've strange issue, same TouchEffect code works fine in iOS, but doesn't on Android. I'm using TouchEffect inside DevExpress grid to imitate cell select. Effect itself works fine in both Android and iOS, but on Android grid RowTapCommand is not executed if I've TouchEffect.

    This is XAML code of the grid:

    <dxg:DataGridView
                        x:Name="GridView"
                        ItemsSource="{Binding Lists}"            
                        Style="{StaticResource DataGridViewStyle}"
                        SelectionMode="None"
                        IsPullToRefreshEnabled="True"
                        IsRefreshing="{Binding IsRefreshing, Mode=TwoWay}"
                        PullToRefreshCommand="{Binding RefreshCommand}"
                    RowTapCommand="{Binding RowTapCommand}">
    
                        <dxg:TemplateColumn>
                            <dxg:TemplateColumn.DisplayTemplate>
                                <DataTemplate>
                                    <StackLayout 
                                        Orientation="Horizontal"
                                        Padding="5,5,5,5"
                                        touch:TouchEffect.NormalBackgroundColor="{DynamicResource AppBackgroundColor}"
                                        touch:TouchEffect.PressedBackgroundColor="{StaticResource LightBlue}"
                                        touch:TouchEffect.PulseCount="1"
                                        touch:TouchEffect.PressedAnimationDuration="0"
                                        touch:TouchEffect.NormalAnimationDuration="400"
                                        touch:TouchEffect.ShouldMakeChildrenInputTransparent="True">
                                        <Label Text="{Binding Item.Name}" VerticalTextAlignment="Center" HorizontalOptions="StartAndExpand"/>
                                        <Label Text="{Binding Item.Id}" IsVisible="False"/>
                                        <Image Source="ic_indicator_right.png" VerticalOptions="Center" HorizontalOptions="End" Margin="0,0,10,0"/>
                                    </StackLayout>
                                </DataTemplate>
                            </dxg:TemplateColumn.DisplayTemplate>
                        </dxg:TemplateColumn>
                    </dxg:DataGridView>
    

    If I remove touchEffect code then RowTapCommand works fine in Android.

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @ErnestJ you can work around it. Use touch:TouchEffect.Command instead of RowTapCommand (Just make a proper binding)

  • ErnestJErnestJ AUMember ✭✭✭
    edited February 22

    @AndreiMisiukevich_ this was the first thing I did, but still not working :(

    I used exactly same binding as for the grid:

    touch:TouchEffect.Command = "{Binding RowTapCommand}"

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭
    edited February 22

    touch:TouchEffect.Command = "{Binding BindingContext.RowTapCommand, Source={x:Reference GridView}}"
    @ErnestJ

    :)

  • ErnestJErnestJ AUMember ✭✭✭
    edited February 22

    @AndreiMisiukevich_ Thank you so much, tap command now works perfectly! :smile:

Sign In or Register to comment.