Listview and gridview application details ----- this article is transferred from blog

1. Select listview or gridview

ListviewAndGridviewControls are used to display the set of data in the application. Their functions are very similar, but they are displayed in different ways. They are derived fromItemscontrolClass.

ListviewData is displayed vertically. This control is usually used to display a list of projects in order, such as an email list or a list of search results. It is also useful in master-slave lists. The list items only contain a small amount of information, and the details of the selected items are displayed separately.

GridviewData is displayed horizontally. For each project that occupies a large number of controls (such as the Photo Library), this control is commonly used when you need to display a wealth of visual information for it.

You can add items to them directlyItemsSet orItemssourceAttribute bound to the data source to fillItemscontrol. At the same timeListviewAndGridviewIt is common to bind to the same data source. You can display one of them and hide the other to adjust the UI to get rid of that direction and resolution.

The followingListviewDisplays projects in the application where the website is attached,GridviewDisplays the same group of projects when the application is displayed in full screen.

2. add an item to the item set

You can use the Extensible Application Markup Language (XAML) or codeItemsAdd items to the set. You can add items in this way in the following situations: there are a few items that are not changed and easily defined using XAML, or code-generated items at runtime. Which of the following statements use the XAML inline definition items?ListviewAndGridview.

<ListView x:Name="listView1" SelectionChanged="ListView_SelectionChanged">    <x:String>Item 1</x:String>    <x:String>Item 2</x:String></ListView>

// Create a new grid view, add content, // and add a SelectionChanged event handler.GridView gridView1 = new GridView();gridView1.Items.Add("Item 1");gridView1.Items.Add("Item 2");gridView1.SelectionChanged += GridView_SelectionChanged;// Add the grid view to a parent container in the visual tree.stackPanel1.Children.Add(gridView1);

DirectionItemscontrolWhen an item is added, these items are automatically placed in the item container. UsedListviewThe entry container isListviewitem, UsedGridviewThe entry container isGridviewitem. You can setItemcontainerstyleApply the style property to this container.

When you use XAML to define items, these items are automatically addedItemsSet.

3. Set the project Source

. IfItemssourceThis item is ignored if the property has been set and an item is added using XAML. IfItemssourceThe property has been set and the code is usedItemsWhen an item is added to a collection, an exception is thrown.

The following are some support for bindingItemscontrolCommon set types.

Set Type	Time used
List (of T)	When the set is not changed at runtime. The list or grid content is static after it is created.
Observablecollection (of T)	When the set is changed at runtime. The system notifies the list or grid of changes to the set, and the list or grid is updated.
Fileinformationfactory. getvirtualizedfilesvector	Bind to a file set.
Fileinformationfactory. getvirtualizedfoldersvector	Bind to a folder set.
Fileinformationfactory. getvirtualizeditemsvector	Bind to the storage item set.

In this caseItemssourceSet as a collection instance.

C # C ++ VB Replication

// Data source. list <string> itemslist = new list <string> (); itemslist. add ("item 1"); itemslist. add ("item 2"); // create a new grid view, add content, // and add a selectionchanged event handler. gridview gridview1 = new gridview (); gridview1.itemssource = itemslist; gridview1.selectionchanged + = gridview_selectionchanged; // Add the grid view to a parent container in the visual tree. stackpanel1.children. add (gridview1 );

You can also setItemssourceProperty boundCollectionviewsource.CollectionviewsourceActs as a proxy for the Collection class and enables currency and group support. If you bind the same dataListviewAndGridviewTo switch between the secondary screen view and the full screen view,CollectionviewsourceSo that both views have the same current item. For more information, see use XAML for data binding.

To display group items in the list or grid, the data source must support the grouping function.ItemssourceBindCollectionviewsourceAndIssourcegroupedSet propertyTrue. For more information, see How to group items in the Data Control.

In the following code,ItemssourceBind to nameitemsViewSourceOfCollectionviewsource. To view the complete code for this example and the following example, useSplit ApplicationTemplate to create an application.

<Page. Resources> <! -- Collection of items displayed by this page -->

    <CollectionViewSource x:Name="itemsViewSource" Source="{Binding Items}"/></Page.Resources>

XAML

<ListView x:Name="itemListView"     ItemsSource="{Binding Source={StaticResource itemsViewSource}}"/>

4. Specify the project appearance

By addingDisplaymemberpathSet to a specific attribute and set itemtemplate

<Listview X: Name = "itemlistview" margin = ", 0," itemssource = "{binding source = {staticresource itemsviewsource}" selectionchanged = "itemlistview_selectionchanged"> <listview. itemtemplate> <datatemplate> <grid Height = "110" margin = "6"> <grid. columndefinitions> <columndefinition width = "Auto"/> <columndefinition width = "*"/> </grid. columndefinitions> <border background = "{staticresource listviewitemplaceholderbackgroundthemebrush}" width = "110" Height = "110"> <Image Source = "{binding image}" stretch = "uniformtofill"/> </Border> <stackpanel grid. column = "1" verticalalignment = "TOP" margin = "10, 0, 0, 0 "> <textblock text =" {binding title} "style =" {staticresource titletextstyle} "textwrapping =" nowrap "/> <textblock text =" {binding subtitle} "style = ""{staticresource captiontextstyle}" textwrapping = "nowrap"/> <textblock text = "{binding description}" style = "{staticresource bodytextstyle}" maxheight = "60"/> </ stackpanel> </GRID> </datatemplate> </listview. itemtemplate> </listview>

The following figure shows the layout of a data template.

5. Specify the view Layout

To specify how to place items in the list or grid view, you can setItemspanelAttribute to specify the LayoutPanelOfItemspaneltemplate. By default,GridviewUse oneWrapgridPanel as itsItemspanel,ListviewUse oneVirtualizingstackpanelAs itsItemspanel.

The following describes howListviewUsed inWrapgridChange the project layout.WrapgridReplace the defaultVirtualizingstackpanel, Which groups projects into a column. We setWrapgrid. maximumrowsorcolumnsAttribute to arrange projects in two columns.

XAML Replication

<ListView Height="320" Width="260">    <ListView.ItemsPanel>        <ItemsPanelTemplate>            <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2"/>        </ItemsPanelTemplate>    </ListView.ItemsPanel>    <Rectangle Height="100" Width="100" Fill="Blue" />    <Rectangle Height="100" Width="100" Fill="Red" />    <Rectangle Height="100" Width="100" Fill="Yellow" />    <Rectangle Height="100" Width="100" Fill="Green" />    <Rectangle Height="100" Width="100" Fill="Gray" />    <Rectangle Height="100" Width="100" Fill="LightBlue" />    <Rectangle Height="100" Width="100" Fill="Pink" />    <Rectangle Height="100" Width="100" Fill="YellowGreen" /></ListView>

The following usesWrapgridAs itsItemspanelOfListviewAppearance.

6. Add a title to the view

You canListviewOrGridviewTo add a title inHeaderAttribute to assign a string or object. You can setHeadertemplateAttribute use data template DefinitionHeader.

By default, the title is displayed at the front of the view. It is displayed inListview,Gridview. IfFlowdirectionSet propertyRighttoleft, The title is displayed inGridview.

The following is the titleStackpanel(With text and images)Gridview. This eXtensible Application Markup Language (XAML) is the template of Microsoft Visual Studio "Grid Application"GroupDetailTheGridview.

XAML Replication

<GridView x:Name="itemGridView"          Margin="0,-14,0,0"          Padding="120,0,120,50"          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"          ItemTemplate="{StaticResource Standard500x130ItemTemplate}">    <GridView.Header>        <StackPanel Width="480" Margin="0,4,14,0">            <TextBlock Text="{Binding Subtitle}" Margin="0,0,18,20"                        Style="{StaticResource SubheaderTextStyle}" MaxHeight="60"/>            <Image Source="{Binding Image}" Height="400" Margin="0,0,18,20"                    Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>            <TextBlock Text="{Binding Description}" Margin="0,0,18,0"                        Style="{StaticResource BodyTextStyle}"/>        </StackPanel>    </GridView.Header></GridView>

Here,GridviewThe title is the yellow part of the contour.

7. Set the view interaction mode

By default, you canListviewOrGridviewSelect a project. To change this behavior, you canSelectionmodeSet propertyListviewselectionmodeEnumeration value to allow multiple or forbid selection.

Which of the following statements is not allowed?ListviewAnd allow multipleGridview.

XAML Replication

<Listview X: Name = "itemlist" itemssource = "{binding source = {staticresource itemsviewsource}" selectionmode = "NONE"/> <gridview X: name = "itemgrid" itemssource = "{binding source = {staticresource itemsviewsource}" selectionchanged = "itemview_selectionchanged" selectionmode = "extended"/>

To respond to the selected changes in the list or grid, ProcessSelectionchangedEvent. In the event handler code, you canSelectionchangedeventargs. addeditemsAttribute to obtain the list of selected items. InSelectionchangedIn addition to events, use code or bind data fromSelecteditemAndSelecteditemsProperty to obtain the selected items.

The following isSelectionchangedEvent Handler.

C # copy

List <Object> selecteditems; private void itemview_selectionchanged (Object sender, selectionchangedeventargs e) {// use E. addeditems to get the items that are selected in the itemscontrol. selecteditems = (list <Object>) E. addeditems;} You can also changeListviewOrGridviewSo that you can click a project (such as a button) instead of selecting a project. For example, when a user clicks a list or a project in a grid, it is useful to navigate your application to a new page. To enable this behavior, SetSelectionmodeSetNone, SetIsitemclickenabledSetTrue, AndItemclickThe event is processed so that the user can execute some tasks when clicking the project.

The following items have clickable items:Gridview.ItemclickThe code in the handler will navigate to a new page and pass the clicked project as data to the new page.

XAML Replication

<GridView x:Name="itemGridView"          Margin="116,0,116,46"          ItemsSource="{Binding Source={StaticResource itemsViewSource}}"          ItemTemplate="{StaticResource Standard250x250ItemTemplate}"          SelectionMode="None"          IsItemClickEnabled="True"          ItemClick="ItemView_ItemClick"/>

C # copy

private void ItemView_ItemClick(object sender, ItemClickEventArgs e){    // Navigate to the split page, configuring the new page    // by passing required information as a navigation parameter    this.Frame.Navigate(typeof(SplitPage), e.ClickedItem);}