How to bind to Selector.IsSelectionActive from a DataTemplate? - wpf

I have the following style for a ListBoxItem defined:
<Style x:Key="detailListBoxItemStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="AutomationProperties.AutomationId" Value="{Binding Path=StringTableKey}"/>
<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="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="Bd" Margin="4" 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 MenuItemSelectedBackgroundBrush}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</Trigger>
<Trigger Property="IsSelected" Value="false">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource MenuItemUnSelectedBackgroundBrush}"/>
</Trigger>
<!-- This is the case when a detail is selected (the master list loses focus). -->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="Selector.IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<!--<Setter Property="Opacity" TargetName="Bd" Value=".4"/>-->
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The ListBox for which this style is applied is defined as:
<ListBox
x:Name="listBox"
Margin="0,60,0,0"
MaxHeight="600"
Foreground="Transparent"
Style="{StaticResource detailListBoxStyle}"
ItemContainerStyle="{StaticResource detailListBoxItemStyle}"
ItemsSource="{Binding Source={StaticResource detailCollectionViewSource}}"
ItemTemplateSelector="{StaticResource detailDataTemplateSelector}"
TouchDown="ListBoxTouchDown"
TouchMove="ListBoxTouchMove"
TouchUp="ListBoxTouchUp"
KeyDown="ListBoxKeyDown">
<ListBox.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Margin="0,10,0,0" FontWeight="Bold" FontSize="20" Foreground="White" Text="{Binding Path=Name}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListBox.GroupStyle>
</ListBox>
I have a DataTemplate for a ListBoxItem that can be:
<DataTemplate x:Key="detailOnOffTemplate">
<Grid Height="50" Width="{StaticResource detailWidth}">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock x:Name="tb1" Margin="4,2,0,0" Grid.Row="0" Style="{StaticResource MenuTextStyle}" Text="{Binding DisplayName}" VerticalAlignment="Top" TextAlignment="Left">
<TextBlock.Effect>
<DropShadowEffect Color="White" ShadowDepth="0" BlurRadius="7"/>
</TextBlock.Effect>
</TextBlock>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}, Mode=FindAncestor}}" Value="True">
<Setter TargetName="tb1" Property="Foreground" Value="White"/>
<Setter TargetName="tb1" Property="Effect" Value="{x:Null}"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
I need to be able to bind to "Selector.IsSelectionActive" from within my DataTemplate but nothing works. I've tried these things:
<DataTrigger Binding="{Binding Selector.IsSelectionActive, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}, Mode=FindAncestor}}" Value="True">
<Trigger Binding="{Binding Selector.IsSelectionActive, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}, Mode=FindAncestor}}" Value="True">
<Trigger "Selector.IsSelectionActive" Value="True">
Basically, I want the same trigger that is contained in the ControlTemplate in my DataTemplate:
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="Selector.IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<!--<Setter Property="Opacity" TargetName="Bd" Value=".4"/>-->
</MultiTrigger>
Or, how else can I know the item "IsSelected" but does not have keyboard focus?

The first option you tried would be correct exception you're not identifying that that is an attached property so it looks like you are trying to bind to a property named Selector that returns an object that has a property names IsSelectionActive. So I would think something like the following would work:
<DataTrigger Binding="{Binding Path=(Selector.IsSelectionActive), RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}" Value="True">

The previous answer didn't work for me, but after many hours of playing this did:
The key here (I think) was that the IsSelectionActive FALSE comes first. And that trigger is also a multitrigger combined with the IsSelected. I didn't have to use brackets in this case. But that might be because I'm using the latest .net framework, Wpf and Visual Studio, so you may need the brackets spoken of in the previous answer.
The red, yellow and white is just for this sample, remember to change those colors.
<ControlTemplate.Triggers>
<MultiTrigger>
<!-- selected, but not focused -->
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="False" />
<Condition Property="IsSelected" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="Yellow" />
</MultiTrigger>
<MultiTrigger>
<!-- selected, and focused -->
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="True" />
<Condition Property="IsSelected" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="Red" />
<Setter Property="Foreground" Value="White" />
</MultiTrigger>
</ControlTemplate.Triggers>

Related

WPF Selected ListViewItem: Using a ComboBox in the ItemTemplate

I'm trying to create a DataTemplate for Items in a ListView which is in itself not a problem when I'm using TextBlocks.
When selecting an item in the ListView, it is highlighted as expected with a darker background and the TextBlocks have a white foreground.
However, when I add a ComboBox to the DataTemplate and when a row is highlighted, the ComboBox's forground remains black whether it's selected or not.
I am not applying any styles to ComboBoxes and other than the SelectedValue and ItemSource properties, I'm not doing anything else with the ComboBox.
Using the LivePropertyExplorer I can only see that the Foreground is "overriden" but cannot see where.
Help would be greatly appreciated!
<ListView DockPanel.Dock="Bottom"
BorderThickness="0,1,0,0"
Padding="3"
BorderBrush="LightGray"
MinHeight="150"
MaxHeight="150"
ItemContainerStyle="{StaticResource ListViewItemStyle25}">
<ListView.ItemTemplate>
<DataTemplate>
<DockPanel LastChildFill="False">
<DockPanel.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize"
Value="14" />
<Setter Property="Background"
Value="Transparent" />
</Style>
</DockPanel.Resources>
<ComboBox BorderThickness="1"
Background="Transparent"
MinWidth="120"
MaxWidth="120"
FontSize="14"
IsSynchronizedWithCurrentItem="False"
SelectedValue="{Binding IResourceTravelDocument_TravelDocumentType}">
<ComboBox.Style>
<Style TargetType="{x:Type ComboBox}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsPrimary, ElementName=userControl}"
Value="True">
<Setter Property="ItemsSource"
Value="{Binding DataContext.IResourceTravelDocumentsModuleViewModel_ResourceTravelDocumentTypes_Primary,
ElementName=userControl}" />
</DataTrigger>
<DataTrigger Binding="{Binding IsPrimary, ElementName=userControl}"
Value="False">
<Setter Property="ItemsSource"
Value="{Binding DataContext.IResourceTravelDocumentsModuleViewModel_ResourceTravelDocumentTypes_Supplementary,
ElementName=userControl}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ComboBox.Style>
</ComboBox>
</DockPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Style x:Key="ListViewItemStyle" TargetType="{x:Type ListViewItem}">
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
<Setter Property="Background"
Value="Transparent" />
<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 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>
<Trigger Property="ItemsControl.AlternationIndex"
Value="0">
<Setter Property="Background"
Value="White"></Setter>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex"
Value="1">
<Setter Property="Background"
Value="WhiteSmoke"></Setter>
</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="Selector.IsSelectionActive"
Value="false" />
</MultiTrigger.Conditions>
<Setter Property="Background"
TargetName="Bd"
Value="RoyalBlue" />
<Setter Property="Foreground"
Value="AliceBlue" />
</MultiTrigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The ComboBox has its own Template and doesn't inherit the Background and Foreground properties from the parent ListViewItem by default.
You can add another DataTrigger to the ComboBox style that binds to the ListViewItem though:
<Style TargetType="{x:Type ComboBox}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListViewItem}}" Value="true">
<Setter Property="Foreground" Value="AliceBlue" />
</DataTrigger>
<DataTrigger Binding="{Binding IsPrimary, ElementName=userControl}" Value="True">
<Setter Property="ItemsSource" Value="{Binding DataContext.IResourceTravelDocumentsModuleViewModel_ResourceTravelDocumentTypes_Primary, ElementName=userControl}" />
</DataTrigger>
<DataTrigger Binding="{Binding IsPrimary, ElementName=userControl}" Value="False">
<Setter Property="ItemsSource" Value="{Binding DataContext.IResourceTravelDocumentsModuleViewModel_ResourceTravelDocumentTypes_Supplementary, ElementName=userControl}" />
</DataTrigger>
</Style.Triggers>
</Style>

Show ContextMenu on whole TreeViewItem line in WPF

I have a TreeView with heterogeneuos node types. Each node type is configuered in XAML using a HierarchicalDataTemplate.
Some of the nodes have a ContextMenu, which is dependent on the type of the node. The ContextMenus are defined as static resources in XAML and attached to a DockPanel in the HierarchicalDataTemplate.
In addition, I am using the ControlTemplate for a TreeViewItem described by bendewey in the following StackOverflow question https://stackoverflow.com/a/672123/1626109. This ControlTemplate is defined so that the complete TreeViewItem is highlighted when it is selected.
A left click on any part of the line, selects the item.
In contrast, the context menus, which are defined in the HierarchicalDataTemplate, only work on the right hand part of the line.
I am looking for a way to configure the ContextMenus so that they are also available on the complete line.
This seems to require attaching the context menu to an element in the ControlTemplate, with a TemplateBinding to something defined in the HierarchicalDataTemplate, but I can't figure out how to do it.
By the way, the solution explorer in Visual Studio has exactly this behavior. The context menu is dependent on the node type, and it is available on the complete item, including to the left of the expand/collapse button.
(Edited) You need to get rid of the two columns of the Grid in TreeViewItem Style:
<Window.Resources>
<local:LeftMarginMultiplierConverter Length="19" x:Key="lengthConverter" />
<SolidColorBrush x:Key="GlyphBrush" Color="#444" />
<Style x:Key="ExpandCollapseToggleStyle" TargetType="ToggleButton">
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid Width="15" Height="13"
Background="Transparent">
<Path x:Name="ExpandPath"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="1,1,1,1"
Fill="{StaticResource GlyphBrush}"
Data="M 4 0 L 8 4 L 4 8 Z"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked"
Value="True">
<Setter Property="Data"
TargetName="ExpandPath"
Value="M 0 4 L 8 4 L 4 8 Z"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="TreeViewItemFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border>
<Rectangle Margin="0,0,0,0"
StrokeThickness="5"
Stroke="Black"
StrokeDashArray="1 2"
Opacity="0"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type TreeViewItem}"
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}">
<ControlTemplate.Resources>
<local:LeftMarginMultiplierConverter Length="19" x:Key="lengthConverter" />
</ControlTemplate.Resources>
<StackPanel>
<Border Name="Bd"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<Grid>
<ToggleButton Panel.ZIndex="2" x:Name="Expander"
HorizontalAlignment="Left"
Style="{StaticResource ExpandCollapseToggleStyle}"
IsChecked="{Binding Path=IsExpanded,
RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press"
Margin="{Binding Converter={StaticResource lengthConverter}, ConverterParameter=0,
RelativeSource={RelativeSource TemplatedParent}}"/>
<ContentPresenter x:Name="PART_Header" ContentSource="Header"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
</ContentPresenter>
</Grid>
</Border>
<ItemsPresenter x:Name="ItemsHost" />
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded"
Value="false">
<Setter TargetName="ItemsHost"
Property="Visibility"
Value="Collapsed"/>
</Trigger>
<Trigger Property="HasItems"
Value="false">
<Setter TargetName="Expander"
Property="Visibility"
Value="Hidden"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HasHeader"
Value="false"/>
<Condition Property="Width"
Value="Auto"/>
</MultiTrigger.Conditions>
<Setter TargetName="PART_Header"
Property="MinWidth"
Value="75"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HasHeader"
Value="false"/>
<Condition Property="Height"
Value="Auto"/>
</MultiTrigger.Conditions>
<Setter TargetName="PART_Header"
Property="MinHeight"
Value="19"/>
</MultiTrigger>
<Trigger Property="IsSelected"
Value="true">
<Setter TargetName="Bd"
Property="Background"
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 TargetName="Bd"
Property="Background"
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>
</Window.Resources>
However, this will distort the Header-Items arrangements. Therefore, you need to adjust the Margin in the HierarchicalDataTemplate part:
<TreeView Margin="50" HorizontalContentAlignment="Stretch" DataContext="{Binding}" ItemsSource="{Binding Models}">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate DataType="{x:Type local:Model}" ItemsSource="{Binding Models}">
<Border Background="Transparent">
<TextBlock Margin="{Binding Converter={StaticResource lengthConverter}, ConverterParameter=1,
RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TreeViewItem}}"
Text="{Binding Name}" />
<Border.ContextMenu>
<ContextMenu>
<MenuItem Header="dddd"/>
</ContextMenu>
</Border.ContextMenu>
</Border>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
Note that you should adjusted the converter to take the required extra margin into account:
public class LeftMarginMultiplierConverter : IValueConverter
{
public double Length { get; set; }
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var item = value as TreeViewItem;
if (item == null)
return new Thickness(0);
int extra = int.Parse(parameter.ToString());
var t = item.GetDepth();
return new Thickness(Length * (item.GetDepth() + extra), 0, 0, 0);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new System.NotImplementedException();
}
}
If converter parameter is 1, it will add one point to the depth of the item. I use it for the Header part.
Another approach might be to add a DataTemplate to the ContentPresenter of the TreeViewItem Style. While I don't know how you can bind the ContextMenu, I prefer this one.

Tab control mouse over

I am trying to create a tab control with a style like Google's kitchen sink example.
When the mouse goes over a tab i want to be able to change its color and when i click that tab its content background color changes to match and the tab changes. However, if you don't click the tab and the mouse moves i want it to go back to its original color. I want the tabs to be different colors.
What i have right now is when i hover over the intro tab content "Content for intro"
that content font changes to red. I had to change it to foreground so i could see that it was working. Keep in mind i am very new to xaml and wpf. I am trying to teach myself and the book i have has a very small section on styles.
Here is Google's kitchen sin example hat i am trying to achieve.
http://gwt.google.com/samples/KitchenSink/KitchenSink.html
Any help is much appreciated.
<Window x:Class="WpfApplication2.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>
<SolidColorBrush x:Key="mouseOverColor"
Color="Red" />
<Style x:Key="myStyle" TargetType="TabItem">
<Setter Property="BorderThickness" Value="3"/>
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="Background" Value="LightBlue"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Foreground"
Value="{StaticResource mouseOverColor}" />
</Trigger>
</ControlTemplate.Triggers>
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<TabControl Background="AliceBlue" Grid.Column="1"
Grid.ColumnSpan="2" Margin="92,40,37,80"
Grid.Row="2">
<TabItem Header="Intro" >
<TabItem Style="{StaticResource myStyle}" >
Content for intro
</TabItem>
</TabItem>
<TabItem Header="Widgets">
Content for widget
</TabItem>
<TabItem Header="Panels">
content for panel
</TabItem>
</TabControl>
</Grid>
</Window>
This is a bit complex because the background of the selected tab is colourless by default, so you need to override the control template. It is best to modify the default style so you do not need to start over, which in any case is quite verbose:
<ControlTemplate x:Key="TabItemControlTemplate" TargetType="{x:Type TabItem}">
<Grid SnapsToDevicePixels="True">
<Border x:Name="Bd" BorderBrush="White" BorderThickness="1,1,1,0" Padding="{TemplateBinding Padding}">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Setter Property="Background" Value="Gray"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected}" Value="True">
<Setter Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" />
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsMouseOver}" Value="True">
<Setter Property="Background" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}" />
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="False"/>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="BorderBrush" TargetName="Bd" Value="#FF3C7FB1"/>
</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="#FFF4F4F4"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="#FFC9C7BA"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
If you want to change the default colour, change the setter on the border which specifies that the background should be grey.
Also to make the content part the same colour as the tab an additional binding in the TabControl is needed. Further this control template needs to be applied to the items, either via an automatic style or direct reference:
<TabControl x:Name="MyControl" Height="200"
Background="{Binding RelativeSource={RelativeSource Self}, Path=SelectedItem.Background}">
<TabItem Header="tab1" Background="Red" Template="{DynamicResource TabItemControlTemplate}"/>
<TabItem Header="tab2" Background="Green" Template="{DynamicResource TabItemControlTemplate}"/>
<TabItem Header="tab3" Background="Blue" Template="{DynamicResource TabItemControlTemplate}"/>
</TabControl>
First tab selected, mouse over last tab:
Usage annotation:
<Window ...>
<Window.Resources>
<ControlTemplate x:Key="TabItemControlTemplate" TargetType="{x:Type TabItem}">
...
</ControlTemplate>
</Window.Resources>
<Grid>
<!-- You can reference the template anywhere inside the visual tree
of the Window if it has been declared in the Resources of the
window, most XML elemnts that are children of the Window element
are inside its visual tree -->
<TabControl ...>
<TabItem Template="{StaticResource TabItemControlTemplate}" .../>
</TabControl>
</Grid>
</Window>

WPF TreeViewItem not expanding from code behind

I have the following style defined for a TreeViewItem:
<Style x:Key="{x:Type TreeViewItem}" TargetType="{x:Type TreeViewItem}">
<Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}" />
<Setter Property="IsExpanded" Value="{Binding Path=IsExpanded, Mode=TwoWay}" />
<Setter Property="AllowDrop" Value="True" />
<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>
<!-- Connecting Lines -->
<Rectangle x:Name="HorLn" Height="1" Stroke="#8888" Margin="10,0,0,0" SnapsToDevicePixels="true"/>
<Rectangle x:Name="VerLn" Width="1" Stroke="#8888" Grid.RowSpan="2" SnapsToDevicePixels="true"/>
<ToggleButton x:Name="Expander"
Style="{StaticResource ExpandCollapseToggleStyle}"
IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press"/>
<Border Name="Bd"
Grid.Column="1"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<ContentPresenter x:Name="PART_Header"
ContentSource="Header"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
</Border>
<ItemsPresenter x:Name="ItemsHost"
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2"/>
</Grid>
<ControlTemplate.Triggers>
<!-- This trigger changes the connecting lines if the item is the last in the list -->
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Converter={StaticResource LineConverter}}" Value="true">
<Setter TargetName="VerLn"
Property="Height"
Value="6"/>
<Setter TargetName="VerLn"
Property="VerticalAlignment"
Value="Top"/>
</DataTrigger>
<Trigger Property="IsExpanded"
Value="false">
<Setter TargetName="ItemsHost"
Property="Visibility"
Value="Collapsed"/>
</Trigger>
<Trigger Property="HasItems"
Value="false">
<Setter TargetName="Expander"
Property="Visibility"
Value="Hidden"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HasHeader"
Value="false"/>
<Condition Property="Width"
Value="Auto"/>
</MultiTrigger.Conditions>
<Setter TargetName="PART_Header"
Property="MinWidth"
Value="75"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="HasHeader"
Value="false"/>
<Condition Property="Height"
Value="Auto"/>
</MultiTrigger.Conditions>
<Setter TargetName="PART_Header"
Property="MinHeight"
Value="19"/>
</MultiTrigger>
<Trigger Property="IsSelected"
Value="true">
<Setter TargetName="Bd"
Property="Background"
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 TargetName="Bd"
Property="Background"
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>
I cannot get TreeViewItem to expand, when IsExpanded property of the model is set to true in code behind. However, model IsExpanded property changes when TreeViewItem is expanded from user interface. What am I missing?
Thanks.
I have similar code working, the setting you have above looks fine.
<Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
Did you raise a PropertyChanged event once you updated the IsExpanded property in your model?

Stretch ListBoxItem Style Problems

I have a problem stretching the content of a ListBoxItem. I use a DataTemplate with a Grid to place the content of the last column aligned at the right. But I must have something in the basic style of the controls that prevents this kind of display - the "*" ("consume all the rest of space") displays like "auto" ("take only what you really need").
Style of all ListBoxes:
<Style TargetType="{x:Type ListBox}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="Background" Value="{DynamicResource WindowBackgroundBrush}" />
<Setter Property="BorderBrush" Value="{DynamicResource SolidBorderBrush}" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<Grid HorizontalAlignment="Stretch">
<Border x:Name="Border" HorizontalAlignment="Stretch"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" />
<ScrollViewer Margin="1" Style="{DynamicResource NuclearScrollViewer}"
Focusable="false" Background="{DynamicResource LightBrush}"
x:Name="scrollViewer">
<StackPanel Margin="2" IsItemsHost="true" HorizontalAlignment="Stretch" />
</ScrollViewer>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background"
Value="{DynamicResource DisabledBackgroundBrush}"
TargetName="Border" />
<Setter Property="BorderBrush"
Value="{DynamicResource DisabledBorderBrush}"
TargetName="Border" />
<Setter Property="Background"
TargetName="scrollViewer"
Value="{DynamicResource DisabledBackgroundBrush}"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style d:IsControlPart="True" TargetType="{x:Type ListBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid SnapsToDevicePixels="true" HorizontalAlignment="Stretch" >
<Border HorizontalAlignment="Stretch" x:Name="Border" Opacity="0.25"
Margin="0,1,0,1" Background="{DynamicResource NormalBrush}"
BorderBrush="{DynamicResource NormalBorderBrush}"
BorderThickness="1,1,1,1" CornerRadius="0,0,0,0" Padding="0,0,0,0" />
<Rectangle Opacity="0.25" Fill="{DynamicResource LightBrush}" Stroke="{x:Null}"
Height="10.849" Margin="1.153,1.151,1,0" VerticalAlignment="Top" />
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="5,2,0,2" x:Name="contentPresenter" />
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelected" Value="True"/>
<Condition Property="IsEnabled" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Border"
Value="{DynamicResource DisabledBackgroundBrush}"/>
<Setter Property="BorderBrush" TargetName="Border"
Value="{DynamicResource DisabledBorderBrush}"/>
</MultiTrigger>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Opacity" TargetName="Border" Value="1" />
<Setter Property="Background" TargetName="Border"
Value="{DynamicResource SelectedBackgroundBrush}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="Selector.IsSelected" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Border"
Value="{DynamicResource MouseOverBrush}" />
<Setter Property="Opacity" TargetName="Border" Value="1" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelected" Value="True" />
<Condition Property="IsMouseOver" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Opacity" TargetName="Border" Value="0.65" />
<Setter Property="Background" TargetName="Border"
Value="{DynamicResource SelectedBackgroundBrush}" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true" />
<Condition Property="Selector.IsSelectionActive" Value="false" />
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Border"
Value="{DynamicResource SelectedBackgroundBrush}" />
<Setter Property="Opacity" TargetName="Border" Value="0.6" />
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground"
Value="{DynamicResource DisabledForegroundBrush}" />
<Setter Property="Background" TargetName="Border"
Value="{DynamicResource DisabledBackgroundBrush}"/>
<Setter Property="BorderBrush" TargetName="Border"
Value="{DynamicResource DisabledBorderBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My ListBox:
<ListBox Height="220"
DataContext="{Binding}"
ItemsSource="{Binding Persons}"
SelectedItem="{Binding SelectedPerson}"
VirtualizingStackPanel.VirtualizationMode="Recycling"
VirtualizingStackPanel.IsVirtualizing="True"
ScrollViewer.IsDeferredScrollingEnabled="True"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.CanContentScroll="True">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch"
MaxWidth="{Binding RelativeSource={RelativeSource
Mode=FindAncestor,
AncestorType={x:Type ListBox}},
Path=ActualWidth}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Grid.RowSpan="2"
Width="25" Height="25"
Margin="0,0,5,0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Text="{Binding Path=BusinessDataObject.Category}">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="TextAlignment" Value="Center"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="Transparent"/>
<Style.Triggers>
<Trigger Property="Text" Value="A">
<Setter Property="Background" Value="Red"/>
</Trigger>
<Trigger Property="Text" Value="B">
<Setter Property="Background" Value="Orange"/>
</Trigger>
<Trigger Property="Text" Value="C">
<Setter Property="Background" Value="Blue"/>
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock Grid.Row="0"
Grid.Column="1"
Margin="0,0,10,0"
HorizontalAlignment="Left"
TextWrapping="Wrap"
FontWeight="Bold"
Text="{Binding Path=BusinessDataObject.FullNameReversed}"/>
<TextBlock Grid.Row="1" Grid.Column="1" Margin="0,0,10,0"
HorizontalAlignment="Left"
Text="{Binding Path=BusinessDataObject.Position}"/>
<TextBlock Grid.Row="0" Grid.Column="2" Margin="0,0,0,0"
HorizontalAlignment="Right"
TextAlignment="Left"
Text="{Binding Path=BusinessDataObject.Phone}"/>
<TextBlock Grid.Row="1" Grid.Column="2" Margin="0,0,0,0"
HorizontalAlignment="Right"
TextAlignment="Left"
Text="{Binding Path=BusinessDataObject.Mobile}"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Category should be left, Phone & Mobile should be on the right and Name & Position should fill the whole space that is left. It seems to be that there is no "whole" space within the Items although they optically fill the space of the listboxes width.
Could anyone help me? I'm getting mad about this. :-(
Edit: Picture
Try setting the HorizontalContentAlignment for the ListBoxItem to Stretch. Something like the one in this link except using "ListBox" and "ListBoxItem":

Resources