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>
Comments
Post a Comment