TabControl.Resource DataTemplate 使用图标代替文本

问题描述

我有一个项目，它使用 TabControl 和 DataTemplates 将选项卡添加到视图中，如下所示：

<TabControl Name="dcTabControl"
            ItemsSource="{Binding Tabs}"
            SelectedItem="{Binding SelectedTabviewmodel}"
            Height="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type Window}},Path=DataContext.MainContentHeight}">
    <TabControl.Resources>

        <!-- Removed numerous other tabs to save space -->

        <!-- System Setup tab -->
        <DataTemplate DataType="{x:Type vm:SystemSetupviewmodel}">
            <ScrollViewer HorizontalScrollBarVisibility="Auto" 
                          VerticalScrollBarVisibility="Auto">
                <v:SystemSetupUserControl />
            </ScrollViewer>
        </DataTemplate>

        <!-- About tab -->
        <DataTemplate DataType="{x:Type vm:Aboutviewmodel}">
            <ScrollViewer HorizontalScrollBarVisibility="Auto" 
                          VerticalScrollBarVisibility="Auto">
                <v:AboutUserControl />
            </ScrollViewer>
        </DataTemplate>

    </TabControl.Resources>
</TabControl>

每个 viewmodel 都有一个 Header 属性，用于填充选项卡的文本（例如“关于”）。

我现在需要将“关于”文本更改为图标。我试过了，但它没有改变任何东西。

         <!-- About tab -->
        <DataTemplate DataType="{x:Type vm:Aboutviewmodel}">
            <TabItem>
                <TabItem.Header>
                    <Image Name="AboutTabImage" Height="auto" Width="auto" Source="Images/About.png" />                        
                </TabItem.Header>
                <TabItem.Content>
                    <ScrollViewer HorizontalScrollBarVisibility="Auto" 
                                  VerticalScrollBarVisibility="Auto">
                        <v:AboutUserControl />
                    </ScrollViewer>                        
                </TabItem.Content>
            </TabItem> 
        </DataTemplate>

如何用图标代替文本？

UPDATE 添加代码以显示 Header 属性如何绑定到 Tab。

使用此 Header 将 Tab 绑定到 Style

<!-- Standard Tab Style -->
<Style x:Key="TabStyle" targettype="{x:Type TabItem}">
    <Setter Property="Header" Value="{Binding Header}" />
    <Setter Property="Width" Value="Auto" />
    <Setter Property="Padding" Value="10,5,10,5" />
</Style>

我现在想我必须创建一个新样式才能使用图标而不是文本，但不确定如何将该样式应用于数据模板。

解决方法

如果 DataTrigger 属性包含字符串“About”，您可以向 TabItem 样式添加一个 Header，将标题更改为图像：

<Style TargetType="TabItem">
    ...
    <Setter Property="Header" Value="{Binding Header}"/>
    <Style.Triggers>
        <DataTrigger Binding="{Binding Header}" Value="About">
            <Setter Property="Header">
                <Setter.Value>
                    <Image Source="Images/About.png"/>
                </Setter.Value>
            </Setter>
        </DataTrigger>
    </Style.Triggers>
</Style>