Tip: Grouping

3 posts, 0 answers
  1. Ralf
    Ralf avatar
    77 posts
    Member since:
    Jun 2012

    Posted 20 Sep 2012 Link to this post

    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. George
    Admin
    George avatar
    1332 posts

    Posted 25 Sep 2012 Link to this post

    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.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Ralf
    Ralf avatar
    77 posts
    Member since:
    Jun 2012

    Posted 25 Sep 2012 Link to this post

    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
Back to Top