How to add right arrow image to wpf tabitem when it is selected and style like left nav

I have looked around on stackoverflow and the internet but haven't found an answer for a specific problem. I want to create a TabControl/TabItem combination that acts like a left nav. I am still new to XAML (only using it for a few months now) and I cannot figure out the best way to accomplish this. I also want to add a small arrow icon to the currently selected tab header. In the end I would like it to look similar to the design shown in dnrtv episode 115 featuring Billy Hollis' great design, he mentions that this is a TabControl that has been styled to look like it does. Check out this link and go to 4:43 to see what I mean: dnrtv Billy Hollis

So far I have been able to get this far from searching for almost a whole day online:

<TabControl TabStripPlacement="Left">
<TabControl.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type TabItem}">
            <Border x:Name="PART_Border" Background="{TemplateBinding Background}" BorderThickness="1" BorderBrush="LightGray" Margin="2">
                <ContentPresenter ContentSource="Header" Margin="2" />
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter TargetName="PART_Border" Property="BorderBrush" Value="Black" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style TargetType="{x:Type TabControl}">
<Setter Property="TabStripPlacement" Value="Left" />
<Setter Property="Margin" Value="2" />
<Setter Property="Padding" Value="2"    />
<Setter Property="Background" Value="White" />
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type TabControl}">
            <Grid ClipToBounds="True" SnapsToDevicePixels="True" KeyboardNavigation.TabNavigation="Local">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Name="ColumnDefinition0" />
                    <ColumnDefinition Width="0" Name="ColumnDefinition1" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" Name="RowDefinition0" />
                    <RowDefinition Height="*" Name="RowDefinition1" />
                </Grid.RowDefinitions>
                <Border x:Name="HeaderBorder" 
                        BorderBrush="Black" 
                        BorderThickness="1" 
                        CornerRadius="5" 
                        Background="#FAFAFA"
                        Margin="0,0,0,5">
                    <TabPanel IsItemsHost="True"
                              Name="HeaderPanel" 
                              Panel.ZIndex="1" 
                              KeyboardNavigation.TabIndex="1"
                              Grid.Column="0" 
                              Grid.Row="0" 
                     />
                </Border>
                <Grid Name="ContentPanel" 
                      KeyboardNavigation.TabIndex="2" 
                      KeyboardNavigation.TabNavigation="Local" 
                      KeyboardNavigation.DirectionalNavigation="Contained" 
                      Grid.Column="0" 
                      Grid.Row="1">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}" 
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="5">
                        <ContentPresenter Content="{TemplateBinding SelectedContent}" 
                                          ContentTemplate="{TemplateBinding SelectedContentTemplate}" 
                                          ContentStringFormat="{TemplateBinding SelectedContentStringFormat}" 
                                          ContentSource="SelectedContent" 
                                          Name="PART_SelectedContentHost" 
                                          Margin="2" 
                                          SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" 
                        />
                    </Border>
                </Grid>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="TabControl.TabStripPlacement" Value="Bottom">
                    <Setter TargetName="HeaderPanel" Property="Grid.Row" Value="1" />
                    <Setter TargetName="ContentPanel" Property="Grid.Row" Value="0" />
                    <Setter TargetName="RowDefinition0" Property="RowDefinition.Height" Value="*" />
                    <Setter TargetName="RowDefinition1" Property="RowDefinition.Height" Value="Auto" />
                    <Setter TargetName="HeaderBorder" Property="FrameworkElement.Margin" Value="0,5,0,0" />
                </Trigger>
                <Trigger Property="TabControl.TabStripPlacement" Value="Left">
                    <Setter TargetName="HeaderPanel" Property="Grid.Row" Value="0" />
                    <Setter TargetName="ContentPanel" Property="Grid.Row" Value="0" />
                    <Setter TargetName="HeaderPanel" Property="Grid.Column" Value="0" />
                    <Setter TargetName="ContentPanel" Property="Grid.Column" Value="1" />
                    <Setter TargetName="ColumnDefinition0" Property="ColumnDefinition.Width" Value="Auto" />
                    <Setter TargetName="ColumnDefinition1" Property="ColumnDefinition.Width" Value="*" />
                    <Setter TargetName="RowDefinition0" Property="RowDefinition.Height" Value="*" />
                    <Setter TargetName="RowDefinition1" Property="RowDefinition.Height" Value="0" />
                    <Setter TargetName="HeaderBorder" Property="FrameworkElement.Margin" Value="0,0,5,0" />
                </Trigger>
                <Trigger Property="TabControl.TabStripPlacement" Value="Right">
                    <Setter TargetName="HeaderPanel" Property="Grid.Row" Value="0" />
                    <Setter TargetName="ContentPanel" Property="Grid.Row" Value="0" />
                    <Setter TargetName="HeaderPanel" Property="Grid.Column" Value="1" />
                    <Setter TargetName="ContentPanel" Property="Grid.Column" Value="0" />
                    <Setter TargetName="ColumnDefinition0" Property="ColumnDefinition.Width" Value="*" />
                    <Setter TargetName="ColumnDefinition1" Property="ColumnDefinition.Width" Value="Auto" />
                    <Setter TargetName="RowDefinition0" Property="RowDefinition.Height" Value="*" />
                    <Setter TargetName="RowDefinition1" Property="RowDefinition.Height" Value="0" />
                    <Setter TargetName="HeaderBorder" Property="FrameworkElement.Margin" Value="5,0,0,0" />
                </Trigger>
                <Trigger Property="UIElement.IsEnabled" Value="False">
                    <Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>
</TabControl.Resources>

<TabItem Header="Tab1Header"/>
<TabItem Header="Tab2Header" />
<TabItem Header="Tab3Header" /> 

</TabControl>

This code gets me the headers on the left and some look but I need to figure how to add the icon when a TabItem's IsSelected property is true. Also, I'd like to eliminate the borders if at all possible. Please let me know if I am barking up the wrong tree and need to style it differently.

Should I use a DataTemplateSelector or so开发者_StackOverflow社区mething like that? I'd like to do it in all xaml but if that is not possible than that's okay.

Any help would be greatly appreciated!

---

Here is one that I modeled after that one with a few changes maybe 6 months ago:

<Style x:Key="TransparentTabItems" TargetType="{x:Type TabItem}">
        <Setter Property="FocusVisualStyle">
                <Setter.Value>
                        <Style>
                                <Setter Property="Control.Template">
                                        <Setter.Value>
                                                <ControlTemplate>
                                                        <Rectangle Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="4,4,4,2" SnapsToDevicePixels="True"/>
                                                </ControlTemplate>
                                        </Setter.Value>
                                </Setter>
                        </Style>
                </Setter.Value>
        </Setter>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
        <Setter Property="Template">
                <Setter.Value>
                        <ControlTemplate TargetType="{x:Type TabItem}">
                                <ControlTemplate.Resources>
                                        <Storyboard x:Key="TabTextGrow">
                                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TabName" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                                                        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
                                                </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                        <Storyboard x:Key="TabHeaderGrow">
                                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TabName" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                                                        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.1"/>
                                                </DoubleAnimationUsingKeyFrames>
                                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TabName" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                                                        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1.1"/>
                                                </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                        <Storyboard x:Key="TextShrink">
                                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TabName" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                                                        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
                                                </DoubleAnimationUsingKeyFrames>
                                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="TabName" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                                                        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="1"/>
                                                </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                </ControlTemplate.Resources>
                                <TextBlock x:Name="TabName" Text="{TemplateBinding Header}" HorizontalAlignment="Right" Width="Auto" TextWrapping="Wrap" Margin="0,10,5,3" TextAlignment="Right" RenderTransformOrigin="0.5,0.5" LineStackingStrategy="MaxHeight" Height="20.167" LineHeight="9.333" Foreground="White" FontFamily="Arial" FontSize="13.333" VerticalAlignment="Center">
                                        <TextBlock.RenderTransform>
                                                <TransformGroup>
                                                        <ScaleTransform/>
                                                        <SkewTransform/>
                                                        <RotateTransform/>
                                                        <TranslateTransform/>
                                                </TransformGroup>
                                        </TextBlock.RenderTransform>

                                </TextBlock>
                                <ControlTemplate.Triggers>
                                        <EventTrigger RoutedEvent="Mouse.MouseEnter">
                                                <BeginStoryboard Storyboard="{StaticResource TabHeaderGrow}"/>
                                        </EventTrigger>
                                        <EventTrigger RoutedEvent="Mouse.MouseLeave">
                                                <BeginStoryboard x:Name="TextShrink_BeginStoryboard" Storyboard="{StaticResource TextShrink}"/>
                                        </EventTrigger>
                                        <Trigger Property="IsSelected" Value="True">
                                                <Setter TargetName="TabName" Property="BitmapEffect">
                                                        <Setter.Value>
                                                                <OuterGlowBitmapEffect GlowColor="White" GlowSize="1"/>
                                                        </Setter.Value>
                                                </Setter>
                                        </Trigger>
                                        <MultiTrigger>
                                                <MultiTrigger.Conditions>
                                                        <Condition Property="IsSelected" Value="True"/>
                                                        <Condition Property="TabStripPlacement" Value="Top"/>
                                                </MultiTrigger.Conditions>
                                                <Setter Property="Margin" Value="-2"/>
                                        </MultiTrigger>
                                        <MultiTrigger>
                                                <MultiTrigger.Conditions>
                                                        <Condition Property="IsSelected" Value="True"/>
                                                        <Condition Property="TabStripPlacement" Value="Bottom"/>
                                                </MultiTrigger.Conditions>
                                                <Setter Property="Margin" Value="-2"/>
                                        </MultiTrigger>
                                        <MultiTrigger>
                                                <MultiTrigger.Conditions>
                                                        <Condition Property="IsSelected" Value="True"/>
                                                        <Condition Property="TabStripPlacement" Value="Left"/>
                                                </MultiTrigger.Conditions>
                                                <Setter Property="Padding" Value="11,2,14,2"/>
                                                <Setter Property="Margin" Value="-2"/>
                                        </MultiTrigger>
                                        <MultiTrigger>
                                                <MultiTrigger.Conditions>
                                                        <Condition Property="IsSelected" Value="True"/>
                                                        <Condition Property="TabStripPlacement" Value="Right"/>
                                                </MultiTrigger.Conditions>
                                                <Setter Property="Padding" Value="14,2,11,2"/>
                                                <Setter Property="Margin" Value="-2"/>
                                        </MultiTrigger>
                                        <Trigger Property="IsEnabled" Value="False">
                                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                                        </Trigger>
                                </ControlTemplate.Triggers>
                        </ControlTemplate>
                </Setter.Value>
        </Setter>
</Style>

The TabItem headers grow and highlight on selection or mouseover instead of bolding. To add a little > on it, just create the path you want on there, and add a visibility modifier to the trigger you want to fire it (more than likely the IsSelected Trigger).