Skip to content

Commit 7dd60ee

Browse files
didiyordanovadidiyordanova
authored
Merge pull request #1256 from telerik/new-kb-styling-radcollectionview-xaml-csharp-background-spacing-e46a517f9ad349d59961fabbe9334dcf
Added new kb article styling-radcollectionview-xaml-csharp-background-spacing
2 parents 846c52d + 396395e commit 7dd60ee

File tree

1 file changed

+157
-0
lines changed

1 file changed

+157
-0
lines changed

‎knowledge-base/styling-radcollectionview-xaml-csharp-background-spacing.md‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
---
2+
title: Defining Styles for CollectionView in XAML and C#
3+
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.
4+
type: how-to
5+
page_title: Styling CollectionView in XAML and C# for Background and Spacing
6+
meta_title: Styling CollectionView in XAML and C# for Background and Spacing
7+
slug: styling-radcollectionview-xaml-csharp-background-spacing
8+
tags: collectionview, .net maui, radcollectionview, styles, xaml, csharp, itemstyle, itemlayout
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
14+
| Version | Product | Author |
15+
| --- | --- | ---- |
16+
| 11.1.0 | Telerik UI for .NET MAUI CollectionView | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) |
17+
18+
## Description
19+
20+
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.
21+
22+
This knowledge base article also answers the following questions:
23+
- How to set item background color and spacing in CollectionView?
24+
- How to apply styles to CollectionView in XAML?
25+
- How to define styles for CollectionView programmatically in C#?
26+
27+
## Solution
28+
29+
Here is an example how to define styles in XAML and C#.
30+
31+
### Styling in XAML
32+
33+
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.
34+
35+
```xaml
36+
<ContentPage.Resources>
37+
<ResourceDictionary>
38+
<Style x:Key="CityStyle" TargetType="telerik:RadCollectionViewItemView">
39+
<Setter Property="BorderColor" Value="#80CBC4" />
40+
<Setter Property="BorderThickness" Value="1" />
41+
<Setter Property="CornerRadius" Value="5" />
42+
<Setter Property="VisualStateManager.VisualStateGroups">
43+
<VisualStateGroupList>
44+
<VisualStateGroup Name="CommonStates">
45+
<VisualState Name="Normal" />
46+
<VisualState Name="Selected">
47+
<VisualState.Setters>
48+
<Setter Property="BackgroundColor" Value="#C4E6E3" />
49+
</VisualState.Setters>
50+
</VisualState>
51+
</VisualStateGroup>
52+
</VisualStateGroupList>
53+
</Setter>
54+
</Style>
55+
56+
<Style TargetType="telerik:RadCollectionView">
57+
<Setter Property="ItemsLayout">
58+
<telerik:CollectionViewLinearLayout Orientation="Vertical" ItemSpacing="10" />
59+
</Setter>
60+
<Setter Property="ItemViewStyle" Value="{StaticResource CityStyle}" />
61+
</Style>
62+
</ResourceDictionary>
63+
</ContentPage.Resources>
64+
65+
<telerik:RadCollectionView ItemsSource="{Binding Locations}"
66+
SelectionMode="Multiple"
67+
DisplayMemberPath="City"/>
68+
```
69+
70+
### Styling in C#
71+
72+
1. Apply the styles programmatically using the `Style` class and `VisualStateManager.VisualStateGroupsProperty`. Attach the styles to the `RadCollectionView` in the code-behind.
73+
74+
```csharp
75+
private void Button_Clicked(object sender, EventArgs e)
76+
{
77+
SetStyle();
78+
}
79+
80+
public void SetStyle()
81+
{
82+
this.collectionView.ItemsLayout = new CollectionViewLinearLayout()
83+
{
84+
Orientation = Telerik.Maui.Orientation.Vertical,
85+
ItemSpacing = 10
86+
};
87+
88+
this.collectionView.ItemViewStyle = new Style(typeof(RadCollectionViewItemView))
89+
{
90+
Setters =
91+
{
92+
new Setter
93+
{
94+
Property = RadCollectionViewItemView.BorderColorProperty,
95+
Value = Color.FromHex("#80CBC4")
96+
},
97+
new Setter
98+
{
99+
Property = RadCollectionViewItemView.BorderThicknessProperty,
100+
Value = 1
101+
},
102+
new Setter
103+
{
104+
Property = RadCollectionViewItemView.CornerRadiusProperty,
105+
Value = 5
106+
},
107+
new Setter
108+
{
109+
Property = VisualStateManager.VisualStateGroupsProperty,
110+
Value = new VisualStateGroupList()
111+
{
112+
new VisualStateGroup
113+
{
114+
Name = "CommonStates",
115+
States =
116+
{
117+
new VisualState
118+
{
119+
Name = "Normal",
120+
},
121+
new VisualState
122+
{
123+
Name = "Selected",
124+
Setters =
125+
{
126+
new Setter
127+
{
128+
Property = RadCollectionViewItemView.BackgroundColorProperty,
129+
Value = Color.FromHex("#C4E6E3")
130+
},
131+
}
132+
}
133+
}
134+
}
135+
}
136+
},
137+
}
138+
};
139+
}
140+
```
141+
142+
2. Define the CollectionView in XAML.
143+
144+
```xaml
145+
<Grid RowDefinitions="Auto, *" Padding="10">
146+
<Button Text="Set style through code" Clicked="Button_Clicked" />
147+
<telerik:RadCollectionView ItemsSource="{Binding Locations}"
148+
Grid.Row="1"
149+
x:Name="collectionView"
150+
SelectionMode="Multiple"
151+
DisplayMemberPath="City"/>
152+
</Grid>
153+
```
154+
155+
## See Also
156+
157+
- [VisualStateManager Overview](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/visual-states?view=net-maui-9.0)

0 commit comments

Comments
 (0)