Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create a WPF-tab control as chevron list?

Tags:

wpf

tabcontrol

I have a WPF tab control. but I would like to change the tab item style. The default style is square. I need to make it like a chevron list. Each block in that as hexagon.

EDIT: Please see the attached image

like image 756
Relativity Avatar asked Sep 06 '11 17:09

Relativity


People also ask

How to add TabS in WPF?

Add Tabs In order to add new tab item to a tab control, first you have to create instance of the class Telerik. Windows. Controls. RadTabItem, set its properties like Header, Content, ToolTip etc, and then add it to the tab control items collection.


1 Answers

Here's a quick example made with 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>

You will probably need to adjust a few properties, but it's roughly what you described...

enter image description here

like image 99
Thomas Levesque Avatar answered Sep 27 '22 19:09

Thomas Levesque