Forums | NoesisGUI

Posted: **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.

Posted: **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.

Posted: **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.

Posted: **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>

Forums | NoesisGUI

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