Hi, Dorian, thanks for the great button templates tutorial!
Continuing on this topic, what is the best way to combine such templates and styles with interactivity?
For example, I want the yellow to become a little lighter when hovering over a banana-style button, and a little darker when clicked (or a different color altogether).
Without styles, I do this through Setters (IsMouseOver, IsPressed), but what about styles?

Hi Dmirty, great to hear from you, and I'm thrilled to hear the Tutorial was beneficial!

So to accomplish what you're looking to do, since the Properties in question at the Template Level are controlled by the Styles, this means that we will have to inject this interactivity within the Styles themselves. Setters are how we can achieve this here as well.

Although I know you know your way around Setters in Templates, I'll still run you through what this looks like in Styles and how you can set this up, just so that others with the same question can benefit too :)

1) First, we'll enter the Style that you want to add interactivity to:


2) Then, once inside of the Style (as seen by the Orange Stage border), we'll then head to the Interactivity Panel (Ctrl 3), and position ourselves in the third 'Setters' tab.


3) Once there, we'll click on the '+' (Add Setter), and select "When Property Changes".


4) At this point, a Setter will be added to the Setters list. As a result of this action, there will be a little red 'Recording' icon, as well as a Red Stage border now visible.

This 'recording' mode works exactly just like making a change in a Visual State, or making a change in a Storyboard --- in that at this point, if we select the new Setter from the list, any change made in the Properties is "keyed" in that Setter.

On the right, in the Properties Panel, we can see the Conditions that will cause these changes to fire. In this case, we can see that it will fire when the Element IsMouseOver (Hovered).


5) Ensuring we still have the Setter selected from the list (and still 'recording'), we can then select the Style from the Navigator to reveal the Style's Properties Panel.


Originally, you will see the Property Values of the Style in the state they are originally defined in the non-interactive form (the yellow), but since we are in 'Recording' mode, we can freely make changes in the Properties, and this will be keyed on the Setter exclusively, without impacting the original Style values. In this case, we'll change the Foreground Property to a magenta:


6) Now, if you press 'Play' (Ctrl+P) at this point, the yellow 'Banana'-styled Buttons will appear yellow, but if you hover over them, the yellow areas will switch to the magenta:

(This is a GIF: click to view it in motion.)

And that's it!

Let me know if this helps, or if you have any other questions!

- Dorian

Yep, it works! Thank you!