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

Tip: Grouping

2 Answers 196 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Ralf
Top achievements
Rank 1
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

Sort by
0
George
Telerik team
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.

0
Ralf
Top achievements
Rank 1
answered on 25 Sep 2012, 08:38 AM
Hi,

thank you for information. I've found this article also, and updated my application. I thought grouping is no supported because there was no property on ListBox/RadListBox. My fault. I see, I have to learn much more about WPF.

Reagrds,Ralf
Tags
ListBox
Asked by
Ralf
Top achievements
Rank 1
Answers by
George
Telerik team
Ralf
Top achievements
Rank 1
Share this question
or