Change WPF's ListBoxItem Background when it's selected and Window lost focus

Question

I was working on a Study project using MahApps:Metro (don't know if it's relevant) when I got stuck in the following problem:

Is there a way of change the Background of a ListBoxItem only when it's selected and the Window loses focus?

See the following images to ilustrate:

Here we can see my ListBox with the first item selected when the window has focus.

And on this second image we can see how it looks like when the focus is on the Window number two.

I would like to know if there's a way of changing the Blue Background of the SelectedItem to a LightGray, for example, only when the Window loses focus.

Here's what I've looked so far:

• Overwrite ControlBrushKey (actually kind of works, but replaces the style when the window has focus) [1] [2] [3]
• Overwrite HighlightBrushKey(same problem) [1]

Thank you!

Answer 1

Below example solves your problem. Note the MultiDataTrigger.

<Window.Resources>
    <DataTemplate x:Key="DataTemplate1">
        <Grid Width="200" Background="Lime">
            <TextBlock Text="{Binding}" Foreground="Black"/>
        </Grid>
    </DataTemplate>
    <DataTemplate x:Key="DataTemplate2">
        <Grid Width="200" Background="DarkGray">
            <TextBlock Text="{Binding}" Foreground="Black"/>
        </Grid>
    </DataTemplate>
    <DataTemplate x:Key="DataTemplate1Sel">
        <Grid Width="200" Background="Coral">
            <TextBlock Text="{Binding}" Foreground="Black"/>
        </Grid>
    </DataTemplate>
</Window.Resources>

<ListBox x:Name="Lst" Margin="0,56,10,0">
    <ListBox.Resources>
        <Style TargetType="ListBoxItem">
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="ContentTemplate" Value="{DynamicResource DataTemplate1Sel}"/>
                </Trigger>
                <Trigger Property="IsSelected" Value="False">
                    <Setter Property="ContentTemplate" Value="{DynamicResource DataTemplate1}"/>
                </Trigger>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition  Binding="{Binding IsActive, RelativeSource={RelativeSource AncestorType=Window, Mode=FindAncestor}}" Value="False"/>
                        <Condition  Binding="{Binding IsSelected, RelativeSource={RelativeSource Self}}" Value="True"/>
                    </MultiDataTrigger.Conditions>
                    <MultiDataTrigger.Setters>
                        <Setter Property="ContentTemplate" Value="{DynamicResource DataTemplate2}"/>
                    </MultiDataTrigger.Setters>
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>
    </ListBox.Resources>
</ListBox>

Answer 2

This is currently only possible if you override the ListBoxItem style by yourself (I'll change this in the next releases of MahApps).

This is what you need:

<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="IsSelected" Value="True" />
        <Condition Property="Selector.IsSelectionActive" Value="False" />
    </MultiTrigger.Conditions>
    <Setter Property="Background" Value="{DynamicResource GrayBrush7}" />
</MultiTrigger>

Complete style:

<Style x:Key="CustomMetroListBoxItem"
       BasedOn="{StaticResource MetroListBoxItem}"
       TargetType="{x:Type ListBoxItem}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                <Border x:Name="Border"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                    <ContentPresenter Margin="{TemplateBinding Padding}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Background" Value="{DynamicResource AccentColorBrush}" />
            <Setter Property="Foreground" Value="{DynamicResource AccentSelectedColorBrush}" />
        </Trigger>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="{DynamicResource AccentColorBrush3}" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" Value="{DynamicResource GrayBrush7}" />
        </Trigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsEnabled" Value="False" />
                <Condition Property="IsSelected" Value="True" />
            </MultiTrigger.Conditions>
            <Setter Property="Background" Value="{DynamicResource GrayBrush7}" />
            <Setter Property="Foreground" Value="{DynamicResource AccentSelectedColorBrush}" />
        </MultiTrigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsSelected" Value="True" />
                <Condition Property="Selector.IsSelectionActive" Value="False" />
            </MultiTrigger.Conditions>
            <Setter Property="Background" Value="{DynamicResource GrayBrush7}" />
        </MultiTrigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsSelected" Value="True" />
                <Condition Property="Selector.IsSelectionActive" Value="True" />
            </MultiTrigger.Conditions>
            <Setter Property="Background" Value="{DynamicResource AccentColorBrush2}" />
        </MultiTrigger>
    </Style.Triggers>
</Style>

Usage:

<ListBox ItemContainerStyle="{StaticResource CustomMetroListBoxItem}"
         Style="{StaticResource VirtualisedMetroListBox}" />

Hope this helps!