WPF Design-Time vs Run-Time Style Differences with Triggers - wpf

I am having a big issue with how XAML is rendered in Design-Time vs Run-Time. For the most part, things are consistent, but when I use any styles which have a Trigger, the trigger is not checked in Design-Time.
Here is a sample application to show how things are displayed differently:
<Window x:Class="DesignDifferencesWithDesignAndRuntime.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="400" Width="400">
<Window.Resources>
<Style x:Key="multiLineInTrigger" TargetType="{x:Type TextBox}">
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Width" Value="150" />
<Setter Property="Height" Value="22" />
<Setter Property="BorderBrush" Value="Blue" />
<Setter Property="BorderThickness" Value="2" />
<Style.Triggers>
<Trigger Property="AcceptsReturn" Value="True">
<Setter Property="Width" Value="Auto" />
<Setter Property="Height" Value="Auto" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="singleLineInTrigger" TargetType="{x:Type TextBox}">
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Width" Value="Auto" />
<Setter Property="Height" Value="Auto" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="BorderBrush" Value="Blue" />
<Setter Property="BorderThickness" Value="2" />
<Style.Triggers>
<Trigger Property="AcceptsReturn" Value="False">
<Setter Property="Width" Value="150" />
<Setter Property="Height" Value="22" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalAlignment" Value="Right" />
</Style>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="Single (Single Style)" Grid.Row="0" Grid.Column="0" />
<TextBlock Text="Single (Multi Style)" Grid.Row="1" Grid.Column="0" />
<TextBlock Text="Multi (Single Style)" Grid.Row="2" Grid.Column="0" />
<TextBlock Text="Multi (Multi Style)" Grid.Row="3" Grid.Column="0" />
<TextBox Grid.Row="0" Grid.Column="1" Style="{StaticResource singleLineInTrigger}" />
<TextBox Grid.Row="1" Grid.Column="1" Style="{StaticResource multiLineInTrigger}" />
<TextBox Grid.Row="2" Grid.Column="1" Style="{StaticResource singleLineInTrigger}" AcceptsReturn="True" />
<TextBox Grid.Row="3" Grid.Column="1" Style="{StaticResource multiLineInTrigger}" AcceptsReturn="True" />
</Grid>
I created two separate TextBox styles which do the exact same thing. When the TextBox is Single-Line (AcceptsReturn = False) I need the width to be 150, and the height to be 22. When it is Multi-Line (AcceptsReturn = True, obviously) I need the width and height to stretch and take up the entire space.
Both of these triggers work perfectly in Run-Time, as running this code will show, but in Design-Time they both fail to work on the trigger condition. When using the "multiLineInTrigger" style, the textbox will have the height and width set statically (regardless of AcceptsReturn), but when using the "singleLineInTrigger" style, the controls will be stretched regardless of AcceptsReturn value.
Is there a solution for this issue? This has become quite troublesome and time-consuming for the development team because they do not know when it is working vs when it is not until compiling and running the application (which is a lengthy process).
Thanks.

I've seen this problem many times and I've never seen a workaround for it, Triggers doesn't work in Visual Studio 2010 Designer. Hopefully they can get this fixed soon.
The only solution I can think of is to do the design work in Expression Blend 4 instead where this works perfectly. Might not be ideal but at the moment I don't think you have any other choise

Related

WPF XAML: Button's background color doesn't change on mouseover [duplicate]

This question already has answers here:
Change color of Button when Mouse is over
(5 answers)
Closed 1 year ago.
I need to change text color, cursor and background of a button on mouse hover. I'm trying to do this by changing styles but also tried adding style trigger directly to the button
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Black" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</Style.Triggers>
Text color and cursor change, but background color remain the same (light blue). Please tell me what could be the problem?
Screenshot
Full code:
<Window x:Class="WpfApp3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp3"
mc:Ignorable="d"
Title="Заголовок" Height="640" Width="960">
<Window.Resources>
<Style TargetType="Button" x:Key="SidebarButton">
<Style.Setters>
<Setter Property="Control.FontFamily" Value="Segoe UI" />
<Setter Property="Control.Background" Value="#333742" />
<Setter Property="Control.Foreground" Value="White" />
<Setter Property="Control.BorderThickness" Value="0" />
<Setter Property="Control.Padding" Value="10" />
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Black" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid Background="#333742">
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" MinWidth="150" MaxWidth="200"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="0" Grid.Row="0" Background="#414550"></StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="0"></StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="0" Grid.Row="1" Background="#333742">
<Border Height="80">
<TextBlock FontSize="18" Foreground="#fff" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="30">Меню</TextBlock>
</Border>
<Button Style="{StaticResource SidebarButton}">Печать кодов</Button>
<Button Style="{StaticResource SidebarButton}">Настройки</Button>
<Button Style="{StaticResource SidebarButton}">О программе</Button>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="1" Background="#2d3039"></StackPanel>
</Grid>
</Window>
You can find the answer in this response.
You can define the style like this :
<Style TargetType="Button" x:Key="SidebarButton">
<Style.Setters>
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="Background" Value="#333742" />
<Setter Property="Foreground" Value="White" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" Padding="10">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Black" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</Style.Triggers>
</Style>

Gradient Border on Outer Edges of DataGridHeader

See the image below...
This is a screen shot taken from an application that was created in c++ using QT. I need to create a similar look by adding gradient borders to the outside vertical edges of my DataGrid header and I do not see a property of the DataGrid that will allow me to accomplish this. Using the DataGridColumnHeader style below, I have acheived the look I am after minus the border on the outside edges. How can I add these borders to the outside of the header only?
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridColumnHeader">
<Border BorderBrush="{StaticResource ContentPanelHeaderBackgroundBrush}"
BorderThickness="0,1,0,0"
CornerRadius="2,2,0,0">
<DockPanel Background="{StaticResource ContentPanelHeaderBackgroundBrush}" Width="auto">
<Border BorderThickness="0,1,0,0" DockPanel.Dock="Bottom" BorderBrush ="{StaticResource ContentPanelBottomBorderBrush}" />
<Grid Height="22">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter VerticalAlignment="center" Margin="4" />
</Grid>
</DockPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Padding" Value="4,0,4,0" />
<Setter Property="Foreground" Value="{StaticResource FontActiveBrush}" />
<Setter Property="FontFamily" Value="{StaticResource MainFont}" />
<Setter Property="FontSize" Value="11" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="Height" Value="22" />
<Setter Property="Cursor" Value="Hand" />
</Style>
I would suggest using a Tool like Snoop to inspect the XAML-Tree at runtime. It seems to me that there is an additional item rendered somewhere in the tree having its default template applied. Since you don't seem to overwrite all default templates in the tree I guess you'll find the right element this way (just gotta look for an item with background or border being black).
You can find the tool here: http://snoopwpf.codeplex.com/

reusing user controls in silverlight

i'm relatively new to wpf/mvvm so this is probably something basic, but I have a user control that displays perfectly on its own, but when I try to load it into a stackpanel of a different user control, it won't display at all. does anyone have any idea of what i'm doing incorrectly here? i've tried setting up the width/height/minwidth/minheight, but none of it makes a difference.
here is the xaml for the re-usable user control:
<UserControl x:Class="BankProductControlLibrary.Views.IdentificationData"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:bpcl="clr-namespace:BankProductControlLibrary.UserControls"
mc:Ignorable="d"
d:DesignHeight="102" d:DesignWidth="535">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/BankProductSilverlightControl;component/Resources/Style.xaml"/>
<ResourceDictionary>
<Style x:Key="textBlockStyle" TargetType="TextBlock">
<Setter Property="Height" Value="28"/>
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Width" Value="409" />
</Style>
<Style x:Key="textBlockStyle2" TargetType="TextBlock">
<Setter Property="Height" Value="23"/>
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Width" Value="Auto" />
<Setter Property="Margin" Value="0,0,0,0" />
</Style>
<Style x:Key="comboBoxStyle" TargetType="ComboBox">
<Setter Property="Height" Value="23"/>
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Width" Value="180" />
<Setter Property="Margin" Value="0,0,0,0" />
</Style>
<Style x:Key="textBoxStyle" TargetType="TextBox">
<Setter Property="Height" Value="23"/>
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Margin" Value="0,0,0,0" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Width" Value="132" />
</Style>
<Style x:Key="dateBoxStyle" TargetType="bpcl:DateBox">
<Setter Property="Height" Value="23"/>
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Margin" Value="0,0,0,0" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Width" Value="75" />
</Style>
<Style x:Key="dateFormatingExplanationStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="9"/>
<Setter Property="FontStyle" Value="Italic" />
<Setter Property="Height" Value="23" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Width" Value="75"/>
<Setter Property="Text" Value="(mm/dd/yyyy)" />
</Style>
<Style x:Key="placeOfIssuanceExplanationStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="9"/>
<Setter Property="FontStyle" Value="Normal" />
<Setter Property="Height" Value="23" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Width" Value="Auto"/>
</Style>
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<StackPanel MinHeight="102" MinWidth="535">
<TextBlock Style="{StaticResource textBlockStyle}">
Select the ID provided from the drop-down list. ID must be a photo ID.
</TextBlock>
<Grid Style="{StaticResource ScreenStyle}" x:Name="LayoutRoot" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110*" />
<ColumnDefinition Width="180" />
<ColumnDefinition Width="88*" />
<ColumnDefinition Width="142*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<!--Column0-->
<TextBlock Style="{StaticResource textBlockStyle2}"
Grid.Row="0" Grid.Column="0"
Text="Type:"
/>
<TextBlock Style="{StaticResource textBlockStyle2}"
Grid.Row="1" Grid.Column="0"
Text="Date of Issuance:"
/>
<TextBlock Style="{StaticResource textBlockStyle2}"
Grid.Row="2" Grid.Column="0"
Text="Place of Issuance:" />
<!--Column1-->
<ComboBox Name="Ids" Style="{StaticResource comboBoxStyle}"
Grid.Row="0" Grid.Column="1"
DisplayMemberPath="Value"
SelectedValuePath="Key"
SelectedValue="{Binding SelectedTaxpayerId, Mode=TwoWay}"
/>
<StackPanel Orientation="Horizontal"
Grid.Row="1" Grid.Column="1">
<bpcl:DateBox x:Name="IssueDate" Style="{StaticResource dateBoxStyle}"/>
<TextBlock Style="{StaticResource dateFormatingExplanationStyle}" />
</StackPanel>
<StackPanel Orientation="Horizontal"
Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2">
<!--This should be bpcl:AlphaTextBox-->
<TextBox Name="PlaceOfIssuance" Style="{StaticResource textBoxStyle}"
MaxLength="2"
Width="40"/>
<TextBlock Style="{StaticResource placeOfIssuanceExplanationStyle}"
Text="Enter state abbreviation or country code"
/>
</StackPanel>
<!--Column2-->
<TextBlock Style="{StaticResource textBlockStyle2}"
Grid.Row="0" Grid.Column="2"
Text="ID Number:"
/>
<TextBlock Style="{StaticResource textBlockStyle2}"
Grid.Row="1" Grid.Column="2"
Text="Expiration Date:"/>
<!--Column3-->
<TextBox Name="IdentificationNumber" Style="{StaticResource textBoxStyle}"
Grid.Row="0" Grid.Column="3" />
<StackPanel Orientation="Horizontal"
Grid.Row="1" Grid.Column="3" >
<bpcl:DateBox x:Name="ExpirationDate" Style="{StaticResource dateBoxStyle}"/>
<TextBlock Style="{StaticResource dateFormatingExplanationStyle}" />
</StackPanel>
</Grid>
</StackPanel>
</UserControl>
and here is where i try to consume it:
<UserControl x:Class="BankProductControlLibrary.Views.JTH.TaxpayerIdentificationView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:ltsa="http://www.libtax.com/LibTax/BankApp"
xmlns:bpcl="clr-namespace:BankProductControlLibrary.UserControls"
xmlns:views="clr-namespace:BankProductControlLibrary.Views"
mc:Ignorable="d ltsa"
d:DesignHeight="102" d:DesignWidth="520">
<UserControl.Resources>
<Style x:Key="validationStyle" TargetType="TextBlock">
<Setter Property="Height" Value="23" />
<Setter Property="Width" Value="Auto"/>
<Setter Property="Foreground" Value="Red" />
</Style>
</UserControl.Resources>
<StackPanel>
<views:IdentificationData x:Name="TPIdentification" />
<TextBlock Name="ValidationErrorMessage" Style="{StaticResource validationStyle}" />
</StackPanel>
</UserControl>
I think you should check if the user control has datacontext. There is a nice tool that helped me a lot with WPF:
http://wpftutorial.net/Inspector.html

WPF Mouseover Trigger Effect for Child Controls

Lets say I have this bit of code:
<Window>
<Window.Resources>
<Color x:Key="MyColor"
A="255"
R="152"
G="152"
B="152" />
<DropShadowEffect x:Key="MyEffect"
ShadowDepth="0"
Color="{StaticResource MyColor}"
BlurRadius="10" />
<Style x:Key="MyGridStyle"
TargetType="{x:Type Grid}">
<Setter Property="Height"
Value="200" />
<Setter Property="Width"
Value="200" />
<Style.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Width"
Value="100" />
</Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Height"
Value="100" />
<Setter Property="Width"
Value="100" />
</Style>
</Style.Resources>
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="true">
<!-- How do I apply my effect when this grid is hovered over to Image and TextBox, but not the grid itself? -->
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid Style="{StaticResource MyGridStyle}">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Grid.Row="0"
Grid.Column="0"
Source="image.png" />
<TextBlock Grid.Row="0"
Grid.Column="0"
Text="Hover Over Me" />
</Grid>
</Window>
Basically I have a Style applied to the Grid that says any TextBlock or Image within it should be styles to a certain size.
I want to create a Trigger on the Grid that causes an effect to be applied to all TextBlocks and Images within the Grid, but not to the Grid itself.
I can apply the Trigger directly to TextBlock and/or Image, but then the effect only occurs on each element separately. I need to have the effect occur to any TextBlock and/or Image within the Grid despite which inner child element I am hovered over.
Can anyone help me with this?
You can do it the other way around. That is, add DataTriggers to Image and TextBlock and make them trigger on IsMouseOver for the ancestor Grid.
Note: If you want this effect to trigger as soon as the mouse is over the Grid you will need to set Background to a value, like Transparent. By default, the Background is null and this value isn't used in hit testing.
<Style x:Key="MyGridStyle" TargetType="{x:Type Grid}">
<!--<Setter Property="Background" Value="Transparent"/>-->
<Setter Property="Height" Value="200" />
<Setter Property="Width" Value="200" />
<Style.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Width" Value="200" />
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Grid},
Path=IsMouseOver}" Value="True">
<Setter Property="Effect" Value="{StaticResource MyEffect}"/>
</DataTrigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Height" Value="200" />
<Setter Property="Width" Value="200" />
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=Grid},
Path=IsMouseOver}" Value="True">
<Setter Property="Effect" Value="{StaticResource MyEffect}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Style.Resources>
</Style>
We once had a similar requirement of outer glowing ONLY the content of a row of a list box, not the row overall. We took help of this article... http://drwpf.com/blog/2008/03/25/itemscontrol-i-is-for-item-container.

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