WPF style triggers on a TreeView? - wpf

I have the following treeview defined in my xaml:
<TreeView Name="PST_TreeView"
Grid.Row="0"
Grid.Column="0"
Width="Auto"
Height="Auto"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ItemsSource="{Binding SitesCollection}"
ItemTemplate="{StaticResource SitesTemplate}"
Style="{StaticResource TreeViewStyleBasic}" />
With Resource bindings targeting my resources file:
<Style x:Key="TreeViewStyleBasic" TargetType="TreeView">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="{DynamicResource TitleBarButtons_BorderBrush}" />
<Setter Property="BorderThickness" Value="0 0 2 0" />
</Style>
<Style x:Key="TreeViewItemStyle_CatNodes" TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="Snow" />
<Setter Property="FontFamily" Value="Calibri" />
<Setter Property="FontSize" Value="16" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="TextAlignment" Value="Left" />
</Style>
<Style x:Key="TreeViewItemStyle_ChildNodes" TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="Snow" />
<Setter Property="FontFamily" Value="Calibri" />
<Setter Property="FontSize" Value="14" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontStyle" Value="Italic" />
<Setter Property="TextAlignment" Value="Left" />
</Style>
<DataTemplate x:Key="VolumeInfoDataTemplate">
<StackPanel Orientation="Horizontal">
<TextBlock Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Margin="5"
Style="{DynamicResource TreeViewItemStyle_ChildNodes}"
Text="{Binding VolumeName}" />
</StackPanel>
</DataTemplate>
<HierarchicalDataTemplate x:Key="SitesTemplate"
ItemsSource="{Binding VolumesList}"
ItemTemplate="{StaticResource VolumeInfoDataTemplate}">
<StackPanel Orientation="Horizontal">
<TextBlock Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Margin="5"
Style="{DynamicResource TreeViewItemStyle_CatNodes}"
Text="{Binding SiteName}" />
</StackPanel>
</HierarchicalDataTemplate>
The xaml and resource look ups above work find and as expected.
How might I employ triggers to extend my style definitions to say for example handle the 'IsSelected' event so that the selected tree node will have a slate grey border and a light grey background?
RESEARCH: Kind of thing I am going for.
UPDATE: There is no IsSelected property on the TreeView, however TreeViewItem does has one defined.

Try this:
<DataTemplate x:Key="VolumeInfoDataTemplate">
<StackPanel Orientation="Horizontal">
<TextBlock Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Margin="5"
Style="{DynamicResource TreeViewItemStyle_ChildNodes}"
Text="{Binding VolumeName}"
Name="Tb" />
</StackPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TreeViewItem}}" Value="True">
<Setter TargetName="Tb" Property="Background" Value="LightGray"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>

Related

side bar with multiple collapsible sub menu in side bar wpf

I have two toggle buttons which I am used to making to the collapsable sidebar sub-menu option. I want to display both collapsed initially. when of them is pressed it shout expand and when the other submenu is clicked the first one should collapse and the other one should get open.
<ToggleButton Grid.Column="0" Height="50" Style="{StaticResource CategoryButton}" FontSize="14" FontWeight="Regular" Foreground="{StaticResource SupremeFontColor}" Margin="6,2,6,0"
FontFamily="{StaticResource FontFamily}" Content="Report Group" ToolTip="Report Group" x:Name="reportToggleButton" BorderBrush="Transparent" Click="reportToggleButton_Click">
</ToggleButton>
<Grid Height="60" Visibility="{Binding IsChecked, ElementName=reportToggleButton, Converter={StaticResource BoolToVisibilityConverter}}">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="Fail Reports." Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,0,0" Width="Auto" Height="30">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Background" Value="white" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource SupremeprimaryDarkBlue}" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock Text="Other Reports." Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,0,0" Width="Auto" Height="30">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Background" Value="white" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource SupremeprimaryDarkBlue}" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
<!--Sales Report-->
<ToggleButton Grid.Column="0" Height="50" Style="{StaticResource CategoryButton}" FontSize="14" FontWeight="Regular" Foreground="{StaticResource SupremeFontColor}" Margin="6,2,6,0"
FontFamily="{StaticResource FontFamily}" Content="Sales Report" ToolTip="Sales Report" x:Name="salesToggleButton" BorderBrush="Transparent" Click="salesToggleButton_Click">
</ToggleButton>
<Grid Height="60" Visibility="{Binding IsChecked, ElementName=salesToggleButton, Converter={StaticResource BoolToVisibilityConverter}}">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="Daily Course Summary" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center" Width="Auto" Height="30">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Background" Value="white" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource SupremeprimaryDarkBlue}" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock Text="Finalize Event Payment Report" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center" Width="Auto" Height="30">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Background" Value="white" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource SupremeprimaryDarkBlue}" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
I would first clean-up your mess at least a little:
<!--I used StackPanel, but it can be any container you have-->
<StackPanel>
<StackPanel.Resources>
<Style TargetType="TextBlock" x:Key="myTextbox">
<Setter Property="Background" Value="White" />
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Width" Value="Auto"/>
<Setter Property="Height" Value="30"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="ToggleButton" x:Key="myToggleButton">
<Setter Property="Height" Value="50" />
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="Regular"/>
<Setter Property="Margin" Value="6,2,6,0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
</Style>
</StackPanel.Resources>
<ToggleButton Content="Report Group" ToolTip="Report Group" x:Name="reportToggleButton" Click="reportToggleButton_Click" Style="{StaticResource myToggleButton}"/>
<StackPanel Orientation="Horizontal" Height="60" Visibility="{Binding IsChecked, ElementName=reportToggleButton, Converter={StaticResource boolToVisibilityConverter}}">
<TextBlock Text="Fail Reports." Style="{StaticResource myTextbox}"/>
<TextBlock Text="Other Reports." Style="{StaticResource myTextbox}"/>
</StackPanel>
<!--Sales Report-->
<ToggleButton Content="Sales Report" ToolTip="Sales Report" x:Name="salesToggleButton" Click="salesToggleButton_Click" Style="{StaticResource myToggleButton}"/>
<StackPanel Orientation="Horizontal" Height="60" Visibility="{Binding IsChecked, ElementName=salesToggleButton, Converter={StaticResource boolToVisibilityConverter}}">
<TextBlock Text="Daily Course Summary" Style="{StaticResource myTextbox}"/>
<TextBlock Text="Finalize Event Payment Report" Style="{StaticResource myTextbox}"/>
</StackPanel>
</StackPanel>
And after would add something like this in your event handlers:
private void reportToggleButton_Click(object sender, RoutedEventArgs e)
{
salesToggleButton.IsChecked = !(sender as ToggleButton).IsChecked;
}
private void salesToggleButton_Click(object sender, RoutedEventArgs e)
{
reportToggleButton.IsChecked = !(sender as ToggleButton).IsChecked;
}
However I would recommend you to learn how to use standard components (maybe MenuItem or TreeItem would work for you) before considering creating something like that.

WPF DataGrid ColumnHeaders Scroll Out of Sync with Data Cells

The ColumnHeaders of my WPF DataGrid get out of sync with the data cells when scrolling horizontally. It appears that the Columnheaders scroll faster than the data cells. Vertical scrolling is workig ok. This is the View, which sizes the width of the DataGrid according to the Window size:
<Window.DataContext>
<vm:DemoDgViewModel/>
</Window.DataContext>
<Grid x:Name="dGrid" Height="300" Margin="15,0,15,0" Background="AliceBlue" Width="1000">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="32"/>
<RowDefinition Height="32"/>
<RowDefinition Height="32"/>
<RowDefinition Height="32"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<DataGrid x:Name="demoDG" Width="{Binding Path=Width,
RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}"
ItemsSource="{Binding Path = DataContext.AppDataLcv,
RelativeSource={RelativeSource FindAncestor, AncestorType=
{x:Type Window}}}" Style ="{DynamicResource StDataGrid2}"
Grid.Row="0" Grid.RowSpan="6" Height="300" AlternationCount ="2"
IsSynchronizedWithCurrentItem="True" SelectionMode ="Single"
AutoGenerateColumns="False" CanUserAddRows="True" CanUserSortColumns ="True"
ScrollViewer.CanContentScroll="True" ColumnWidth="Auto">
<DataGrid.Columns>
<DataGridTextColumn Header="desciption" SortMemberPath="desc"
Binding ="{Binding Path=desc}" IsReadOnly="False" CanUserSort="True"
Width ="200">
<DataGridTextColumn.ElementStyle>
<Style TargetType="TextBlock">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Padding" Value="5,0,0,0"/>
</Style>
</DataGridTextColumn.ElementStyle>
<DataGridTextColumn.EditingElementStyle>
<Style TargetType="TextBox">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Padding" Value="5,0,0,0"/>
</Style>
</DataGridTextColumn.EditingElementStyle>
</DataGridTextColumn>
<!-- column 2, 3, 4, 5 same as the first -->
</DataGrid.Columns>
</DataGrid>
</Grid>
And this is the DataGrid style:
<!-- DataGrid Styles ============ -->
<Style x:Key="StDataGrid2" TargetType="DataGrid" >
<Setter Property="RowHeaderWidth" Value="0" />
<Setter Property="RowHeight" Value="32" />
<Setter Property="RowBackground" Value="PowderBlue" />
<Setter Property="FontWeight" Value="Regular" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="ScrollViewer.CanContentScroll" Value="True" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ColumnHeaderStyle" Value ="{DynamicResource stDghdr}" />
<Setter Property="Margin" Value="0,0,10,0" />
<Setter Property="Template">
<Setter.Value >
<ControlTemplate >
<Border BorderThickness="1" BorderBrush="#FF60727B">
<DockPanel Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource
FindAncestor, AncestorType={x:Type Window}}}">
<StackPanel DockPanel.Dock="Top" Height="15" Orientation="Horizontal"
HorizontalAlignment="Left" CanHorizontallyScroll="False" Width="200" >
<RepeatButton x:Name="LineLeftButton" Width="90" Content="<"
Interval="1000" Delay="1000"
Command="{x:Static ScrollBar.LineLeftCommand}"
CommandTarget="{Binding ElementName=dgscrollviewer}"ClickMode="Hover" />
<RepeatButton x:Name="LineRightButton" Width="90" Content=">"
Interval="1000" Delay="1000"
Command="{x:Static ScrollBar.LineRightCommand}"
CommandTarget="{Binding ElementName=dgscrollviewer}" ClickMode="Hover"/>
</StackPanel>
<ScrollViewer x:Name="dgscrollviewer" CanContentScroll ="True"
VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility ="Auto">
<StackPanel Orientation="Vertical" Height="Auto"
HorizontalAlignment="Stretch" CanHorizontallyScroll="True">
<DataGridColumnHeadersPresenter HorizontalAlignment="Stretch"
Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource
FindAncestor, AncestorType={x:Type Window}}}"
HorizontalContentAlignment="Stretch" Height= "32" Padding="0" Margin="0" />
<ItemsPresenter Height="300" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</StackPanel>
</ScrollViewer>
</DockPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="stDghdr" TargetType="DataGridColumnHeader" >
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value ="Stretch"/>
<Setter Property="Height" Value="25" />
<Setter Property="SeparatorBrush" Value="#79858b" />
<Setter Property="Padding" Value="5,0,5,0" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Background" Value ="LavenderBlush"/>
<Setter Property="BorderBrush" Value="#FF60727B"/>
<Setter Property="BorderThickness" Value="2,0,2,2"/>
</Style>
Here is a link to download the demo:
Demo
*Edit/ Update: I think the ColumnHeaders are scrolling faster because they are controlled by a different ScrollViewer? For instance, if I set a large FontSize property on the ScrollViewer that is in the DataGrid style, the text in the DataGrid cells gets bigger but not the text in the ColumnHeaders.
Any ideas or suggestions besides creating a ControlTemplate for the entire DataGrid? Thank you.

How to change foreground of SelectedItem in ListBox?

I have asked this question yesterday and got a good quick answer. But now I have something different where the last solution does not work.
First lets have a look at my xaml:
<ListBox ItemsSource="{Binding Children}" x:Name="lst">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" Orientation="Vertical" MaxHeight="{Binding ElementName=lst, Path=ActualHeight}"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Width" Value="250" />
<Setter Property="Height" Value="125" />
<Setter Property="Margin" Value="2.5" />
<Setter Property="Padding" Value="2.5" />
<Setter Property="Background" Value="{Binding Background, Converter={StaticResource stringToBrushConverter}}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="VerticalContentAlignment" Value="Bottom" />
</Style>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="125" Width="250">
<Path Data="{Binding Image}" VerticalAlignment="Center"
Stretch="Uniform" Fill="#FFFFFFFF"
Width="68" Height="68" Margin="10" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="0" />
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
<TextBlock Text="{Binding Title, Converter={StaticResource spaceToNewLineConverter}}" VerticalAlignment="Top"
Margin="40,10,10,10" FontSize="24" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The above xaml works perfectly well and gives good output. But now I want to change the foreground color of SelectedItem.
Here you can find find the question that I asked yesterday.
Now, the solution to the question asked yesterday was something like this :
<Style x:Key="BlankListBoxContainerStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FocusVisualStyle" Value="{x:Null} "/>
</Style>
If I change the template as shown in the above code I loose my DataTemplate that I applied on the listbox.
I have also tried SolidColorBrush and using Setters and Triggers. But I am out of luck.
You can do this by using a trigger in your Style. Try something like this:
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Width" Value="250" />
<Setter Property="Height" Value="125" />
<Setter Property="Margin" Value="2.5" />
<Setter Property="Padding" Value="2.5" />
<Setter Property="Background" Value="{Binding Background, Converter={StaticResource stringToBrushConverter}}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="VerticalContentAlignment" Value="Bottom" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</ListBox.Resources>
In this case, you need to pass Foreground value in the DataTemplate of ListBoxItem. This can be done as follows:
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal"
Height="125"
Width="250">
...
<TextBlock Foreground="{Binding Path=Foreground,
RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}" ... />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>

Can't figure out why some controls are being clipped

So I have buttons that extend beyond the grid they are in, but they only show up on mouse over. In some grids they render correctly and some they are rendered incorrectly. It seems to be consistent which ones are incorrect, but I cannot figure out why the issue occurs on those particular grids. I looked at the elements with snoop and can't see any issues with the properties as they are being rendered.
Correct rendering:
Incorrect rendering:
Here's the code
<ScrollViewer x:Name="GridItemScroller" Height="300">
<ItemsControl Margin="0,0" ItemsSource="{Binding Source={StaticResource rowItemsView}}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Grid VerticalAlignment="Top" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Margin" Value="{Binding RowIndex, Converter={StaticResource IndexToPositionConverter}, ConverterParameter=20}" />
<Setter Property="VerticalAlignment" Value="Top" />
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate >
<Grid x:Name="itemPanel" VerticalAlignment="Top" ClipToBounds="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Grid.ColumnSpan="2" Fill="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<CheckBox IsChecked="{Binding Path=Filtered, Converter={StaticResource NotConverter}}" Content="{Binding RowName}" />
<Canvas x:Name="CheckBoxButtonPanel" Grid.Column="1" ClipToBounds="False" VerticalAlignment="Center" Width="25" Height="2">
<Canvas.Style>
<Style TargetType="Canvas">
<Setter Property="Visibility" Value="Collapsed" />
<Setter Property="Panel.ZIndex" Value="0" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=itemPanel, Path=IsMouseOver}" Value="True">
<Setter Property="Visibility" Value="Visible" />
<Setter Property="Panel.ZIndex" Value="10" />
</DataTrigger>
</Style.Triggers>
</Style>
</Canvas.Style>
<Button HorizontalAlignment="Right" Height="15" Width="25" Canvas.Top="-15" local:ToolIcon.IconName ="{Binding Source={StaticResource LanguageInfo}, XPath=//Strings/#Up}" local:ToolIcon.Image="pack://application:,,,/CalUI;component/images/Up.png"
Style="{DynamicResource ToolIcon}" Click="Move_Up"/>
<Button HorizontalAlignment="Right" Height="15" Width="25" Canvas.Top="2" local:ToolIcon.IconName ="{Binding Source={StaticResource LanguageInfo}, XPath=//Strings/#Down}" local:ToolIcon.Image="pack://application:,,,/CalUI;component/images/Down.png"
Style="{DynamicResource ToolIcon}" Click="Move_Down"/>
</Canvas>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
Here's the XAML for the ToolIcon Style
<Style x:Key="ToolIcon" TargetType="{x:Type Button}">
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="ImageGrid">
<Grid.Effect>
<local:SaturationLuminanceEffect SaturationShift="0.95" LuminanceShift="0.8" />
</Grid.Effect>
<Image x:Name="image" RenderTransformOrigin="0.5,0.5" Source="{TemplateBinding local:ToolIcon.Image}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect" TargetName="ImageGrid">
<Setter.Value>
<local:SaturationLuminanceEffect SaturationShift="1" LuminanceShift="1.2" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Effect" TargetName="ImageGrid">
<Setter.Value>
<local:SaturationLuminanceEffect SaturationShift="1.05" LuminanceShift="1.0" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Effect" TargetName="ImageGrid">
<Setter.Value>
<local:SaturationLuminanceEffect SaturationShift="0.80" LuminanceShift="1.3" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
#CodeNaked had the following insight in a comment:
Clipping can be a tricky business. See this question for more info on the subject.
The question mentioned is «Why do my panels clip all the way around the panel when made smaller than the explicit size?»

DataTrigger inside ControlTemplate doesn't update

I have a ListBox that is bound to a list of CustomerViewModel-objects, that each has two dependency properties:
- Name (string)
- Description (string)
- IsVisible (bool)
(the IsVisible property is True by default and is reversed via the ToggleVisibility Command on the CustomerViewModel)
I would like to display the Name and Description to the right of a Border-control, that is has a Transparent background when the IsVisible property is True and Green when the False.
My problem is that the DataTrigger part of the code below doesn't work the way I want, because the Setter-part isn't triggered when the IsVisible is changed.
What am I doing wrong?
Here's my code:
<UserControl.Resources>
<Style x:Key="ListBoxStyle" TargetType="{x:Type ListBox}">
<Setter Property="Margin" Value="-1,-1,0,0" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="ItemContainerStyle" Value="{DynamicResource ListboxItemStyle}" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
</Style>
<Style x:Key="ListboxItemStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid>
<Border x:Name="border" Background="{TemplateBinding Background}" BorderBrush="#FFD4D6D5" BorderThickness="0,0,0,1">
<Grid Height="70" Margin="0,0,10,0">
<Grid.RowDefinitions>
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition />
<RowDefinition Height="10" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border x:Name="visibilityColumn" Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" Background="Transparent" Width="4" Margin="0,0,4,0" />
<TextBlock x:Name="customerName" Grid.Row="1" Grid.Column="1" Foreground="#FF191919" FontWeight="Bold" Text="{Binding Name}" VerticalAlignment="Top" />
<TextBlock Grid.Row="2" Grid.Column="1" VerticalAlignment="Stretch" Text="{Binding Description}" TextWrapping="Wrap" Foreground="#FFB4B4B4" TextTrimming="CharacterEllipsis" />
</Grid>
<Border.ContextMenu>
<ContextMenu>
<MenuItem Header="Edit..." />
<MenuItem Header="Visible" IsCheckable="True" IsChecked="{Binding IsVisible}" Command="{Binding ToggleVisibility}"/>
</ContextMenu>
</Border.ContextMenu>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FFEEEEEE" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#FFF5F5F5" />
<Setter TargetName="customerName" Property="Foreground" Value="Green" />
</Trigger>
<DataTrigger Binding="{Binding IsVisible}" Value="False"> <!--If Value="True" the customerName Border shows up green!-->
<Setter Property="Background" Value="Green" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<ListBox Style="{StaticResource ListBoxStyle}" ItemsSource="{Binding CustomerViewModels}" />
UPDATED:
The DataTrigger was indeed missing the TargetName="visibilityColumn" as pointed out by Goblin.
However - the "real" problem was, this line:
<MenuItem Header="Visible" IsCheckable="True" IsChecked="{Binding IsVisible}" Command="{Binding ToggleVisibility}"/>
A checkable MenuItem has a TwoWay binding-mode on the IsChecked-property, so I was actually inverting the IsVisiblity twice - via databinding and via the ToggleVisibility command... Whoops :)
Try switching this part:
<DataTrigger Binding="{Binding IsVisible}" Value="False">
<Setter Property="Background" Value="Green" />
</DataTrigger>
With this part:
<DataTrigger Binding="{Binding IsVisible}" Value="False">
<Setter TargetName="visibilityColumn" Property="Background" Value="Green" />
</DataTrigger>
I think you missed the TargetName property in your setter. (Same goes for your IsSelected- and IsMouseOver-trigger by the way)
Hope this helps!

Resources