diff --git a/knowledge-base/styling-radcollectionview-xaml-csharp-background-spacing.md b/knowledge-base/styling-radcollectionview-xaml-csharp-background-spacing.md new file mode 100644 index 00000000..8ad0a3ce --- /dev/null +++ b/knowledge-base/styling-radcollectionview-xaml-csharp-background-spacing.md @@ -0,0 +1,157 @@ +--- +title: Defining Styles for CollectionView in XAML and C# +description: Learn how to define styles for the CollectionView in UI for .NET MAUI using both XAML and C#. Control the background color in normal and selected states and adjust item spacing. +type: how-to +page_title: Styling CollectionView in XAML and C# for Background and Spacing +meta_title: Styling CollectionView in XAML and C# for Background and Spacing +slug: styling-radcollectionview-xaml-csharp-background-spacing +tags: collectionview, .net maui, radcollectionview, styles, xaml, csharp, itemstyle, itemlayout +res_type: kb +--- + +## Environment + +| Version | Product | Author | +| --- | --- | ---- | +| 11.1.0 | Telerik UI for .NET MAUI CollectionView | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) | + +## Description + +I need to define styles for the [CollectionView](https://www.telerik.com/maui-ui/documentation/controls/collectionview/overview) 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 + + + + + + + + + +``` + +### 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 + +