wpf tabitemに左矢印のようなスタイルとスタイルが選択されたときに、右矢印画像を追加するには

Question

私はstackoverflowとインターネットを見回しましたが、特定の問題の答えは見つかりませんでした。左のナビゲーションのように機能するTabControl/TabItemの組み合わせを作成したいと思います。私はまだXAMLを初めて使用しています（今のところ数ヶ月しか使用していません）。これを実現する最善の方法を理解することはできません。私はまた、現在選択されているタブヘッダーに小さい矢印アイコンを追加したい。最終的には、dnrtvエピソード115のビリー・ホリリスの素晴らしいデザインが描かれているデザインに似ているように思っていますが、これは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

は、私は多分6ヶ月前にいくつかの変更を1つをモデルにしたものです：

<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 Trigger以上の可能性があります）。