This is a migrated thread and some comments may be shown as answers.

Tip: Grouping

2 Answers 256 Views

ListBox

This is a migrated thread and some comments may be shown as answers.

Ralf asked on 20 Sep 2012, 09:23 AM

Hi,

In my application I've needed grouped items in the listbox. But grouping is not supported. So I've added my own grouping by using a DataTemplate and a Style for the ListBoxItems. My intention was to have Headers above items and the headers should not be clickable. So I have added a property "IsHeader" typeof boolean to my ViewModel and used it in the style declaration.

Here is the xaml declaration:

<DataTemplate x:Key="listItemTemplate">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="34" />

<ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

<ContentControl Grid.Column="0" Template="{Binding Symbol}" Height="20" Width="20" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="3,0,3,3" />

<TextBlock Grid.Column="1" Text="{Binding DisplayName}" Style="{StaticResource BasicFontStyle}" VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="0,0,0,3" />

</Grid>

</DataTemplate>

<Style TargetType="telerik:RadListBoxItem">

<Style.Triggers>

<DataTrigger Binding="{Binding Path=IsGroupHeader}" Value="True">

<Setter Property="IsEnabled" Value="false"/>

</DataTrigger>

<Trigger Property="IsEnabled" Value="False">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate>

<Grid>

<Grid.RowDefinitions>

<RowDefinition />

<RowDefinition Height="5" />

</Grid.RowDefinitions>

<TextBlock Grid.Row="0" Style="{StaticResource TitleFontStyle}" Text="{Binding DisplayName}" HorizontalAlignment="Stretch" IsEnabled="True" />

<Separator Grid.Row="1" Template="{StaticResource GeneralSeparatorTemplate}" HorizontalAlignment="Stretch" VerticalAlignment="Center" />

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Trigger>

</Style.Triggers>

</Style>

As you see, in the style I have added a DataTrigger and bound it to the "IsHeader" property. If IsHeader is true, the setter sets the IsEnabled property of the item to false.
When running the application the Items with IsHeader=true are diabled and gray out. So to have no gray out in the style I have added a second trigger that triggers the IsEnabled property of the item. In the setter I add a ControlTemplate to the Template property of the Item including binding. After running the application the items with IsHeader=true are not gray out anymore and they are not clickabe.
You can use this also to set different templates for items in conditions. For example you can trigger a ViewModel property TaskPriority (low, normal, high) and set different ControlTemplates to the Template propterty of the ListItem. And if you do so, you don't need to implement TemplateSelectors.

I hope this little tip will help someone.

Regards,
Ralf

2 Answers, 1 is accepted

answered on 25 Sep 2012, 08:18 AM

Hi Ralf,

Thank you for sharing this information. I would like to add that grouping in RadListBox could be accomplished using the CollectionViewSource and its GroupDescriptors. For more information, please refer to the following link in the msdn documentation - http://msdn.microsoft.com/en-us/library/system.windows.data.collectionviewsource.aspx

Also, for similar scenarios you could use the RadTreeView control.

All the best,
George
the Telerik team

Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.