Как создать WPF-вкладку в виде списка шевронов? - PullRequest
Новая
       8

Как создать WPF-вкладку в виде списка шевронов?

8 голосов
/ 06 сентября 2011

У меня есть вкладка WPF.но я хотел бы изменить стиль элемента вкладки.Стиль по умолчанию квадратный.Мне нужно сделать это как список шевронов.Каждый блок в этом как шестиугольник.

РЕДАКТИРОВАТЬ: Please see the attached image

Ответы [ 2 ]

14 голосов
/ 07 сентября 2011

Вот краткий пример, сделанный с помощью 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

3 голосов
/ 15 мая 2014

Томас Левеск, твой ответ прекрасен!

Существует небольшая проблема с цветом переднего плана , перемещение свойства в 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>
...