c# - TabControl.Resource DataTemplate Use Icon Instead of Text

Question

I have a project that adds tabs to the view using a TabControl with DataTemplates like so:

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

Each ViewModel has a Header property that is used to populate the text of the tab (e.g. "About").

I now have a requirement to change the "About" text to an icon. I have tried this but it doesn't change anything.

         <!-- 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>

How can I get an icon in place of the text?

UPDATE Adding code to show how Header property is bound to Tab.

The Header is bound to the Tab using this 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>

I am now thinking I have to create a new style to use an icon instead of text, but not sure how I would apply that style to the data template.

question from:https://stackoverflow.com/questions/65835007/tabcontrol-resource-datatemplate-use-icon-instead-of-text

Answer 1

You may add a DataTrigger to the TabItem Style that changes the Header to an Image if the Header property contains the string "About":

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