Question: How to make (easily) a selected ListViewItem visually distinct for SelectionMode=Multiple and IsMultiSelectCheckBoxEnabled=False?

[ksmutny]

When creating a ListView with SelectionMode=Multiple and IsMultiSelectCheckBoxEnabled=False, selected items are recognized only by a light gray backgroud, the same for pointer over, and therefore are harder to distinguish. With IsMultiSelectCheckBoxEnabled=True, there is a clear checkbox, for any other SelectionMode, there is a visual selection indicator at the left edge of a selection item.

How can I make the ListViewItems look the same as for SelectionMode=Extended?

Overriding ItemContainerStyle.Template with my own ListViewContentPresenter and setting SelectionIndicatorVisualEnabled=True didn't help.

[StephenLPeters]

@RBrid do you have ideas?

[RBrid]

I am afraid there is no way to show the built-in selection indicator in Multiple mode. Two ideas:

1, tweak the ListViewItemBackgroundSelected, ListViewItemBackgroundSelectedPointerOver & ListViewItemBackgroundSelectedPressed resources in Default, Light and HighContrast themes to get more contrast.

2, draw your own selection indicator as part of the ListViewItem Content, when the item is selected.
Just tinkering with the idea:

            <ListViewItem Padding="0,0,12,0">
                <ListViewItem.Content>
                    <StackPanel Orientation="Horizontal">
                        <Border Width="3" Height="16" Background='{ThemeResource ListViewItemSelectionIndicatorBrush}' Margin="4,0,4,0" VerticalAlignment="Center" CornerRadius="1.5"/>
                        <TextBlock Text="some text" Margin="4,0,0,0"/>
                    </StackPanel>
                </ListViewItem.Content>
            </ListViewItem>

You would have to use ListViewItemSelectionIndicatorCornerRadius for the corner radius, ListViewItemSelectionIndicatorBrush, ListViewItemSelectionIndicatorPointerOverBrush, ListViewItemSelectionIndicatorPressedBrush, ListViewItemSelectionIndicatorDisabledBrush for the brushes. Bonus points if you also animate the indicator's height as the item gets selected.

[ksmutny]

@RBrid Thank you for your answer!

A. In general, shouldn't the component support such a use case with rendering the selection indicator, if checkboxes are off? I believe it would improve user experience if it were built in.

B. This is what I came up with so far:

<UserControl.Resources>
    <Style x:Key="ListViewItem" TargetType="ListViewItem" BasedOn="{StaticResource DefaultListViewItemStyle}">
        <Setter Property="CornerRadius" Value="4" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewItem">
                    <ListViewItemPresenter
                        Tag="{Binding IsSelected, RelativeSource={RelativeSource Mode=TemplatedParent}, Mode=TwoWay}"

                        ContentTransitions="{TemplateBinding ContentTransitions}"
                        CornerRadius="{TemplateBinding CornerRadius}"
                        Control.IsTemplateFocusTarget="True"
                        FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
                        DragBackground="{ThemeResource ListViewItemDragBackground}"
                        DragForeground="{ThemeResource ListViewItemDragForeground}"
                        FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}"
                        FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
                        PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
                        PointerOverBackground="{ThemeResource ListViewItemBackgroundSelectedPointerOver}"
                        PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}"
                        SelectedBackground="{ThemeResource ListViewItemBackgroundSelected}"
                        SelectedForeground="{ThemeResource ListViewItemForegroundSelected}"
                        SelectedPointerOverBackground="{ThemeResource ListViewItemBackgroundSelectedPointerOver}"
                        PressedBackground="{ThemeResource ListViewItemBackgroundPressed}"
                        SelectedPressedBackground="{ThemeResource ListViewItemBackgroundSelectedPressed}"
                        DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                        DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                        ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                        ContentMargin="{TemplateBinding Padding}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="SelectionIndicator" TargetType="Rectangle">
        <Setter Property="Height" Value="16"/>
        <Setter Property="Width" Value="3"/>
        <Setter Property="Stroke" Value="{ThemeResource ListViewItemSelectionIndicatorBrush}"/>
        <Setter Property="Fill" Value="{ThemeResource ListViewItemSelectionIndicatorBrush}"/>
        <Setter Property="RadiusX" Value="{ThemeResource ListViewItemSelectionIndicatorCornerRadius}"/>
        <Setter Property="RadiusY" Value="{ThemeResource ListViewItemSelectionIndicatorCornerRadius}"/>
        <Setter Property="Margin" Value="-20,0,0,0"/>
    </Style>
</UserControl.Resources>


<local:MyListView x:Name="FileListView" ItemContainerStyle="{StaticResource ListViewItem}" ItemsSource="{x:Bind ViewModel.FileList}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="2"/>
                    <ColumnDefinition Width="32"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <Rectangle
                    Grid.Column="0"
                    Style="{StaticResource SelectionIndicator}"
                    Visibility="{Binding Path=Tag, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                <Image Grid.Column="1" Width="24" Height="24" Source="{Binding Icon}" Margin="0,0,8,0"/>
                <TextBlock Grid.Column="2" Text="{Binding Name}" VerticalAlignment="Center"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</local:MyListView>

• I recreated the selection indicator using Rectangle. In order to identify if an item is selected, I use a tag in ListViewItemPresenter, which made me to copy paste all the style properties. I tinkered with a few of them, but it feels odd having to define all of them exactly as they are by default.
• Please, is there a better way to indicate an item is selected?
• Please, how do I make the selection indicator animation? :) I am quite new to XAML and WinUI 3, I would more than welcome pointing me to the right direction.