WPF 사용자 지정을 TabControl 템플릿

Question

내가이 탭의 디자인을 구현하기 위해 노력하고 있습니다 : 디자인에서

내가 이해할 수

갤럭시 탭 헤더 <Border>Image</Border> + Text + a bottom 바 형성된다
• 선택한 탭 머리글은 다음과 같아야합니다. Border.Background = Green, Text.Foreground = Green
• 나머지 선택되지 않은 탭의 sa 나 색상. 내가 만든 어떤

은 :

<TabControl TabStripPlacement="Top" HorizontalAlignment="Stretch"> 
    <!-- http://www.wpf-tutorial.com/tabcontrol/styling-the-tabitems --> 
    <TabControl.Resources> 
     <Style TargetType="TabItem"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="TabItem"> 
         <StackPanel Name="Panel" Cursor="Hand" Orientation="Vertical"> 
          <ContentPresenter x:Name="ContentSite" 
            VerticalAlignment="Center" 
            HorizontalAlignment="Center" 
            ContentSource="Header" 
            Margin="10,2"/> 
          <TextBlock Name="BottomBar" Background="Gold" Height="5" /> 
         </StackPanel> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsSelected" Value="True"> 
           <!--<Setter TargetName="Panel" Property="Background" Value="Green" />--> 
           <Setter TargetName="BottomBar" Property="Background" Value="Green" /> 
          </Trigger> 
          <Trigger Property="IsSelected" Value="False"> 
           <!--<Setter TargetName="Panel" Property="Background" Value="Gold" />--> 
           <Setter TargetName="BottomBar" Property="Background" Value="Gold" /> 
          </Trigger> 
          <!--<Trigger Property="Panel.IsMouseOver" Value="true"> 
           <Setter TargetName="Panel" Property="Background" Value="Yellow"/> 
          </Trigger>--> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </TabControl.Resources> 
    <TabItem> 
     <TabItem.HeaderTemplate> 
      <DataTemplate> 
       <Grid HorizontalAlignment="Stretch"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="1*" /> 
         <ColumnDefinition Width="5*" /> 
        </Grid.ColumnDefinitions> 
        <Border Grid.Column="0" Background="Green"> 
         <Image Height="32" Grid.Column="0" Source="/Icons/dashboard.png" /> 
        </Border> 
        <TextBlock Margin="5,0,0,0" Text="لوحة المعلومات" Grid.Column="1" VerticalAlignment="Center" 
            FontSize="20" Foreground="Green" /> 
       </Grid> 
      </DataTemplate> 
     </TabItem.HeaderTemplate> 
     <TabItem.Content> 
      <ContentControl Name="Dashboard" /> 
     </TabItem.Content> 
    </TabItem> 
</TabControl> 

내가 선택한 탭이 변경 될 때 하단 바 + 텍스트 + 이미지의 색상을 바인딩에 붙어있다. 성공없이 TemplatedBinding을 사용해 보았습니다. 제발 도와 주실 수 있습니까? 감사합니다

Answer 1

당신은 당신이 RelativeSource 사용하여 Border 요소의 Background 및 Foreground 재산이 속성에는 HeaderTemplate에서 각각 TextBlock을 결합 할 수 선택하면 TabItem의 Foreground 속성을 설정하는 스타일의 트리거를 추가하는 경우 :

를

<TabControl TabStripPlacement="Top" HorizontalAlignment="Stretch"> 
    <TabControl.Resources> 
     <Style TargetType="TabItem"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="TabItem"> 
         <StackPanel Name="Panel" Cursor="Hand" Orientation="Vertical"> 
          <ContentPresenter x:Name="ContentSite" 
            VerticalAlignment="Center" 
            HorizontalAlignment="Center" 
            ContentSource="Header" 
            Margin="10,2"/> 
          <TextBlock Name="BottomBar" Background="Gold" Height="5" /> 
         </StackPanel> 
         <ControlTemplate.Triggers> 
          <Trigger Property="IsSelected" Value="True"> 
           <Setter TargetName="BottomBar" Property="Background" Value="Green" /> 
          </Trigger> 
         </ControlTemplate.Triggers> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
      <Style.Triggers> 
       <Trigger Property="IsSelected" Value="True"> 
        <Setter Property="Foreground" Value="Green" /> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </TabControl.Resources> 
    <TabItem> 
     <TabItem.HeaderTemplate> 
      <DataTemplate> 
       <Grid HorizontalAlignment="Stretch"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="1*" /> 
         <ColumnDefinition Width="5*" /> 
        </Grid.ColumnDefinitions> 
        <Border Grid.Column="0" Background="{Binding Foreground, RelativeSource={RelativeSource AncestorType=TabItem}}"> 
         <Image Height="32" Grid.Column="0" Source="/Icons/dashboard.png" /> 
        </Border> 
        <TextBlock Margin="5,0,0,0" Text="لوحة المعلومات" Grid.Column="1" VerticalAlignment="Center" 
            FontSize="20" Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType=TabItem}}" /> 
       </Grid> 
      </DataTemplate> 
     </TabItem.HeaderTemplate> 
     <TabItem.Content> 
      <ContentControl Name="Dashboard" /> 
     </TabItem.Content> 
    </TabItem> 
</TabControl>