WPF Пользовательского TabControl шаблон

Question

Я пытаюсь реализовать дизайн этой вкладки:

От дизайна я могу понять, что

• Вкладка Заголовок формируется из <Border>Image</Border> + Text + a bottom бара
• Выбранный заголовок вкладки должен: Border.Background = Зеленый, Text.Foreground = Зеленый
• Остальные невыбранные вкладки имеют 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

Если добавить триггер стиля, который устанавливает Foreground свойства TabItem при выборе его можно связать свойство Border элемента и TextBlock соответственно в HeaderTemplate к этому свойству Background и Foreground использованию RelativeSource:

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