WPF 将选项卡项样式设置为箭头状

Question

我想设置我的 TabControl 的样式使其具有与此类似的项目：

我尝试将边界（右侧厚度为 0）和三角形多边形组合在一起，将多边形推到边界外一点以重叠，但它并没有真正起作用，因为多边形的边界外部分被隐藏了.这是我的尝试，现在我被困住了，真的不知道还能尝试什么：

    <!-- Styles -->
    <Style TargetType="{x:Type TabItem}">
        <Setter Property="Padding" Value="15 0 15 0" />
        <Setter Property="Background" Value="#f5f5f5" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">

                    <Grid ClipToBounds="False">
                        <Border x:Name="PART_Border" 
                            Padding="{TemplateBinding Padding}"
                            Background="{TemplateBinding Background}" 
                            BorderThickness="1 1 0 1" 
                            BorderBrush="LightGray">
                            <ContentPresenter ContentSource="Header" VerticalAlignment="Center" />
                        </Border>
                        <Polygon Points="0,0 20,25, 0,50" 
                                 Stroke="#e8e8e8"
                                 Fill="#ffffff"
                                 HorizontalAlignment="Right"
                                 Margin="0 0 -10 0"/>
                    </Grid>
                    

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="PART_Border" Property="Background" Value="#ffffff" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!-- Content -->  
    <TabControl>
        <TabItem Header="First" />
        <TabItem Header="Second" />
        <TabItem Header="Third" />
    </TabControl>

Answer 1

这将为您完成工作：

<Style TargetType="{x:Type TabItem}">
        <Setter Property="Background" Value="#f5f5f5" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">
                    <Grid>
                        <Path x:Name="Back" Data="M0,0 L 80,0 L100,20 L80,40 L0,40 L 20,20 " Stretch="None" VerticalAlignment="Stretch"
                              Stroke="#e8e8e8" StrokeThickness="2"
                              Fill="{TemplateBinding Background}"
                              HorizontalAlignment="Stretch" Margin="-30,0,0,0"/>
                        <ContentPresenter ContentSource="Header" VerticalAlignment="Center" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="Back" Property="Fill" Value="#ffffff" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

我没有使用边框和多边形来为您绘制形状。

您可以在边距中使用 -（负）值来重叠项目。

结果：

WPF 将选项卡项样式设置为箭头状

WPF styling tab items as arrow-like

wpf

user-interface

xaml