Above is an image of my listboxitem.
I am wondering whether it is possible to remove the rectangle that surronds the ellipse.
Padding and BorderThicknes are 0 already.
I use this styling:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem"> ...
<Style.Triggers>
<DataTrigger Binding="{Binding Data}" Value="ellipse">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<Ellipse Fill="{Binding Brush}" Stroke="Black"/>
<TextBlock Text="{Binding Int}" />
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
I tried this:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
Then the items are not selectable any more.
You should create control template for ListBoxItem. Then you can change background of ListBoxItem.
<Window.Resources>
<Style x:Key="{x:Type ListBoxItem}"
TargetType="ListBoxItem">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="Border"
BorderThickness="2"
Padding="2"
SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected"
Value="true">
<Setter TargetName="Border"
Property="Background"
Value="{x:Static Brushes.Transparent}" />
<Setter TargetName="Border"
Property="BorderBrush"
Value="{x:Static Brushes.WhiteSmoke}" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Foreground"
Value="{x:Static Brushes.Transparent}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ListBox Margin="5" ItemsSource="{Binding Path=Datas}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Ellipse Width="30"
Height="30"
Fill="{Binding Path=EllipseBrush}"/>
<TextBlock Text="{Binding Path=Number}"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Sample you can download here
It seems to me that the 'Rectangle' that you're talking about is just the ListBoxItem.Background. It also looks like the default selection Color used in the ListBox control. If that's what it is, you can easily hide this by setting some property values in a local Resources section. Try adding these to your ListBox.Resources section:
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlTextBrushKey}" Color="Black" />
</Style.Resources>
Related
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>
I have a TabControl that displays a different Tab header foreground and background for a selected tab. But I would like to set a general foreground color for TextBlocks within the tab item content control. What is happening instead is all the headers are getting the general TextBlock foreground color and the tab control is not changing the foreground color for the header when the tab is selected.
So in my main window I have:
<Grid>
<TabControl Style="{StaticResource TabControlStyle}">
<TabItem Header="Tab 1" IsSelected="True">
<TextBlock Text="Text in Tab 1"/>
</TabItem>
<TabItem Header="Tab 2">
<TextBlock Text="Text in Tab 2"/>
</TabItem>
</TabControl>
</Grid>
and in my resource file I have defined my colors and content templates:
<Color x:Key="DarkGray">#404040</Color>
<Color x:Key="DarkGreen">#3A5038</Color>
<Color x:Key="ForegroundColor">#FFF1F1F1</Color>
<SolidColorBrush x:Key="DarkGrayBrush"
Color="{StaticResource DarkGray}" />
<SolidColorBrush x:Key="ForegroundColorBrush"
Color="{StaticResource ForegroundColor}" />
<SolidColorBrush x:Key="DarkGreenBrush"
Color="{StaticResource DarkGreen}" />
<Style TargetType="TextBlock">
<Setter Property="Foreground"
Value="{StaticResource DarkGrayBrush}" />
</Style>
<Style x:Key="TabControlStyle"
TargetType="TabControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TabPanel Grid.Row="0"
Background="{TemplateBinding Background}"
IsItemsHost="true" />
<ContentPresenter Grid.Row="1"
ContentSource="SelectedContent" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Resources>
<Style TargetType="TabItem">
<Setter Property="BorderThickness"
Value="0" />
<Setter Property="FontSize"
Value="16" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Border>
<ContentPresenter Content="{TemplateBinding Content}" />
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Border"
Width="145"
Margin="10"
Padding="0"
BorderThickness="0"
CornerRadius="20">
<ContentPresenter x:Name="ContentSite"
Margin="10"
HorizontalAlignment="Center"
VerticalAlignment="Center"
ContentSource="Header" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected"
Value="True">
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource DarkGreenBrush}" />
<Setter Property="Foreground"
Value="{StaticResource ForegroundColorBrush}" />
</Trigger>
<Trigger Property="IsSelected"
Value="False">
<Setter Property="Foreground"
Value="{StaticResource DarkGrayBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Style.Resources>
</Style>
I am targeting .NET 4.5 on a Windows 10 operating system.
Thanks, Will
Set the TextBlock.Foreground property of the ContentPresenter:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Border"
Width="145"
Margin="10"
Padding="0"
BorderThickness="0"
CornerRadius="20">
<ContentPresenter x:Name="ContentSite"
Margin="10"
HorizontalAlignment="Center"
VerticalAlignment="Center"
ContentSource="Header" TextBlock.Foreground="{StaticResource DarkGrayBrush}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource DarkGreenBrush}" />
<Setter TargetName="ContentSite" Property="TextBlock.Foreground"
Value="{StaticResource ForegroundColorBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
I have got a button with a ControlTemplate, this ControlTemplate has 2 different Control's with different background colours. I want to be able to change these colours using a new style which is BasedOn this main style.
Read the code and it should make more sense. For some reason though the new Style.Resources are not changing the background colours, they are still using the two defined in the main style.
How can I fix this?
Style BasedOn="{StaticResource ButtonIcoSmall}" TargetType="Button" x:Key="greenSmallButton">
<Style.Resources>
<SolidColorBrush Color="#FF8AB71C" x:Key="colour1" />
<SolidColorBrush Color="#FF72A000" x:Key="colour2" />
</Style.Resources>
</Style>
<Style BasedOn="{StaticResource ButtonIcoSmall}" TargetType="Button" x:Key="greySmallButton">
<Style.Resources>
<SolidColorBrush Color="#FF434953" x:Key="colour1" />
<SolidColorBrush Color="#FF22252b" x:Key="colour2" />
</Style.Resources>
</Style>
<Style x:Key="ButtonIcoSmall" TargetType="Button">
<Style.Resources>
<SolidColorBrush Color="#FF434953" x:Key="colour1" />
<SolidColorBrush Color="#FF22252b" x:Key="colour2" />
</Style.Resources>
<Setter Property="FontFamily" Value="{StaticResource FontAwesome}" />
<Setter Property="FontSize" Value="16" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Padding" Value="8" />
<Setter Property="Margin" Value="6" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="TextOptions.TextFormattingMode" Value="Display" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<WrapPanel>
<Border Grid.Column="0"
CornerRadius="5 0 0 5"
BorderThickness="0"
Background="{StaticResource colour1}"
Name="buttonIcon">
<WrapPanel>
<ContentPresenter Grid.Column="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="{TemplateBinding Margin}" />
</WrapPanel>
</Border>
<Border Grid.Column="0"
CornerRadius="0 5 5 0"
BorderThickness="0"
Background="{StaticResource colour2}"
Name="buttonText" >
<TextBlock Text="{TemplateBinding Tag}"
FontSize="13"
Foreground="White"
Padding="{TemplateBinding Padding}" />
</Border>
</WrapPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{Binding ElementName=buttonIcon}" TargetName="buttonText" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<!--<Setter Property="Background" Value="#757b8d" />
<Setter Property="Foreground" Value="White" />-->
</Trigger>
</Style.Triggers>
</Style>
Two things:
You should move you main style above the derived styles. If you use BasedOn before the style that its basing itself on, it will not find it.
For the colors that you are changing, use a DynamicResource instead. This allows the two colors to be re-defined instead of using the defaults.
I got it working using the following code:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Name="TestWindow">
<Window.Resources>
<Style x:Key="ButtonIcoSmall" TargetType="Button">
<Style.Resources>
<SolidColorBrush Color="#FF434953" x:Key="colour1" />
<SolidColorBrush Color="#FF22252b" x:Key="colour2" />
</Style.Resources>
<Setter Property="FontFamily" Value="{StaticResource FontAwesome}" />
<Setter Property="FontSize" Value="16" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Padding" Value="8" />
<Setter Property="Margin" Value="6" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="TextOptions.TextFormattingMode" Value="Display" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<WrapPanel>
<Border Grid.Column="0"
CornerRadius="5 0 0 5"
BorderThickness="0"
Background="{DynamicResource colour1}"
Name="buttonIcon">
<WrapPanel>
<ContentPresenter Grid.Column="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="{TemplateBinding Margin}" />
</WrapPanel>
</Border>
<Border Grid.Column="0"
CornerRadius="0 5 5 0"
BorderThickness="0"
Background="{DynamicResource colour2}"
Name="buttonText" >
<TextBlock Text="{TemplateBinding Tag}"
FontSize="13"
Foreground="White"
Padding="{TemplateBinding Padding}" />
</Border>
</WrapPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{Binding ElementName=buttonIcon}" TargetName="buttonText" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<!--<Setter Property="Background" Value="#757b8d" />
<Setter Property="Foreground" Value="White" />-->
</Trigger>
</Style.Triggers>
</Style>
<Style BasedOn="{StaticResource ButtonIcoSmall}" TargetType="Button" x:Key="greenSmallButton">
<Style.Resources>
<SolidColorBrush Color="#FF8AB71C" x:Key="colour1" />
<SolidColorBrush Color="#FF72A000" x:Key="colour2" />
</Style.Resources>
</Style>
<Style BasedOn="{StaticResource ButtonIcoSmall}" TargetType="Button" x:Key="greySmallButton">
<Style.Resources>
<SolidColorBrush Color="#FF434953" x:Key="colour1" />
<SolidColorBrush Color="#FF22252b" x:Key="colour2" />
</Style.Resources>
</Style>
</Window.Resources>
<Button Style="{StaticResource greenSmallButton}"/>
</Window>
I need to use, with a stile of mahapps.metro, the tabitem with a text and an image..
this is my code:
<TabItem Style="{StaticResource gMetroTabItem}">
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Name="img" Height="auto" Width="auto" Source="/myProject;component/Resources/Black_Tools.png" />
<TextBlock Text="tabItem2" Margin="2,0,0,0" VerticalAlignment="Center" />
</StackPanel>
</TabItem.Header>
</TabItem>
and this is the code of the style:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="{x:Type TabControl}" x:Key="gMetroTabControl">
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="BorderBrush" Value="{x:Null}" />
</Style>
<Style TargetType="TabItem" x:Key="gMetroTabItem">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Padding" Value="6,2,6,2" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="MinWidth" Value="5" />
<Setter Property="MinHeight" Value="5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Label x:Name="root" FontSize="46.67">
<ContentPresenter ContentSource="Header" RecognizesAccessKey="True" />
</Label>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="root" Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="{DynamicResource AccentColor}" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsSelected" Value="false">
<Setter TargetName="root" Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="{DynamicResource GrayNormal}" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger SourceName="root" Property="IsMouseOver" Value="True">
<Setter TargetName="root" Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="Lime" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<!--<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<AdornerDecorator>
<ContentPresenter Content="{Binding}"/>
</AdornerDecorator>
</DataTemplate>
</Setter.Value>
</Setter>-->
</Style>
</ResourceDictionary>
but doesn't work, 'cause the style go to change a text property, and the image isn't displayed..
any ideas?
From the screencast images you posted:
designtime: http://www.screencast.com/t/TV20zfCi
runtime: http://www.screencast.com/t/7w9rBBEkhMnH
This is indicative of the Black_Tools.png having incorrect properties. Make sure the image is set to be a resource and copied to the output directory:
Right Click Black_Tools.png in the solution explorer > Properties
Build Action: Resource
Copy to Output Directory: Copy always (or Copy if newer)
If the image isn't set as a resource and copied to the output directory, then you'll see the image at design time since the image can be resolved in the solution. However, at runtime, the image path is different since the files will be in the project's output directory.
Scratch what I said before. This is much easier.
You only need the TabControl.ItemTemplate. This is what determines the layout of the header. With some tricky binding to ancestor, you can bind to the TabItem's properties for your DataTriggers.
In this example I show how to bind to the IsSelectedProperty. I'll leave the IsMouseOver as an exercise for you. Hint: Bind to the IsMouseOver using ElementName "root", and then in the setter use TargetName="root".
<Style TargetType="{x:Type TabControl}" x:Key="gMetroTabControl">
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate DataType="{x:Type local:TabItemHeaderData}">
<StackPanel>
<TextBlock Name="root" Text="{Binding LabelText}"/>
<Rectangle Fill="{Binding RectFill}"/>
</StackPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding
RelativeSource={RelativeSource
Mode=FindAncestor,AncestorType={x:Type TabItem}},Path=IsSelected}" Value="true">
<Setter TargetName="root" Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="Blue" />
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding
RelativeSource={RelativeSource
Mode=FindAncestor,AncestorType={x:Type TabItem}},Path=IsSelected}" Value="false">
<Setter TargetName="root" Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="Black" />
</Setter.Value>
</Setter>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate DataType="{x:Type local:TabItemHeaderData}">
<ContentControl Content="{Binding Content}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Then you'll need to create a dataobject.
public class TabItemHeaderData
{
public Brush RectColor { get; set; }
public String LabelText { get; set; }
public object Content { get; set; }
}
Then you just set the values in the dataobject like so.
<TabControl Style="{StaticResource gMetroTabControl}">
<local:TabItemHeaderData RectColor="Black" LabelText="John">
<local:TabItemHeaderData.Content>
<Button>George</Button>
</local:TabItemHeaderData.Content>
</local:TabItemHeaderData>
<local:TabItemHeaderData RectColor="Black" LabelText="John">
</local:TabItemHeaderData>
</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>