Defining Styles for CollectionView in XAML and C#

Updated on Oct 14, 2025

Environment

Version	Product	Author
11.1.0	Telerik UI for .NET MAUI CollectionView	Dobrinka Yordanova

Description

I need to define styles for the CollectionView in both XAML and C#. The styles should control the background color of list items in normal and selected states and manage the spacing between list items.

This knowledge base article also answers the following questions:

• How to set item background color and spacing in CollectionView?
• How to apply styles to CollectionView in XAML?
• How to define styles for CollectionView programmatically in C#?

Solution

Here is an example how to define styles in XAML and C#.

Styling in XAML

Define implicit styles in the ContentPage.Resources section. Use VisualStateManager to control the background color for normal and selected states, and set ItemsLayout for spacing.

xaml

<ContentPage.Resources>
    <ResourceDictionary>
        <Style x:Key="CityStyle" TargetType="telerik:RadCollectionViewItemView">
            <Setter Property="BorderColor" Value="#80CBC4" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="CornerRadius" Value="5" />
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup Name="CommonStates">
                        <VisualState Name="Normal" />
                        <VisualState Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="#C4E6E3" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>

        <Style TargetType="telerik:RadCollectionView">
            <Setter Property="ItemsLayout">
                <telerik:CollectionViewLinearLayout Orientation="Vertical" ItemSpacing="10" />
            </Setter>
            <Setter Property="ItemViewStyle" Value="{StaticResource CityStyle}" />
        </Style>
    </ResourceDictionary>
</ContentPage.Resources>

<telerik:RadCollectionView ItemsSource="{Binding Locations}"
                           SelectionMode="Multiple"
                           DisplayMemberPath="City"/>

Styling in C#

1. Apply the styles programmatically using the Style class and VisualStateManager.VisualStateGroupsProperty. Attach the styles to the RadCollectionView in the code-behind.

csharp

private void Button_Clicked(object sender, EventArgs e)
{
    SetStyle();
}

public void SetStyle()
{
    this.collectionView.ItemsLayout = new CollectionViewLinearLayout()
    {
        Orientation = Telerik.Maui.Orientation.Vertical,
        ItemSpacing = 10
    };

    this.collectionView.ItemViewStyle = new Style(typeof(RadCollectionViewItemView))
    {
        Setters =
        {
            new Setter
            {
                Property = RadCollectionViewItemView.BorderColorProperty,
                Value = Color.FromHex("#80CBC4")
            },
            new Setter
            {
                Property = RadCollectionViewItemView.BorderThicknessProperty,
                Value = 1
            },
            new Setter
            {
                Property = RadCollectionViewItemView.CornerRadiusProperty,
                Value = 5
            },
            new Setter
            {
                Property = VisualStateManager.VisualStateGroupsProperty,
                Value = new VisualStateGroupList()
                {
                    new VisualStateGroup
                    {
                        Name = "CommonStates",
                        States =
                        {
                            new VisualState
                            {
                                Name = "Normal",
                            },
                            new VisualState
                            {
                                Name = "Selected",
                                Setters =
                                {
                                    new Setter
                                    {
                                        Property = RadCollectionViewItemView.BackgroundColorProperty,
                                        Value = Color.FromHex("#C4E6E3")
                                    },
                                }
                            }
                        }
                    }
                }
            },
        }
    };
}

2. Define the CollectionView in XAML.

xaml

<Grid RowDefinitions="Auto, *" Padding="10">
    <Button Text="Set style through code" Clicked="Button_Clicked" />
    <telerik:RadCollectionView ItemsSource="{Binding Locations}"
                               Grid.Row="1"
                               x:Name="collectionView"
                               SelectionMode="Multiple"
                               DisplayMemberPath="City"/>
</Grid>

See Also

• VisualStateManager Overview