如何创建一个WPF选项卡控件并将其作为箭头列表？

Question

我有一个WPF选项卡控件，但我想要改变选项卡项目的样式。默认样式是正方形的。我需要它像一个倾斜列表一样。其中每个块都是六边形。

编辑： 请参见附图：https://istack.dev59.com/ZYRmz.gif

- Relativity

---

你想要什么不是很清楚...你能发一张草图吗？ - Thomas Levesque

请查看附加的图片。 - Relativity

Answer 1

这是一个使用Kaxaml制作的快速示例：

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Page.Resources>
    <Style x:Key="chevronTabItemStyle" TargetType="{x:Type TabItem}">
      <Setter Property="Foreground" Value="White" />
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type TabItem}">
            <StackPanel Orientation="Horizontal" Margin="0,0,-7,0" Height="30">
              <Path Data="M0,0 10,0 10,30 0,30 10,15"
                    Fill="{TemplateBinding Background}"/>
              <Grid>
                <Rectangle Fill="{TemplateBinding Background}" />
                <TextBlock Text="{TemplateBinding Header}" Margin="10,5" VerticalAlignment="Center" />
              </Grid>
              <Path Data="M0,0 10,15 0,30"
                    Fill="{TemplateBinding Background}" />                  
            </StackPanel>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Page.Resources>
  <Grid>  
    <TabControl ItemContainerStyle="{StaticResource chevronTabItemStyle}">
      <TabItem Header="Design" Background="DarkSlateBlue" />
      <TabItem Header="Plan" Background="DarkCyan" />
      <TabItem Header="Build" Background="LightSkyBlue" />
      <TabItem Header="Test" Background="SandyBrown" />
      <TabItem Header="Evaluate" Background="SteelBlue" />
    </TabControl>
  </Grid>
</Page>

你可能需要调整一些属性，但大致上就是你所描述的...

- Thomas Levesque

---

哇，非常好 - 这看起来完美符合我所寻找的..感谢您提供了一个非常坚实的基础！ - Steoates

Answer 2

Thomas Levesque，你的答案非常好！

关于 前景颜色 的小问题，将属性移到 TextBlock 里可以防止所有选项卡被涂成白色。

这样，如果 IsEnable 或 Selected 属性有值，我们就可以改变标题的颜色。

<Style x:Key="TestNewTabStyle" TargetType="{x:Type TabItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TabItem}">                        
                    <StackPanel Orientation="Horizontal" Margin="0,0,-7,0" Height="30">
                        <Path Data="M0,0 10,0 10,30 0,30 10,15" Fill="{TemplateBinding Background}"/>
                        <Grid >
                            <Rectangle Fill="{TemplateBinding Background}" />
                            <TextBlock Name="HeaderArrow" Text="{TemplateBinding Header}" Margin="15,5" VerticalAlignment="Center" Foreground="White"**/>
                        </Grid>
                        <Path Data="M0,0 10,15 0,30" Fill="{TemplateBinding Background}" />
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="HeaderArrow" Property="FontWeight" Value="Bold" />
                            <Setter TargetName="HeaderArrow" Property="Foreground" Value="Yellow" />
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="HeaderArrow" Property="Foreground" Value="DarkGray" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

- Alberto