dotnet / dotnet/maui

CollectionView (Windows) item height and selection

Open
#10,036 7 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area-controls-collectionview platform/windows s/triaged s/verified t/bug
Dominant language
C#
Stars
23.3k
Forks
2k
Avg merge
1d 14h
Merged PRs (30d)
296

Description

Description

On Windows, CollectionView items have a not-so-well-hidden checkbox as part of the item that messes up the layout. It affects minimum height as well as horizontal positioning of the item. This is a major problem when trying to use a multiple-selection CollectionView for a text list display (because the ListView doesn't support multi-selection).

Steps to Reproduce

Code snippet below supported by simple ObservableCollection<string> data exposes hidden checkbox and minimum height.

Screenshot 2022-09-10 093011

The top CollectionView has a green background on the items, the bottom without. I have used padding and margin to push highlight the checkbox separate from the text.

By default the text is shifted right but still overlaps a bit of the checkbox, and when selected, leaves a white checkmark over the start of the text. If you shift the text left, that white checkmark makes the text difficult to read.
Screenshot 2022-09-10 094926

<?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="MauiAppCollectionViewItem.MainPage">
    <StackLayout>
        <CollectionView 
            ItemsSource="{Binding Data}" SelectionMode="Multiple"
            WidthRequest="250" HorizontalOptions="Start" VerticalOptions="Start"
            BackgroundColor="White">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="-20,0,0,0" Padding="0" BackgroundColor="Green" VerticalOptions="Center">
                        <Label Padding="30,0,0,0" Margin="0" Text="{Binding}" VerticalOptions="Center"  />
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
        
        <CollectionView 
            ItemsSource="{Binding Data}" SelectionMode="Multiple"
            WidthRequest="250" HorizontalOptions="Start" VerticalOptions="Start"
            BackgroundColor="White">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="-20,0,0,0" Padding="0" VerticalOptions="Center">
                        <Label Padding="30,0,0,0" Margin="0" Text="{Binding}" VerticalOptions="Center"  />
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>

</ContentPage>
Link to public reproduction project repository

https://github.com/mike3sullivan/MauiAppCollectionViewItem

Version with bug

6.0.486 (current)

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

Windows 10

Did you find any workaround?

no workaround found.

Relevant log output

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Windows CollectionView behavior using the linked MauiAppCollectionViewItem reproduction and its XAML CollectionView examples. Compare multiple-selection item layout and selection rendering with the reported screenshots; done means the checkbox no longer distorts item height or horizontal positioning and selected text remains readable.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp
Domain
desktop
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.