Hi,
I am trying to override the background color of a tabitemheader for a tabcontrol which uses a theme. Unfortunately this doesn't seem to work.
I followed the example in http://www.infragistics.com/community/blogs/andrew_smith/archive/2009/12/09/common-style-issues-when-using-the-theme-property.aspx but if I use the BasedOn property the theme doesn't seem to get overriden and if I don't use it I lose the complete theme styling.
Example project in attachement
Hello pvdbpvdb,
You can use the following brush definitions to change the color of a tab item in normal state, mouse hovered state and selected state. Please note that specially for the “Office2k7Silver” theme the normal state does not have any container using the normal state key and this specific brush will not have any effect. This is just how the theme is created. For example if you are using the “IGTheme” there will be difference.
<igWindows:XamTabControl Theme="Office2k7Silver">
<igWindows:XamTabControl.Resources>
<SolidColorBrush Color="Green" x:Key="{x:Static igWindows:PrimitivesBrushKeys.TabItemNormalTopCenterFillKey}" />
<SolidColorBrush Color="Red" x:Key="{x:Static igWindows:PrimitivesBrushKeys.TabItemIsSelectedTopCenterFillKey}" />
<SolidColorBrush Color="Cyan" x:Key="{x:Static igWindows:PrimitivesBrushKeys.TabItemHottrackTopCenterFillKey}" />
</igWindows:XamTabControl.Resources>
<igWindows:TabItemEx Header="TabItem1">
<Grid />
</igWindows:TabItemEx>
<igWindows:TabItemEx Header="TabItem2">
<Grid/>
<igWindows:TabItemEx Header="TabItem3">
</igWindows:XamTabControl>
If you want to change the color of the tab items’ area you can use the following brush:
<SolidColorBrush Color="Green" x:Key="{x:Static igWindows:PrimitivesBrushKeys.TabControlTabStripCenterFillKey}" />
There is also some additional information on a similar question here:
http://www.infragistics.com/community/forums/t/41505.aspx
Sincerely,
Radko
Senior Software Developer
Added difficulty would be that I need to change the background only one one specific tabheader and only in certain conditions. I was planning to do this with a datatrigger and as far as i know it is impossible to change a brush definition in a datatrigger with the setter property.
Here is an example on how to set a data trigger on a custom created element (Border) inside the tab item’s header to make its background color change based on a specific property value:
<igWindows:TabItemEx>
<igWindows:TabItemEx.Header>
<Border Padding="4" Margin="-4" >
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=chb, Path=IsChecked}" Value="True">
<Setter Property="Background" Value="Red" />
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=chb, Path=IsChecked}" Value="False">
<Setter Property="Background" Value="Green" />
</Style.Triggers>
</Style>
</Border.Style>
<TextBlock Text="Tab Label" />
</Border>
</igWindows:TabItemEx.Header>
… tab content here …
…
<CheckBox IsThreeState="False" x:Name="chb">Change Color</CheckBox>
Hello Radko,
It seems that redifining the tabheader like you did does work without losing the theme. It's not the perfect solution as it doesn't fill the whole tab header with the new background color but it will do. I will mark your answer as verified.
On a side note does anyone know why the BasedOn property doesn't work with the themes? Because this would seem like the proper way to fix this.
The below definition of a style (based on another style) is just setting the “Background” property of the TabItemEx class.
<Style TargetType="{x:Type igWindows:TabItemEx}" BasedOn="{x:Static igThemes:PrimitivesOffice2k7Silver.TabItemEx}">
If you try setting the “Background” property without style it will not work either:
<igWindows:TabItemEx Header="TabItem1" Background="Red">
The reason for this is the theme which is set. The theme defines some containers in the tab’s header which are “over” the tab’s background.
To see your style definition working you may try setting some other property, for example try the “FontWeight”:
<Setter Property="FontWeight" Value="Bold" />