2

我有一个包含n多个选项卡的数据绑定选项卡控件。我有一个用于选项卡控件的 Header 和 Content 模板。标题模板包含一个带有图像的堆栈面板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>

选项卡项目数据：

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：用于绑定到源属性

    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;
                }
            }

        }
4

0 回答 0