Datatrigger listview's ItemContainer does not work when mouse is over (or selected) the specific item

Question

In a ListView I bind with a DataTrigger condition the background colour of an Item (textblock) to an Integer property, because when the property changes (from 0 to 1) I want that item's background goes from transparent to red.

This trigger does not works in two cases: when the mouse is over the item, or when this specific item is selected. In these two cases, the background is always transparent, despite of property's value.

So the item change its background only if the mouse is over other differents items, or other items are selected.

The textblock is defined in a separate DataTemplate (it is part of a BoardViewModel), and the ListView is the collection of these VM. In my code I checked that there is no "isMouseOver" active trigger condition in textblock's description and that there is no "isSelected" active trigger in the listview's section. I also tried to delete the background of the structures, but that has no effect with the problem.

--DataTemplate ---

    <DataTemplate DataType="{x:Type viewModels:BoardViewModel}">
        <Grid >

            <Grid HorizontalAlignment="Stretch"  Grid.Row="0" Width="Auto" Height="Auto">
                <Border Margin="20,20,20,20" BorderThickness="2" BorderBrush="Transparent" HorizontalAlignment="Stretch">
                    <TextBlock HorizontalAlignment="Stretch">
                        <TextBlock.Text>
                            <MultiBinding StringFormat="ID: {0}">
                                <Binding Path="ID"/>
                            </MultiBinding>
                        </TextBlock.Text>
        </TextBlock>
                </Border>
            </Grid>

        </Grid>
    </DataTemplate>

--- View ---

        <Grid Grid.Row="0">
            <ListView Height="Auto" Background="{StaticResource BoardBackground}" ItemsSource="{Binding Path= BoardViewModels}" SelectedItem="{Binding CurrentBoardViewModel}" IsSynchronizedWithCurrentItem="true">
                <ListView.ItemContainerStyle>
                    <Style TargetType="{x:Type ListViewItem}">

                        <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path= ErrorRedFlagByBoard}" Value="1">
                                <Setter Property="Background" Value="Red"></Setter>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding Path= ErrorRedFlagByBoard}" Value="0">
                                <Setter Property="Background" Value="Transparent"></Setter>
                            </DataTrigger>

                        </Style.Triggers>
                    </Style>
                </ListView.ItemContainerStyle>
            </ListView>
        </Grid>

I checked the correct value of the integer property of the viewmodel, so I expected that item's background remains red also when item is selected or mouse is over the item, but something invalidate this assertion and I do not understand what. Thank you all.

mm8 mm8 · Accepted Answer · 2019-03-26T15:48:34

Try to define a custom ControlTemplate for the ListViewItem, and add your trigger to <ControlTemplate.Triggers>:

<Style TargetType="{x:Type ListViewItem}">
    <Style.Resources>
        <SolidColorBrush x:Key="Item.MouseOver.Background" Color="#1F26A0DA"/>
        <SolidColorBrush x:Key="Item.MouseOver.Border" Color="#a826A0Da"/>
        <SolidColorBrush x:Key="Item.SelectedInactive.Background" Color="#3DDADADA"/>
        <SolidColorBrush x:Key="Item.SelectedInactive.Border" Color="#FFDADADA"/>
        <SolidColorBrush x:Key="Item.SelectedActive.Background" Color="#3D26A0DA"/>
        <SolidColorBrush x:Key="Item.SelectedActive.Border" Color="#FF26A0DA"/>
    </Style.Resources>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListViewItem}">
                <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsMouseOver" Value="True"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.MouseOver.Background}"/>
                        <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.MouseOver.Border}"/>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="Selector.IsSelectionActive" Value="False"/>
                            <Condition Property="IsSelected" Value="True"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Background}"/>
                        <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedInactive.Border}"/>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="Selector.IsSelectionActive" Value="True"/>
                            <Condition Property="IsSelected" Value="True"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Background" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Background}"/>
                        <Setter Property="BorderBrush" TargetName="Bd" Value="{StaticResource Item.SelectedActive.Border}"/>
                    </MultiTrigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                    <DataTrigger Binding="{Binding Path= ErrorRedFlagByBoard}" Value="1">
                        <Setter Property="Background" TargetName="Bd" Value="Red"></Setter>
                    </DataTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The triggers in the default template takes takes precedence over your triggers.

Datatrigger listview's ItemContainer does not work when mouse is over (or selected) the specific item

1 Answers