There is a ListBox element

  <ListBox Name="PurchaseList" Width="400" Height="102" Margin="60,10,61,10" BorderThickness="0" ItemsSource="{Binding Items}" SelectionChanged="PurchaseList_SelectionChanged"> <ListBox.ItemContainerStyle> <Style TargetType="{x:Type ListBoxItem}"> <Setter Property="Background" Value="Yellow" /> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="Foreground" Value="White" /> <Setter Property="Background" Value="Red" /> <Setter Property="BorderThickness" Value="1" /> <Setter Property="BorderBrush" Value="Black" /> <Setter Property="FontSize" Value="15" /> </Trigger> </Style.Triggers> </Style> </ListBox.ItemContainerStyle> <ListBox.ItemTemplate> <DataTemplate> <Label Width="{Binding ElementName=PurchaseList, Path=Width}" Height="31" BorderBrush="Black" BorderThickness="1" Content="{Binding}" /> </DataTemplate> </ListBox.ItemTemplate> </ListBox>

When I select an element, I change the styles of the trigger — everything changes except for the background of the backlight, it still remains standard blue. How to fix it?

  • Apparently, you need not Selected, but Focused. (A blue background denotes an element with a focus, in theory.) This is how the default template works : msdn.microsoft.com/en-us/library/cc278062%28v=vs.95%29.aspx (look for <Style TargetType="ListBoxItem"> and look at the Template). In a pinch, you just have to override Template with your own. - VladD

1 answer 1

As a quick hack, try changing the color like this:

 <ListBox.Resources> <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="HotPink"/> <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="PowderBlue" /> </ListBox.Resources>

This solution takes advantage of the fact that in my version of WPF, for an element with a focus, the color is used by the key SystemColors.HighlightBrushKey . In other versions, this may not be the case; therefore, a more correct solution would be to override Tempalte 'and in ItemContainerStyle .

Honest way - override ItemContainerStyle . It is rather bulky. As a starting point, you can take the style specified in the documentation , and correct it:

 <ListBox.ItemContainerStyle> <Style TargetType="ListBoxItem"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListBoxItem"> <Grid Background="{TemplateBinding Background}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" /> <VisualState x:Name="MouseOver"> <Storyboard> <DoubleAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity" Duration="0" To=".35"/> </Storyboard> </VisualState> <VisualState x:Name="Disabled"> <Storyboard> <DoubleAnimation Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To=".55" /> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="SelectionStates"> <VisualState x:Name="Unselected" /> <VisualState x:Name="Selected"> <Storyboard> <DoubleAnimation Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity" Duration="0" To=".75"/> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Focused"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility" Duration="0"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Visible</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Unfocused"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Rectangle x:Name="fillColor" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/> <Rectangle x:Name="fillColor2" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/> <ContentPresenter x:Name="contentPresenter" Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/> <Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" Visibility="Collapsed" RadiusX="1" RadiusY="1" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </ListBox.ItemContainerStyle>

You are interested in the line with <Rectangle x:Name="fillColor2" . For example:

 <Rectangle x:Name="fillColor2" Opacity="0" Fill="HotPink" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/>

Carefully looking at the definition from the documentation, you can see why redefining the Background on the trigger did not work.

You can always look at the style that your system uses, with the help of Expression Blend (he knows how to read the system style and make a XAML definition of it, which you can then correct and use).

  • Well, yes it works. Thank. - RussCoder
  • @RussCoder: Please! Completed the answer. - VladD