Creating a simple style with one trigger
This article describes how to create a simple style with one trigger in Microsoft Expression Interactive Designer. We will create a blue rectangle which becomes red when the mouse is over it.
Step 1 - Create a rectangle
Draw a rectangle using the "Rectangle" tool from the Tools palette
Click on the "Selection" tool on the tools palette
Step 2 - Clear the Fill property
EID by default sets a Fill to your rectangle which would override our Style settings, so we need to delete that property (if you switch to the xaml view, you will notice that there is a Fill attribute specified for the rectangle):
In the Properties palette, Click on the Fill property and Select "Clear/Default" -
this should clear the property
Step 3 - Create a Style for the rectangle
In the timeline, right click on your rectangle->Edit Style->Create Empty Style (usually you should be able to do this in the scene, but now, because the Fill property is not set, the rectangle may not selectable in the scene - known issue)
Click "Ok" in the "Create Style Resource" dialog
Step 4 - Set a default Fill for the rectangle inside the Style
Bring up the "Timeline" palette - note that we are currently editing the style (the node displayed should be "Style"). In order to get the mouse events at runtime, our rectangle will need a Fill; so we will set a Fill in the Style.
In the Appearance palette, set the Fill to "blue" (because we are in the Style editing mode, this will create a Setter inside the style)
Step 5 - Add a Trigger for the IsMouseOver
Click on the "
Create New State" button; a new tab called "
[No Triggers]" is displayed in the timeline; Click on it
Bring up the "
Timeline Properties" palette (using the "View" menu)
Create a new trigger: Click on the "
Add" button in the "
Timeline Properties" to add a new trigger; in the first textbox type "
IsMouseOver" and "
true" in the second one; now the tab is called "
IsMouseOver"
Ensure that the "
IsMouseOver" tab is selected and change the "Fill" color in the "Appearance" palette to your desired color (e.g. "red")
Click the "
Return Scope To Root" button (in the Timeline palette) to end the style editing mode
The final xaml
The final xaml looks like:
<Grid.Resources>
<Storyboard x:Key="OnLoaded"/>
<Style x:Key="RectangleStyle1" TargetType="{x:Type Rectangle}">
<Setter Property="Fill" Value="sc#1, 0, 0, 1"/>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Fill" Value="sc#1, 1, 0, 0"/>
</MultiTrigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<Rectangle Stroke="#FF000000" Style="{DynamicResource RectangleStyle1}"
Width="Auto" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
MinWidth="0" MinHeight="0" Margin="128,99,183,202" x:Name="Rectangle"
RenderTransformOrigin="0.5,0.5"/>
