WPF列表框样式

Question

I was following this tutorial: http://www.c-sharpcorner.com/uploadfile/dpatra/listbox-group-header-expand-and-collapse-in-wpf/

And i tried to design my listbox with expanders.

For some reason I'm getting something like this:

Title (expander)
 Tiltle(expander)
  Data
  Data
  Data

I don't know what is causing the double-grouping and I need some help.

This is my code:

<ListBox Grid.ColumnSpan="3" Grid.Row="3"
         Name="lbInterfaces"  Background="Transparent" ItemsSource="{Binding InterfacesView }" ItemTemplate="{StaticResource InterfacesDataTemplate}" BorderBrush="Transparent">         
    <ListBox.GroupStyle>
        <GroupStyle ContainerStyle="{StaticResource ContainerStyle}"/>
    </ListBox.GroupStyle>
</ListBox>

<Style x:Key="ContainerStyle" TargetType="{x:Type GroupItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Expander Header="{Binding Name}" IsExpanded="False">
                            <ItemsPresenter />
                        </Expander>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

<DataTemplate x:Key="InterfacesDataTemplate"
              DataType="ca:Interface">
            <Grid>
                <TextBlock Text="{Binding Path=Name}" MouseLeftButtonDown="interface_mouseDown"/>
            </Grid>
        </DataTemplate>

And in the view-model I have:

InterfacesView = CollectionViewSource.GetDefaultView(Interfaces);
InterfacesView.GroupDescriptions.Add(new PropertyGroupDescription("Kind"));
InterfacesView.SortDescriptions.Add(new SortDescription("Name", ListSortDirection.Ascending));

The Kind is a property inside the "interface" clss

Answer 1

Change the code to this:

    InterfacesView view = CollectionViewSource.GetDefaultView(Interfaces);
    view.GroupDescriptions.Add(new PropertyGroupDescription("Name"));
    view.SortDescriptions.Add(new SortDescription("Name",ListSortDirection.Ascending));