wpf TabControl 选项卡设置间隔

需求

TabControl不能直接设置选项卡的间隔，有时候选项卡又比较少，希望能有一段间隔让空间不至于那么空 (平均分配空间网络上已经有很多例子了)

入门

用一个选项卡代替间隔，并将其隐藏 【Visibility="Hidden"】

<TabControl >
    <TabItem Header="tabItem0">
    </TabItem>
    <TabItem Header="tabItem1" Visibility="Hidden" Width="10">
    </TabItem>
    <TabItem Header="tabItem2">
    </TabItem>
    <TabItem Header="tabItem3" Visibility="Hidden" Width="10">
    </TabItem>
    <TabItem Header="tabItem4">
    </TabItem>
</TabControl>

初级

使用Style对选项卡进行编辑，选项卡实际上类似于StackPanel那样的流式布局，用Margin进行分隔

<Style x:Key="stlTabItem" TargetType="{x:Type TabItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Border x:Name="bdrContent" Margin="0,0,10,0" Background="{TemplateBinding Background}">
                    <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Margin="5,2" Content="{TemplateBinding Header}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true">
                        <Setter TargetName="bdrContent" Property="Background" Value="AliceBlue"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="true">
                        <Setter TargetName="bdrContent" Property="Background" Value="White"/>
                        <Setter TargetName="bdrContent" Property="Margin" Value="0,-2,10,-1"/>
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

但是这样的做法实际上是在选项卡后边留了一段空白区域

进阶

上述方法仅仅是对选项卡在顶部的样式，左右以及底部的样式也要单独修改，这需要对TabControl进行编辑

间隔距离无法动态设定

选项卡的外观也可以对Border进行修改， 背景色 圆角 或者各种控件组合等等

解决这些诸多问题后就是一个完整的通用样式了

此外还有可以通过自定义控件实现 UserControl 组合控件 、FrameworkElement 继承重绘控件等等

主要是我也不会，等以后学会来再和大家分享~