c# - データバインドされたタブ項目ヘッダーをアニメーション化する

Question

タブの数を含むデータバインドされたタブ コントロールがnあります。タブ コントロール用のヘッダー テンプレートとコンテンツ テンプレートの両方があります。ヘッダー テンプレートには画像を含むスタックパネルが含まれておりTextBlock、コンテンツ テンプレートにはWebBrowserコントロールが含まれています。

私が求められているのは、ブラウザがナビゲートしている間に画像をアニメーション化 (主にフェードイン/アウト) することです。コード ビハインドでストーリーボードを作成して実行できますが、ナビゲートしているブラウザーに基づいてヘッダー テンプレートにアクセスする方法を結び付けます。これを行う方法はありますか？または、xaml のイベント トリガーからこれを行う方法はありますか?

編集: XAML コードを追加しました。現在、「tabitem」クラスとコレクションの一部、および「webbrowser」コントロールのソース プロパティにバインドするために使用した「webbrowser」ユーティリティ クラス以外に実際のコード ビハインドはありません。これらも追加しました。「ストーリーボード」はまだ作成していません。どうすればよいかわからないからです。「HeaderTemplate」データテンプレートの画像は、アニメーション化する必要があるものです。コレクション内のいくつかのランダムなタブ項目を調べただけですが、その情報は通常データベースから取得されます。

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
        {
            get { return _header; }
        }
        public string Content
        {
            get { return _content; }
        }
        public string ImageSource
        {
            get { return _imageSource; }
        }

    }

TabItem コレクション:

    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: source プロパティへのバインド用

    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 as WebBrowser;
                if (browser != null)
                {
                    string uri = e.NewValue as string;
                    browser.Source = !String.IsNullOrEmpty(uri) ? new Uri(uri) : null;
                }
            }

        }