Trigger in template causes wrong rendering - wpf

I'm implementing my own fake TabControl to look like IE8-tabs (I'm aware of other implementations of tabcontrol).
My TabControl derives from Selector, and my TabItems derive from ContentControl.
When a tab is selected I set IsSelected (a dependencyproperty) to true.
My Trigger looks like this:
<Trigger Property="IsSelected" Value="true">
<Setter Property="Margin" Value="0,0,0,0"/>
</Trigger>
The default margin for my TabItem is 0,2,0,0. In other words, unselected TabItems should have a slight offset to the selected.
I've tried doing this in reverse, and using height instead. The result is that TabItems that are selected seems to be clipped instead of altering the margin.
I get the correct visual when the property is set on the tag directly, i.e.:
<local:TabItem IsSelected="true"/>
I've tried invalidating Arrange, Visual and Measure in my IsSelected dependency property without much success.
What am I missing here?
Edit:
Here's the complete style for the TabItem (the style is partly based on this project: http://www.codeproject.com/KB/WPF/WpfTabControl.aspx):
<Style TargetType="{x:Type local:TabItem}">
<Setter Property="Background" Value="{Binding Path=TabItemNormalBackground, RelativeSource={RelativeSource Self}}"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Height" Value="26"/>
<Setter Property="Margin" Value="0,2,0,0"/>
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Bottom" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:TabItem}">
<Border CornerRadius="3,3,0,0"
Background="{TemplateBinding Background}"
BorderBrush="{StaticResource TabItemOuterBorderBrush}"
BorderThickness="1,1,1,0">
<Border CornerRadius="3,3,0,0"
Background="{TemplateBinding Background}"
BorderBrush="{StaticResource TabItemInnerBorderBrush}"
BorderThickness="1,1,1,0">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Column="0" Content="{TemplateBinding Icon}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<ContentPresenter Grid.Column="1"
SnapsToDevicePixels="True"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
RecognizesAccessKey="True"/>
<Button x:Name="PART_CloseButton"
Grid.Column="2"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Margin="5,0,5,0"
Style="{StaticResource CloseButtonStyle}"
Visibility="Collapsed"
/>
</Grid>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" Value="{Binding Path=TabItemSelectedBackground, RelativeSource={RelativeSource Self}}"/>
<Setter Property="Margin" Value="0,0,0,0"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Nevermind. I stored the tabitems desiredsize in MeasureOverride, and forgot to clear them in subsequent calls.

Related

How to change the foreground of the header text of a WPF tabitem onClick?

How can I change only the foreground color of a TabItem header text when it is selected or active without changing the foreground of any item inside that TabItemor anything? I'm new to all this so finding it difficult to figure out where in my TabItemstyling can I implement this little feature and how.
The TabControl style I'm using is:
<Style
x:Key="{x:Type TabControl}"
TargetType="{x:Type TabControl}">
<Setter
Property="BorderThickness"
Value="0" />
<Setter
Property="BorderBrush"
Value="Transparent" />
<Setter
Property="Background"
Value="Transparent" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="TabControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto" />
<RowDefinition
Height="*" />
</Grid.RowDefinitions>
<Border
BorderThickness="0,0,1,1"
BorderBrush="#D0CEBF"
Grid.Row="1">
<Border
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}">
<Border
Background="{TemplateBinding Background}">
<ContentPresenter
ContentSource="SelectedContent" />
</Border>
</Border>
</Border>
<TabPanel
Grid.Row="0"
IsItemsHost="true"
HorizontalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style
TargetType="TabItem">
<Setter
Property="BorderThickness"
Value="0" />
<Setter
Property="BorderBrush"
Value="Transparent" />
<Setter
Property="Background"
Value="Transparent" />
<Setter
Property="VerticalContentAlignment"
Value="Center" />
<Setter
Property="HorizontalContentAlignment"
Value="Center" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type TabItem}">
<!--In order to click on the blank part of the TabItem can be successfully selected-->
<Border
Background="Transparent">
<Grid>
<Grid
x:Name="g">
<Path
Fill="{TemplateBinding Background}"
Margin="0,0,0,-1"
Data="M 20,40 L 0,40 0,40 C 4,40 10,36 10,30 L 10,10 C 10,0 16,0 20,0 L 155,0 C 165,0 173,0 ,175,6 L175,30 C 175,30 175,38 182,40 Z" />
</Grid>
<Border
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<ContentPresenter
ContentSource="Header"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</Grid>
</Border>
<!--Add ControlTemplate.Triggers to change the background color of the selected TabItem.-->
<ControlTemplate.Triggers>
<Trigger
Property="IsSelected"
Value="false">
<Setter
Property="Visibility"
TargetName="g"
Value="Hidden" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Adding a trigger in your TabItem control template unfortunately sets the foreground color of the TabItem content, too, when the tab is selected, so this does not work.
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Red" />
</Trigger>
However, you could add an implicit TextBlock style (without x:Key) inside the ContentPresenter resources. It will be applied automatically only to TextBlocks inside of its scope, not affecting the TabItem content or even other elements in a custom header template other than TextBlocks.
<ContentPresenter
ContentSource="Header"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" >
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger
Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}"
Value="true">
<Setter
Property="Foreground"
Value="Red" />
</DataTrigger>
</Style.Triggers>
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
Alternatively, a specialized solution is to create a header template and put the trigger there. In this case it does not force an overridden header template to apply the foreground to each TextBlock.
<Setter
Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding}">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger
Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type TabItem}}}"
Value="true">
<Setter
Property="Foreground"
Value="Red" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>

WPF Make ScrollViewer transparent

I would like to get scrollbar in ListBox see through.
Currently I managed to move contents under with negative margin, but I cannot make it visible under ScrollBar even setting its Opacity.
Any ideas?
Current XAML (to disable selection and hover effects):
<ListBox x:Name="TestIC" Grid.Row="1"
ScrollViewer.CanContentScroll="True"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.VirtualizationMode="Recycling" >
<ListBox.Resources>
<sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">100</sys:Double>
</ListBox.Resources>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
<Setter Property="Focusable" Value="false"/>
<Setter Property="Margin" Value="0,0,-100,0"/>
<Setter Property="Background" Value="Transparent"/>
<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="Padding" Value="2,0,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<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>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="Selector.IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}}"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
You must simply override the default Style of the ScrollViewer and e.g., place it in the ResourceDictionary of App.xaml or your ListBox:
Allow the content to stretch into the scroll bar's column/row by setting the ColumnSpan/RowSpan of the ScrollContentPresenter
Set Background of ScrollBar elements, and if required the Rectangle named "Corner" too, to Transparent or modify their Opacity
To make the Thumb of the ScrollBar opac, override/copy all the default ScrollBar Styles and Templates and set the Thumb.Opacity in the x:Key="ScrollBarThumb" style.
As you already have a customized ScrollBar, you probably want to adjust your current Thumb style instead.
Important: don't forget to remove your negative Margin!
Since the content of the ScrollViewer is now allowed to span accross the full content host, the Margin is no longer needed. You should generally avoid a negative Margin in order to layout elements, when arranging them in columns (using proper spanning) yield the same result.
<Color x:Key="BorderMediumColor">#FF888888</Color>
<Style TargetType="{x:Type ScrollViewer}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border Grid.ColumnSpan="2" Grid.RowSpan="2"
BorderThickness="0,1,1,1">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
</Border.BorderBrush>
<ScrollContentPresenter CanContentScroll="{TemplateBinding CanContentScroll}" />
</Border>
<ScrollBar x:Name="PART_VerticalScrollBar"
Grid.Column="1"
Background="Transparent"
Value="{TemplateBinding VerticalOffset}"
Maximum="{TemplateBinding ScrollableHeight}"
ViewportSize="{TemplateBinding ViewportHeight}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
<ScrollBar x:Name="PART_HorizontalScrollBar"
Grid.Row="1"
Background="Transparent"
Orientation="Horizontal"
Value="{TemplateBinding HorizontalOffset}"
Maximum="{TemplateBinding ScrollableWidth}"
ViewportSize="{TemplateBinding ViewportWidth}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" />
<Rectangle x:Name="Corner"
Grid.Column="1" Grid.Row="1"
Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Getting exception Width and Height must be non-negative; while adding items to a Virtualized Treeview in WPF

I am using a virtualized Treeview using Ui virtualisation by setting properties
in TreeStyle and using in the ItemsPanelTemplate. The treeview is getting virualized and able to scroll , but getting exception :"System.ArgumentException: Width and Height must be non-negative." while adding child items to treeview.
The treeviewStyle and TreeViewItem stlye which I have used are placed below:
<Style x:Key="TreeViewStyle" TargetType="TreeView">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="ScrollViewer.CanContentScroll" Value="True" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Visible" />
<Setter Property="Stylus.IsFlicksEnabled" Value="False" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="True" />
<Setter Property="VirtualizingStackPanel.VirtualizationMode" Value="Standard" />
<!-- TreeView ItemsPresenter StackPanel VirtualizingStackPanel -->
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel Height="366" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TreeView">
<Border Name="Border"
Background="#232323"
BorderThickness="1"
CornerRadius="1">
<ScrollViewer Name="_tv_scrollviewer_"
CanContentScroll="True"
Focusable="False"
Padding="5,1,0,2"
Template="{StaticResource ScrollViewerControlTemplate3}">
<ItemsPresenter />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TreeViewItem}">
<Style.Triggers>
<Trigger Property="HasItems" Value="False">
<Setter Property="Background" Value="Red" />
<Setter Property="BorderBrush" Value="Blue" />
</Trigger>
</Style.Triggers>
</Style>
<!-- Placing items in the tree view -->
<Style x:Key="TreeViewItemStyle" TargetType="{x:Type TreeViewItem}">
<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="Padding" Value="1,0,0,0" />
<Setter Property="Margin" Value="-24,0,0,0" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="19" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border x:Name="Bd"
Grid.Column="1"
Margin="0,0,0,0"
BorderBrush="#505050"
BorderThickness="0,0,0,0"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="true">
<!-- Header/Root Elements -->
<ContentPresenter x:Name="PART_Header"
Margin="2,0,0,0"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
ContentSource="Header"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
<!-- Child Elements -->
<ItemsPresenter x:Name="ItemsHost"
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2"
Margin="0,0,0,0" />
</Grid>
<ControlTemplate.Triggers>
<!--<Trigger Property="IsExpanded" Value="false">
<Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed" />
</Trigger>-->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am using .Net version 4.5 VS2010.
For anyone interested: I had the problem within a DataTemplate of a ListBox set in the ItemTemplate.
Placing a simple TextBlock in the DataTemplate with the Text property bound to a ViewModel caused the error.
Removing the Binding and placing a text in the property removed the issue. The bound property of the ViewModel always contained values, so it had nothing to do with that.
Setting MinHeight and/or MinWidth did not solve the problem.
Setting Height and/or Width solved the problem.
In my case I wanted a dynamic height and width, so that did not help. In the end I set HorizontalAlignment=Stretch and VerticalAlignment=Stretch, which was the solution.
Quite an annoying issue.

WPF TabControl Templates + ItemContainerStyle

I am attempting to create a Tab Control Style that basically looks like buttons at the top that are centered and content panel below that displays the tabitem content.
I have am kind of new to templates but what I have so far works very well except one thing. I want to be able to set the default forground color for text elements. Normally I have accomplished this by using the ContentPresenter with dependency elements. So something like this.
<ContentPresenter TextElement.Foreground="White"/>
This basically makes any TextElement Control written by this Presenter to inherit this property.
Now I am trying to do the same thing but it's not working! I believe it has something to do with my style being wrong.
Style:
<Style x:Key="MainMenuTab" TargetType="{x:Type TabControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local" Width="{TemplateBinding Width}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Tab Headers Panel -->
<Grid Grid.Row="0" Background="{StaticResource Brush_ApplicationTabBackground}">
<TabPanel
Name="HeaderPanel"
Grid.Row="0"
Panel.ZIndex="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
IsItemsHost="True"
KeyboardNavigation.TabIndex="1"
Background="{StaticResource Brush_ApplicationTabBackground}"
>
</TabPanel>
</Grid>
<!-- Tab Body -->
<Border
Name="Border"
Grid.Row="1"
Background="{StaticResource Brush_ApplicationBackground}"
BorderBrush="Transparent"
BorderThickness="1"
CornerRadius="2"
KeyboardNavigation.TabNavigation="Local"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="2" >
<ContentPresenter
Name="PART_SelectedContentHost"
Margin="4"
ContentSource="SelectedContent" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<!-- Each Tab should look like this -->
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Background="{StaticResource Brush_ApplicationTabBackground}">
<Border Width="50" x:Name="BorderTab" Height="50" Margin="5" BorderThickness="1" ClipToBounds="True" BorderBrush="Transparent" Background="Transparent" CornerRadius="5">
<Rectangle x:Name="BackgroundRec" Fill="Transparent" Stroke="Transparent" Width="50" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ContentPresenter Name="TheHeaderContentPresenter" Width="50" Height="50" Margin="5" ContentSource="Header" HorizontalAlignment="Center" VerticalAlignment="Center" TextElement.Foreground="White"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Trigger.Setters>
<Setter TargetName="BorderTab" Property="BorderBrush" Value="{StaticResource Brush_ApplicationTabHighlight}"/>
<Setter TargetName="BorderTab" Property="BorderThickness" Value="3"/>
<Setter TargetName="BackgroundRec" Property="Fill" Value="{StaticResource Brush_ApplicationTabHighlight}"/>
<Setter Property="Panel.ZIndex" Value="1"/>
</Trigger.Setters>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Trigger.Setters>
<Setter TargetName="BorderTab" Property="BorderBrush" Value="{StaticResource Brush_ApplicationTabBackground}"/>
<Setter TargetName="BorderTab" Property="BorderThickness" Value="0"/>
<Setter TargetName="BackgroundRec" Property="Fill" Value="{StaticResource Brush_ApplicationTabBackground}"/>
</Trigger.Setters>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
In my ContentPresenter under ItemContainerStyle has the TextElement.Foreground="White" property but it will not print white text!
My tabcontrol that uses this style looks like this:
<TabControl Grid.Row="2" Style="{StaticResource MainMenuTab}">
<TabItem>
<TabItem.Header>
<TextBlock VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="0,0,0,5" Text="{x:Static UIStrings:ClientStrings.MainWindow_TabHeader_SingleWaveLength}"></TextBlock>
</TabItem.Header>
<TextBlock>TEST PANEL</TextBlock>
</TabItem>
</TabControl>
I know this is compicated but I would really love this to work.
Solution Found.
Based on HCL's post, I have found a solution. I am experiance the same exact problem I am trying to have the content presenter set the inherited dependence property. instead I simple tell the template to apply the dependance property, that way each tabitem is styled to have this property and therefore sets it for all it's children.
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="TabItem">
<Setter Property="TextElement.Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Background="{StaticResource Brush_ApplicationTabBackground}">
<Border Width="50" x:Name="BorderTab" Height="50" Margin="5" BorderThickness="1" ClipToBounds="True" BorderBrush="Transparent" Background="Transparent" CornerRadius="5">
<Rectangle x:Name="BackgroundRec" Fill="Transparent" Stroke="Transparent" Width="50" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ContentPresenter Name="TheHeaderContentPresenter" Width="50" Height="50" Margin="5" ContentSource="Header" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Trigger.Setters>
<Setter TargetName="BorderTab" Property="BorderBrush" Value="{StaticResource Brush_ApplicationTabHighlight}"/>
<Setter TargetName="BorderTab" Property="BorderThickness" Value="3"/>
<Setter TargetName="BackgroundRec" Property="Fill" Value="{StaticResource Brush_ApplicationTabHighlight}"/>
<Setter Property="Panel.ZIndex" Value="1"/>
</Trigger.Setters>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Trigger.Setters>
<Setter TargetName="BorderTab" Property="BorderBrush" Value="{StaticResource Brush_ApplicationTabBackground}"/>
<Setter TargetName="BorderTab" Property="BorderThickness" Value="0"/>
<Setter TargetName="BackgroundRec" Property="Fill" Value="{StaticResource Brush_ApplicationTabBackground}"/>
</Trigger.Setters>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
All I've really dont is added the line:
<Setter Property="TextElement.Foreground" Value="White"/>
Before the control template! Also I took the white text out of the content presenter because it is useless.
Check this post, it looks to me as it is the same effect:
ContentPresenter within ControlTemplate cannot change attached dependency property

TreeViewItem.Header with Grid inside

I'm trying to make "Img" appear in the end of TreeViewItem.Header (as close to the right side of TreeView control), but no mater what I try header wide is always less than TreeView size and ofcourse "Img" appear somewhere in the middle of the control. This probably a very newbish question; I'm just starting to learn WPF.
<TreeView Grid.Row="1" Grid.ColumnSpan="2" Margin="3,3,3,3" Name="treeView1" Width="300">
<TreeViewItem HorizontalAlignment="Stretch">
<TreeViewItem.Header>
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0">General</Label>
<Label Grid.Column="1" Grid.Row="0">Img</Label>
</Grid>
</TreeViewItem.Header>
</TreeViewItem>
</TreeView>
To achieve that you need to change the Control template of the TreeviewItem using the ItemContainerStyle of the TreeView (this is the style that gets applied to any item in the root of the treeview).
The default TreeViewItem is not stretched, so it does not extend all the way to the right.
When you set the Header, it is inside the TreeViewItem and so cannot extend past it.
I will not post the whole style because it would be way too long.
Here's what to do in Blend:
select your TreeViewItem, right click and chose "Edit Control Parts/Edit a copy". Save the style wherever you want.
Now, in the template, expand the stuff and locate the "Bd" element, which is a border. Change its RowSpan property to "2".
Last, set the "HorizontalContentAlignment" property of your item to "Stretch" (either on the item or through the style if you need to apply that to several nodes).
Your item should now be the correct width.
Now, this only applies to the item you selected. If you want that to work for any item you add to the treeview, you need to change the "ItemContainerStyle" of the Treeview to the newly created style, and remove the style that Blend placed on the TreeViewItem.
Last but not least, you need to set the ItemContainerStyle of your TreeViewItem to that same style so that its children also extend all the way, and so on and so forth.
So in the end, with your example and a child node on the first item:
<Grid x:Name="LayoutRoot">
<TreeView Margin="3,3,3,3" Name="treeView1" Width="300" ItemContainerStyle="{DynamicResource TreeViewItemStyle1}">
<TreeViewItem HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" ItemContainerStyle="{DynamicResource TreeViewItemStyle1}">
<TreeViewItem.Header>
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0">General</Label>
<Label Grid.Column="1" Grid.Row="0">Img</Label>
</Grid>
</TreeViewItem.Header>
<TreeViewItem>
<TreeViewItem.Header>
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0">General</Label>
<Label Grid.Column="1" Grid.Row="0">Img</Label>
</Grid>
</TreeViewItem.Header>
</TreeViewItem>
</TreeViewItem>
The "TreeViewItemStyle1" is the style that Blend created for you.
EDIT
as requested, here's the full style as generated by blend and modified. It is long because it basically is a copy of the built-in style with minor modifications.
<Style x:Key="TreeViewItemFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<PathGeometry x:Key="TreeArrow" Figures="M0,0 L0,6 L6,0 z"/>
<Style x:Key="ExpandCollapseToggleStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Focusable" Value="False"/>
<Setter Property="Width" Value="16"/>
<Setter Property="Height" Value="16"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Width="16" Height="16" Background="Transparent" Padding="5,5,5,5">
<Path Fill="Transparent" Stroke="#FF989898" x:Name="ExpandPath" Data="{StaticResource TreeArrow}">
<Path.RenderTransform>
<RotateTransform Angle="135" CenterX="3" CenterY="3"/>
</Path.RenderTransform>
</Path>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Stroke" TargetName="ExpandPath" Value="#FF1BBBFA"/>
<Setter Property="Fill" TargetName="ExpandPath" Value="Transparent"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="RenderTransform" TargetName="ExpandPath">
<Setter.Value>
<RotateTransform Angle="180" CenterX="3" CenterY="3"/>
</Setter.Value>
</Setter>
<Setter Property="Fill" TargetName="ExpandPath" Value="#FF595959"/>
<Setter Property="Stroke" TargetName="ExpandPath" Value="#FF262626"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="TreeViewItemStyle1" TargetType="{x:Type TreeViewItem}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Padding" Value="1,0,0,0"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="19" Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<ToggleButton x:Name="Expander" Style="{StaticResource ExpandCollapseToggleStyle}" ClickMode="Press" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"/>
<Border x:Name="Bd" SnapsToDevicePixels="true" Grid.Column="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.ColumnSpan="2">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" x:Name="PART_Header" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header"/>
</Border>
<ItemsPresenter x:Name="ItemsHost" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="false">
<Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/>
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter Property="Visibility" TargetName="Expander" Value="Hidden"/>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
See this post for two samples. I just created these today.
Highlight whole TreeViewItem line in WPF

Resources