How to Toggle (Show/Hide) using Behaviours (Behaviors) between Visual States or Storyboards in Expression Blend for Windows Phone 7
May
27
Written by:
Thu, 27 May 2010 23:44:00 GMT
Thought I better quickly Blog this, as I struggled with showing & hiding a visual element on the Phone touch interface for quite a while… And couldn’t seem to find the answer anywhere on the Web. And then all of a sudden it came to me & I wished I could have kicked myself! :-) I am so dumb!!!
Basically if you have situation where you need to either show or hide a visual element, you need to know what State you are in. As you can’t attach 2 different Triggers (Behaviours) to the same element, & expect to activate/fire them in an alternating manner with the same action (i.e. a mouse click). Blend will only ever fire one & continue to fire the same one. (The closest in the Z order i presume…) And my first thought was, that i needed some code to determine what state I was in. But you don’t!
All you need to do is set up 2 dummy elements like Rectangles with a Fill set to 0% Alpha (Transparent, but HitTestVisible) & attach your 2 Behaviours to these dummy elements. You set the first behaviour to the front Rectangle, & when this trigger fires, you shrink/move the front Rectangle (as well as performing the actions you really required). This reveals the back rectangle, so it then intern, can accept a Trigger fire from a second Behaviour attached to it. During this second trigger fire you reinstate the front rectangle & your back to where you started!!! Sorted! – A toggle type behaviour with no code…