开发者

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

开发者 https://www.devze.com 2023-04-03 05:24 出处:网络
I have a WPF tab cont开发者_StackOverflowrol. 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.

I have a WPF tab cont开发者_StackOverflowrol. 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:

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


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...

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


Thomas Levesque your answer is beautiful!

There is a little problem with foreground color, move property into TextBlock prevent all tab to be colored White

In this way we can change the color of the header if properties IsEnable or Selected are valued.

<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>
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号