[Win8] development notes for Windows 8 (9): Use of listview and Data Binding

The following describes how to use listview to create a project named testlist.

Add a pile of data to the background code on the home page:

 protected override void OnNavigatedTo(NavigationEventArgs e)        {            if (e.NavigationMode == NavigationMode.New)            {                List<string>myList = new List<string>;                myList.Add("Why Test 1");                myList.Add("Why Test 2");                myList.Add("Why Test 3");                myList.Add("Why Test 4");            }        }

Drag a listview to the page on the XAML page and name it list1.

Next, bind the listview data source to the Collection defined in the background.

You only need to set itemssource of listview. The complete code is as follows:

Using system; using system. collections. generic; using system. io; using system. LINQ; using Windows. foundation; using Windows. foundation. collections; using Windows. UI. XAML; using Windows. UI. XAML. controls; using Windows. UI. XAML. controls. primitives; using Windows. UI. XAML. data; using Windows. UI. XAML. input; using Windows. UI. XAML. media; using Windows. UI. XAML. navigation; // "blank page" item template in http://go.microsoft.com/fwlink? Linkid = 234238 introduces namespace testlist {/// <summary> /// it can be used for itself or navigation to a blank page inside the frame. /// </Summary> Public sealed partial class mainpage: Page {public mainpage () {This. initializecomponent () ;}/// <summary> /// call when this page is to be displayed in the frame. /// </Summary> /// <Param name = "E"> describes how to access event data on this page. Parameter // properties are usually used on the configuration page. </Param> protected override void onnavigatedto (navigationeventargs e) {If (E. navigationmode = navigationmode. new) {list <string> mylist = new list <string> (); mylist. add ("Why Test 1"); mylist. add ("Why Test 2"); mylist. add ("Why Test 3"); mylist. add ("Why Test 4"); list1.itemssource = mylist ;}}}}

The complete code for the corresponding XAML is as follows:

<Page    x:Class="TestList.MainPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:TestList"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">        <ListView x:Name="list1" HorizontalAlignment="Center" Height="600" VerticalAlignment="Center" Width="500"/>    </Grid></Page>

Running effect:

Itemssource is the data set displayed on the interface.

However, this simple display is generally difficult to meet the requirements. We need to customize the complicated listview.

Modify the following in XAML:

<Page    x:Class="TestList.MainPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:TestList"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">        <ListView x:Name="list1" HorizontalAlignment="Center" Height="600" VerticalAlignment="Center" Width="500">            <ListView.ItemTemplate>                <DataTemplate>                    <StackPanel Orientation="Horizontal">                        <TextBox Text="{Binding}"/>                        <Button Content="{Binding}"/>                    </StackPanel>                </DataTemplate>            </ListView.ItemTemplate>        </ListView>    </Grid></Page>

In this way, multiple controls can be displayed during the operation:

Note: direct text = "{binding}" means that the value is directly equal to the context.

Next, let's take a look at other usage of listview.

1. Select mode: selectionmode

Selectionmode = "NONE": items in the list cannot be selected.

Selectionmode = "single": only one item can be selected

Selectionmode = "multiple": You can select multiple modes.

So how to obtain the selected object?

Drag a button to perform the experiment:

<Page X: class = "testlist. mainpage "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "xmlns: Local =" using: testlist "xmlns: D =" http://schemas.microsoft.com/expression/blend/2008 "xmlns: MC =" http://schemas.openxmlformats.org/markup-compatibility/2006 "MC: ignorable = "D"> <grid background = "{staticresource applicationpagebackgroundthemebrush}"> <listview X: name = "list1" selectionmode = "multiple" horizontalalignment = "center" Height = "150" verticalignment = "center" width = "500"> <listview. itemtemplate> <datatemplate> <stackpanel orientation = "horizontal"> <textbox text = "{binding}"/> <button content = "{binding}"/> </stackpanel> </datatemplate> </listview. itemtemplate> </listview> <button content = "obtain the selected object" horizontalalignment = "center" margin = "0,200, 0, 0 "verticalalignment =" center "/> </GRID> </Page>

Double-click the button to add a listener:

Private void button_click_1 (Object sender, routedeventargs e) {// selected single project: list1.selecteditem // selected multiple projects: list1.selecteditems button = (button) sender; button. content = list1.selecteditem ;}

Run the command again. After selecting an item and clicking the button, you will find that the content of the button has changed:

The returned selecteditem is the data context of the selected item.

2. Selected event: itemclick

You need to enable itemclick before using this event. The enable mode is isitemclickenabled = "true ".

Next, you can find an event (the lightning icon) in the Properties window of the control, name it item_click, and press Enter.

The code page is automatically redirected to the background, and corresponding methods are created:

        private void Item_Click(object sender, ItemClickEventArgs e)        {        }

E. clickeditem is the click option.

You can use the following code to perform a test:

        private void Item_Click(object sender, ItemClickEventArgs e)        {            MessageDialog msg = new MessageDialog(e.ClickedItem.ToString());            msg.ShowAsync();        }

Click it again to display the selected data.

So how can we dynamically load data? For example, how can I load information from the Internet and display the information?

Implement the inotifycollectionchanged interface.

Of course, Win8 has its own collection class: observablecollection, which implements the inotifycollectionchanged interface. Other operations are basically the same as list.

The method is simple. You just need to slightly modify the original code:

Using system; using system. collections. generic; using system. collections. objectmodel; using system. collections. specialized; using system. io; using system. LINQ; using Windows. foundation; using Windows. foundation. collections; using Windows. UI. popups; using Windows. UI. XAML; using Windows. UI. XAML. controls; using Windows. UI. XAML. controls. primitives; using Windows. UI. XAML. data; using Windows. UI. XAML. input; using Windo WS. UI. XAML. Media; using Windows. UI. XAML. Navigation; // What is the "blank page" item template in the http://go.microsoft.com/fwlink? Linkid = 234238 introduces namespace testlist {/// <summary> /// it can be used for itself or navigation to a blank page inside the frame. /// </Summary> Public sealed partial class mainpage: Page {observablecollection <string> mylist = new observablecollection <string> (); Public mainpage () {This. initializecomponent () ;}/// <summary> /// call when this page is to be displayed in the frame. /// </Summary> /// <Param name = "E"> describes how to access event data on this page. Parameter // properties are usually used on the configuration page. </Param> protected override void onnavigatedto (navigationeventargs e) {If (E. navigationmode = navigationmode. new) {mylist. add ("Why Test 1"); mylist. add ("Why Test 2"); mylist. add ("Why Test 3"); mylist. add ("Why Test 4"); list1.itemssource = mylist;} private void button_click_1 (Object sender, routedeventargs e) {// select a single project: list1.selecteditem // multiple items selected: list1.selecteditems mylist. add (datetime. now. tostring ();} private void item_click (Object sender, itemclickeventargs e) {messagedialog MSG = new messagedialog (E. clickeditem. tostring (); MSG. showasync ();}}}