New to Telerik UI for WPF? Download free 30-day trial

How to group items

In RadListBox you can easily group the items based on their properties with the help of CollectionViewSource and GroupStyle. This grouping feature not only provides a nice visualization of the items, but using the GroupStyle, you can easily customize the groups.

The following example will demonstrate how to bind the ItemsSource property of RadListBox to a CollectionViewSource of custom objects grouped by one of their properties. In order for the scrolling of the grouped items to be possible, you must set the IsScrollIntoViewEnabled property to "False".

The IsScrollIntoViewEnabled was introduced with SP1 Q3 2015 and determines whether the selected item will automatically be scrolled into the view. When it is set to True (this is the default value) and an item gets selected, the item is brought into view by scrolling to it. Because that behavior is not expected when grouping is used, the property needs to be set to False.

In the example below, you create a new business object named Item. The implementation of the class is presented below:

Business object Item

public class Item 
    public string Group { get; set; } 
    public string Name { get; set; } 
Public Class Item 
        Public Property Group() As String 
        Public Property Name() As String 
    End Class 

Next, you create a new class named ViewModel – inside it you need to initialize two collections. The first collection will be used as a source for the CollectionViewSource while the second one will be the CollectionViewSource itself:

ViewModel creation

public ObservableCollection<Item> Collection { get; set; } 
public CollectionViewSource CollectionView { get; set; } 
public ViewModel() 
    this.Collection = new ObservableCollection<Item> 
        new Item { Group = "GroupA", Name = "Item 1" }, 
        new Item { Group = "GroupA", Name = "Item 2" }, 
        new Item { Group = "GroupA", Name = "Item 3" }, 
        new Item { Group = "GroupA", Name = "Item 4" }, 
        new Item { Group = "GroupA", Name = "Item 5" }, 
        new Item { Group = "GroupA", Name = "Item 6" }, 
        new Item { Group = "GroupB", Name = "Item 1" }, 
        new Item { Group = "GroupB", Name = "Item 2" }, 
        new Item { Group = "GroupB", Name = "Item 3" } 
    var view = new CollectionViewSource(); 
    view.GroupDescriptions.Add(new PropertyGroupDescription("Group")); 
    view.Source = Collection; 
    CollectionView = view; 
Public Property Collection() As ObservableCollection(Of Item) 
Public Property CollectionView() As CollectionViewSource 
Public Sub New() 
    Me.Collection = New ObservableCollection(Of Item) From { 
        New Item With {.Group = "GroupA", .Name = "Item 1"}, 
        New Item With {.Group = "GroupA", .Name = "Item 2"}, 
        New Item With {.Group = "GroupA", .Name = "Item 3"}, 
        New Item With {.Group = "GroupA", .Name = "Item 4"}, 
        New Item With {.Group = "GroupA", .Name = "Item 5"}, 
        New Item With {.Group = "GroupA", .Name = "Item 6"}, 
        New Item With {.Group = "GroupB", .Name = "Item 1"}, 
        New Item With {.Group = "GroupB", .Name = "Item 2"}, 
        New Item With {.Group = "GroupB", .Name = "Item 3"} 
    Dim view = New CollectionViewSource() 
    view.GroupDescriptions.Add(New PropertyGroupDescription("Group")) 
    view.Source = Collection 
    CollectionView = view 
End Sub 

Next, you should declare the ViewModel as DataContext in your XAML:

Set the ViewModel as DataContext

Finally, all you need to do is to set the ItemsSource and GroupStyle properties:

Set the ItemsSource and GroupStyle

<telerik:RadListBox x:Name="radlistbox" IsScrollIntoViewEnabled="False" 
                        ItemsSource="{Binding CollectionView.View}"   
The final result is shown on the snapshot below:


See Also

In this article