AndreiMisiukevich/TouchEffect

Does not change state after press and scroll inside a scrollview

Closed this issue · 6 comments

marufbd commented

If i press and scroll outside the view that leaves the pressed view backgorund as red.

Sample View:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:touch="clr-namespace:TouchEffect;assembly=TouchEffect"
             mc:Ignorable="d"
             x:Class="TouchEffectSample.ScrollPage">
    <ContentPage.Content>
        <StackLayout VerticalOptions="Center">

            <ScrollView Orientation="Horizontal" VerticalOptions="Center"
                        >
                <ScrollView.Effects><touch:TouchEff StateChanged="TouchEff_OnStateChanged"></touch:TouchEff></ScrollView.Effects>
                <StackLayout HorizontalOptions="Start" Spacing="10" Orientation="Horizontal">
                    <FlexLayout 
                    touch:TouchEff.NativeAnimation="True"
                    touch:TouchEff.NativeAnimationColor="Red"
                    Direction="Column">
                        <FlexLayout.Effects>
                            <touch:TouchEff HoverStateChanged="TouchEff_OnHoverStateChanged" StateChanged="TouchEff_OnStateChanged" StatusChanged="TouchEff_OnStatusChanged"/>
                        </FlexLayout.Effects>
                        <BoxView WidthRequest="142" HeightRequest="80" BackgroundColor="DarkGray">

                        </BoxView>
                        <Label MaxLines="1" Padding="5" Text="content" Opacity="0.6" BackgroundColor="Black"/>
                    </FlexLayout>

                    <FlexLayout 
                        touch:TouchEff.NativeAnimation="True"
                        touch:TouchEff.NativeAnimationColor="Red"
                        Direction="Column">
                        <FlexLayout.Effects>
                            <touch:TouchEff/>
                        </FlexLayout.Effects>
                        <BoxView WidthRequest="142" HeightRequest="80" BackgroundColor="DarkGray">

                        </BoxView>
                        <Label MaxLines="1" Padding="5" Text="content" Opacity="0.6" BackgroundColor="Black"/>
                    </FlexLayout>

                    <FlexLayout 
                        touch:TouchEff.NativeAnimation="True"
                        touch:TouchEff.NativeAnimationColor="Red"
                        Direction="Column">
                        <FlexLayout.Effects>
                            <touch:TouchEff/>
                        </FlexLayout.Effects>
                        <BoxView WidthRequest="142" HeightRequest="80" BackgroundColor="DarkGray">

                        </BoxView>
                        <Label MaxLines="1" Padding="5" Text="content" Opacity="0.6" BackgroundColor="Black"/>
                    </FlexLayout>
                    
                </StackLayout>
            </ScrollView>

        </StackLayout>

    </ContentPage.Content>
</ContentPage>

Coe behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using TouchEffect.Enums;
using TouchEffect.EventArgs;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace TouchEffectSample
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class ScrollPage : ContentPage
    {
        public ScrollPage()
        {
            InitializeComponent();
            //foreach(BoxView box in boxstack.Children)
            //{
            //    TouchEffect.TouchEff touch = new TouchEffect.TouchEff();
            //    box.Effects.Add(touch);
            //    touch.Completed += Completed;
            //    touch.HoverStateChanged += HoverStateChanged;
            //    touch.StateChanged += StateChanged;
            //}
        }

        private void StateChanged(VisualElement sender, TouchEffect.EventArgs.TouchStateChangedEventArgs args)
        {
            sender.BackgroundColor = args.State == TouchEffect.Enums.TouchState.Pressed ? Color.Red : Color.Black;
        }

        private void HoverStateChanged(VisualElement sender, TouchEffect.EventArgs.HoverStateChangedEventArgs args)
        {
            sender.Opacity = args.State == TouchEffect.Enums.HoverState.Hovering ? 0.5 : 1;
        }

        private void Completed(VisualElement sender, TouchEffect.EventArgs.TouchCompletedEventArgs args)
        {
            Application.Current.MainPage.DisplayAlert("Clicked on a square", "The Completed event was fired", "Cancel");
        }

        private void TouchEff_OnStateChanged(VisualElement sender, TouchStateChangedEventArgs args)
        {
            if(args.State!= TouchState.Pressed)
                sender.BackgroundColor=Color.GreenYellow;
        }

        private void TouchEff_OnStatusChanged(VisualElement sender, TouchStatusChangedEventArgs args)
        {
            if (args.Status == TouchStatus.Canceled)
                sender.BackgroundColor = Color.DarkGray;
        }

        private void TouchEff_OnHoverStateChanged(VisualElement sender, HoverStateChangedEventArgs args)
        {
            
        }
    }
}

Nothing fires after press and scroll.

AndreiMisiukevich commented

iOS or Android?

marufbd commented

Android I tested. Just changed on the example touchview.sample xamarin forms view.

AndreiMisiukevich commented

Android I tested. Just changed on the example touchview.sample xamarin forms view.

but it works on my sample, right?

That's odd

AndreiMisiukevich commented

Set InputTransparent="True" to all views inside your FlexLayout

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:touch="clr-namespace:TouchEffect;assembly=TouchEffect"
             mc:Ignorable="d"
             x:Class="TouchEffectSample.ScrollPage">
    <ContentPage.Content>
        <StackLayout VerticalOptions="Center">

            <ScrollView Orientation="Horizontal" VerticalOptions="Center">
                <StackLayout HorizontalOptions="Start" Spacing="10" Orientation="Horizontal">
                    <FlexLayout 
                    touch:TouchEff.NativeAnimation="True"
                    touch:TouchEff.NativeAnimationColor="Red"
                    Direction="Column">
                        <FlexLayout.Effects>
                            <touch:TouchEff Completed="Completed"/>
                        </FlexLayout.Effects>
                        <BoxView InputTransparent="True" WidthRequest="142" HeightRequest="80" BackgroundColor="DarkGray">

                        </BoxView>
                        <Label InputTransparent="True" MaxLines="1" Padding="5" Text="content" Opacity="0.6" BackgroundColor="Black"/>
                    </FlexLayout>

                    <FlexLayout 
                        touch:TouchEff.NativeAnimation="True"
                        touch:TouchEff.NativeAnimationColor="Red"
                        Direction="Column">
                        <FlexLayout.Effects>
                            <touch:TouchEff Completed="Completed"/>
                        </FlexLayout.Effects>
                        <BoxView InputTransparent="True" WidthRequest="142" HeightRequest="80" BackgroundColor="DarkGray">

                        </BoxView>
                        <Label InputTransparent="True" MaxLines="1" Padding="5" Text="content" Opacity="0.6" BackgroundColor="Black"/>
                    </FlexLayout>

                    <FlexLayout 
                        touch:TouchEff.NativeAnimation="True"
                        touch:TouchEff.NativeAnimationColor="Red"
                        Direction="Column">
                        <FlexLayout.Effects>
                            <touch:TouchEff Completed="Completed"/>
                        </FlexLayout.Effects>
                        <BoxView InputTransparent="True" WidthRequest="142" HeightRequest="80" BackgroundColor="DarkGray">

                        </BoxView>
                        <Label InputTransparent="True" MaxLines="1" Padding="5" Text="content" Opacity="0.6" BackgroundColor="Black"/>
                    </FlexLayout>
                    
                </StackLayout>
            </ScrollView>

        </StackLayout>

    </ContentPage.Content>
</ContentPage>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using TouchEffect.Enums;
using TouchEffect.EventArgs;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace TouchEffectSample
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class ScrollPage : ContentPage
    {
        public ScrollPage()
        {
            InitializeComponent();
        }

        private void Completed(VisualElement sender, TouchEffect.EventArgs.TouchCompletedEventArgs args)
        {
            Application.Current.MainPage.DisplayAlert("Clicked on a square", "The Completed event was fired", "Cancel");
        }
    }
}
AndreiMisiukevich commented
  1. No need to set InputTrasparent to children yourself (it will be done automatically)
  2. No need to add TouchEff to element, if you use Command for (So if you don't need to access TouchEff event, then you can skip adding an effect to an element. It will be done automatically).
marufbd commented

Thanks heaps.