Item rendered via a DataTemplate with any Background Brush renders selection coloring behind item.

Question

I have a ListBox which uses a DataTemplate to render databound items. The XAML for the datatemplate is as follows:

<DataTemplate x:Key="NameResultTemplate">
                <WrapPanel x:Name="PersonResultWrapper" Margin="0" Orientation="Vertical" Background="{Binding Converter={StaticResource NameResultToColor}, Mode=OneWay}" >
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="MouseDown">
                            <cmd:EventToCommand x:Name="SelectPersonEventCommand" Command="{Binding Search.SelectedPersonCommand, Mode=OneWay, Source={StaticResource Locator}}" CommandParameter="{Binding Mode=OneWay}" />
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                    <TextBlock x:Name="txtPersonName" TextWrapping="Wrap" Margin="0" VerticalAlignment="Top" Text="{Binding PersonName}" FontSize="24" Foreground="Black" />
                    <TextBlock x:Name="txtAgencyName" TextWrapping="Wrap" Text="{Binding AgencyName}" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="0" FontStyle="Italic" Foreground="Black" />
                    <TextBlock x:Name="txtPIDORI" TextWrapping="Wrap" Text="{Binding PIDORI}" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="0" FontStyle="Italic" Foreground="Black" />
                    <TextBlock x:Name="txtDescriptors" TextWrapping="Wrap" Text="{Binding DisplayDescriptors}" Margin="0" VerticalAlignment="Top" Foreground="Black"/>
                    <Separator Margin="0" Width="400" />
                </WrapPanel>
            </DataTemplate>

Note that there is a value converter called NameResultToColor which changes the background brush of the rendered WrapPanel to gradient brush depending on certain scenarios.

All of this works as I'd expect, except when you click on any of the rendered ListBox items. When you click one, there is only the slightest sign of the selection coloring (the default bluish color). I can see a trace bit of it underneath my gradient-brushed item. If I reset the background brush to "no brush" then the selection rendering works properly. If I set the background brush to a solid color, it also fails to render as I'd expect.

How can I get the selection coloring to be on top? What is trumping the selection rendering?

Answer 1

The problem is that your item's template is being drawn over the selection being drawn by the ListBoxItem. If you want to ensure that the color is kept, you can add a DataTrigger to set the background of the WrapPanel to null when the item is selected:

<DataTemplate x:Key="NameResultTemplate">
    <WrapPanel x:Name="PersonResultWrapper">
        ...
    </WrapPanel>
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}" Value="True">
            <Setter TargetName="PersonResultWrapper" Property="Background" Value="{x:Null}" />
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>