如何创建一个WPF标签控件作为雪佛龙列表?

时间:2011-09-06 17:17:09

标签: wpf tabcontrol

我有一个WPF标签控件。但我想更改标签项样式。默认样式为方形。我需要把它变成雪佛龙列表。每个块都是六边形。

编辑: Please see the attached image

2 个答案:

答案 0 :(得分:14)

以下是使用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>

您可能需要调整一些属性,但这大致与您描述的相同......

enter image description here

答案 1 :(得分:3)

托马斯·莱维斯克你的回答很漂亮!

前景色有一点问题,将属性移动到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>