wpf tabcontrol样式

一、概述

​ tabcontrol选项卡组件,基础用法及默认样式如下，默认样式比较旧，我需要的样式tab为图片，不需要鼠标悬浮效果,本文主要记录修改过程,并为处理样式细节

<TabControl>
    <!-- header 写法一，纯文本-->
    <TabItem Header="tab1">
        123
    </TabItem>
    <TabItem>
        <!-- header 写法二，可以添加控件-->
        <TabItem.Header>
            tab2
        </TabItem.Header>
        456
    </TabItem>
</TabControl>

二、设置样式

通过ControlTemplate设置tab样式，图片Source绑定无法直接使用 {TemplateBinding Header} 进行绑定 ，TemplateBinding作为一种性能优化后的Binding使用，它缺失数据流动的方向。TemplateBinding是单方向的，即数据源到目标的方向。这也解释了TreeViewItem官方的样式中，那个三角形的小箭头，它对于是否展开（IsExpanded属性）的属性绑定用的就不是TempalteBinding。

<TabControl>
    <TabControl.Resources>
        <Style TargetType="TabControl">
            <!--边框线粗细-->
            <Setter Property="BorderThickness" Value="0"/>
            <!--选中tab-->
            <Setter Property="SelectedIndex" Value="0"/>
            <Style.Resources>
                <Style TargetType="TabItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TabItem">
                                <Image Source="{Binding Path=Header,RelativeSource={RelativeSource TemplatedParent}}" Width="40" Height="40"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Style.Resources>
        </Style>
    </TabControl.Resources>
    <TabItem Header="https://th.bing.com/th/id/OIP.tmvIu57hTRpXhPRWkBDDEQHaEK">
        123
    </TabItem>
    <TabItem Header="https://th.bing.com/th/id/OIP.th6FlIUU3ebI8pl4ccYHZgHaEo">
        456
    </TabItem>
</TabControl>

三、添加数据源

​ 通过设置数据源模板方式加载时（不能再书写TabItem控件），设置的样式因为对象原因无法生效，需要使用ContentPresenter进行加载，如下

DataContext = new TestModel()
{
    Tests = new()
    {
        new TestModel
        {
            Name = "Test1",
            Value="test value 1",
            Image="https://th.bing.com/th/id/OIP.tmvIu57hTRpXhPRWkBDDEQHaEK"
        },
        new TestModel
        {
            Name = "Test2",
            Value="test value 2",
            Image="https://th.bing.com/th/id/OIP.th6FlIUU3ebI8pl4ccYHZgHaEo"
        }
    }
};

<TabControl ItemsSource="{Binding Tests}" SelectedIndex="0">
    <TabControl.Resources>
        <Style TargetType="TabControl">
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="SelectedIndex" Value="0"/>
            <Style.Resources>
                <Style TargetType="TabItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="TabItem">
                                <ContentPresenter ContentSource="Header"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Style.Resources>
        </Style>
    </TabControl.Resources>
    <TabControl.ItemTemplate>
        <DataTemplate DataType="{x:Type local:TestModel}">
            <Image Source="{Binding Image}" Height="60" Width="60"/>
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate DataType="{x:Type local:TestModel}">
            <TextBlock Text="{Binding Value}"/>
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>