WIN10 series: C # App Control Basics 21

ListView control

A common way for a ListView control is to bind to background data and combine the bound data content with the front-end interface layout to display the data collection in a list in a specific order, such as an e-mail list or search results list.

In a XAML file, the use of the ListView control is as follows:

<ListView.../>

- or -

<ListView...>

<!-- add one or more components -

</ListView>

The following describes the common properties of the ListView control:

• Header property, Gets or sets the caption content of the ListView control.
• The Items property that gets the collection of list items in the ListView control.
• The ItemTemplate property, gets or sets the data template used to display each list item.
• The Isitemclickenabled property gets or sets whether the list item in the list can respond to the ItemClick event. If the property value is true, it indicates the ability to respond to the ItemClick event and cannot respond to the ItemClick event if the property value is false.
• SelectedItem property, Gets or sets the selected item in the list.
• The ItemsSource property that is used to provide a bound data source for the ListView control.

After describing the common properties, take a look at the common events of the ListView control:

• ItemClick event, when the Isitemclickenabled property is true, the ItemClick event is triggered when a list item in the list is clicked.
• The SelectionChanged event that is triggered when the selected item in the current list has changed. The SelectionChanged event cannot be triggered at the same time as the ItemClick event.

Next, use the ListView control to design a list of people information, including name, age, and height attributes, to demonstrate the use of the ListView control.

Create a blank application project with the Windows store named "Listviewdemo" and add the following code to the grid element of the MainPage.xaml file.

<listview header= " name age height "fontsize=" "Name=" Personalinformation "horizontalalignment=" left " Margin= "194,85,0,0" verticalalignment= "Top" width= "$" height= "> "

<ListView.ItemTemplate>

<DataTemplate>

<stackpanel orientation= "Horizontal" >

<textblock fontsize= "text=" {Binding Name} "width=" margin= "15,0,15,0"/>

<textblock fontsize= "text=" {Binding age} "width=" margin= "15,0,15,0"/>

<textblock fontsize= "text=" {Binding Height} "width=" margin= "15,0,15,10"/>

</StackPanel>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

in the preceding code , a ListView control is added that sets its header property value to "Name age height", which is used to display the title of the list. Create a list item template within the ListView control using the Listview.itemtemplate element and add the DataTemplate element within this element to define the style of the data template, add a StackPanel element to the DataTemplate element, and set its Orien The Tation property value is horizontal, which indicates that a horizontal layout is applied to the child elements, and three TextBlock text blocks for displaying names, ages, and heights are added to the StackPanel element. Set the Text property of three blocks of text to bind the name, age, and height properties of the data source, respectively, and the relevant knowledge about data binding will be explained in detail in chapter 6th.

To describe the people information used in the application, first define a data class person under the Listviewdemo namespace of the MainPage.xaml.cs file and define the name, age, and height three data attributes for storing and retrieving the personnel information. The code looks like this:

public class Person

{

// Add Name , Age and the Height Properties

public string Name {get; set;}

public string Age {get; set;}

public string Height {get; set;}

}

The next step in the MainPage.xaml.cs file In the MainPage construction method, define and initialize the list of data sources to display, and then bind it to the ListView control defined by the foreground , as shown in the following code:

Public MainPage ()

{

This. InitializeComponent ();

list<person> listItems = new List<person> () {

New Person () {Name = " jack ", age= "height="},

New Person () {Name = " Mike ", age= "height=", "165"},

New Person () {Name = " David ", age= "height=", "175"}

};

Personalinformation.itemssource = ListItems;

}

In the preceding code, an object ListItems of type list<person> is instantiated, and a three person class object containing the person information is added to the ListItems object. The ListItems object is then assigned to the ItemsSource property of Personalinformation, which adds the person information to the ListView control and displays it in the interface.

Running the program, a list of people's information is displayed in the interface, and the data is arranged using name, age, and height, and the data shown in the list is the previous three people information data defined in the background code. As shown in effect 4-34.

Figure 4-34 Binding a data source using the ListView control

In addition, the GridView control is also available in common controls for Windows store apps, but because the GridView control and the ListView control are functionally similar, the GridView control is not described in this section. Interested readers can learn how to use the GridView control and compare the differences between the GridView and the ListView.

WIN10 series: C # App Control Basics 21