Windows 8 learning notes (12)-set controls

In the Win8 Metro app, the display of collection items is mostly based on the listview, ListBox, and gridview controls.

Try it out today ~

First, let's take a look at the official definitions of these three controls.

ListBox:Contains a list of selectable items. (contains the list of optional items)

Listview: Represents a control that displays a list of data items. (display the control displayed in the data item list)

Gridview: Represents a specialized ordered list view. (displays the List View of special sorting)

 

The three controls are simple to use, and several details are found:

Similarities:

(1) both of them can display the data list;

(2) group display is supported;

(3) selector-based controls

Differences:

(1) The selectionmode of ListBox has only three attributes: extended, multipule, and single. The listview and gridview have one more none attribute.

(2) listview and gridview have itemclick events, while ListBox does not

There are many methods and attributes in the control, and some attributes can only be involved according to requirements. Its basic usage is basically similar to phone7. datatemplate implements the template style, uses itemsource to bind data sources, and dataselector to bind different data templates. Groupstyle group templates are not mentioned in phone7.

 

Before learning groupstyle, sort out some of the episodes that I used listview and ListBox today:

When I use the following code in listview:

  <ListView.ItemsPanel>                <ItemsPanelTemplate>                    <WrapGrid Orientation="Horizontal" Height="400"></WrapGrid>                </ItemsPanelTemplate></ListView.ItemsPanel>                                               

The list is horizontally arranged. When the height exceeds 400, the page is displayed as I expected, but the touch simulation gesture cannot be moved in the simulator, when the tag is changed to ListBox, it can be implemented. I don't know if other colleagues have encountered this problem. Do I know if some of them are not fully open in Win8 ???

 

Groupstyle

The three controls are used in the same way. When using this template, you have to mention the data source object collectionviewsource, which is used in the msdn sample as the data source. Of course, the traditional itemsource can also be assigned to the data source.

Collectionviewsource

Attribute:

Source: used to set the display data source in the list

Itemspath: Specify the group level data attribute from the source of collectionviewsource. For example, if the data source is such a level group --- items-item, we can set these three level attributes for itemspath.

Issourcegrouped: indicates whether the data of the data source is grouped.

<GridView.GroupStyle>                <GroupStyle>                    <GroupStyle.HeaderTemplate>                        <DataTemplate>                            <Grid Background="White" Margin="0">                                <TextBlock Text='{Binding Key}' Foreground="Gray" FontSize="25" Margin="5" />                            </Grid>                        </DataTemplate>                    </GroupStyle.HeaderTemplate>                    <GroupStyle.Panel>                        <ItemsPanelTemplate>                            <VariableSizedWrapGrid Orientation="Vertical" Height="400" />                        </ItemsPanelTemplate>                    </GroupStyle.Panel>                </GroupStyle>            </GridView.GroupStyle><GridView.ItemsPanel>                <ItemsPanelTemplate>                    <StackPanel Orientation="Horizontal"/>                </ItemsPanelTemplate>            </GridView.ItemsPanel>

Headtemplate: Specifies the headers of each group.

Itemspaneltemplate in groupstyle: used to set the display mode of list items under each group.

Itempanel: Used to set how each independent group is arranged and displayed.

Load the collectionviewsource data source object to the page resource first

<Gridview X: Name = "gridview" itemssource = "{binding source = {staticresource cvs2}">

Bind the data source of the control to the collectionviewsource object again.

Of course, I may not know much about the usage. In the sample, semanticzoom works with the gridview to implement switching between the group header and the group list items.

 

Of course, there are still a lot of usage that can be combined with different controls, waiting to be explored ~