如何将右箭头图像添加到wpf tabitem当它被选中，风格如左导航

Question

我环顾四周stackoverflow和互联网，但还没有找到一个具体问题的答案。我想创建一个TabControl/TabItem组合，其行为类似左导航。我对XAML仍然很陌生（现在只使用它几个月），我无法弄清楚实现这一目标的最佳方法。我也想为当前选中的标签页头添加一个小箭头图标。最后，我希望它看起来类似于dnrtv第115集中以Billy Hollis的伟大设计为特征的设计，他提到这是一个TabControl，它的样式看起来像它。看看这个链接，进入到4:43明白我的意思：dnrtv Billy Hollis

到目前为止，我已经能够从搜索了将近一整天的在线多远这样的：

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

这段代码获得我左边的标题和一些外观，但我需要计算如何在TabItem的IsSelected属性为true时添加图标。另外，如果可能的话，我想消除边界。请让我知道，如果我吠叫错误的树，需要以不同的方式。

我应该使用DataTemplateSelector或类似的东西吗？我希望在所有xaml中都能完成，但如果这不可行的话。

任何帮助将不胜感激！

Answer 1

这是一个我认为一个有一些变化，也许3个月前模仿：

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

的TabItem的标题成长和亮点上选择或鼠标悬停，而不是加粗。要添加一点点>，只需在那里创建你想要的路径，然后为你想要触发的触发器添加一个可见性修改器（更可能是IsSelected触发器）。