How to use custom selector of collectionview with maui on Windows machine?

Question

How can I use a custom selector in a collectionview using maui on Windows machine with parameter SelectionMode="Multiple", or how can I hide it?

The xaml file is like this:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiCollectionMVVM.MainPage">
        <ContentPage.Resources>
            <Style TargetType="Grid">
                <Setter Property="VisualStateManager.VisualStateGroups">
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="Selected">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor"
                                            Value="LightSkyBlue" />
                                    
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter>
            </Style>
        </ContentPage.Resources>
        
        <VerticalStackLayout >
    
            <CollectionView x:Name="StagiaireCollectionView"
                            SelectionMode="Multiple"
                            ItemsSource="{Binding students}" >
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        
                        <Grid >
                            <Grid.RowDefinitions>
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
    
                            <Label Grid.Column="0"
                                   Text="{Binding Name}" x:Name="TxtUserPrimary" FontSize="12" VerticalOptions="Center"/>
                            <ImageButton Grid.Column="1" x:Name="ImgLicence"   VerticalOptions="Center" BackgroundColor="Transparent">
                                <ImageButton.Source>
                                    <FontImageSource
                                        FontFamily="IconsInscriptionStagiaires"
                                        Glyph="&#xE800;"
                                        Size="10"
                                        Color="Gray">
                                    </FontImageSource>
                                </ImageButton.Source>
                            </ImageButton>
                            <ImageButton Grid.Column="2" x:Name="ImgOnedrive" BackgroundColor="Transparent">
                                <ImageButton.Source>
                                    <FontImageSource
                                                FontFamily="IconsInscriptionStagiaires"
                                                Glyph="&#xE800;"
                                                Size="20"
                                                Color="Gray"
                                                >
                                    </FontImageSource>
                                </ImageButton.Source>
                            </ImageButton>
                            <ImageButton Grid.Column="3" x:Name="ImgFolder" BackgroundColor="Transparent">
                                <ImageButton.Source>
                                    <FontImageSource
                                        FontFamily="IconsInscriptionStagiaires"
                                        Glyph="&#xE800;"
                                        Size="20"
                                        Color="Gray">
                                    </FontImageSource>
                                </ImageButton.Source>
                            </ImageButton>
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
    
        </VerticalStackLayout>
</ContentPage>

The result

I can customize the color of the selected line (see my code) but not the select image and the place used for this image.

As we can see there is a place with an image (white) that is displayed.

How can I hide or customize this part?

Answer 1

I have checked the source code about the CollectionView for maui on windows. It is the ListView that implements the ListViewBase.

And the ListViewBase has the IsMultiSelectCheckBoxEnabled Property. You can set the property as false and it will hide the checkbox place.

Just put the following code in the MainPage.xaml.cs:

    protected override void OnHandlerChanged()
    {
        base.OnHandlerChanged();
#if WINDOWS
            var listviewbase = StagiaireCollectionView.Handler.PlatformView as Microsoft.UI.Xaml.Controls.ListViewBase;
            listviewbase.IsMultiSelectCheckBoxEnabled = false;
#endif
      }