c# - Animate databound tab item header -

i have databound tab control contains n number of tabs. have both header , content template tab control. header template contains stackpanel image , textblock, content template contains webbrowser control.

what i've been asked animate (mainly fade in/out) image while browser navigating. can create , execute storyboard in code behind, knot how access header template based on browser navigating. there way this? or possibly way event triggers in xaml?

edit: added xaml code. there's no real code behind right other 'tabitem' class , collection pieces , 'webbrowser' utility class used bind source property of 'webbrowser' control i've added well. haven't created 'storyboard' yet because i'm unsure on how go it. image in "headertemplate" datatemplate 1 need animate. through in random tab items in collections, info grabbed database.

xaml:

<window...>      <window.resources>         <src:imagesourceconverter x:key="imagesourceconverter"/>                 <objectdataprovider x:key="tablistresource" objecttype="{x:type src:tablist}" />         <datatemplate x:key="headertemplate">                        <stackpanel orientation="horizontal" >                 <image source="{binding path=imagesource, converter={staticresource imagesourceconverter}}" height="16" width="16" x:name="imgheader" />                 <textblock text="{binding path=header}" padding="5,0,0,0" x:name="header" />             </stackpanel>                     </datatemplate>         <datatemplate x:key="contenttemplate">                            <webbrowser src:webbrowserutility.bindablesource="{binding content}"                         scrollviewer.horizontalscrollbarvisibility="disabled"                          scrollviewer.verticalscrollbarvisibility="disabled"                          verticalalignment="stretch"                         horizontalalignment="stretch"                         name="webbrowser" navigated="webbrowser_navigated" navigating="webbrowser_navigating"/>                     </datatemplate>             </window.resources>      <dockpanel name="dockmain">         <tabcontrol itemssource="{binding source={staticresource tablistresource}}"                   itemtemplate="{staticresource headertemplate}"                   contenttemplate="{staticresource contenttemplate}">             <tabcontrol.template>                 <controltemplate targettype="tabcontrol">                                             <grid>                             <grid.rowdefinitions>                                 <rowdefinition height="auto" />                                 <rowdefinition />                             </grid.rowdefinitions>                             <scrollviewer horizontalscrollbarvisibility="auto"  verticalscrollbarvisibility="hidden" >                                 <tabpanel x:name="headerpanel"                                   panel.zindex ="1"                                    keyboardnavigation.tabindex="1"                                   grid.column="0"                                   grid.row="0"                                   margin="2,2,2,0"                                   isitemshost="true" />                             </scrollviewer>                             <contentpresenter x:name="part_selectedcontenthost"                                       snapstodevicepixels="{templatebinding snapstodevicepixels}"                                       margin="{templatebinding padding}"                                       contentsource="selectedcontent" grid.row="1"/>                         </grid>                                     </controltemplate>             </tabcontrol.template>         </tabcontrol>     </dockpanel> </window> 

tabitemdata:

class tabitemdata     {         private string _header;         private string _content;         private string _imagesource;          public tabitemdata(string header, string content, string imagesource)         {             _header = header;             _content = content;             _imagesource = string.format(@"../images/{0}",imagesource);         }         public string header         {             { return _header; }         }         public string content         {             { return _content; }         }         public string imagesource         {             { return _imagesource; }         }      } 

tabitem collection:

    class tablist : observablecollection<tabitemdata>         {             public tablist() : base()             {                  add(new tabitemdata("header 1", "url1", "img1.png"));                 add(new tabitemdata("header 2", "url2", "img2.png"));                 add(new tabitemdata("header 3", "url3", "img3.png"));                         }         } 

webbrowser utility: binding source property

    public static class webbrowserutility         {             public static readonly dependencyproperty bindablesourceproperty =                 dependencyproperty.registerattached("bindablesource", typeof(string), typeof(webbrowserutility), new uipropertymetadata(null, bindablesourcepropertychanged));              public static string getbindablesource(dependencyobject obj)             {                 return (string)obj.getvalue(bindablesourceproperty);             }              public static void setbindablesource(dependencyobject obj, string value)             {                 obj.setvalue(bindablesourceproperty, value);             }              public static void bindablesourcepropertychanged(dependencyobject o, dependencypropertychangedeventargs e)             {                 webbrowser browser = o webbrowser;                 if (browser != null)                 {                     string uri = e.newvalue string;                     browser.source = !string.isnullorempty(uri) ? new uri(uri) : null;                 }             }          }