WPF panneau à onglets: Onglet Paramètre de Couleur?

J'ai un TabControl dans mon application WPF qui utilise les couleurs par défaut pour le WPF contrôle onglet. En d'autres termes, l'onglet actif est blanc, et les onglets inactifs sont en argent. J'ai changé le Background couleur de toutes les pages à onglet Beige, par la définition de la Background propriété de la TabControl objet, mais on ne change pas l'onglet couleur, seulement l'espace client. Donc, j'ai fini avec un onglet actif qui a un beige espace client et un onglet blanc.

Je voudrais mettre l'onglet Color pour correspondre à l'espace client, de sorte que l'ensemble de la page est de couleur beige. Comment dois-je procéder? Merci.

BTW, j'ai essayé de définir l'arrière-plan de la propriété sur un TabItem, mais que seules les modifications de l'onglet couleur lorsque la TabItem est inactif.

OriginalL'auteur David Veeneman | 2010-01-18

  1. 5

    Voici un exemple de l'onglet de l'élément de style à partir d'un de mes projets. Désolé pour certains hors de propos de code, je suis sûr que vous aurez extrait de ce que vous avez besoin de elle.

    <Style x:Uid="Style_21" TargetType="{x:Type TabItem}">
<Setter x:Uid="Setter_75" Property="Template">
<Setter.Value>
<ControlTemplate x:Uid="ControlTemplate_7" TargetType="{x:Type TabItem}">
<Grid x:Uid="Grid_13">
<Border 
x:Uid="Border" Name="Border"
Background="#F0F0F0"
BorderBrush="LightGray" 
BorderThickness="1,1,1,0" 
CornerRadius="4,4,0,0" 
Margin="0,0,2,0" SnapsToDevicePixels="True" >
<TextBlock x:Uid="TextBlock" FontSize="15" 
HorizontalAlignment="Center" 
Name="TextBlock" 
Foreground="DarkGray">
<ContentPresenter x:Uid="ContentSite" x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="12,2,12,2"/>
</TextBlock>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger x:Uid="Trigger_14" Property="IsSelected" Value="True">
<Setter x:Uid="Setter_76" TargetName="Border" Property="Background" Value="White" />
<Setter x:Uid="Setter_77" TargetName="Border" Property="BorderBrush" Value="Gray" />
<Setter x:Uid="Setter_78" TargetName="TextBlock" Property="Foreground" Value="Black" />
<Setter x:Uid="Setter_79" TargetName="Border" Property="Margin" Value="0,0,2,-1" />
</Trigger>
<Trigger x:Uid="Trigger_15" Property="IsMouseOver" Value="True" SourceName="Border" >
<Setter x:Uid="Setter_80" TargetName="Border" Property="Background" Value="White" />
<Setter x:Uid="Setter_81" TargetName="Border" Property="BorderBrush" Value="DarkGray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

    Espère que cela aide.

    Ouais, j'ai eu peur que j'allais avoir à aller dans le modèle de contrôle. J'espérais que j'avais raté quelque chose de plus simple. Eh bien, votre balisage est un excellent guide! Merci pour l'aide.

    OriginalL'auteur levanovd

  2. 3

    J'ai travaillé de la solution. Je vais quitter levanovd la réponse est sélectionnée comme la bonne, en remerciement pour son aide.

    Essentiellement, la solution est un changement de ligne à la TabItem modèle de contrôle. Commencez avec une copie de la normale TabItem modèle de contrôle, et de définir le modèle de contrôle de cibler tous les contrôles de type TabItem. Trouver le IsSelected déclencheur, et le remplacer par le suivant:

    <Setter Property="Background" TargetName="Bd" Value="{Binding Path=Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}"/>

    Bd est le Border de contrôle qui définit la frontière et à l'arrière-plan de la zone de l'onglet d'un TabItem. Cette balise indique WPF pour lier le Bd Background de la propriété par la source. Dans ce cas, la source est le Background propriété de la TabControl qui héberge le TabItem. Par conséquent, lorsque vous définissez la Background propriété de la TabControl, la couleur va circuler à travers la zone de l'onglet de tous les TabItem contrôles hébergé dans le TabControl.

    Voici la majoration pour une démo que j'ai créé dans le Mélange 3:

    <Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="WpfApplication1.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Window.Resources>
<Style x:Key="TabItemFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Stroke="Black" StrokeDashArray="1 2" StrokeThickness="1" Margin="3,3,3,1" SnapsToDevicePixels="true"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94"/>
<LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#F3F3F3" Offset="0"/>
<GradientStop Color="#EBEBEB" Offset="0.5"/>
<GradientStop Color="#DDDDDD" Offset="0.5"/>
<GradientStop Color="#CDCDCD" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="TabItemHotBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#EAF6FD" Offset="0.15"/>
<GradientStop Color="#D9F0FC" Offset=".5"/>
<GradientStop Color="#BEE6FD" Offset=".5"/>
<GradientStop Color="#A7D9F5" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="TabItemSelectedBackground" Color="#F9F9F9"/>
<SolidColorBrush x:Key="TabItemHotBorderBrush" Color="#3C7FB1"/>
<SolidColorBrush x:Key="TabItemDisabledBackground" Color="#F4F4F4"/>
<SolidColorBrush x:Key="TabItemDisabledBorderBrush" Color="#FFC9C7BA"/>
<Style TargetType="{x:Type TabItem}">
<Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusVisual}"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Padding" Value="6,1,6,1"/>
<Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid SnapsToDevicePixels="true">
<Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Padding="{TemplateBinding Padding}">
<ContentPresenter x:Name="Content" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header" RecognizesAccessKey="True"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemHotBackground}"/>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Panel.ZIndex" Value="1"/>
<Setter Property="Background" TargetName="Bd" Value="{Binding Path=Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabControl}}}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="false"/>
<Condition Property="IsMouseOver" Value="true"/>
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemHotBorderBrush}"/>
</MultiTrigger>
<Trigger Property="TabStripPlacement" Value="Bottom">
<Setter Property="BorderThickness" TargetName="Bd" Value="1,0,1,1"/>
</Trigger>
<Trigger Property="TabStripPlacement" Value="Left">
<Setter Property="BorderThickness" TargetName="Bd" Value="1,1,0,1"/>
</Trigger>
<Trigger Property="TabStripPlacement" Value="Right">
<Setter Property="BorderThickness" TargetName="Bd" Value="0,1,1,1"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="TabStripPlacement" Value="Top"/>
</MultiTrigger.Conditions>
<Setter Property="Margin" Value="-2,-2,-2,-1"/>
<Setter Property="Margin" TargetName="Content" Value="0,0,0,1"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="TabStripPlacement" Value="Bottom"/>
</MultiTrigger.Conditions>
<Setter Property="Margin" Value="-2,-1,-2,-2"/>
<Setter Property="Margin" TargetName="Content" Value="0,1,0,0"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="TabStripPlacement" Value="Left"/>
</MultiTrigger.Conditions>
<Setter Property="Margin" Value="-2,-2,-1,-2"/>
<Setter Property="Margin" TargetName="Content" Value="0,0,1,0"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="TabStripPlacement" Value="Right"/>
</MultiTrigger.Conditions>
<Setter Property="Margin" Value="-1,-2,-2,-2"/>
<Setter Property="Margin" TargetName="Content" Value="1,0,0,0"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="Bd" Value="{StaticResource TabItemDisabledBackground}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource TabItemDisabledBorderBrush}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<TabControl Background="Beige" HorizontalAlignment="Left" VerticalAlignment="Top" Width="500" Height="300">
<TabItem Header="TabItem">
<Grid/>
</TabItem>
<TabItem Header="TabItem">
<Grid/>
</TabItem>
</TabControl>
</Grid>
</Window>

    OriginalL'auteur David Veeneman