TemplateBinding from a Style DataTrigger In ControlTemplate - wpf

In the following XAML I'm using a Rectangle with a Border as the Template for a ToggleButton.
I want the BorderBrush to be a different colour to reflect the changing value of ToggleButton.IsChecked.
Unfortunately my attempt here of using a TemplateBinding in the DataTrigger doesn't work. What do I need to do instead?
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<ControlTemplate x:Key="ButtonAsSwatchTemplate">
<Border BorderThickness="1">
<Border.Style>
<Style>
<Setter Property="BorderBrush" Value="Gainsboro" />
<Style.Triggers>
<!-- TemplateBinding doesn't work.-->
<DataTrigger
Binding={TemplateBinding Property=IsChecked}
Value="True">
<Setter Property="BorderBrush" Value="Black" />
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Rectangle Fill="{TemplateBinding Property=Background}"
Width="15" Height="15" />
</Border>
</ControlTemplate>
</StackPanel.Resources>
<ToggleButton Template="{StaticResource ButtonAsSwatchTemplate}"
HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="2" Background="Red" />
</StackPanel>
EDIT
When I build and reload the designer I get the following error:
Error 1 Property 'Binding' does not support values of type 'TemplateBindingExpression'.
SOLUTION
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<ControlTemplate x:Key="ButtonAsSwatchTemplate">
<Border x:Name="SwatchBorder" BorderThickness="1">
<Rectangle Fill="{TemplateBinding Property=Background}" Width="15" Height="15" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter TargetName="SwatchBorder" Property="BorderBrush" Value="Yellow" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</StackPanel.Resources>
<RadioButton Template="{StaticResource ButtonAsSwatchTemplate}"
GroupName="CropGuidesColourRadioButtonGroup"
IsChecked="{Binding Checked}" Margin="2" Background="Red" />
<RadioButton Template="{StaticResource ButtonAsSwatchTemplate}"
GroupName="CropGuidesColourRadioButtonGroup"
IsChecked="{Binding Checked}" Margin="2" Background="Black" />
...
</StackPanel>

You could use a Trigger in the ControlTemplate, e.g.
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<ControlTemplate x:Key="ButtonAsSwatchTemplate">
<Border x:Name="myBorder" BorderBrush="Gainsboro" BorderThickness="1">
<Rectangle Fill="{TemplateBinding Property=Background}" Width="15" Height="15" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter TargetName="myBorder" Property="BorderBrush" Value="Black" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</StackPanel.Resources>
<ToggleButton Template="{StaticResource ButtonAsSwatchTemplate}"
HorizontalAlignment="Center" VerticalAlignment="Center"
Margin="2" Background="Red" />
</StackPanel>

One problem I see right away is that you are setting BorderBrush as a local property value on Border. This will always override the value applied by the style. Try removing the explicit BorderBrush attribute and see if that works.
Border BorderBrush="Gainsboro" BorderThickness="1"
Dependency Property Value Inheritance

Related

WPF Button constant color when pressed

im relatively new to WPF and the styling options. What i have so far, is a menu consisting of four buttons. What i would like, is that when a button is pressed, it changes to a constant darker color (e.g dark blue) and stays that way, until another button in the menu is pressed. This is a visual aid to the user so they know which page they are on.
Currently my buttons like this
<Button x:Name="CreateDog" Content="Create Dog" Grid.Column="1" FontSize="18" FontFamily="Roboto" Foreground="White" FontWeight="Bold" Margin="0,82,161,4" Command="{Binding UpdateViewCommand}" CommandParameter="CreateDog" Grid.ColumnSpan="2"/>
<Button x:Name="SearchDog" Grid.Column="2" Content="Search Dog" FontSize="18" FontFamily="Roboto" Foreground="White" FontWeight="Bold" Grid.ColumnSpan="1" Margin="0,82,0,4" Command="{Binding UpdateViewCommand}" CommandParameter="SearchDog"/>
<Button x:Name="SearchHDIndex" Grid.Column="3" Content="Search HD-Index" FontSize="18" FontFamily="Roboto" Foreground="White" FontWeight="Bold" Grid.ColumnSpan="1" Margin="0,82,0,4" Command="{Binding UpdateViewCommand}" CommandParameter="SearchHDIndex"/>
<Button x:Name="BreedingPartner" Content="Breeding Partner" Grid.Column="3" FontSize="18" FontFamily="Roboto" Foreground="White" FontWeight="Bold" Margin="161,82,0,4" Command="{Binding UpdateViewCommand}" CommandParameter="BreedingPartner" Grid.ColumnSpan="2"/>
and my app.xaml style looks like this:
<Style TargetType="Button">
<Setter Property = "Background" Value = "Chocolate" />
<Setter Property = "Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="10" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="SandyBrown"/>
<Setter Property="Foreground" Value="Chocolate"/>
</Trigger>
</Style.Triggers>
</Style>
</Application.Resources>
For such a scenario, it will be easier for you to use RadioButton.
ToggleButton can also be used, but then you have to embed additional logic to release the button if another one is pressed.
<StackPanel>
<StackPanel.Resources>
<Style TargetType="RadioButton">
<Setter Property = "Background" Value = "Chocolate" />
<Setter Property = "FontSize" Value = "18" />
<Setter Property = "FontFamily" Value = "Roboto" />
<Setter Property = "Foreground" Value = "White" />
<Setter Property = "FontWeight" Value = "Bold" />
<Setter Property = "Margin" Value = "5" />
<Setter Property = "Command" Value = "{Binding UpdateViewCommand}" />
<Setter Property = "GroupName" Value = "menu" />
<Setter Property = "Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Border CornerRadius="10" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="SandyBrown"/>
<Setter Property="Foreground" Value="Chocolate"/>
</Trigger>
</Style.Triggers>
</Style>
</StackPanel.Resources>
<RadioButton x:Name="CreateDog" Content="Create Dog" CommandParameter="CreateDog"/>
<RadioButton x:Name="SearchDog" Content="Search Dog" CommandParameter="SearchDog"/>
<RadioButton x:Name="SearchHDIndex" Content="Search HD-Index" CommandParameter="SearchHDIndex"/>
<RadioButton x:Name="BreedingPartner" Content="Breeding Partner" CommandParameter="BreedingPartner"/>
</StackPanel>
i have the answer at your question, first of I have used RadioButtons instead buttons, This is what i have got:
this is the code:
<StackPanel Margin="0,0,0,100" Grid.RowSpan="3">
<RadioButton Content="Home" Height="50" Foreground="Black" FontSize="18" Style="{StaticResource MenuButtonTheme}" Command="{Binding Path=HomeViewCommand}" IsChecked="True"/>
<RadioButton Content="Anagrafiche" Height="50" Foreground="Black" FontSize="18" Style="{StaticResource MenuButtonTheme}" Command="{Binding Path=AnagraficheViewCommand}" IsChecked="False"/>
<RadioButton Content="Fasi" Height="50" Foreground="Black" FontSize="18" Style="{StaticResource MenuButtonTheme}" Command="{Binding Path=FasiViewCommand}"/>
<RadioButton Content="Inventario" Height="50" Foreground="Black" FontSize="18" Style="{StaticResource MenuButtonTheme}" Command="{Binding InventarioViewCommand}"/>
<RadioButton Content="Report / Statistiche" Height="50" Foreground="Black" FontSize="18" Style="{StaticResource MenuButtonTheme}" Command="{Binding Path=ReportStatisticheViewCommand}"/>
<RadioButton Content="Utility" Height="50" Foreground="Black" FontSize="18" Style="{StaticResource MenuButtonTheme}" Command="{Binding Path=UtilityViewCommand}"/>
</StackPanel>
i have created a style for the radio button so you dont need to repeat the same exact code every time:
<Style BasedOn="{StaticResource {x:Type ToggleButton}}"
TargetType="{x:Type RadioButton}"
x:Key="MenuButtonTheme">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Background="{TemplateBinding Background}">
<StackPanel VerticalAlignment="Center" Orientation="Horizontal">
<Label Content="■" Margin="5,0,0,0" FontWeight="Bold" />
<TextBlock Text="{TemplateBinding Property=Content}" VerticalAlignment="Center" Margin="0,0,0,0"/>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="#FFECF1FF"/>
</Trigger>
</Style.Triggers>
</Style>
Hope It Helps You!

Text box in a popup effecting a style for the controlling button

I am trying to build a text filter for a list in a popup, and notify the user when the filter is active by changing the color of the button that opens the popup.
I am using an MVVM lite setup and a XAML style sheet to reference the desired styles. Up until this point I have created the popup and the controlling button, and I have been able to put a mouse over trigger on the button and have it work. However when I tried to have a datatrigger set to the value of the textbox in the popup, it does not respond at all.
Here is the XAML code in the View for the button and the popup:
<StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Center" >
<TextBlock HorizontalAlignment="Center" Text="Filter Popup" />
<Button x:Name="PopUpControl" Tag="popup" Style="{StaticResource FilterButtonStyle}" Command="{Binding OpenPopupCommand}" IsEnabled="{Binding IsFilterEnabled, UpdateSourceTrigger=PropertyChanged}" Margin="2,1,2,1" VerticalAlignment="Top"/>
</StackPanel>
<Popup x:Name="textPopup" IsOpen="{Binding IsFilterPopupOpen, Mode=TwoWay}" PlacementTarget="{Binding ElementName=PopUpControl}" Placement="Bottom" Width="Auto" StaysOpen="False" Margin="2 2 2 2">
<TextBox x:Name="TextValue" Grid.Column="0" BorderThickness="1" Style="{StaticResource WatermarkedTextBox}" Margin="2,4" VerticalAlignment="Center" Tag="Text Filter" Text="{Binding FilterSearch, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}"
<Button Grid.Column="4" Style="{StaticResource SearchIconStyle}" IsEnabled="{Binding FilterEnabled, Mode=TwoWay}" Command="{Binding ApplyFilterCommand}" Margin="19,6" Grid.ColumnSpan="2" />
</Grid>
</Popup>
Here is the style for the button:
<Style x:Key="SortButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Width" Value="15"/>
<Setter Property="Height" Value="15"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Margin" Value="4,0,4,0" />
<Setter Property="Tag" Value="Default" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
Padding="4,2"
CornerRadius="3"
Background="{DynamicResource PaleBlue}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
<Border.OpacityMask>
<VisualBrush Visual="{StaticResource appbar_filter}" />
</Border.OpacityMask>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="Background" Value="{DynamicResource ColumnHeaderFilterColor}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
What I would like to happen, is when the element "TextValue" has a value in the Text field, the primary background color for the "border" changes color. Any help would be greatly appreciated.
You could use a DataTrigger that binds to the FilterSearch source property and sets a property if returns an empty string or null:
<ControlTemplate TargetType="Button">
<Border Name="border"
Padding="4,2"
CornerRadius="3"
Background="Green">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
<Border.OpacityMask>
<VisualBrush Visual="{StaticResource appbar_filter}" />
</Border.OpacityMask>
</Border>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding FilterSearch}" Value="">
<Setter TargetName="border" Property="Background" Value="{DynamicResource PaleBlue}" />
</DataTrigger>
<DataTrigger Binding="{Binding FilterSearch}" Value="{x:null}">
<Setter TargetName="border" Property="Background" Value="{DynamicResource PaleBlue}" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>

WPF ListView IsSelected Set Border Opacity

I have a listview and padding must be 2 and color's getting system theme (using windows 8.1) but look very ugly.
<ListView.Resources>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border Name="Border" Padding="2" SnapsToDevicePixels="True">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="{x:Static SystemParameters.WindowGlassBrush}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="IsSelected" Value="true"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.Resources>
TIP: I used CornerRadius = 10 in DataTemplate.
<DataTemplate x:Key="DT">
<StackPanel Orientation="Vertical">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50*"/>
<RowDefinition Height="50*"/>
</Grid.RowDefinitions>
<Border Background="{Binding HEXRengi}" MinHeight="100" MinWidth="150" Height="100" Width="150" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.RowSpan="2" CornerRadius="10"/>
<ToggleButton x:Name="HEXRenkAl" Style="{DynamicResource DüzRenkPaletiDüğmeBiçimi}" Grid.Row="0" Click="HEXRenkAl_Click">
<Border Background="{Binding HEXRengi}" MinHeight="50" MinWidth="150" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="10">
<TextBox Text="{Binding HEXRengi}" Style="{DynamicResource SeçilebilirAmaYazılamazMetinKutusu}" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Justify" TextWrapping="Wrap" Foreground="White" FontFamily="Century Gothic" FontSize="16" FontWeight="Bold"/>
</Border>
</ToggleButton>
<ToggleButton x:Name="RGBRengiAl" Style="{DynamicResource DüzRenkPaletiDüğmeBiçimi}" Grid.Row="1" Click="RGBRengiAl_Click">
<Border Background="{Binding HEXRengi}" MinHeight="50" MinWidth="150" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="05">
<TextBox Text="{Binding RGBRengi}" Style="{DynamicResource SeçilebilirAmaYazılamazMetinKutusu}" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Justify" TextWrapping="Wrap" Foreground="White" FontFamily="Century Gothic" FontSize="16" FontWeight="Bold"/>
</Border>
</ToggleButton>
</Grid>
</StackPanel>
</DataTemplate>
Look like this;
And IsSelected;
When i used setter property opacity value apply all item. Just should apply on border, not all item.
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="{x:Static SystemParameters.WindowGlassBrush}"/>
<Setter TargetName="Border" Property="Opacity" Value=".5"/>
</Trigger>
How can i do it? Thanks for advices.
When i used setter property opacity value apply all item. Just should apply on border, not all item.
If you are wondering why opacity value is applying to all items, that is because you have named "Border" and you are targeting by name in your Trigger.
<Border Name="Border" Padding="2" SnapsToDevicePixels="True">
<ContentPresenter />
</Border>

WPF - Change backgroundcolor on button hover

I tried many different options to change the backgroundcolor on hover, but it dosen't work for me.
Here is my code:
<Button x:Name="bAction" HorizontalAlignment="Center" Margin="0,500,0,0" VerticalAlignment="Center" Height="100" Width="1000" BorderBrush="Black" OpacityMask="White" Background="#FF5B5B5B" IsDefault="True" Click="bAction_Click">
<TextBlock x:Name="tbAction" TextWrapping="Wrap" Text="Test" Foreground="White" IsEnabled="False" Width="990" Height="85" FontFamily="Letter Gothic Std" FontSize="21.333" FontWeight="Bold" TextDecorations="{x:Null}" TextAlignment="Center"/>
</Button>
Try applying the below style to Button
<Style x:Key="myStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

WPF TabItem OnMouseOver shall trigger the visibility of a Button inside the TabItem

I have a TabControl containing TabItems. I overwrote their ItemTemplate to contain:
A TextBlock showing the caption of the TabItem
A Button (X) which closes the tab
Now I would like to make the "X"-Button only visible, when the TabItem is either selected or the mouse is over it.
This is my XAML code so far...
<TabControl x:Name="tabControl"
ItemsSource="{Binding OpenedItems}">
<TabControl.ItemTemplate>
<DataTemplate>
<Grid Name="grid" VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding TabCaption}"
Grid.Column="0"
Foreground="White"
HorizontalAlignment="Left"
Margin="3"
Name="label_TabTitle"
VerticalAlignment="Center" />
<Button Content="X"
Grid.Column="1"
Foreground="White"
HorizontalAlignment="Right"
Margin="3"
Name="button_close"
VerticalAlignment="Center"
Width="20"
Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
Visibility="Hidden"
Click="button_close_Click_1">
</Button>
</Grid>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True" >
<Setter TargetName="button_close" Property="Visibility" Value="Visible"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ItemContainerStyle>
<Style TargetType="TabItem">
<Setter Property="Background" Value="#1C1C1C" />
<Setter Property="Content" Value="{Binding TabContentView}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Name="Grid"
Background="{StaticResource GrayBrush}">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
RecognizesAccessKey="True">
</ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Grid" Property="Background" Value="{StaticResource BlueBrush}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Grid" Property="Background" Value="{StaticResource LightBlueBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.ItemContainerStyle>
</TabControl>
With the Trigger inside the DataTemplate it kind of works.. but: you have to hover the mouse directly over the Label in order to show the button. So basically, it is impossible to click the button, because it disappears again.
I would appreciate any help with these WPF Templates!
Thanks, Christian
It looks as though your TabItem does not have the background set so it is not catching the MouseOverEvent. Since the TextBlock has the foreground set and has text, it captures the MouseOverEvent. Try setting the Background child grid of the DataTemplate to Transparent and you should see that the MouseOverEvent will be caught and show the close button.
<TabControl x:Name="tabControl" ItemsSource="{Binding OpenedItems}">
<TabControl.ItemTemplate>
<DataTemplate>
<Grid Name="grid" VerticalAlignment="Center" Background="Transparent">
...
</Grid>
...
</DataTemplate>
</TabControl.ItemTemplate>
...
</TabControl>
If you set opacity instead of visibility it works. Removed all references to Visibility, changed to Opacity:
You may want to check my code edit. Not 100% sure it's a duplicate of what you had, but the idea works. Why? Not sure. :) I'm guessing the Hidden-Button was swallowing the MouseEnter events, but refusing to pass them on because it was hidden.
<TabControl x:Name="tabControl"
ItemsSource="{Binding OpenedItems}">
<TabControl.ItemTemplate>
<DataTemplate>
<Grid Name="grid" VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding TabCaption}"
Grid.Column="0"
Foreground="White"
HorizontalAlignment="Left"
Margin="3"
Name="label_TabTitle"
VerticalAlignment="Center" />
<Button Content="X"
Grid.Column="1"
Foreground="White"
HorizontalAlignment="Right"
Margin="3"
Name="button_close"
VerticalAlignment="Center"
Width="20"
Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
Opacity="0"
Click="button_close_Click_1">
</Button>
</Grid>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True" >
<Setter TargetName="button_close" Property="Opacity" Value="1"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ItemContainerStyle>
<Style TargetType="TabItem">
<Setter Property="Background" Value="#1C1C1C" />
<Setter Property="Content" Value="{Binding TabContentView}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Name="Grid"
Background="{StaticResource GrayBrush}">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
RecognizesAccessKey="True">
</ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Grid" Property="Background" Value="{StaticResource BlueBrush}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Grid" Property="Background" Value="{StaticResource LightBlueBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.ItemContainerStyle>
</TabControl>

Resources