Triggers and States in Blend

After using the Expression Interactive Designer CTPs and getting used to that UI, I’m now trying to learn the completely different Blend UI. After some confusion with timelines and the new UI I finally got a state based property change working in a template in Blend.

   

The goal is to produce XAML like this from Blend:

   

<CONTROLTEMPLATE.TRIGGERS>

<TRIGGER Value=”True” Property=”IsChecked”>

<SETTER Value=”Blackadder ITC” Property=”FontFamily” />
<SETTER Value=”24″ Property=”FontSize” />

</TRIGGER>

</CONTROLTEMPLATE.TRIGGERS>

   

This should cause the template checkbox to switch to a large script font when it is checked and back to default when unchecked.

The obvious thing that the UI initially seems to push you towards is creating an animation timeline to do this. After entering template editing mode the Triggers window looks like this:

Trigger1

 

The +Property button then allows you to add a new Property based Trigger, which is what we’re looking for. After adding the new Trigger and picking from the property dropdown we get to:

Trigger2

At this point the obvious thing to do seems to be adding to the next step in the window, “Actions when activating”, but this will actually create the timeline we’re trying to avoid. What isn’t obvious is that you’re actually done with the Property-State Trigger and since recording is on any property changes you make now will be attached to the Trigger as Setters, just like we want. Over in the Properties->Text panel I change my font and then exit template editing mode. That’s it. Now when we click the checkbox we go from CheckMe1 to CheckMe2.

Another Blend oddity after coming from EID – there’s no more code-behind editor (which is okay because the EID one wasn’t even close to VS) so you can’t directly jump to event handlers. There is now integration with Visual Studio though so you can create event handlers in code from the Properties tool window just like a WinForm in VS and it will create and open the code into Visual Studio if you have it installed.

Events

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>