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を使用してこのプロパティにHeaderTemplateにそれぞれBorder要素とTextBlockのBackgroundとForegroundプロパティをバインド可能性が選択されている場合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>