Define groupings for ItemsControl in XAML, suitable for MVVM binding

You can refer to this article first:

Http://www.cnblogs.com/zoexia/archive/2014/11/30/4134012.html

STEP0: First show the most primitive interface:

is a control container: The ListBox, each item is a student student data, it inherits from the ItemsControl, so it can be implemented in groups. Each group in the container is represented by a expander scalable control.
Make sure you have fully understood the meaning of all the controls and data in the diagram before proceeding to the next step.

Step1: First, we start with the DataContext data source because it is fundamental:

//We virtual a "school ID" as a future grouping basis Public classstudent{ Public intId {Get;Set; }  Public stringName {Get;Set; }  Public intSchoolID {Get;Set; }}//then prepare the data source in the ViewModel.        Private ObservableCollection<Student>_students; /// <summary>        ///binding notifications, student list/// </summary>         Public ObservableCollection<Student>Students {Get{return_students;} Set            {                if(_students = = value) {return; } _students=value; Notifyofpropertychange (()=Students); }        }

The above code uses the MVVM pattern, if you are not familiar with, please learn, recommended "Liu Tieno" of the MVVM introductory video, speak very good!
If you do not understand, I can only say that the code is two pieces, a piece is the basic model, a piece is thrown in the binding source of a support property notification members.

Step3: Get the binding source in view

        <CollectionViewSourcex:key= "Studentssource"Source="{Binding Students}">            <collectionviewsource.groupdescriptions>                <propertygroupdescriptionPropertyName= "SchoolID" />            </collectionviewsource.groupdescriptions>        </CollectionViewSource>

Since our binding source (Students) now needs to be grouped, so you need to define, here the CollectionViewSource is a good thing to do with the list data source in view, commonly known as "data set View", Remember all the ItemsControl actually the data source is from it, meaning that all the list control has a "view of the DataSet", before we used to, the default is a "default" value, for example, the grouping function, that is groupstyle.default.
I used to have a DataGrid to support the display row index, that is, the use of "data set view", interested can go through.

<ListBoxItemsSource="{Binding Source={staticresource Studentssource}}"Height= "+"Width= "$">    <listbox.itemtemplate>        <DataTemplate>            <StackPanel>                <TextBlockText="{Binding Path=name}"/>                <TextBlockText="{Binding Path=id}"/>                <TextBlockText="{Binding Path=schoolid}"/>            </StackPanel>        </DataTemplate>    </listbox.itemtemplate></ListBox>

In order for each column of ListItem to be displayed as a specified layout, there is no difference except that ItemsSource obtains our own defined view resources.
So, here's the problem! What is the layout of the grouping (which is quite popular lately)? The answer is the "Itemscontrol.groupstyle" attribute, so let's start by defining a style

<Listbox.groupstyle>    <GroupStyle>        <Groupstyle.containerstyle>            <StyleTargetType="{x:type Groupitem}">                <Setter Property= "Template">                    <Setter.value>                        <ControlTemplateTargetType="{x:type Groupitem}">                            <Expanderisexpanded= "True">                                <Expander.header>                                    <StackPanelOrientation= "Horizontal">                                        <TextBlockText="{Binding Name}"VerticalAlignment= "Center" />                                        <TextBlockText="{Binding ItemCount, number of stringformat=: {0}}"VerticalAlignment= "Center"Margin= "5,0,0,0" />                                        <ButtonContent= "point Me"Margin= "5,0,0,0" />                                    </StackPanel>                                </Expander.header>                                <Itemspresenter/>                            </Expander>                        </ControlTemplate>                    </Setter.value>                </Setter>            </Style>        </Groupstyle.containerstyle>    </GroupStyle></Listbox.groupstyle>

Since the custom container is customized for the "GroupStyle" property, its data source must be different from "ItemsSource", and its type is "MS." Internal.Data.CollectionViewGroupInternal ", derived from the collectionviewgroup type.
Let's look at a few properties in this class:

Items: The data source from which we know that the ItemsSource property is bound by the data in the list container.
ItemCount: is actually the number of resources within the Items property.
Name: The names of the groupings are actually the actual values of the "school ID" that was previously bound

As you can see, the packet container is not related to the real data (except for the group name, which is the school ID, but it is given before the grouping, regardless of the actual value inside the items).

Well, over, in fact, is divided into 4 small steps:

1, first prepare the data source, here is students
2. Add a custom view for the data source, this is CollectionViewSource
3, add the Display list control, and get the source with the view
4, define Goupstyle

Define groupings for ItemsControl in XAML, suitable for MVVM binding