CollectionView separators - a teaser, we need more

[rogersm-uwosh]

Type of issue

Missing information

Description

CollectionView does not include built-in separators. These can be provided, if desired, in the item template.

OK, but how? I'm off to find out, but I would argue that it is the documentation's responsibility to not just tease, but provide an answer / example, or link to something relevant.

Page URL

https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/collectionview/?view=net-maui-8.0

Content source URL

https://github.com/dotnet/docs-maui/blob/main/docs/user-interface/controls/collectionview/index.md

Document Version Independent Id

56821f6d-0cf1-2330-a905-1107313bc8dc

Article author

@davidbritch

Metadata

• ID: 56821f6d-0cf1-2330-a905-1107313bc8dc
• Service: dotnet-mobile
• Sub-service: dotnet-maui

[rogersm-uwosh]

I take it you've got bigger fish to fry, so to speak? Should I try and make a pull request with an example?

[flogeiger]

Workaround: Separating Items in a CollectionView using a Border

When working with a CollectionView, you might want to visually separate items. A simple workaround is to use a Border around the DataTemplate. This ensures a clear distinction between items.

Example Implementation

<DataTemplate x:DataType="YourDataType">
    <Border StrokeThickness="1"
            Padding="5">
        <Border.StrokeShape>
            <RoundRectangle CornerRadius="5" 
                            BackgroundColor="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource AccentColor}}"/>
        </Border.StrokeShape>
    </Border>
</DataTemplate>

Explanation

• StrokeThickness="1": Defines the border thickness.
• Padding="5": Adds spacing inside the border.
• RoundRectangle CornerRadius="5": Rounds the corners for a smoother appearance.
• BackgroundColor with AppThemeBinding: Uses different colors for light and dark themes.

This approach provides a simple yet effective way to distinguish items in your CollectionView.

This is just a workaround and not a Separator.

Happy coding! 🚀