0

I'm working on a project with a ListBox.

Each ListBoxItem is either:

  • A Favourite
  • Not a favourite

In addition, by default, each ListBoxItem is also either:

  • Selected
  • Hovered over
  • Default (not selected / hovered over)

I have several different highlights based on the 6 combinations given by the 2x3 states above.

Each ListBoxItem will be individually highlighted based on which conditions are matched.

Since each ListBoxItem must match a DataTrigger state and a Trigger state, I am using MultiDataTrigger, with the RelativeSource of the Binding set to {RelativeSource Self}, for Trigger bindings.

My ListBox is presented as follows:

<ListBox ItemsSource="{Binding Tracks}" SelectedItem="{Binding SelectedTrack}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>

    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
            <Style.Triggers>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding IsFavourite}" Value="True"/>
                        <Condition Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="True"/>
                    </MultiDataTrigger.Conditions>

                    <Setter Property="Background" Value="#A3E4D7"/>
                    <Setter Property="BorderBrush" Value="#48C9B0"/>
                </MultiDataTrigger>

                <!-- More MultiDataTrigger conditions and setters here -->
            </Style.Triggers>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

Each item which is favourite should have a green accent. The accents range from very light (when favourite and not selected), to heavy (when favourite and selected).

Items which are not favourite have blue accents.

My green accent works when an item is favourite and not selected, but as soon as an item is selected, my green accent disappears, and the default blue one appears.

You can see a screenshot of this happening here, where the bolded items are favourites. The selected, bold, item is not green, even though I have a MultiDataTrigger which dictates that it should be, as shown above.

The same problem occurs with the MouseHover DataTrigger. It's the default blue (not my blue) instead of green.

Does anyone know why my style is being overridden or what is overriding it?

  • 1
    The ListBox selected item background color is handled by the ListBoxItem control template triggers, which will bypass your style triggers in the ItemContainerStyle. If you don't need to support Windows 10, [this answer will work](https://stackoverflow.com/a/46773636/424129). But you really shouldn't go around not supporting Windows 10. You may just have to replace ListBoxItem.Template in your ItemContainerStyle. – 15ee8f99-57ff-4f92-890c-b56153 Oct 23 '17 at 16:45
  • 1
    @EdPlunkett Thanks! I solved my problem by replacing the Template. Definitely not worth the three days' worth of debugging. If you want to give an answer so I can mark it as solved? –  Oct 23 '17 at 16:51

1 Answers1

0

The trouble is that ListBoxItem.Background isn't used when the ListBoxItem is in the selected state.

Prior to Windows 10, the default ListBoxItem control template had a trigger that applied {DynamicResource {x:Static SystemColors.HighlightBrushKey}} to the background of some child control in the template, so you could just define a new resource with that key in scope:

<ListBox.Resources>
    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#06658D" />

But Windows 10 does it differently. The above fix fails in Windows 10. I'm on Win7 at work and will to beg a few minutes on somebody's Win10 machine to investigate.

For now, you can replace the Template in your ItemContainerStyle. If it were me, I'd write a trigger on IsSelected that sets the background to {DynamicResource {x:Static SystemColors.HighlightBrushKey}}, so I can define a brush with that key at the application level.