WPF Template Binding Path.Fill - wpf

I have the following sytles:
<Style x:Key="WindowButtonTriggers" TargetType="Button">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource MainColorBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource MainColorBrush}" />
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="MinimizeButton" TargetType="Button" BasedOn="{StaticResource WindowButtonTriggers}">
<Setter Property="Background" Value="{StaticResource WhiteBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Canvas x:Name="appbar_minus" Width="48" Height="48" Clip="F1 M 0,0L 48,0L 48,48L 0,48L 0,0" Background="Transparent" UseLayoutRounding="False">
<Rectangle Width="24" Height="4" Canvas.Left="12" Canvas.Top="24" Stretch="Fill" Fill="{TemplateBinding Background}" />
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CloseButton" TargetType="Button" BasedOn="{StaticResource WindowButtonTriggers}">
<Setter Property="Background" Value="{StaticResource WhiteBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Canvas x:Name="appbar_close" Width="48" Height="48" Clip="F1 M 0,0L 48,0L 48,48L 0,48L 0,0" Background="Transparent">
<Path Width="20" Height="20" Canvas.Left="14" Canvas.Top="14" Stretch="Fill" Fill="{TemplateBinding Background}" Data="F1 M 17,14L 24,21L 30.9999,14.0001L 33.9999,17.0001L 27,24L 33.9999,31L 31,34L 24,27L 17,34L 14,31L 21,24L 14,17L 17,14 Z "/>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
When I create a button with the style "MinimizeButton" it works fine (when the mouse is over the button color changes) but when I create a button with the style "CloseButton" it doesn't work and I don't understand why since they are almost the same style.
Any help is greatly appreciated
Edit
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<my:Menu Grid.Column="0" BorderThickness="0,0,1,0" BorderBrush="#FF777777"/>
<WrapPanel Grid.Column="1" VerticalAlignment="Center" Margin="4,0,0,0">
<Button Style="{StaticResource MinimizeButton}" />
<Button Style="{StaticResource CloseButton}" Command="Close" />
</WrapPanel>
</Grid>

The reason that it is not working is because the Close command and CanExcecute is not defined which then sets the IsEnabled property on the button to false. MSDN states that
There is not necessarily an implementation for the command on any given object; in many cases the implementation for the command is the responsibility of the application writer.
Here is a good article on Code Project to get you started on working with WPF Commands.

Related

DatePicker template, borders appear on mouse over

I have a weird problem,
My DatePicker shows in the middle some borders. I don't know where it comes from.
I changed every property of the DatePickerTextBox but it doesn't change anything.
Here is the XAML :
<Window.Resources>
<Style TargetType="{x:Type DatePicker}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DatePicker}">
<Border x:Name="MainBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="5">
<Grid x:Name="PART_Root" Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<DatePickerTextBox x:Name="PART_TextBox"
BorderThickness="0"
BorderBrush="Transparent"
HorizontalContentAlignment="Stretch"
Padding="{TemplateBinding Padding}"
VerticalContentAlignment="Center"
Visibility="Visible"
SelectionBrush="#FF6F5DF5"
FocusVisualStyle="{x:Null}"
Grid.Column="0" Margin="0,3,0,0">
<DatePickerTextBox.Style>
<Style>
<Setter Property="TextBox.BorderThickness" Value="0"/>
</Style>
</DatePickerTextBox.Style>
</DatePickerTextBox>
<Button x:Name="PART_Button" HorizontalAlignment="Right" Margin="0,0,0.333,0.333" Width="24">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Image Source="Resources/Images/down.png"></Image>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
<Popup x:Name="PART_Popup" StaysOpen="False" AllowsTransparency="True" Margin="0,0,0.333,0.333" />
<Label x:Name="lblLabel" Content="{TemplateBinding Uid}" HorizontalContentAlignment="Center" Foreground="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" BorderThickness="0" Padding="12,0" FontFamily="Poppins" VerticalContentAlignment="Stretch" Margin="6,-11,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsDropDownOpen" Value="True">
<Setter TargetName="MainBorder" Property="BorderBrush" Value="#FF6F5DF5"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="MainBorder" Property="BorderBrush" Value="#FF6F5DF5"/>
<Setter TargetName="PART_TextBox" Property="BorderThickness" Value="0"/>
<Setter Property = "BorderBrush" Value="{Binding ToYourBorder}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<DatePicker Margin="10,260,0,0" VerticalAlignment="Top" Uid="Date de naissance *" FontSize="12" Height="40" BorderThickness="0" HorizontalAlignment="Left" Width="181" FontFamily="Poppins" Background="#FFFEFEFE" BorderBrush="#FF9A9A9A" Foreground="#FF727272" />
And here how it seems :
And on hover, there is another thin border inside :
Any idea, please?
DatePickerTextBox has it's own Template where the border and the triggers for the border are defined/hardcoded.
You need to take care of those in the template of DatePickerTextBox.
Change:
<DatePickerTextBox.Style>
<Style>
<Setter Property="TextBox.BorderThickness" Value="0"/>
</Style>
</DatePickerTextBox.Style>
To:
<DatePickerTextBox.Style>
<Style TargetType="{x:Type DatePickerTextBox}">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<TextBox x:Name="PART_TextBox" BorderThickness="0"
Text="{Binding Path=SelectedDate, RelativeSource={RelativeSource AncestorType={x:Type DatePicker}}}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DatePickerTextBox.Style>
And it should work.
For a complete Template see DOCS

Style Datagrid Header border issue

I try to style datagridcolumn header but at the top right I have a double border.
I try to play with margin but it doesn't work I have always this double border at runtime.
How I can avoid this?
<Style TargetType="{x:Type DataGridRow}">
<Setter Property="Background" Value="{StaticResource BrushAbbGrey255}" />
<Setter Property="FontFamily" Value="ABBVoice" />
</Style>
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Border Padding="7,5,7,4">
<ContentPresenter VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Foreground" Value="{StaticResource BrushAbbGrey90}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border x:Name="BackgroundBorder"
BorderThickness="1,1,1,1"
Margin="-1,0,0,0"
Background="{StaticResource BrushAbbGrey240}"
BorderBrush="{StaticResource BrushAbbGrey200}"
Grid.ColumnSpan="2" />
<ContentPresenter Margin="8,10,7,10" VerticalAlignment="Center"/>
<Path x:Name="SortArrow" Visibility="Collapsed" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill"
Grid.Column="1" Width="8" Height="6" Fill="White" Margin="0,0,8,0"
VerticalAlignment="Center" RenderTransformOrigin="0.5,0.4" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Try to set the right-margin to -1:
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Foreground" Value="{StaticResource BrushAbbGrey90}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border x:Name="BackgroundBorder"
BorderThickness="1,1,1,1"
Margin="-1,0,-1,0"
Background="{StaticResource BrushAbbGrey240}"
BorderBrush="{StaticResource BrushAbbGrey200}"
Grid.ColumnSpan="2" SnapsToDevicePixels="True" />
<ContentPresenter Margin="8,10,7,10" VerticalAlignment="Center"/>
<Path x:Name="SortArrow" Visibility="Collapsed" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill"
Grid.Column="1" Width="8" Height="6" Fill="White" Margin="0,0,8,0"
VerticalAlignment="Center" RenderTransformOrigin="0.5,0.4" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You may also want to set the SnapsToDevicePixels property of the Border to true.
I added a style for my datagrid to set RowHeaderWidth to 1 and it's working fine.
<Style TargetType="{x:Type DataGrid}">
<Setter Property="BorderBrush" Value="{StaticResource BrushAbbGrey200}" />
<Setter Property="HorizontalGridLinesBrush" Value="{StaticResource BrushAbbGrey200}" />
<Setter Property="VerticalGridLinesBrush" Value="{StaticResource BrushAbbGrey200}" />
<Setter Property="BorderThickness" Value="1,0" />
<Setter Property="RowHeaderWidth" Value="1" />
</Style>

Two buttons with TextBox in the middle, ControlTemplate

Having a problem with this style, I can't find a way to make the following layout:
So I need just the corners of the buttons on the outside to be rounded, but I don't know how to do this, as the ControlTemplate for the buttons can't have the CornerRadius property as I would have to round all the corners.
This is the style I have got now, it just produces the style as seen above but with no CornerRadius.
P.S. There does seem to be an issue with the far left button going behind the TextBox which I noticed when the TextBox was slightly transparent. Not sure what is causing this!
XAML
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Controls">
<Style TargetType="{x:Type local:NumericUpDown}">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Right" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Focusable" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:NumericUpDown}">
<ControlTemplate.Resources>
<Style TargetType="Button">
<Setter Property="Padding" Value="5" />
<Setter Property="Background" Value="#434953" />
<Setter Property="MinWidth" Value="30" />
<Setter Property="MinHeight" Value="25" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ClipToBounds="True">
<Border x:Name="Border1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="#434953">
<ContentPresenter Content="{Binding Path=Content, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border1" Property="Background" Value="#834953"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ControlTemplate.Resources>
<Border Focusable="{TemplateBinding Focusable}">
<DockPanel Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
VerticalAlignment="Center"
Focusable="False">
<Button x:Name="PART_DecreaseButton" DockPanel.Dock="Left">
<Button.Content>
<Path Data="M0,0 L1,0 0.5,1Z"
Fill="White"
Width="8"
Height="6"
Stretch="Fill"/>
</Button.Content>
</Button>
<Button x:Name="PART_IncreaseButton" DockPanel.Dock="Right">
<Button.Content>
<Path Data="M0,1 L1,1 0.5,0Z"
Width="8"
Height="6"
Fill="White"
Stretch="Fill" />
</Button.Content>
</Button>
<TextBox x:Name="PART_TextBox"
Foreground="White"
HorizontalContentAlignment="Center"
HorizontalAlignment="Stretch"
Background="#22252b"
BorderThickness="0"
MinWidth="35" IsEnabled="True" Focusable="False" />
</DockPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True" SourceName="PART_DecreaseButton">
<Setter Property="Background" Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
you can encapsulate the whole thing and apply opacity mask like in this tutorial
http://wpf.2000things.com/2012/05/11/556-clipping-to-a-border-using-an-opacity-mask/

WPF - Is there a way to target an element type in a ControlTemplate's trigger?

I have the following ControlTemplate defined:
<ControlTemplate x:Key="buttonTemplate" TargetType="{x:Type Button}">
<Border x:Name="buttonBorder">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="txtLabel" Grid.Column="0">
<ContentPresenter/>
</TextBlock>
<Canvas x:Name="reschedule" Grid.Column="1">
<Path x:Name="path1" ... />
<Path x:Name="path2" ... />
<Path x:Name="path3" ... />
<Path x:Name="path4" ... />
<Path x:Name="path5" ... />
<Path x:Name="path6" ... />
<Path x:Name="path7" ... />
<Path x:Name="path8" ... />
<Path x:Name="path9" ... />
<Path x:Name="path10" ... />
</Canvas>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="buttonBorder" Property="Background" Value="DarkGreen"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="buttonBorder" Property="Background" Value="DarkGray"/>
<Setter TargetName="txtLabel" Property="Foreground" Value="Gray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Right now the default TextBlock Foreground and Path Fill properties have been set to White. When the button is disabled I want to set those properties to Gray. Right now it works for the TextBlock and I can make it work for the Paths too by targetting each of their names, but is there a way to target all the Path elements by type? Something like:
<Setter TargetType="Path" Property="Fill" Value="Gray"/>
I've tried adding the following trigger to the Border element's style but it doesn't work:
<Border.Style>
<Style TargetType="Border">
<Style.Resources>
<Style TargetType="Path">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Fill" Value="Gray"/>
</Trigger>
</Style.Triggers>
</Style>
</Style.Resources>
</Style>
</Border.Style>
You can try this trick:
Create a proxy control for Binding:
<Control x:Name="Proxy" Background="White" />
And use in Path binding like this:
<Path x:Name="path1" Fill="{Binding Path=Background, ElementName=Proxy}" Data="..." />
When you're in the Trigger set the color for the Proxy, his tucked up all the Path's.
Or instead of the binding Proxy, you can use any existing controls, such TextBlock.
Full example:
<ControlTemplate x:Key="buttonTemplate" TargetType="{x:Type Button}">
<Border x:Name="buttonBorder">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="txtLabel" Grid.Column="0">
<ContentPresenter />
</TextBlock>
<Control x:Name="Proxy" Background="White" />
<Canvas x:Name="reschedule" Grid.Column="1">
<Path x:Name="path1" Fill="{Binding Path=Background, ElementName=Proxy}" Data="..." />
<Path x:Name="path2" Fill="{Binding Path=Background, ElementName=Proxy}" Data="..." />
</Canvas>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="buttonBorder" Property="Background" Value="DarkGreen" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="buttonBorder" Property="Background" Value="DarkGray" />
<Setter TargetName="txtLabel" Property="Foreground" Value="Gray" />
<Setter TargetName="Proxy" Property="Background" Value="Gray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
1) Using Canvas Resource to store path style.
Please see <Trigger Property="IsEnabled" Value="False"> and <Trigger Property="IsEnabled" Value="True">
<Window.Resources>
<ControlTemplate x:Key="buttonTemplate" TargetType="{x:Type Button}">
<Border x:Name="buttonBorder">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="txtLabel" Grid.Column="0">
<ContentPresenter/>
</TextBlock>
<Canvas x:Name="reschedule" Grid.Column="1">
<Path x:Name="path1" Data="M 0 0 L 0 10 L 10 10 Z"/>
<Path x:Name="path2" Data="M 0 0 L 0 10 L 10 10 Z" />
</Canvas>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="buttonBorder" Property="Background" Value="DarkGray"/>
<Setter TargetName="reschedule" Property="Style">
<Setter.Value>
<Style TargetType="{x:Type Canvas}">
<Style.Resources>
<Style TargetType="{x:Type Path}">
<Setter Property="Fill" Value="Green"></Setter>
</Style>
</Style.Resources>
</Style>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="True">
<Setter TargetName="reschedule" Property="Style">
<Setter.Value>
<Style TargetType="{x:Type Canvas}">
<Style.Resources>
<Style TargetType="{x:Type Path}">
<Setter Property="Fill" Value="Blue"></Setter>
</Style>
</Style.Resources>
</Style>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<StackPanel>
<Button Height="40" Width="40" Template="{StaticResource buttonTemplate}" IsEnabled="False"></Button>
<Button Height="40" Width="40" Margin="10" Template="{StaticResource buttonTemplate}" IsEnabled="True"></Button>
</StackPanel>
2) Using Canvas Tag
<Window.Resources>
<ControlTemplate x:Key="buttonTemplate" TargetType="{x:Type Button}">
<Border x:Name="buttonBorder">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="txtLabel" Grid.Column="0">
<ContentPresenter/>
</TextBlock>
<Canvas x:Name="reschedule" Tag="Red" Grid.Column="1">
<Path x:Name="path1" Fill="{Binding Path=Tag,RelativeSource={RelativeSource AncestorType={x:Type Canvas}}}" Data="M 0 0 L 0 10 L 10 10 Z"/>
<Path x:Name="path2" Fill="{Binding Path=Tag,RelativeSource={RelativeSource AncestorType={x:Type Canvas}}}" Data="M 0 0 L 0 10 L 10 10 Z" />
</Canvas>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="buttonBorder" Property="Background" Value="DarkGreen"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="buttonBorder" Property="Background" Value="DarkGray"/>
<Setter TargetName="reschedule" Property="Tag" Value="Green"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<StackPanel>
<Button Height="40" Width="40" Template="{StaticResource buttonTemplate}" IsEnabled="False"></Button>
<Button Height="40" Width="40" Margin="10" Template="{StaticResource buttonTemplate}" IsEnabled="True"></Button>
</StackPanel>
Reason why your style wasn't working is because it was inside of the template.
To get it to work you need to apply your Style outside of your template. Not sure why it's done this way, might be something to do with how styles are processed in xaml.
Another matter to discuss is the significance of style definition:
<Style TargetType="Path"> will not be the same as the <Style TargetType="{x:Type Path}">.
The first one will give you an error if defined in the resources tag, as it will need a key by which you can reference the style explicitly in all your target types.
The latter is assigned to every control of type Path, so if you define it inside DockPanel then every Path inside of that DockPanel will be affected by the style, however if the Path is outside of the DockPanel no styling will be applied, unless explicitly defined elsewhere, this style is applied to controls implicitly.
HTH

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

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

Resources