How to do a button that changes icon when pressed? SOLVED

[cw-kid]

Hi

Learning slowly.

I’ve learnt now how to change icons in an IconElement object, based upon bindings device switch state ON / OFF etc.

Now trying to change a buttons icon to a different one when pressed or released, but it not working.

For the button in its Properties I set the Icon to be the Greyed out icon, so that is the default one.

I then created an EventTrigger for when the button is pressed to change its icon to a lit up icon instead etc. But this didn’t work the greyed icon remained all the time.

As that didn’t work, I then removed the icon .png file name from the Buttons Icon Properties altogether.

I then instead tried to use two EventTriggers for Clicked and Released or Pressed and Released.

Don’t know what the difference is between Clicked and Pressed ?

But now I get no icon at all showing on the button when it’s pressed or not.

Thanks

[cw-kid]

Think I’ve got it.

Use an ImageButton

Need to use two PropertyTriggers

IsPressed = True

and

IsPressed = False

Then assign an “Image” not an “Icon”

[ausvette (Dave)]

Would you mind sharing in more detail what you did to solve this?

[cw-kid]

For a button that changes its image when it is pressed and released.

Default image is the Greyed image.

You then need two triggers

IsPressed = True

With a Setter that specifies the image to use when the button is pressed

And the second Trigger

IsPressed = False

And a Setter for the not pressed image, in this example my Grey down arrow.

The EventTrigger is the action that happens when the button is pressed:

In this example it closed my window blind

So when I press this down arrow button, it changes from Grey to Blue with each tap and when I release the button it changes back to Grey etc.

If you want a button that changes its image based on a device status? ON / OFF for example, that is something else and done differently.

[ausvette (Dave)]

Awesome thanks!!!

I also want to do a button that changes image based on device status. Is this also done with an ImageButton?

[cw-kid]

@ausvette

Is this also done with an ImageButton?

No for icons that change with the status of a device like ON or OFF I did it this way using an IconElement.

EDIT: oh you said a button, yes you can use an image button also for device state.

Icon is not specified here:

Two DataTriggers one for OFF:

And another DataTrigger for ON:

And this is how my tile looks with that IconElement:

ON (Opened)

OFF (Closed)

[ausvette (Dave)]

Great job - very cool!!!

[Jdamore]

Yup, you can use an ImageButton if you choose. For an ImageButton, you do it similar as how cw-kid explained by using datatriggers. The difference would be, in the Collection Editor, your property setter would be “Image”.

[Jdamore]

@cw-kid your templates look classy