Impossible de changer le background par defaut de tabitem lors de la selection

**eemii** · 15/09/2013, 11h29

Bonjour,

j'ai 3 onglet et je veux affecter à chaque onglet une couleur différente de l'autre et gardé cette même couleur si le tabitem est sélectionné ou non, j'ai pu attribué à chaque onglet une couleur différente mais lors de la sélection j'ai pas pu changé le blanc par défaut des onglets.

Merci pour vos réponses.

**NeoKript** · 16/09/2013, 09h30

Bonjour,

le plus simple pour faire cela est de modifier le style des TabItem et d'enlever le changement de couleur sur les triggers "IsSelected" et "IsMouseOver".

Tu peux utiliser Expression Blend pour faire cela.

NeoKript

**eemii** · 17/09/2013, 11h24

Bonjour,

j'ai modifié le style de Tabitem en utilisant le code source ci-dessous

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<Style TargetType="{x:Type TabItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Grid>
                    <Border 
        Name="Border"
        Margin="0,0,-3,0" 
        Background="{StaticResource LightBrush}"
        BorderBrush="{StaticResource SolidBorderBrush}" 
        BorderThickness="1,1,1,1" 
        CornerRadius="5,30,0,0" >
                        <ContentPresenter x:Name="ContentSite"
          VerticalAlignment="Center"
          HorizontalAlignment="Center"
          ContentSource="Header"
          Margin="12,2,12,2"
          RecognizesAccessKey="True"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Panel.ZIndex" Value="100" />
                        <Setter TargetName="Border" Property="Background" Value="{StaticResource WindowBackgroundBrush}" />
                        <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
                        <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
                        <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Il est impossible d'affecter à chaque onglet une couleur différente en faisant appel au même style , ce qui signifie que je dois réécrire ce style pour chaque onglet.

est-ce qu'il y a une solution qui permet de réutiliser (redéfinir) le même style sans le réécrire entièrement, en changeant uniquement le background de la bordure et le background si isselected est à true, (comme le principe de basedon qui permet de réutiliser un style)

Merci d'avance.

**NeoKript** · 17/09/2013, 11h41

Bonjour,

le code suivant doit fonctionner :

Code XAML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
	<Window.Resources>
		<Style x:Key="TabItemFocusVisual">
			<Setter Property="Control.Template">
				<Setter.Value>
					<ControlTemplate>
						<Rectangle Margin="3,3,3,1" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
					</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" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,1,1,0" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
								<ContentPresenter x:Name="Content" ContentSource="Header" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
							</Border>
						</Grid>
						<ControlTemplate.Triggers>
							<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>
	<TabControl>
		<TabItem Header="TabItem" Background="Red">
 
		</TabItem>
		<TabItem Header="TabItem" Background="Blue">
 
		</TabItem>
		<TabItem Header="TabItem" Background="Yellow">
 
		</TabItem>
		<TabItem Header="TabItem" Background="Green">
 
		</TabItem>
		<TabItem Header="TabItem" Background="Maroon">
 
		</TabItem>
	</TabControl>

**eemii** · 17/09/2013, 16h40

Bonjour,

je vous remercie pour vos réponses,

Après plusieurs lecture à votre code, j'ai constaté que l'instruction qui permet d'appliquer le même style en changeant uniquement le background au niveau de chaque TabItem c'est bien

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Background="{TemplateBinding Background}"

Afin d'attribuer une couleur différente à l'onglet sélectionné et utiliser une même couleur pour les onglets non actifs, j'ai modifié le code source précédent comme suit:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<Style TargetType="{x:Type TabItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <Grid>
                    <Border 
        Name="Border"
        Margin="0,0,-3,0" 
        Background="{StaticResource LightBrush}"   //je garde ici la même couleur
        BorderBrush="{StaticResource SolidBorderBrush}" 
        BorderThickness="1,1,1,1" 
        CornerRadius="5,30,0,0" >
                        <ContentPresenter x:Name="ContentSite"
          VerticalAlignment="Center"
          HorizontalAlignment="Center"
          ContentSource="Header"
          Margin="12,2,12,2"
          RecognizesAccessKey="True"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Panel.ZIndex" Value="100" />                        
                      <Setter TargetName="Border" Property="Background" Value="{Binding RelativeSource={RelativeSource Self}, Path=Background}" />
                        <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
                        <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
                        <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

En résumé, j'ai remplacé la ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<Setter TargetName="Border" Property="Background" Value="{StaticResource WindowBackgroundBrush}" />

Par la ligne suivante au niveau de Trigger de la propriété IsSelected:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<Setter TargetName="Border" Property="Background" Value="{Binding RelativeSource={RelativeSource Self}, Path=Background}" />

Afin de pouvoir Affecter le background lors de la sélection d'un onglet directement à partir de l'instruction:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<TabItem Header="TabItem" Background="Red"/>

Mais lors de l'excution la couleur de la sélection ne s'affecte pas, ma question est : comment integré l'instruction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Background="{TemplateBinding Background}"

à ce niveau

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Panel.ZIndex" Value="100" />                        
                        <Setter TargetName="Border" Property="Background" Value="{Binding RelativeSource={RelativeSource Self}, Path=Background}" />
                        <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
 </Trigger>

puisque l'instruction que je l'ai utilisé ne fonctionne pas.

Merci d'avance.

Impossible de changer le background par defaut de tabitem lors de la selection

Windows Presentation Foundation

Vue hybride

Discussions similaires

Partager

Partager