I have a MultiDataTrigger where if a property in my view model is true AND the IsMouseOver on the TabItem is true, then the Border should appear red with 2.5 thickness.
I couldn't get both the property and IsMouseOver to work, so I tried just my property. That worked correctly, but still had the expected issue where it would be red with 2.5 thickness, up until I hovered over the tab. So I then tried taking out my view model property and just had the IsMouseOver check as a condition. This doesn't work. Below is the code with just the IsMouseOver.
<TabItem x:Name="TabItemNotWorking" Header="NotWorking">
<TabItem.Style>
<Style TargetType="TabItem">
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver RelativeSource={RelativeSource Self}}" Value="true" />
<!--<Condition Binding="{Binding Counter, Converter={StaticResource IntIsGreaterThanZeroToBool}}" Value="true" />-->
</MultiDataTrigger.Conditions>
<Setter Property="TabItem.BorderBrush" Value="Red"/>
<Setter Property="TabItem.BorderThickness" Value="2.5"/>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</TabItem.Style>
<!--Content in here-->
</TabItem>
I fixed it using Mike Strobel's advice of overwriting the TabItem template. Now my red border will show whenever my ViewModel property is true, regardless if the mouser is hovered over the TabItem. Here is my solution (I put comments around the areas of code I modified):
<LinearGradientBrush x:Key="TabItemHotBackground"
StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#EAF6FD"
Offset="0.15"/>
<GradientStop Color="#D9F0FC"
Offset=".5"/>
<GradientStop Color="#BEE6FD"
Offset=".5"/>
<GradientStop Color="#A7D9F5"
Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<SolidColorBrush x:Key="TabItemSelectedBackground"
Color="#F9F9F9"/>
<SolidColorBrush x:Key="TabItemDisabledBackground"
Color="#F4F4F4"/>
<SolidColorBrush x:Key="TabItemHotBorderBrush"
Color="#3C7FB1"/>
<SolidColorBrush x:Key="TabItemDisabledBorderBrush"
Color="#FFC9C7BA"/>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid SnapsToDevicePixels="true">
<Border Name="Bd"
Padding="{TemplateBinding Padding}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
BorderThickness="1,1,1,0">
<ContentPresenter Name="Content"
ContentSource="Header"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
HorizontalAlignment="{Binding Path=HorizontalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
VerticalAlignment="{Binding Path=VerticalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"
RecognizesAccessKey="True"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Bd" Property="Background" Value="{StaticResource TabItemHotBackground}"/>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Panel.ZIndex" Value="1"/>
<Setter TargetName="Bd" Property="Background" Value="{StaticResource TabItemSelectedBackground}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="false"/>
<Condition Property="IsMouseOver" Value="true"/>
</MultiTrigger.Conditions>
<Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource TabItemHotBorderBrush}"/>
</MultiTrigger>
<!--HERE ARE THE START OF MY CHANGES-->
<DataTrigger Binding="{Binding Counter, Converter={StaticResource IntIsGreaterThanZeroToBool}}" Value="true">
<Setter TargetName="Bd" Property="BorderBrush" Value="Red"/>
<Setter TargetName="Bd" Property="BorderThickness" Value="2.5"/>
</DataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}" Value="true" />
<Condition Binding="{Binding Counter, Converter={StaticResource IntIsGreaterThanZeroToBool}}" Value="true" />
</MultiDataTrigger.Conditions>
<Setter TargetName="Bd" Property="BorderBrush" Value="Red"/>
<Setter TargetName="Bd" Property="BorderThickness" Value="2.5"/>
</MultiDataTrigger>
<!--HERE ARE THE END OF MY CHANGES-->
<Trigger Property="TabStripPlacement" Value="Bottom">
<Setter TargetName="Bd" Property="BorderThickness" Value="1,0,1,1"/>
</Trigger>
<Trigger Property="TabStripPlacement" Value="Left">
<Setter TargetName="Bd" Property="BorderThickness" Value="1,1,0,1"/>
</Trigger>
<Trigger Property="TabStripPlacement" Value="Right">
<Setter TargetName="Bd" Property="BorderThickness" 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 TargetName="Content" Property="Margin" 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 TargetName="Content" Property="Margin" 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 TargetName="Content" Property="Margin" 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 TargetName="Content" Property="Margin" Value="1,0,0,0"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Bd" Property="Background" Value="{StaticResource TabItemDisabledBackground}"/>
<Setter TargetName="Bd" Property="BorderBrush" Value="{StaticResource TabItemDisabledBorderBrush}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You will notice that the following condition works, but only when the tab is selected:
<Condition Binding="{Binding IsMouseOver RelativeSource={RelativeSource Self}}"
Value="true" />
Here's why: note this excerpt from the default TabItem template for the Aero theme.
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected"
Value="false"/>
<Condition Property="IsMouseOver"
Value="true"/>
</MultiTrigger.Conditions>
<Setter TargetName="Bd"
Property="BorderBrush"
Value="{StaticResource TabItemHotBorderBrush}"/>
</MultiTrigger>
The style overrides the BorderBrush on mouse-over when the tab isn't selected, so your border brush won't be applied in that case.
Since the setter uses a StaticResource to reference TabItemHotBorderBrush, you can't simply override this resource with your own brush. You will probably have to override the default template.
Related
I have several years of software development but I am brand new to WPF. I just started working with a new company that uses WPF. I am learning it on the job.
I have been looking all over for a solution to this problem. I have seen a couple of solutions but when I tried them they never worked. One solution I found here was this
<ComboBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#FFE89519" />
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey }" Color="#FFE89519" />
</ComboBox.Resources>
This did not work. In the comments of one of the answers with this solution the person said it does not work in Windows 8. Don't ya just love consistency. Apparently this is also true of Window 11.
Another solution said to create a MultiTrigger like this
<ComboBoxItem>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="IsMouseOver" Value="False"/>
<Condition Property="IsKeyboardFocused" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="MyComboBox" Value="#D1E8FF"/>
<Setter Property="BorderBrush" TargetName="MyComboBox" Value="#66A7E8"/>
</MultiTrigger>
</ComboBoxItem>
But this just generated errors in my code. It did not know how to deal with IsSelected, IsMouseOver or IsKeyboardFocused. I found that odd seeing that they are listed as properties of the ComboBox on Microsoft web site.
Does anyone have any other solutions that work in 2022 and not just 2002?
All I want to do is change the color of the highlight bar when using the Up and Down arrow keys on the ComboBox dropdown list.
Item templates are set by the Windows theme.
When you create your Custom Control, its default template is written to the Themes\Generic.xaml file. For the Aero theme, this would be Themes\Aero.xaml, and so on.
The reason that the solutions you found don't work is that they are for templates used in Windows 7 themes. Since Windows 8 (or 8.1 - I don't remember exactly) element templates have been changed.
For the current version of Windows 10, the ComboBoxItem template is:
<Style x:Key="FocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" StrokeDashArray="1 2" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" SnapsToDevicePixels="true" StrokeThickness="1"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewHover.Background" Color="#1F26A0DA"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewHover.Border" Color="#A826A0DA"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewSelected.Background" Color="#3D26A0DA"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewSelected.Border" Color="#FF26A0DA"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewSelectedHover.Background" Color="#2E0080FF"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewSelectedHover.Border" Color="#99006CD9"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewSelectedNoFocus.Background" Color="#3DDADADA"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewSelectedNoFocus.Border" Color="#FFDADADA"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewFocus.Border" Color="#FF26A0DA"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewHoverFocus.Background" Color="#5426A0DA"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewHoverFocus.Border" Color="#FF26A0DA"/>
<Style x:Key="ComboBoxItemContainerStyle" TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Padding" Value="4,1"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border x:Name="Bd" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="False"/>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="IsKeyboardFocused" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource ComboBoxItem.ItemsviewHover.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource ComboBoxItem.ItemsviewHover.Border}"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="IsMouseOver" Value="False"/>
<Condition Property="IsKeyboardFocused" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource ComboBoxItem.ItemsviewSelected.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource ComboBoxItem.ItemsviewSelected.Border}"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource ComboBoxItem.ItemsviewSelectedHover.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource ComboBoxItem.ItemsviewSelectedHover.Border}"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="IsMouseOver" Value="False"/>
<Condition Property="IsKeyboardFocused" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource ComboBoxItem.ItemsviewSelectedNoFocus.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource ComboBoxItem.ItemsviewSelectedNoFocus.Border}"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="False"/>
<Condition Property="IsMouseOver" Value="False"/>
<Condition Property="IsKeyboardFocused" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource ComboBoxItem.ItemsviewFocus.Border}"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="False"/>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="IsKeyboardFocused" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{StaticResource ComboBoxItem.ItemsviewHoverFocus.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource ComboBoxItem.ItemsviewHoverFocus.Border}"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
As you can see, the XAML highlight colors are set by the StaticResource keys, so they cannot be changed.
You can set a default style in App where you replace StaticResource with DynamicResource. And then you can change the keys as it was done in Windows 7.
<Application.Resources>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewSelectedHover.Background" Color="#2E0080FF"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewSelectedHover.Border" Color="#99006CD9"/>
<!--Others key-->
<!--In the style, you do not set the key, then it is applied to all elements-->
<Style TargetType="{x:Type ComboBoxItem}">
<!--XAML start style-->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource ComboBoxItem.ItemsviewSelectedHover.Background}"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="{DynamicResource ComboBoxItem.ItemsviewSelectedHover.Border}"/>
</MultiTrigger>
<!--XAML style completion-->
<ComboBox.Resources>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewSelectedHover.Background" Color="#FFE89519"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewSelectedHover.Border" Color="#FFE89519"/>
</ComboBox.Resources>
I am currently trying to change the Foreground / FontColor of my Combobox items when they are hovered by the mouse. I have tried to set the value outsidde the MultiTriggerCondition, in order to activate it, but it is still not working.
<SolidColorBrush x:Key="ComboBoxItem2.ItemsviewHover.Foreground" Color="White"/>
<SolidColorBrush x:Key="ComboBoxItem2.ItemsviewSelected.Foreground" Color="White"/>
<Style x:Key="ComboBoxItemStyle2" TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Padding" Value="4,1"/>
<Setter Property="Foreground" Value="Gainsboro"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.7" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="False"/>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="IsKeyboardFocused" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxItem2.ItemsviewHover.Foreground}"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You've got no contentpresenter in your template so you'll see no items at all when you drop it down.
And you can't see the white text on a default white background.
I've done this just as a style in a sample combo and a fixed colour of red:
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Padding" Value="4,1"/>
<Setter Property="Foreground" Value="Gainsboro"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.7" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="False"/>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="IsKeyboardFocused" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="TextElement.Foreground" Value="Red"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You can accomplish your goal with an ItemContainerStyle instead of a ControlTemplate.
The Template property provides all the XAML required to display the control. In your example above, you've essentially wiped out all that XAML and replaced it with a trigger.
An ItemContainerStyle however applies a style to each ComboBoxItem. You can then use style triggers to do your custom highlighting. Here is an example:
<ComboBox
...>
<ComboBox.ItemContainerStyle>
<Style BasedOn="{StaticResource {x:Type ComboBoxItem}}" TargetType="{x:Type ComboBoxItem}">
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsSelected}" Value="False" />
<Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsMouseOver}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter Property="TextElement.Foreground" Value="Red" />
</MultiDataTrigger>
</Style.Triggers>
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>
i have WPF application and ListView.
Into this ListView i am add my object that contains several properties: file name, id and progress (column with simple ProgressBar).
So this was my ItemContainerStyle before try to add some style changes like change the color when the mouse is over:
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border
BorderBrush="White"
BorderThickness="0"
Background="{TemplateBinding Background}">
<GridViewRowPresenter HorizontalAlignment="Stretch"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Width="Auto" Margin="0" Content="{TemplateBinding Content}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
Now this is my current state of my ItemContainerStyle after:
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Foreground" Value="White"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Padding" Value="4,1"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border
BorderBrush="White"
BorderThickness="0"
Background="{TemplateBinding Background}">
<GridViewRowPresenter HorizontalAlignment="Stretch"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Width="Auto" Margin="0" Content="{TemplateBinding Content}"/>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="Transparent"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="White"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="False"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="Transparent"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="Blue"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="True"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="Transparent"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="Blue"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So now what i want to change works fine but from any reason after add my object i can only see inside my ListView the item with only NameSpace.Classname and all my Object properties disappeared.
So what i doing wrong ?
This is how i am add my object via code behind:
public ObservableCollection<MyData> MyObjectsCollections{ get; set; }
lvFiles.ItemsSource = MyObjectsCollections;
And i also try:
lvFiles.Items.Add(...);
Edit:
This is all my ListView code:
<ListView Name="lvFiles" Margin="16,453,0,40" Background="Transparent" BorderThickness="0"
ItemsSource="{Binding dataList}" >
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Foreground" Value="White"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Padding" Value="4,1"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="Transparent"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="White"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="False"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="Transparent"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="Blue"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="True"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="Transparent"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="#FF15669E"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.Resources>
<DataTemplate x:Key="MyDataTemplate">
<Grid Margin="-6">
<ProgressBar Name="prog" Maximum="100" Value="{Binding Progress}"
Width="{Binding Path=Width, ElementName=ProgressCell}"
Height="16" Margin="0" Background="#FFD3D0D0" Style="{StaticResource CustomProgressBar}"/>
<TextBlock Text="{Binding Path=Value, ElementName=prog, StringFormat={}{0}%}" VerticalAlignment="Center"
HorizontalAlignment="Center" FontSize="11" Foreground="Black" />
</Grid>
</DataTemplate>
<ControlTemplate x:Key="ProgressBarTemplate">
<Label HorizontalAlignment="Center" VerticalAlignment="Center" />
</ControlTemplate>
</ListView.Resources>
<ListView.View>
<GridView ColumnHeaderContainerStyle="{StaticResource ListViewHeaderStyle}">
<!-- file name column -->
<GridViewColumn Width="500" Header="File name" DisplayMemberBinding="{Binding FileName}" />
<!-- duration column -->
<GridViewColumn Width="60" Header="Duration" DisplayMemberBinding="{Binding Duration}" />
<!-- packets column -->
<GridViewColumn Width="80" Header="Packets" DisplayMemberBinding="{Binding Packets}" />
<!-- progress column -->
<GridViewColumn x:Name="ProgressCell" Width="50" Header="Progress" CellTemplate="{StaticResource MyDataTemplate}" />
</GridView>
</ListView.View>
The problem is not the triggers, it is the fact you are setting the ListViewItem appearance via a ControlTemplate - but then trying to set the ListView.View as a GridView - which requires data binding.
It looks like you're trying to remove the mouse-over visual effects and set a blue border visual on selection.
You can achieve this removing your ListViewItem template setter and moving the triggers to the ListViewItem level:
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Padding" Value="4,1"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="White"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="False"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Blue"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="True"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="#FF15669E"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
I want to ask the same question as Coxy: I want to show number of unread items on top of the image of an RibbonButton.
Example:
Can I do it without modifying a copy of the entire template? The reason that I am asking the same question again is that I am using the Microsoft Ribbon control and the solution given from Coxy question, can only be applied to the Ribbon control from Telerik.
I'm adding this in an answer because it's too long to put in a comment.
I went to the Microsoft Download site & downloaded the Ribbon control's source from here. The complete template with all of the triggers are in there. I won't paste any of it in here as it's copyrighted, but anybody can download it and install it. I think.
The installer installs a zip file with the source in the C:\Program Files (x86)\MicrosoftRibbonForWPF folder. I extracted the zip file into a VS project folder.
The template I'm looking at is in the v4.0\Themes\Generic.xaml file.
Those bad triggers do indeed reference the same property. It's the HighContrast property of the SystemParameters2.Current static object.
You can probably put together a custom template for your application that does not even use those triggers. At least, that's what I would do.
Martin Andersen is right: it is currently not possible to create a ribbon button in XAML, right-click it in the Document Outline window, select Edit template and create a copy of it. VS will display the following error message and no template is generated:
If you do the same thing in Blend, the same error message occurs, but a control template for the ribbon button will actually be generated. Unfortunately, this template is erroneous. It contains several triggers whose Binding bind to (0). Here is an example of such an erroneous trigger.
<DataTrigger Binding="{Binding (0)}" Value="True">
<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.MenuTextBrushKey}}"/>
<Setter Property="Background" TargetName="OuterBorder" Value="Transparent"/>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="Transparent"/>
<Setter Property="CornerRadius" TargetName="OuterBorder" Value="0"/>
</DataTrigger>
This issue was also reported to Microsoft: https://connect.microsoft.com/VisualStudio/feedback/details/794891/problems-styling-wpf-4-5-ribbon-control
They provide the default control templates as attachments to this issue but unfortunately I cannot download them. The resulting file is always empty (zero kilobyte). Can anybody of you download it?
Proposed Solution
My current advise is to encapsulate the button within another custom control that derives from ContentControl and handles all the notification bubble. You then can set the button as the content of this new control. I'm currently working on an example - I will update this post when I find something useful.
The erroneous control template
Here is the complete erroneous control template of RibbonButton:
<ControlTemplate x:Key="RibbonButtonWithNotificationStyle" TargetType="{x:Type RibbonButton}">
<Border x:Name="OuterBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}" SnapsToDevicePixels="True">
<Border x:Name="InnerBorder" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" Padding="{TemplateBinding Padding}">
<StackPanel x:Name="StackPanel">
<Image x:Name="PART_Image" RenderOptions.BitmapScalingMode="NearestNeighbor" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Height="32" Margin="{DynamicResource {ComponentResourceKey ResourceId=LargeImageMargin, TypeInTargetAssembly={x:Type Ribbon}}}" Source="{TemplateBinding LargeImageSource}" VerticalAlignment="Center" Width="32"/>
<Grid x:Name="Grid" HorizontalAlignment="Center" VerticalAlignment="Center">
<RibbonTwoLineText x:Name="TwoLineText" HorizontalAlignment="Center" LineStackingStrategy="BlockLineHeight" LineHeight="13" Margin="1,1,1,0" TextAlignment="Center" Text="{TemplateBinding Label}" VerticalAlignment="Top"/>
</Grid>
</StackPanel>
</Border>
</Border>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding ControlSizeDefinition.ImageSize, RelativeSource={RelativeSource Self}}" Value="Large">
<Setter Property="MinWidth" Value="44"/>
<Setter Property="Height" Value="66"/>
<Setter Property="MinHeight" TargetName="Grid" Value="26"/>
<Setter Property="RibbonTwoLineText.HasTwoLines" TargetName="TwoLineText" Value="True"/>
</DataTrigger>
<DataTrigger Binding="{Binding ControlSizeDefinition.ImageSize, RelativeSource={RelativeSource Self}}" Value="Small">
<Setter Property="Height" Value="22"/>
<Setter Property="Margin" TargetName="PART_Image" Value="1,0"/>
<Setter Property="Source" TargetName="PART_Image" Value="{Binding SmallImageSource, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="Width" TargetName="PART_Image" Value="16"/>
<Setter Property="Height" TargetName="PART_Image" Value="16"/>
<Setter Property="HorizontalAlignment" TargetName="TwoLineText" Value="Left"/>
<Setter Property="Margin" TargetName="TwoLineText" Value="1"/>
<Setter Property="Orientation" TargetName="StackPanel" Value="Horizontal"/>
</DataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding ControlSizeDefinition.ImageSize, RelativeSource={RelativeSource Self}}" Value="Small"/>
<Condition Binding="{Binding IsInQuickAccessToolBar, RelativeSource={RelativeSource Self}}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="Height" Value="Auto"/>
</MultiDataTrigger>
<DataTrigger Binding="{Binding ControlSizeDefinition.IsLabelVisible, RelativeSource={RelativeSource Self}}" Value="False">
<Setter Property="Visibility" TargetName="TwoLineText" Value="Collapsed"/>
</DataTrigger>
<DataTrigger Binding="{Binding ControlSizeDefinition.ImageSize, RelativeSource={RelativeSource Self}}" Value="Collapsed">
<Setter Property="Visibility" TargetName="PART_Image" Value="Collapsed"/>
</DataTrigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="OuterBorder" Value="{Binding MouseOverBackground, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{Binding MouseOverBorderBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="BorderBrush" TargetName="InnerBorder" Value="#80FFFFFF"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter Property="Background" TargetName="OuterBorder" Value="{Binding FocusedBackground, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{Binding FocusedBorderBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="BorderBrush" TargetName="InnerBorder" Value="#80FFFFFF"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="OuterBorder" Value="{Binding PressedBackground, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{Binding PressedBorderBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="BorderBrush" TargetName="InnerBorder" Value="Transparent"/>
</Trigger>
<Trigger Property="IsInControlGroup" Value="True">
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{Binding Ribbon.BorderBrush, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="BorderThickness" TargetName="OuterBorder" Value="0,0,1,0"/>
<Setter Property="CornerRadius" TargetName="OuterBorder" Value="0"/>
<Setter Property="CornerRadius" TargetName="InnerBorder" Value="0"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="PART_Image" Value="0.5"/>
<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="#FF9E9E9E"/>
</Trigger>
<DataTrigger Binding="{Binding (0)}" Value="True">
<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.MenuTextBrushKey}}"/>
<Setter Property="Background" TargetName="OuterBorder" Value="Transparent"/>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="Transparent"/>
<Setter Property="CornerRadius" TargetName="OuterBorder" Value="0"/>
</DataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource TemplatedParent}}" Value="True"/>
<Condition Binding="{Binding (0)}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource TemplatedParent}}" Value="True"/>
<Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="False"/>
<Condition Binding="{Binding (0)}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsDropDownOpen, FallbackValue=false, RelativeSource={RelativeSource TemplatedParent}}" Value="True"/>
<Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="False"/>
<Condition Binding="{Binding (0)}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True"/>
<Condition Binding="{Binding (0)}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="Background" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}"/>
<Setter Property="CornerRadius" TargetName="OuterBorder" Value="0"/>
<Setter Property="BorderBrush" TargetName="InnerBorder" Value="Transparent"/>
<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsKeyboardFocused, RelativeSource={RelativeSource Self}}" Value="True"/>
<Condition Binding="{Binding (0)}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="Background" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}"/>
<Setter Property="CornerRadius" TargetName="OuterBorder" Value="0"/>
<Setter Property="BorderBrush" TargetName="InnerBorder" Value="Transparent"/>
<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsPressed, RelativeSource={RelativeSource Self}}" Value="True"/>
<Condition Binding="{Binding (0)}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="Background" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/>
<Setter Property="CornerRadius" TargetName="OuterBorder" Value="0"/>
<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsInControlGroup, RelativeSource={RelativeSource Self}}" Value="True"/>
<Condition Binding="{Binding (0)}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="BorderBrush" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.ControlLightLightBrushKey}}"/>
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="False"/>
<Condition Binding="{Binding (0)}" Value="True"/>
</MultiDataTrigger.Conditions>
<Setter Property="TextElement.Foreground" TargetName="OuterBorder" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</MultiDataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Is there a simple way to set the background brush of all inactive tabs in a WPF TabControl? I want to emulate the look of VS 2010 on a TabControl--the background color of the control's inactive tabs should match the background color of the window in which the TabControl is sited, so that you see only the text of the tab, and not the tab itself.
I know it will take a ControlTemplate to do it; I am trying to figure out what to put in the control template. Put another way, How do I specify that a particular brush should be applied to all inactive tabs? Thanks for your help.
Here is the solution: As Stephen said, add a trigger to the control template. It's actually a property trigger, and it only needs to be set for the inactive state. So we set the trigger for IsSelected = false. We target the border (Bd in the default control template for a TabItem) of the TabItem and set its Background to the color we want (I use RelativeSource FindAncestor to match the grid on which the tab is placed). Then we set Bd's BorderThickness to 0, and we're done:
<Trigger Property="IsSelected" Value="false">
<Setter Property="Background" TargetName="Bd" Value="{Binding Path=Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}}}"/>
<Setter Property="BorderThickness" TargetName="Bd" Value="0" />
</Trigger>
I put the trigger in the default template, just below the IsSelected = true trigger.
Note that the trigger is hard-coded to search for a Grid ancestor as the source of the inactive tab background color (AncestorType={x:Type Grid}). That's because I set my view background in the Grid that I use as my layout root. You will need to change the AncestorType if you use a different layout root control, or if you set your view background color elsewhere (such as in the <Window> tag).
BTW, you can also use the IsSelected = true trigger to change the Background of the active tab header from white, to match the TabControl background color:
<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>
For those who like this visual representation, here is the complete control template. It will be applied automatically to any TabControl within its scope. Simply add this markup to the section of your XAML window (or import it from a ResourceDictionary), and your TabControl will get the VS 2010 look. Remember to change the FindAncestor proeprty so that the template will find the correct background color.
<!-- Styles for FS TabItem Control Template-->
<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"/>
<!-- FS TabItem Control Template-->
<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>
<Trigger Property="IsSelected" Value="false">
<Setter Property="Background" TargetName="Bd" Value="{Binding Path=Background, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}}}"/>
<Setter Property="BorderThickness" TargetName="Bd" Value="0" />
</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>
Yes. Define the brushes, and then in your style for the tab, have a trigger for its active state, and when it is ACTIVE set it to one brush, and when the trigger fires because it is inactive set it to the other.
This can be done entirely in the XAML.