ListBox.GroupStyle missing... how to achieve a similar behavior?

jesse-dino · 23 Jun 2025, 23:56

I have a list of items and need to display them in groups, with a header for the group. I need exactly 1 item to be selectable across all groups.
The ideal WPF control for this is a ListBox & GroupStyle. Unfortunately Noesis doesn't seem to have implemented GroupStyle.

I'm curious what suggestions people have for alternative approaches. Most of the ones we can think of are messy:
Multiple ListBoxes which all have a common SelectionChanged event handler that manually deselects in other listboxes?
Fake selection completely, use nested ItemsControl and use click events or focus change events, and databinding to change styles for the "selected" item?
One big list of items, and use previousdata bindings to tell if an item is the first one in a category, and change its display style to fake a group header?

25 Jun 2025, 18:19

Hi Jesse,

I think the best aproach would be to have a single ListBox that contains two kind of items: group headers and selectable items. Then you can create a DataTemplate for each, to properly represent a group header and a selectable item. And in the ItemContainerStyle you can disable the item if it is a header to avoid selection on those:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:NoesisStudioInternals"
  Background="#FF4D5052">
  <Page.Resources>
    <ResourceDictionary>
      <DataTemplate DataType="local:GroupItem">
        <Grid>
          <TextBlock Text="{Binding Path=Name}" TextWrapping="Wrap" Margin="8,8,8,8"/>
        </Grid>
      </DataTemplate>
      <DataTemplate DataType="local:GroupHeader">
        <Grid Background="#FFAA6800">
          <TextBlock Text="{Binding Path=Header}" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="10,10,10,10" FontSize="18" FontWeight="Bold" Foreground="#FFFFFFFF"/>
        </Grid>
      </DataTemplate>
      <Style x:Key="GroupItemContainerStyle" TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
        <Style.Triggers>
          <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
              <Condition Binding="{Binding Path=IsHeader}" Value="True"/>
            </MultiDataTrigger.Conditions>
            <Setter Property="Padding" Value="0,0,0,0"/>
            <Setter Property="IsEnabled" Value="False"/>
          </MultiDataTrigger>
        </Style.Triggers>
      </Style>
    </ResourceDictionary>
  </Page.Resources>
  <Grid>
    <ListBox ItemsSource="{Binding Path=GroupedItems}" SelectedItem="{Binding Path=Selected}" ItemContainerStyle="{DynamicResource GroupItemContainerStyle}"/>
  </Grid>
</Page>

In this example my data items (GroupItem and GroupHeader) inherit from a base item class that exposes an IsHeader that is used to disable the selection on group headers.

Could that work for you?

jesse-dino · 26 Jun 2025, 22:47

Thanks, that workaround definitely would suffice for what I described.

We're likely going to switch to a different solution anyways since ListBox makes us bend over backwards a bit too much on our layout styling options, so we'll probably just have to handle selection/focus manually within an ItemsControl instead.

30 Jun 2025, 18:52

If you don't need to handle selection, but just some kind of focused element, having several ItemsControl is also a valid approach.

ListBox.GroupStyle missing... how to achieve a similar behavior? Topic is solved

ListBox.GroupStyle missing... how to achieve a similar behavior?

Re: ListBox.GroupStyle missing... how to achieve a similar behavior?

Re: ListBox.GroupStyle missing... how to achieve a similar behavior?

Re: ListBox.GroupStyle missing... how to achieve a similar behavior?

Who is online