WPF - ListView Item on Selected change Font size - wpf

this is my code:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ListBox ItemsSource="{Binding Persons}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border Background="White" BorderThickness="5" Name="Bd">
<Border.Style>
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="White" />
</Style>
</Border.Style>
<StackPanel Orientation="Horizontal" >
<TextBlock Margin="10" Name="t1" Text="{Binding Name}"/>
<TextBlock Margin="10" Text="{Binding Age}"/>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bd" Property="BorderBrush" Value="HotPink" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</Grid>
And this is how MouseOver looks like:
Now I want the Mouse over To enlarge the text, how can I do that ?

Just do this?
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Bd" Property="BorderBrush" Value="HotPink" />
<Setter TargetName="t1" Property="FontSize" Value="72" />
</Trigger>
</ControlTemplate.Triggers>
This will enlarge the first textblock - you need to name the second one and make another setter with the new name in the TargetName property to enlarge both.

Related

ComboxBox Item mouse over color not working

I have a ComboBox with following xaml. Problem is I want the ComboxItem's background to be green when mouse over occurs but it dosen't work. I tried solution posted here ComboBox item color but it dosen't help.
I also tried editing the ComBoxItem's template like in the commented code. But none of the solutions work. Please help.
In the window resources I have the following items defined
<lib:MetroWindow.Resources>
<converter:EnumToVisibilityConverter
x:Key="EnumToVisibility"></converter:EnumToVisibilityConverter>
<x:Array
Type="{x:Type sys:String}"
x:Key="ImageFormatsArray">
<sys:String>Bmp</sys:String>
<sys:String>Png</sys:String>
<sys:String>Jpg</sys:String>
<sys:String>Tif</sys:String>
<sys:String>Gif</sys:String>
</x:Array>
</lib:MetroWindow.Resources>
<ComboBox
x:Name="CmbItems"
HorizontalAlignment="Left"
SelectedIndex="0"
ItemsSource="{StaticResource ImageFormatsArray}"
SelectedValue="{Binding SelectedImageFormat}">
<ComboBox.Resources>
<SolidColorBrush
x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Green" />
</ComboBox.Resources>
<!--<ComboBox.ItemContainerStyle>
<Style
TargetType="{x:Type ComboBoxItem}">
<Setter
Property="Background"
Value="{StaticResource ControlsDarkBackgroundBrush}"></Setter>
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type ComboBoxItem}">
<ControlTemplate.Triggers>
<Trigger
Property="IsMouseOver"
Value="true">
<Setter
Property="Background"
Value="{StaticResource ControlsDarkBackgroundBrush}"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ComboBox.ItemContainerStyle>-->
<!--<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock
Text="{Binding}">
<TextBlock.Style>
<Style
TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger
Property="IsMouseOver"
Value="true">
<Setter
Property="Background"
Value="Black"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</DataTemplate>
</ComboBox.ItemTemplate>-->
</ComboBox>
</StackPanel>
here is a working example, take what you need
<ComboBox.ItemContainerStyle>
<Style TargetType="{x:Type ComboBoxItem}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
<StackPanel Background="{TemplateBinding Background}" >
<ContentPresenter></ContentPresenter>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ComboBox.ItemContainerStyle>
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"></TextBlock>
</DataTemplate>
</ComboBox.ItemTemplate>

How to align the first TabItem with the left border of its TabControl?

I'm working on a custom TabControl for my C#-WPF-application. Basically, everything I want works just fine. Except for one litte thing that really annoys me: The first TabItem of the TabControl is indentet 2 pixels and therefore won't align with the left border of the TabControl. Unfortunately I can't yet post pictures, so I hope you guys get what I mean...
So, is there any possibility to get the first TabItem aligned with its TabControl? Maybe by somehow setting its position?
Here's the entire XAML-code:
<UserControl x:Class="DocumentationOfXmlInterfaces.CentralTabControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<TabControl
Name="MyTabcontrol"
BorderBrush="Navy"
BorderThickness="2"
ItemsSource="{Binding}"
SelectionChanged="MyTabcontrol_SelectionChanged"
>
<TabControl.Resources>
<Style TargetType="TabPanel">
<Setter Property="HorizontalAlignment" Value="Left"/>
</Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
ClipToBounds="True"
>
<Border
x:Name="MyBorder"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderBrush="Navy"
BorderThickness="1"
>
<DockPanel
Name="MyDockpanel_Content"
>
<ContentPresenter
x:Name="MyContentPresenter"
HorizontalAlignment="Center"
Content="{TemplateBinding Content}"
/>
</DockPanel>
</Border>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger
Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabItem}}, Path=IsSelected}"
Value="False"
>
<Setter
TargetName="MyBorder"
Property="Border.BorderBrush"
Value="RoyalBlue"
/>
</DataTrigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter
TargetName="MyBorder"
Property="Border.BorderBrush"
Value="White"
/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="TabHeader" DataType="TabItem">
<DockPanel>
<Button
Name="MyButton_CloseTab"
DockPanel.Dock="Right"
Margin="10,1,1,0"
Click="MyButton_Click"
CommandParameter="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Name}"
>
<Image Name="MyImage_Button" Source="Icons/Close.png" Height="12" Width="12"/>
</Button>
<TextBlock Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type TabItem}}, Path=Header}"/>
</DockPanel>
<DataTemplate.Triggers>
<DataTrigger
Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabItem}}, Path=IsSelected}"
Value="False"
>
<Setter
TargetName="MyButton_CloseTab"
Property="Visibility"
Value="Hidden"
/>
<Setter
TargetName="MyImage_Button"
Property="Source"
Value="Icons/Close2.png"
/>
<Setter
TargetName="MyImage_Button"
Property="Height"
Value="12"
/>
<Setter
TargetName="MyImage_Button"
Property="Width"
Value="12"
/>
</DataTrigger>
<DataTrigger
Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type TabItem}}, Path=IsMouseOver}"
Value="True"
>
<Setter
TargetName="MyButton_CloseTab"
Property="Visibility"
Value="Visible"
/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border
x:Name="MyBorder"
BorderBrush="Navy"
BorderThickness="1,1,1,0"
>
<Grid Name="Panel">
<ContentPresenter
x:Name="ContentSite"
ContentSource="Header"
Margin="5,0,0,0"
/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Panel" Property="Background" Value="Navy"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Panel" Property="Background" Value="RoyalBlue"/>
<Setter TargetName="MyBorder" Property="BorderBrush" Value="RoyalBlue"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="MyBorder" Property="BorderBrush" Value="Navy"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="Grid">
<Setter Property="VerticalAlignment" Value="Stretch"></Setter>
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
</Style>
</TabControl.Resources>
</TabControl>
I'd really appreciate your help!
Thanks! :)
Your problem here is that the headers TabPanel inside the TabControl template has its Margin set explicitly, and your Style won't be able to override it.
You may need to modify the whole TabControl's Template to change the value of that Margin.
So maybe it'd be easier to just do the negative margin trick :P
In the same mindset as this answer (Change GroupBox Header location), you could have a negative left margin on your tab item. Like this: Margin="-2,0,0,0"

How to change the background of tabitem by using trigger in xaml?

Here is my Xaml code
<Window.Resources>
<Style x:Key="SimpleTabControl" TargetType="{x:Type TabItem}">
<!--<Setter Property = "TabStripPlacement" Value = "Top"/>-->
<Setter Property = "Background" Value= "Gray"/>
<Setter Property="FontSize" Value="15"/>
<Setter Property="Width" Value="200"/>
<Setter Property="Height" Value="40"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="IsSelected" Value="False"/>
<Setter Property="Margin" Value="3,0"/>
<Style.Triggers>
<Trigger Property="TabItem.IsMouseOver" Value="true">
<Setter Property="Background" Value="LightGreen"></Setter>
</Trigger>
</Style.Triggers>
</Style>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type TabPanel}">
<Setter Property="Background" Value="LightGreen"></Setter>
</Style>
</Window.Resources>
<Grid Background="White" Height="1000" Width="auto" IsEnabled="True">
<TabControl Name="MainTab" Background="LightGray" SelectionChanged="MainTab_SelectionChanged">
<TabControl.Resources>
<Style TargetType="{x:Type TabPanel}">
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Background" Value="White"/>
</Style>
</TabControl.Resources>
<TabItem Header="Input" x:Name="tabAlert1" Style="{StaticResource SimpleTabControl}" MouseEnter="TabItem_Enter" MouseLeave="TabItem_Leave" MouseDoubleClick="TabItem_Click" >
<!--<TabItem.Header>
<Border Padding="0,0">
<StackPanel Orientation="Horizontal" Background="Gray" HorizontalAlignment="Left" Width="200" Height="40" Margin="0,0">
<TextBlock Text="Input" Foreground="White" FontSize="15" TextAlignment="Right"/>
</StackPanel>
</Border>
</TabItem.Header>-->
<Label Content="Content goes here..." />
</TabItem>
<TabItem Header="Analysis" x:Name="tabAlert2" Style="{StaticResource SimpleTabControl}" />
<TabItem Header="Action???" x:Name="tabAlert3" Style="{StaticResource SimpleTabControl}"/>
</TabControl>
</Grid>
I don't know for some reason the trigger for isMouseOver is not triggering the back ground color change Change for Tab Item.
I have also tried the c# , code behind way , but with no success, but if change the foreground property, it works, but not he Background property.
Here is my C# Way
private void TabItem_Enter(object sender, System.Windows.Input.MouseEventArgs e)
{
//var tabItem = sender as TabItem;
//tabAlert2.Background = Brushes.Red;
//tabItem.Background = Brushes.Green;
var tabItem = sender as TabItem;
tabItem.Background = new SolidColorBrush(Colors.Gray);
}
I have Bound the mouse enter event to tab Item.this is very basic but am frustrated this not working?Any help much appreciated.
I'm not sure but I think you want to change the color of the Header?
If so, you can change the header template, try this code and if it works for you, add your other properties.
<Window.Resources>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid Name="Panel">
<Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Gainsboro" CornerRadius="4,4,0,0" Margin="2,0">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="10,2"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background" Value="LightGreen"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter TargetName="Border" Property="Background" Value="White" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="LightBlue"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<TabControl Name="MainTab">
<TabItem Header="Input" x:Name="tabAlert1"/>
<TabItem Header="Analysis" x:Name="tabAlert2"/>
<TabItem Header="Action???" x:Name="tabAlert3"/>
</TabControl>
</Grid>
(Mouse is over second tab)

WPF TextBox with background color and path (image)

I've got the below style for TextBoxes in my WPF app:
<!-- http://www.thexamlproject.com/ -->
<Style x:Key="LockIcon" TargetType="Path">
<Setter Property="Height" Value="16" />
<Setter Property="Width" Value="16" />
<Setter Property="Stretch" Value="Uniform" />
<Setter Property="Data"
Value="F1 M 80.6667,55.1172L 80.6667,35.3333C 80.6667,15.851 64.815,3.05176e-005 45.3333,3.05176e-005C 25.8509,3.05176e-005 9.99998,15.851 9.99998,35.3333L 9.99998,55.1172L 0,56L 0,129.333L 45.3333,133.333L 90.6667,129.333L 90.6667,56L 80.6667,55.1172 Z M 20.6667,54.1771L 20.6667,35.3333C 20.6667,21.7318 31.7317,10.6667 45.3333,10.6667C 58.9349,10.6667 70,21.7318 70,35.3333L 70,54.1771L 45.3333,52L 20.6667,54.1771 Z " />
</Style>
<VisualBrush x:Key="LockBrush" Stretch="None" AlignmentX="Left">
<VisualBrush.Visual>
<Border BorderThickness="4" BorderBrush="Transparent">
<Path Style="{StaticResource LockIcon}" Fill="Red" />
</Border>
</VisualBrush.Visual>
</VisualBrush>
<Style x:Key="{x:Type TextBox}" TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" Value="{StaticResource LockBrush}"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Padding" Value="22,4"/>
</Trigger>
</Style.Triggers>
</Style>
I can't seem to find a good way to apply this VisualBrush image AND a background color to the entire TextBox. I either get strange stretching issues or simply cannot fill the whole TextBox (controls stretch and are different widths depending on the rendering view).
Ideas?
Instead of a VisualBrush use a Control Template.
XAML
<Style x:Key="LockIcon"
TargetType="Path">
<Setter Property="Height"
Value="16" />
<Setter Property="Width"
Value="16" />
<Setter Property="Stretch"
Value="Uniform" />
<Setter Property="Data"
Value="F1 M 80.6667,55.1172L 80.6667,35.3333C 80.6667,15.851 64.815,3.05176e-005 45.3333,3.05176e-005C 25.8509,3.05176e-005 9.99998,15.851 9.99998,35.3333L 9.99998,55.1172L 0,56L 0,129.333L 45.3333,133.333L 90.6667,129.333L 90.6667,56L 80.6667,55.1172 Z M 20.6667,54.1771L 20.6667,35.3333C 20.6667,21.7318 31.7317,10.6667 45.3333,10.6667C 58.9349,10.6667 70,21.7318 70,35.3333L 70,54.1771L 45.3333,52L 20.6667,54.1771 Z " />
</Style>
<Style TargetType='TextBox'
x:Key='WithLockIcon'>
<Setter Property='MinHeight'
Value='26' />
<Setter Property="Padding"
Value="22,4" />
<Style.Triggers>
<Trigger Property="IsEnabled"
Value="false">
<!-- Use a control template instead of
Background property -->
<!--<Setter Property="Background"
Value="{StaticResource LockBrush}" />-->
<!--<Setter Property="Padding"
Value="22,4" />-->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<!-- Set background here!-->
<Border BorderThickness="4"
BorderBrush="Transparent"
HorizontalAlignment='Stretch'>
<StackPanel Background='#dddddd'
Orientation='Horizontal'>
<Path Style="{StaticResource LockIcon}"
Fill="Red" />
<ScrollViewer Margin="0"
x:Name="PART_ContentHost">
</ScrollViewer>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel>
<TextBox x:Name='textbox1'
Text='Example Text'
IsEnabled='False'
Style='{StaticResource WithLockIcon}' />
<ToggleButton Checked='ToggleButton_Checked'
Unchecked='ToggleButton_Unchecked'
Content='Change State' />
</StackPanel>
I've achieved a reasonably close simulation in a similar situation.
<Window x:Class="VisualBrushMargins.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525"
Background="{DynamicResource WindowBackground}">
<Window.Resources>
<VisualBrush x:Key="WindowBackground" Stretch="UniformToFill">
<VisualBrush.Visual>
<Grid>
<Border Background="DarkGreen" Width="250" Height="150" />
<Canvas Height="130" Width="180" Background="DarkBlue">
<Path>
<!-- path goes here -->
</Path>
<Ellipse Width="100" Height="100" Stroke="Red" />
</Canvas>
</Grid>
</VisualBrush.Visual>
</VisualBrush>
</Window.Resources>
<Grid/>
</Window>
The path fits the canvas. Sizing the canvas and the border differently allows to add a "margin" to the brush -- note how it behaves on window resize. (Canvas is colored blue for illustrational purpose -- actually it's supposed to be transparent)

Changing the text color of the selected tabItem in a TabControl?

In the second code there is a textBlock with the text "Mina övningar"
How can I change the text color to black when the tabItem is selected?
style:
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" Margin="0,0,0,13" CornerRadius="5" >
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Top" HorizontalAlignment="Center" ContentSource="Header" Margin="9"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Black"/>
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFF9F7FD" Offset="0.432" />
<GradientStop Color="#FFECF7FD" Offset="0.433" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="ContentSite" Property="Margin" Value="9,12,9,9" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Background" Value="Transparent" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
tabitem:
<TabItem Background="White">
<TabItem.Header>
<StackPanel Orientation="Vertical">
<Image Height="32" Source="/Glosboken;component/Images/library bookmarked.png" />
<TextBlock Text="Mina övningar" Margin="0,0,0,0" VerticalAlignment="Center" Foreground="White" />
</StackPanel>
</TabItem.Header>
<Grid>
<ListBox Height="216" Name="bookslist" VerticalAlignment="Top" Background="White" BorderBrush="White" Foreground="White" SelectedIndex="0" Margin="0,0,129,0" />
</Grid>
</TabItem>
One solution is to use a separate style for this situation:
<Style x:Key="TabItemText" TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="True">
<Setter Property="Foreground" Value="Black"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="False">
<Setter Property="Foreground" Value="White"/>
</DataTrigger>
</Style.Triggers>
</Style>
and then replace:
Foreground="White"
with:
Style="{StaticResource TabItemText}"
in the TextBlock.
I did this by naming the ContentPresenter and targeting it in the trigger.
This way it keeps everything for the TabItem style in one place.
Complete Example:
<Window x:Class="TabControlText.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style x:Key="TabItemStyle1" TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border x:Name="Border" BorderThickness="1,1,1,0" CornerRadius="5,5,0,0"
Padding="25,5,25,5" Margin="0,0,0,0" BorderBrush="Gainsboro">
<ContentPresenter x:Name="ContentSite" ContentSource="Header" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="TextElement.Foreground" TargetName="ContentSite" Value="White"/>
<Setter TargetName="Border" Property="Background" Value="Black"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="TextElement.Foreground" TargetName="ContentSite" Value="Black"/>
<Setter TargetName="Border" Property="Background" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<TabControl>
<TabItem Header="Tab 1" Style="{DynamicResource TabItemStyle1}" />
<TabItem Header="Tab 2" Style="{DynamicResource TabItemStyle1}" />
<TabItem Header="Tab 3" Style="{DynamicResource TabItemStyle1}" />
<TabItem Header="Tab 4" Style="{DynamicResource TabItemStyle1}" />
</TabControl>
</Grid>
I extended Scott Solmer's great code by making it a resource dictionary because I needed this TabItem styling application wide.
So add new TabItemStyles.xaml under the Resources Dictionary folder which was called "Resources" :
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="ColoredTabsStyle" TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Border x:Name="Border" BorderThickness="1,1,1,0" CornerRadius="5,5,0,0"
Padding="25,5,25,5" Margin="0,0,0,0" BorderBrush="Gainsboro">
<ContentPresenter x:Name="ContentSite" ContentSource="Header" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="TextElement.Foreground" TargetName="ContentSite" Value="White" />
<Setter TargetName="Border" Property="Background" Value="Black" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="TextElement.Foreground" TargetName="ContentSite" Value="Black" />
<Setter TargetName="Border" Property="Background" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I changed my app.xaml to know about the new resource dictionary. WARNING - adjust the source and component locations for your application:
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/TruPredict;component/Resources/TabItemStyles.xaml" />
</ResourceDictionary.MergedDictionaries>
Then I used style in the actual screen everywhere in the application I needed. Unlike Scott, I prefer using StaticResource rather than DynamicResource unless I have to.:
<TabControl>
<TabItem Header="Tab1" Style="{StaticResource ColoredTabsStyle}">
<TabItem Header="Tab2" Style="{StaticResource ColoredTabsStyle}">
<TabItem Header="Tab3" Style="{StaticResource ColoredTabsStyle}">
<TabControl>

Resources