Custom WPF ComboBox doesn't show grouping - wpf

Question

I have created a custom ComboBox in WPF
<!-- Combobox template -->
<ControlTemplate x:Key="CustomComboBoxToggleButton" TargetType="ToggleButton">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="3" Background="{StaticResource CustomDarkBlue}" BorderBrush="{StaticResource CustomWhite}" BorderThickness="2"/>
<Border x:Name="Border2" Grid.Column="0" CornerRadius="3,0,0,3" Margin="1" Background="{StaticResource CustomBackground}" BorderBrush="{StaticResource CustomWhite}" BorderThickness="1,1,2,1"/>
<Path x:Name="Arrow" Grid.Column="1" Fill="{StaticResource CustomGlyph}" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource CustomDarkBlue}"/>
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource CustomDarkBlue}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource CustomGray}"/>
<Setter TargetName="Border2" Property="BorderBrush" Value="{StaticResource CustomGray}"/>
<Setter Property="Foreground" Value="{StaticResource CustomGray}"/>
<Setter TargetName="Arrow" Property="Fill" Value="{StaticResource CustomGray}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!-- Combobox -->
<Style x:Key="RoundedComboBox" TargetType="{x:Type ComboBox}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
<Setter Property="Foreground" Value="{StaticResource CustomWhite}"/>
<Setter Property="Background" Value="{StaticResource CustomBackground}"/>
<Setter Property="Height" Value="21"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<ToggleButton Name="ToggleButton" Template="{StaticResource CustomComboBoxToggleButton}" Grid.Column="2" Focusable="False" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"/>
<ContentPresenter Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" Margin="3,1,23,1" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<Popup Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Slide">
<Grid Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder" Background="{StaticResource CustomBackground}" BorderThickness="2" BorderBrush="{StaticResource CustomWhite}"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained"/>
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="False">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{StaticResource CustomGray}"/>
</Trigger>
<Trigger Property="IsGrouping" Value="True">
<Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="4"/>
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This is then applied to a ComboBox
<ComboBox Grid.Column="0" x:Name="cboChild" Margin="140,65,0,0" ItemsSource="{Binding Source={StaticResource GroupedData}}" ItemTemplate="{StaticResource AccountTemplate}" SelectedValue="{Binding Source={StaticResource Item}, Path=child}" SelectedValuePath="ID" Width="150" Style="{StaticResource RoundedComboBox}" HorizontalAlignment="Left" VerticalAlignment="Top">
<ComboBox.GroupStyle>
<GroupStyle HeaderTemplate="{StaticResource GroupHeader}"/>
</ComboBox.GroupStyle>
</ComboBox>
The following is found in Window.Resources
<Window.Resources>
<CollectionViewSource Source="{Binding ChildAccounts}" x:Key="GroupedData">
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="group"/>
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
<DataTemplate x:Key="GroupHeader">
<TextBlock Text="{Binding group}" Margin="0" Foreground="{StaticResource CustomWhite}"/>
</DataTemplate>
<DataTemplate x:Key="AccountTemplate">
<TextBlock Text="{Binding comment}" Margin="0" Foreground="{StaticResource CustomWhite}"/>
</DataTemplate>
</Window.Resources>
Basically grouping works as it should when the RoundedComboBox style is NOT applied (ie. to the default ComboBox) but whenever the style is applied the drop-down popup is empty
Help!!
Thanks
Andy

Answer 1

Found the answer..... Use <ItemsPresenter ...> instead of <StackPanel ...>
Thanks sa_ddam213 for your helpful advice above regarding the binding.