SketchFlow / Using (Selected) TabItem in TabControl to Trigger State -

context: new sketchflow / silverlight project. expression blend 4 (ultimate)

i have below code. have tabcontrol 2 tabitem's. have 2 "callout" (big bubble things) quick visual on state change.

i created visualstategroup , added states under it. when manually invoke these navigate window (after run project), states work expected. callout1 , callout2 flip flop opacities (between 100% , 10%). have basic understanding of state's , how work.

however, when add trigger event tabitem, trigger looks good, not work. below stripped example, down bare bones.

i tried eventname="mouseleftbuttondown" , eventname="click" no luck.

i commented out objectanimationusingkeyframes tags, no luck there well.

anybody see i'm missing?

basically, cannot (selecting) tabitem trigger state change.

thanks.

-----------start xaml code

<usercontrol  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  xmlns:data="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"  xmlns:system="clr-namespace:system;assembly=mscorlib"  xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"  xmlns:pi="http://schemas.microsoft.com/prototyping/2010/interactivity" xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"     x:class="myproject.myscreen"     width="640" height="480" mc:ignorable="d">      <grid x:name="layoutroot" background="white">                  <visualstatemanager.visualstategroups>             <visualstategroup x:name="visibletabs">                 <visualstate x:name="tab1visualstate">                     <storyboard>                         <doubleanimation duration="0" to="1.0" storyboard.targetproperty="(uielement.opacity)" storyboard.targetname="callout1" d:isoptimized="true"/>                         <doubleanimation duration="0" to="0.1" storyboard.targetproperty="(uielement.opacity)" storyboard.targetname="callout2" d:isoptimized="true"/>                          <objectanimationusingkeyframes storyboard.targetproperty="(tabcontrol.selectedindex)" storyboard.targetname="tabcontrol">                             <discreteobjectkeyframe keytime="0">                                 <discreteobjectkeyframe.value>                                     <system:int32>0</system:int32>                                 </discreteobjectkeyframe.value>                             </discreteobjectkeyframe>                         </objectanimationusingkeyframes>                       </storyboard>                 </visualstate>                 <visualstate x:name="tab2visualstate">                     <storyboard>                          <objectanimationusingkeyframes storyboard.targetproperty="(tabcontrol.selectedindex)" storyboard.targetname="tabcontrol">                             <discreteobjectkeyframe keytime="0">                                 <discreteobjectkeyframe.value>                                     <system:int32>1</system:int32>                                 </discreteobjectkeyframe.value>                             </discreteobjectkeyframe>                         </objectanimationusingkeyframes>                          <doubleanimation duration="0" to="0.1" storyboard.targetproperty="(uielement.opacity)" storyboard.targetname="callout1" d:isoptimized="true"/>                         <doubleanimation duration="0" to="1.0" storyboard.targetproperty="(uielement.opacity)" storyboard.targetname="callout2" d:isoptimized="true"/>                       </storyboard>                 </visualstate>             </visualstategroup>         </visualstatemanager.visualstategroups>           <data:tabcontrol x:name="tabcontrol" height="150" margin="41,0,215,50" verticalalignment="bottom" selectedindex="0">             <data:tabitem header="tab number one" height="24" verticalalignment="bottom">                 <i:interaction.triggers>                     <i:eventtrigger eventname="mouseleftbuttondown">                         <pi:activatestateaction targetstate="tab1visualstate"/>                     </i:eventtrigger>                 </i:interaction.triggers>              </data:tabitem>             <data:tabitem header="tab number two">                 <i:interaction.triggers>                     <i:eventtrigger eventname="mouseleftbuttondown">                         <pi:activatestateaction targetstate="tab2visualstate"/>                     </i:eventtrigger>                 </i:interaction.triggers>              </data:tabitem>         </data:tabcontrol>          <ed:callout x:name="callout1" anchorpoint="0,1.25" calloutstyle="oval" content="tab1 rocks" foreground="{staticresource baseforeground-sketch}" fill="{staticresource basebackground-sketch}" fontsize="{staticresource sizedouble-sketch}" fontfamily="{staticresource fontfamily-sketch}" ed:geometryeffect.geometryeffect="sketch" horizontalalignment="left" height="100" margin="0,84,0,0" stroke="{staticresource baseborder-sketch}" strokethickness="2" verticalalignment="top" width="200" opacity="1.0"/>         <ed:callout x:name="callout2" anchorpoint="0,1.25" calloutstyle="oval" content="tab2 rocks" foreground="{staticresource baseforeground-sketch}" fill="{staticresource basebackground-sketch}" fontsize="{staticresource sizedouble-sketch}" fontfamily="{staticresource fontfamily-sketch}" ed:geometryeffect.geometryeffect="sketch" horizontalalignment="left" height="100" margin="200,84,0,0" stroke="{staticresource baseborder-sketch}" strokethickness="2" verticalalignment="top" width="200" opacity="0.1"/>              </grid> </usercontrol> 

here simple trigger can use trigger actions based on tab selection. add project, compile, , set trigger of behvior instance of trigger type. behavior has attached tabcontrol itself. set tabindex of trigger index want trigger action. trigger listens selection changed event of tabcontrol , matches against tabindex value supply.

public class tabselectedtrigger : triggerbase<tabcontrol> {     public static readonly dependencyproperty tabindexproperty = dependencyproperty.register("tabindex", typeof (int),                                                                                              typeof (tabselectedtrigger),                                                                                              new propertymetadata(-1));     public int tabindex     {         { return (int)this.getvalue(tabindexproperty); }         set { this.setvalue(tabindexproperty, value); }     }       protected override void onattached()     {         base.onattached();          this.associatedobject.selectionchanged += associatedobject_selectionchanged;     }      void associatedobject_selectionchanged(object sender, selectionchangedeventargs e)     {         if(this.tabindex == this.associatedobject.selectedindex)         {             this.invokeactions(null);         }     }      protected override void ondetaching()     {         base.ondetaching();         this.associatedobject.selectionchanged -= associatedobject_selectionchanged;     } } 

example usage:

<sdk:tabcontrol margin="59,49,67,81">         <i:interaction.triggers>             <local:tabselectedtrigger tabindex="1">                 <ei:gotostateaction statename="visualstate1"/>             </local:tabselectedtrigger>             <local:tabselectedtrigger tabindex="0">                 <ei:gotostateaction statename="visualstate"/>             </local:tabselectedtrigger>         </i:interaction.triggers>         <sdk:tabitem header="tabitem">             <grid background="#ffe5e5e5"/>         </sdk:tabitem>         <sdk:tabitem header="tabitem">             <grid background="#ffe5e5e5"/>         </sdk:tabitem>     </sdk:tabcontrol>