I am trying to set the background color to a tabItemEx when it is selected or MouseOver using below style.
<Style x:Key="tabTabItem" TargetType="{x:Type TabItem}"> <Setter Property="Background" Value="#FFE1E1E1" > </Setter> <Setter Property="Foreground" Value="#FF000000"></Setter> <Setter Property="Margin" Value="2,0,2,0"></Setter> <Setter Property="VerticalAlignment" Value="Stretch"/> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Foreground" Value="#FFFFFFFF"></Setter> </Trigger> <Trigger Property="IsSelected" Value="True"> <Setter Property="Foreground" Value="#FFFFFFFF"></Setter> <Setter Property="FontFamily" Value="Arial"/> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush EndPoint="0,1" StartPoint="0,0"> <GradientStop Color="#FFB14D71" Offset="0.125"/> <GradientStop Color="#FF913E5C" Offset="0.789"/> </LinearGradientBrush> </Setter.Value>
But it is not setting any color. it is displaying default color only.
Am i doing ny thing wrong? Please suggest me the correct way.
</Setter> </Trigger> </Style.Triggers> </Style>
Hello,
Actually, the style has to target the TabItemEx rather than the TabItem element, like this:
<Style TargetType="{x:Type igWindows:TabItemEx}">
and it should be working.
No Alex,
Even after changing that also it is not changing the background.
It is displaying default color ( white) only.
This is because of the Template of the TabItemEx. The Background color is bound to the Background property of a Border inside the Template. However, there is a button inside this border, which fills up the Border element and that is why you cannot see the Background changing. If you need to see that, you can retemplate the TabItemEx and change the way Background is set. You can of course find this style in the DefaultStyles directory
I am pasting a simple style for this:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type igWindows:TabItemEx}">
<Grid SnapsToDevicePixels="true">
<Border
Name="Bd"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="1,1,1,0"
CornerRadius="3,3,0,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter
Name="Content"
ContentSource="Header"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
RecognizesAccessKey="true"
HorizontalAlignment="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
VerticalAlignment="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Button
Name="CloseButton"
Grid.Column="1"
Command="igWindows:TabItemExCommands.Close"
CommandTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}"
Visibility="{TemplateBinding ComputedCloseButtonVisibility}"
Style="{DynamicResource {x:Static igWindows:XamTabControl.CloseButtonStyleKey}}"
Margin="10,0,0,0"
/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Green"></Setter>
<Setter Property="Foreground" Value="Green"></Setter>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Red"/>
<Setter Property="Foreground" Value="Red"/>
</Style.Triggers>
</Style>