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

ride_wind · 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.

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 · 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:
Code: Select all
<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.

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>

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

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

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

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

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

Who is online