ride_wind
Topic Author
Posts: 34
Joined: 07 Feb 2018, 03:33

Re: Button in ListBox's ItemTemplate, IsPressed Trigger can't work in UE4

18 Apr 2018, 04:01

So, Why the Button's IsPressed Trigger in ListBox itemTemplate can't work,
but single button work well when touch down.

How to change button's background when touch down in xaml?

Thanks.
 
User avatar
sfernandez
Site Admin
Posts: 2984
Joined: 22 Dec 2011, 19:20

Re: Button in ListBox's ItemTemplate, IsPressed Trigger can't work in UE4

18 Apr 2018, 14:27

The problem is that our controls don't understand touch events directly, they wait until touch event is promoted to a mouse event to react.

In the case of buttons inside a list, touch events are handled by the ScrollViewer to enable drag scroll. If the user doesn't move the finger, when the touch is released the event is promoted, generating a MouseDown+MouseMove+MouseUp on that frame. So IsPressed is set to true and back to false without having a possibility to render that change.

One thing that can be done to overcome this problem is use an animation triggered when the button gets pressed:
<Trigger Property="IsPressed" Value="True">
    <Trigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="Bg" Storyboard.TargetProperty="Background.Color"
                    From="Green" To="Red" Duration="0:0:0.5"/>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
</Trigger>
We have plans to handle Touch events directly in controls to avoid this kind of problems, and also to allow interacting with several controls on multitouch.
 
ride_wind
Topic Author
Posts: 34
Joined: 07 Feb 2018, 03:33

Re: Button in ListBox's ItemTemplate, IsPressed Trigger can't work in UE4

19 Apr 2018, 11:14

The problem is that our controls don't understand touch events directly, they wait until touch event is promoted to a mouse event to react.

In the case of buttons inside a list, touch events are handled by the ScrollViewer to enable drag scroll. If the user doesn't move the finger, when the touch is released the event is promoted, generating a MouseDown+MouseMove+MouseUp on that frame. So IsPressed is set to true and back to false without having a possibility to render that change.

One thing that can be done to overcome this problem is use an animation triggered when the button gets pressed:
<Trigger Property="IsPressed" Value="True">
    <Trigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <ColorAnimation Storyboard.TargetName="Bg" Storyboard.TargetProperty="Background.Color"
                    From="Green" To="Red" Duration="0:0:0.5"/>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
</Trigger>
We have plans to handle Touch events directly in controls to avoid this kind of problems, and also to allow interacting with several controls on multitouch.
<EventTrigger RoutedEvent="Button.TouchDown">
	<BeginStoryboard>
		<Storyboard>
			<ColorAnimation Storyboard.TargetName="Bg"
						Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
						From="Green" To="Green" Duration="0:0:0.1"/>
		</Storyboard>
	</BeginStoryboard>
</EventTrigger>
Like this code,
I can use solidColorBrush to change button's background when touch down,
But if the button's background is ImageBrush, how to change it ?

Thanks.
 
User avatar
sfernandez
Site Admin
Posts: 2984
Joined: 22 Dec 2011, 19:20

Re: Button in ListBox's ItemTemplate, IsPressed Trigger can't work in UE4

20 Apr 2018, 11:14

In case of using an ImageBrush you should have 2 elements each one with the corresponding visual state brush: normal and pressed.
Then you can fade the opacity of the pressed brush in the animation:
<Border x:Name="BgNormal">
  <Border.Background>
    <ImageBrush ImageSource="normal.png"/>
  </Border.Background>
</Border>
<Border x:Name="BgPressed">
  <Border.Background>
    <ImageBrush ImageSource="pressed.png" Opacity="0"/>
  </Border.Background>
</Border>
...
<Trigger Property="IsPressed" Value="True">
    <Trigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetName="BgPressed" Storyboard.TargetProperty="(Border.Background).(Brush.Opacity)"
                    From="1" To="0" Duration="0:0:0.5"/>
            </Storyboard>
        </BeginStoryboard>
    </Trigger.EnterActions>
</Trigger>

Who is online

Users browsing this forum: Semrush [Bot] and 5 guests