WPF: group style does not work correctly due to style and / or modified ListBox

Question

I am trying to use GroupStyle, but instead of showing the group name as a title above the items in the list, it only shows the title, not the items.

It works fine until I apply a special style to the list. Then I decided that this style was pretty fictitious, so I created a UserControl for this effect. The problem persists.

The goal of UserControl is to have an extension effect for the selected item, where normally it can display some information and then more information when expanding.

UserControl:

<UserControl x:Class="MyProject.CustomUC.ExpandingList" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300"> <Grid> <ListBox x:Name="List" ItemsSource="{Binding Path=Collection}"> <ListBox.Template> <ControlTemplate TargetType="ListBox"> <Border BorderBrush="Blue" BorderThickness="1" CornerRadius="2" Background="White"> <ScrollViewer Focusable="False"> <StackPanel Margin="2" IsItemsHost="True" /> </ScrollViewer> </Border> </ControlTemplate> </ListBox.Template> <ListBox.GroupStyle> <GroupStyle HidesIfEmpty="True"> <GroupStyle.HeaderTemplate> <DataTemplate> <TextBlock Text="{Binding Path=Name}"/> </DataTemplate> </GroupStyle.HeaderTemplate> </GroupStyle> </ListBox.GroupStyle> <ListBox.ItemContainerStyle> <Style TargetType="ListBoxItem"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListBoxItem"> <Border Margin="4" Name="Border" BorderBrush="Blue" BorderThickness="1" CornerRadius="5" Background="LightBlue"> <Grid> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <ContentPresenter Name="Head" Margin="4" Visibility="Visible" ContentTemplate="{Binding ElementName=List, Path=DataContext.HeadTemplate}"/> <Border Name="Tail" Visibility="Collapsed" Grid.Row="1" BorderThickness="0,1,0,0" BorderBrush="Blue"> <ContentPresenter Margin="4" ContentTemplate="{Binding ElementName=List, Path=DataContext.TailTemplate}" /> </Border> </Grid> </Border> <ControlTemplate.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter TargetName="Tail" Property="Visibility" Value="Visible" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </ListBox.ItemContainerStyle> </ListBox> </Grid> </UserControl> 

Using UserControl:

 <CustomUC:ExpandingList Collection="{Binding Path=List}"> <CustomUC:ExpandingList.HeadTemplate> <DataTemplate> <TextBlock Text="{Binding Path=DisplayName}" /> </DataTemplate> </CustomUC:ExpandingList.HeadTemplate> <CustomUC:ExpandingList.TailTemplate> <DataTemplate DataType="{x:Type ViewModel:ElementViewModel}"> <TextBlock Text="{Binding Path=SomeOtherProperties}" /> </DataTemplate> </CustomUC:ExpandingList.TailTemplate> </CustomUC:ExpandingList> 

This works if I go from ExpandingList UserCotnrol:

 <ListView ItemsSource="{Binding Path=List}" > <ListView.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding Path=DisplayName}" /> </DataTemplate> </ListView.ItemTemplate> <ListView.GroupStyle> <GroupStyle HidesIfEmpty="True"> <GroupStyle.HeaderTemplate> <DataTemplate> <TextBlock Text="{Binding Path=Name}"/> </DataTemplate> </GroupStyle.HeaderTemplate> </GroupStyle> </ListView.GroupStyle> </ListView> 

Does anyone know what could be wrong?

Answer 1

In the ListBox template, replace:

<StackPanel Margin="2" IsItemsHost="True" />

from

<ItemsPresenter Margin="2" />

The ItemsPresenter class has additional logic for groups that you lose if you use the panel to display items.