nokola
Topic Author
Posts: 188
Joined: 10 Mar 2015, 05:29

Unity Android/iOS: How to get to Pressed state for buttons in ScrollViewer?

22 Oct 2017, 22:15

I'm having a problem with buttons behaving weirdly when inside ScrollViewer on touch device. More specifically, the button's "Pressed" state doesn't show up if in ScrollViewer. Also the button remains in "Hover" state when I scroll and lift my finger. XAML and code behind below.
How can I get the button's behavior to the "Expected:" below in case of ScrollViewer on touch-enabled device?

Repro steps:
1. Create blank 3D app and add Noesis
2. Replace the Buttons sample with the XAML and code behind below
3. Run on Android phone
(OR in Unity Inspector pane, set Noesis to "Emulate Touch Events" and run in Editor)
4. Press and hold on a button and scroll with finger

Expected:
1. Buttons turns blue on hold (Pressed state)
2. On scroll, the button "unpresses" (reverts back to default visual state) after we moved for a specific small threshold (e.g. 16px)
3. On touch up, if the button was pressed (e.g. we didn't move during step 2), it should emit a click event. It shouldn't emit a click event if it wasn't pressed (e.g. panning happened larger than some pre-defined region e.g. 16px)
This is the behavior on Windows Phone and UWP apps to my knowledge

Actual:
1. Button turns blue-gray on hold (Hover state)
2. On scroll, the button keeps the Hover event
3. On touch up, the button doesn't emit event when panning (as expected), however it keeps the Hover state

Note if you remove the scroll viewer the button behaves as expected.

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      x:Class="Noesis.Samples.Buttons">
    <ScrollViewer PanningMode="Both">
        <StackPanel x:Name="panel">
            <Button Content="Press and hold - I should turn blue" Margin="20" Height="150" FontSize="24"/>
            <Button Content="Press and hold - I should turn blue" Margin="20" Height="150" FontSize="24"/>
            <Button Content="Press and hold - I should turn blue" Margin="20" Height="150" FontSize="24"/>
            <Button Content="Press and hold - I should turn blue" Margin="20" Height="150" FontSize="24"/>
            <Button Content="Press and hold - I should turn blue" Margin="20" Height="150" FontSize="24"/>
            <Button Content="Press and hold - I should turn blue" Margin="20" Height="150" FontSize="24"/>
            <Button Content="Press and hold - I should turn blue" Margin="20" Height="150" FontSize="24"/>
            <Button Content="Press and hold - I should turn blue" Margin="20" Height="150" FontSize="24"/>
            <Button Content="Press and hold - I should turn blue" Margin="20" Height="150" FontSize="24"/>
            <Button Content="Press and hold - I should turn blue" Margin="20" Height="150" FontSize="24"/>
            <Button Content="Press and hold - I should turn blue" Margin="20" Height="150" FontSize="24"/>
            <Button Content="Press and hold - I should turn blue" Margin="20" Height="150" FontSize="24"/>
            <Button Content="Press and hold - I should turn blue" Margin="20" Height="150" FontSize="24"/>
            <Button Content="Press and hold - I should turn blue" Margin="20" Height="150" FontSize="24"/>
            <Button Content="Press and hold - I should turn blue" Margin="20" Height="150" FontSize="24"/>
            <Button Content="Press and hold - I should turn blue" Margin="20" Height="150" FontSize="24"/>
            <Button Content="Press and hold - I should turn blue" Margin="20" Height="150" FontSize="24"/>
            <Button Content="Press and hold - I should turn blue" Margin="20" Height="150" FontSize="24"/>
            <Button Content="Press and hold - I should turn blue" Margin="20" Height="150" FontSize="24"/>
            <Button Content="Press and hold - I should turn blue" Margin="20" Height="150" FontSize="24"/>
            <Button Content="Press and hold - I should turn blue" Margin="20" Height="150" FontSize="24"/>
            <Button Content="Press and hold - I should turn blue" Margin="20" Height="150" FontSize="24"/>
            <Button Content="Press and hold - I should turn blue" Margin="20" Height="150" FontSize="24"/>
        </StackPanel>
    </ScrollViewer>
</Grid>


#define NOESIS
using Noesis;
using UnityEngine;

namespace Noesis.Samples
{
    public class Buttons : Grid
    {
        public Buttons()
        {
            Noesis.GUI.LoadComponent(this, "Assets/test.xaml");
            StackPanel panel = (StackPanel) FindName("panel");
            foreach (Button button in panel.Children)
            {
                button.Click += BtnTestOnClick;
            }
        }
        
        private void BtnTestOnClick(object sender, RoutedEventArgs routedEventArgs)
        {
            Debug.Log("Clicked");
            Button btnTest = (Button) sender;
            TextBlock block = new TextBlock { Text = "Clicked" };
            btnTest.Content = block;
        }
    }
}
 
User avatar
jsantos
Site Admin
Posts: 2906
Joined: 20 Jan 2012, 17:18
Contact:

Re: Unity Android/iOS: How to get to Pressed state for buttons in ScrollViewer?

24 Oct 2017, 20:42

This seems to be a bug. Could you please move this to the tracker? Let's follow the discussion there.
 
 
User avatar
jsantos
Site Admin
Posts: 2906
Joined: 20 Jan 2012, 17:18
Contact:

Re: Unity Android/iOS: How to get to Pressed state for buttons in ScrollViewer?

28 Oct 2017, 14:56

Thank you!

Who is online

Users browsing this forum: No registered users and 1 guest