Quick building of Windows 8 style application 5-ListView Data Control

This blog post mainly introduces what is the ListView data control and how to build the ListView Data Control.

What is ListView? Data Control?1) The ListView data control is used to display data sets. 2) inherits from ItemsControl. 3) In most cases, data is displayed vertically, and the displayed data is usually sorted. 4) when switching to the Snap View, the ListView is usually used to display the data set. 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1G513KX-0.png "/> How to Build ListView Data Control?First, we need to know some important attributes and events in the ListView control: 1) IsItemClickEnabled attribute: Get or set the Click list item to trigger the Click event; 2) SelectionMode attribute: get or set the selected mode; 3) HeaderTemplate attribute: Get or set the template of the List title to change the title appearance; 4) GroupStyle attribute: Get the GroupStyle object set, define the appearance of each group; 5) SelectionChanged event: triggered when the selected item changes; 6) ItemClick event: when the list item is clicked and the value of IsItemClickEnabled is true, this event will be triggered. In addition, when using ListView for data presentation, we need to consider the interaction mode of the ListView control: 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/ Allimg/131228/1 G5132620-1.png "/> the SelectionMode attribute of ListView is of the enumeration type, with the following values: 1) None: No selected items; 2) Single: only one option is available; 3) multiple: there are Multiple options; 4) Extended: there are Multiple options that can be selected and the selected items can be discontinuous. Next let's take a look at the effect of several commonly used ListView data styles: effect 1: static list. 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1G51342O-2.png "/> so how do we implement this ListView style in an application? XAMLCode: 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1G5131D4-3.png "/> You can see that the ItemTemplate in the ListView control references the static resource named StoreFrontTitleTemplate and sets the SelectionMode value to None. The static resource code of StoreFrontTitleTemplate is as follows: 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1G5132330-4.png "/> C # The Code binds the data to the ListView control. The Code is as follows: 650) this. width = 650;" border = "0" alt = "" src =" http://www.bkjia.com/uploads/allimg/131228/1G5136334-5.png "/> Effect 2: Click an item in the list on the left, and the details are displayed on the right. 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1G5132014-6.png "/> This effect is to click an item in the list on the left and the details of the item are displayed on the right. How can we implement this style effect in code? First, let's take a look at the XAML code for implementing ListView in the list on the left: 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1G5132364-7.png "/> The ItemTemplate of the ListView control is called the static resource of MessageListImageTemplate, And the ItemPanel is called the static resource of MessageListItemsPanelTemplate. The static resource XAML code of MessageListImageTemplate is as follows: 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1G5131B3-8.png "/> MessageListItemsPanelTemplate static resource XAML code: 650) this. width = 650;" border = "0" alt = "" src =" http://www.bkjia.com/uploads/allimg/131228/1G5131251-9.png "/> After learning how to implement the XAML of ListView, let's take a look at how the right-side XAML code is implemented. 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1G51325A-10.png "/> In fact, a ScrollViewer control is defined on the right. Its DataContext attribute value is set to the SelectedItem attribute of ListView. Finally, we bind the data to the ListView control in C # code: 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1G5134U0-11.png "/> Effect 3: the list on the Left can only be single-choice, and the list on the right can be multiple choices. 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1G513K36-12.png "/> To select one or more items in the list, you only need to set the value of SelectionMode of ListView to Single; Multiple or Extended. You can set the Header in the ListView list. The XAML code is as follows: 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1G513G50-13.png "/> Implementation result: the ListView control Hearder is set in the red box. 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1G5136193-14.png "/> Of course, you can also group and present data in the ListView control. The XAML code is set as follows: 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1G5134200-15.png "/> Effect: the red box contains the ListView control group we set. 650) this. width = 650; "border =" 0 "alt =" "src =" http://www.bkjia.com/uploads/allimg/131228/1G5135M3-16.png "/>

This article is from the "Wang Zukang" blog, please be sure to keep this source http://wzk89.blog.51cto.com/1660752/990833