Change Background Color of SelectedItem from WPF ListView with Custom DataTemplate-CodePudding

I have a ListView Control in WPF which displays a list of boxes from which the user can select one from the collection. What I'm currently trying to accomplish is to have Selected Item's Background Property changed to a different color for a proper identification.

I found a Code Snippet which partially solves my problem, however, the Background value of the SelectedItem reverts back to its original when I press anywhere within the module.

What I'd like to happen is for the Background value to persist for the SelectedItem regardless if I press on other controls or even if the Window gets unfocused.

Below is my XAML Code Snippet with the Setters and Triggers I currently have in place.

<ListView Grid.Row="2"
          ItemsSource="{Binding FakeDispatchBoxCollection}">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListViewItem}">
                        <ContentPresenter />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            
            <Style.Triggers>
                <Trigger Property="IsKeyboardFocusWithin" Value="True">
                    <Setter Property="IsSelected" Value="True" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.ItemTemplate>
        <DataTemplate>
            <md:Card Margin="0,0,0,10"
                     Cursor="Hand">
                <md:Card.Style>
                    <Style>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListViewItem}}}" Value="true">
                                <Setter Property="md:Card.Background" Value="LightGray" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </md:Card.Style>
                
                <Grid Margin="5">
                    <!--#region Row & Column Definitions -->
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.60*" />
                        <ColumnDefinition Width="0.40*" />
                    </Grid.ColumnDefinitions>
                    <!--#endregion-->

                    <Label Grid.Row="0" Grid.Column="0"
                           Content="{Binding DispatchBoxName}"
                           FontWeight="ExtraBlack"
                           FontSize="15"
                           FontFamily="Baloo Bhai 2" />

                    <Label Grid.Row="1" Grid.Column="0"
                           Content="{Binding DispatchBoxType}"
                           FontWeight="SemiBold"
                           FontSize="13"
                           FontFamily="Baloo Bhai 2" />

                    <Label Grid.Row="0" Grid.Column="1"
                           Grid.RowSpan="2"
                           Content="{Binding UnitCount}"
                           VerticalAlignment="Center"
                           HorizontalAlignment="Right"
                           FontWeight="ExtraBlack"
                           FontSize="20"
                           FontFamily="Baloo Bhai 2" />
                </Grid>
            </md:Card>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

CodePudding user response：

In the Item's Data Template (ItemTemplate property), you don't have any items that can accept keyboard focus. There are only Labels. And in the ListViewItem Template Trigger (ItemContainerStyle property), you set the IsSelected property dependency on the keyboard focus inside the ListViewItem.

Also, you shouldn't use a ListView if you don't specify columns. In this case it is better to use ListBox.

An example of a correct implementation:

    <Window.Resources>
        <!--To simplify the example.-->
        <CompositeCollection x:Key="source">
            <sys:String>First</sys:String>
            <sys:String>Second</sys:String>
            <sys:String>Third</sys:String>
            <sys:String>Fourth</sys:String>
        </CompositeCollection>
    </Window.Resources>

    <ListBox ItemsSource="{DynamicResource source}">
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                            <ContentPresenter />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ItemsControl.ItemContainerStyle>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Label x:Name="label" Content="{Binding}"/>
                <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}}"
                                 Value="true">
                        <Setter TargetName="label" Property="Background" Value="Coral" />
                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ListBox>