Development of New Fashion Windows 8 (21): Group view

Sometimes, the amount of data is relatively large, so we need to group it for ease of viewing, just like the list of system applications.

 

In fact, the itemscontrol control that supports grouping view is used, but we may use it less. At least, it is a semi-finished product. I usually use a large amount of listview, this control is powerful and flexible. Therefore, I plan to use listview to complete the example in this article. In fact, the principle is the same. This is a perfect solution.

Let's take a look at the principles before starting the project.

A. When setting itemssource, you should use collectionviewsource, which is very practical. It is a tool for MV-VM binding. We bind the data source of the control to collectionviewsource, in our generation, we only need to set the source attribute of collectionviewsource.

B. A set of general groups is roughly in this structure. A set of Certain types has at least the attributes used to identify the group and the list of group members. For example,

Class studentgroup

{

Public string name {Get; set ;}

Public String [] student s {Get; set ;}

}

 

This class structure indicates that the student's last name is used as the group ID, and the other member is at least one ilist, that is, the members of this group, such as "Wang ", the list of all students surnamed Wang is put in the attributes of the ilist type.

 

C. Set the issourcegrouped attribute of collectionviewsource to true, which means to group the source data. In this case, we also need to set the itemspath attribute through these two attributes, collectionviewsource can be used to find the group ID and list attributes. For example, in the example above, the itemspath attribute should be "student s.

 

However, this is still a bit abstract, and there is no more plain and understandable world than instances.

So, action! A new blank page project, and then the XAML will follow the input below.

<Page    x:Class="App2.MainPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:App2"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">    <Page.Resources>        <CollectionViewSource x:Name="cv" x:Key="cv" IsSourceGrouped="True" ItemsPath="Items"/>    </Page.Resources>        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">        <ListView ItemsSource="{Binding Source={StaticResource cv}}"                  SelectionMode="None">            <ListView.GroupStyle>                <GroupStyle>                    <GroupStyle.ContainerStyle>                        <Style TargetType="GroupItem">                            <Setter Property="Template">                                <Setter.Value>                                    <ControlTemplate TargetType="GroupItem">                                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">                                            <Grid>                                                <Grid.RowDefinitions>                                                    <RowDefinition Height="Auto"/>                                                    <RowDefinition Height="*"/>                                                </Grid.RowDefinitions>                                                <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}"/>                                                <ItemsControl x:Name="ItemsControl" ItemsSource="{Binding GroupItems}" Grid.Row="1"/>                                            </Grid>                                        </Border>                                    </ControlTemplate>                                </Setter.Value>                            </Setter>                        </Style>                    </GroupStyle.ContainerStyle>                    <GroupStyle.HeaderTemplate>                        <DataTemplate>                            <Grid Background="Green" Width="60" HorizontalAlignment="Left">                                <TextBlock Text="{Binding Key}" FontSize="22" FontWeight="Black"                                           Margin="15,12,15,8"/>                            </Grid>                        </DataTemplate>                    </GroupStyle.HeaderTemplate>                    <GroupStyle.Panel>                        <ItemsPanelTemplate>                            <VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="5"/>                        </ItemsPanelTemplate>                    </GroupStyle.Panel>                </GroupStyle>            </ListView.GroupStyle>            <ListView.ItemTemplate>                <DataTemplate>                    <TextBlock Text="{Binding}"/>                </DataTemplate>            </ListView.ItemTemplate>        </ListView>    </Grid></Page>

Note: When setting the itemssource attribute, remember to use the binding extension tag. Otherwise, you will wait for an exception. Generally, collectionviewsource should be hidden in the resource list. The advantage is that it is instantiated only once no matter how many times you reference it, saving the cost.

From the sample code, we can see that the groupstyle attribute is crucial for grouping and displaying data. On the surface, this groupstyle seems a little complicated. In fact, don't forget that vs is very powerful. It tells you a very simple method to add groupstyle. None of these XAML statements are written by me, is generated by the vs designer.

 

Select the listview In the designer, right-click, and select "add groupstyle" from the shortcut menu to display the magic scene.

 

After vs generates the code, we can modify it as needed.

 

Before we finish, we still need to get some data for testing. The names involved in the following code are all fictitious. If there are similarities, they are purely the magic of nature.

Public mainpage () {This. initializecomponent (); string [] arr = {"", "", "Jiang sanqi ", "Zhu sansi", "Zhu ERSI", "Zhu Yisi", "Zhu TOU", "Zhu dafan", "Huang ziyu", "Mr. Huang", "Huang great ", "Huang caomei", "Hu zhonghai", "nonsense", "nonsense", "carrot", "Hu Tianji", "Hu finds death", "Hu dakeng ", "Deng tianma", "Deng rice Bucket", "Deng pibrain", "Deng GAO", "Deng dwarf", "Zeng caomin", "Zeng Nima", "Zeng Wei ", "Zeng three meals", "Zeng average", "Zeng Yi yi", "Wu Orangutan", "Wu xiao'er", "Wu xiaosan", "Wu xiaosi", "Wu xiaowu ", "Wu laoqi", "Wu laoba", "Wu laojiu", "Wu Laoshi", "Qin I", "Qin III", "Qin II ", "Qin Si Shi", "Qin Wu Shi", "Qin Liu Shi", "Qin Qi shi", "Qin Ba niu", "Zhang Zhuan", "Zhang Shi ", "Zhang tianxiao", "Zhang bread", "Zhang Qianyi", "Zhang Tiancheng", "Zhang Shenma", "Zhang xinxin", "Zhang JIU ", "Xu Zhan", "Xu Zhai male", "Xu xueshan", "Xu Gu", "Xu daoda", "Xu shuzi", "Xu laosan", "Xu laosan ", "Xu lawu", "Xu la", "Xu laqi"}; var res = (from X in arr Group X by X [0]. tostring () into G select new {key = G. key, items = G. toarray ()}). tolist (); this. CV. source = res. tolist ();}

Okay. Let's see the effect.