Development of New Fashion Windows 8 (22): ListBox and ComboBox

These two guys are absolutely familiar to us. From winform to WPF to Asp.net, we will all be exposed to these two controls, and I believe we will also use them frequently.

 

ListBox

First, let's talk about ListBox. This is actually very simple. It should be said that for all the set controls, there are two ways to put things in it:

1. Data Binding;

2. manually add items.

The ListBox corresponds to listboxitem, which is more clear. It is a contentcontrol. Like a button, there is a content attribute, this attribute is used to set the items to be displayed in the item. For data binding, because it is batch, we need to use datatemplate at this time.

 

Let's take a look at the data binding example of ListBox.

 
<Grid background = "{staticresource applicationpagebackgroundthemebrush}"> <ListBox X: Name = "list" width = "365"/> </GRID>
 

InCodeIn the view, we set the data source in the mainpage class constructor, in fact, it is to set its itemssource attribute.

Public mainpage () {This. initializecomponent (); string [] items = {"xia", "Shang", "Zhou", "Spring, autumn, and Warring States", "Qin", "Han", "Wei, Jin, and Northern and Southern Dynasties of the Three Kingdoms ", "Tang", "Tang"}; this. list. itemssource = items ;}
 

Press F5 to see the following results.

 

However, sometimes it seems that it is not enough to display only one text. It is possible that the data source we use is more complex.

Okay. Now let's forge some test data and define the object class first.

 
Public class employee {Public String emname {Get; set;} Public String emno {Get; set;} public int emage {Get; set;} public windows. UI. XAML. media. imaging. bitmapimage photo {Get; Set ;}}
 

Then complete the XAML.

<ListBox X: Name = "listemp" selectionmode = "single"> <ListBox. itemtemplate> <datatemplate> <grid. columndefinitions> <columndefinition width = "Auto"/> <columndefinition/> </grid. columndefinitions> <grid margin = "10" grid. column = "1"> <grid. rowdefinitions> <rowdefinition Height = "Auto"/> </grid. rowdefinitions> <grid. columndefinitions> <columndefinition width = "Auto"/> <columndefinition/> </grid. columndefinitions> <textblock grid. row = "0" grid. columnspan = "2" fontweight = "bold" fontsize = "24" margin = "3, 2, 3, 2" text = "{binding emname}"/> <textblock text = "employee ID: "grid. row = "1" grid. column = "0"/> <textblock grid. row = "1" grid. column = "1" text = "{binding emno}"/> <textblock grid. row = "2" grid. column = "0" text = "Age:"/> <textblock grid. row = "2" grid. column = "1" text = "{binding emage}"/> </GRID> <image grid. column = "0" margin = "4" Source = "{binding photo}" stretch = "Uniform"/> </GRID> </datatemplate> </ListBox. itemtemplate> </ListBox>

bind it to the Code view.

List <employee> emplist = new list <employee> (); employee e1 = new employee {emname = "crap", emno = "HC-22556854", emage = 38, photo = new windows. UI. XAML. media. imaging. bitmapimage (New uri ("MS-appx: // assets/1.jpg")}; emplist. add (E1); employee e2 = new employee {emname = "Zhang thigh", emno = "HC-62254585", emage = 41, photo = new windows. UI. XAML. media. imaging. bitmapimage (New uri ("MS-appx: // assets/1.jpg")}; emplist. add (E2); employee E3 = new employee {emname = "mr. Grass", emno = "HC-2000355462", emage = 41, photo = new windows. UI. XAML. media. imaging. bitmapimage (New uri ("MS-appx: // assets/1.jpg")}; emplist. add (E3); this. listemp. itemssource = emplist;

Here we use the data template, because each item we want to display contains employee portraits, names, employee IDs, and age fields, which obviously cannot be achieved by relying on only one string, therefore, when necessary, we dispatch data templates.

 

Some may think that the ListBox is vertically arranged by default. Is there a way to arrange its items horizontally? Of course, the itemspanel attribute is used to determine how the itemspanel list is arranged. You can set a panel, as shown in figure

 
<ListBox. itemspanel> <itemspaneltemplate> <stackpanel orientation = "horizontal"/> </itemspaneltemplate> </ListBox. itemspanel>
 

Run the command again and you will see that they are arranged horizontally.

How are these three guys handsome.

 

The next step is to manually add items, which is simpler. You can see the following XAML.

<ListBox> <listboxitem> Project 1 </listboxitem> <listboxitem. content> <rectangle width = "480" Height = "80" fill = "orange"/> </listboxitem. content> </listboxitem> <listboxitem. content> <grid. columndefinitions> <columndefinition width = "Auto"/> <columndefinition/> </grid. columndefinitions> <textblock grid. column = "0" text = "enter a number:" fontsize = "25"/> <textbox grid. column = "1" width = "260"/> </GRID> </listboxitem. content> </listboxitem> </ListBox>
 

This is the case after running:

 

 

ComboBox

In fact, it is the same as ListBox, but it is a drop-down list box. The item list corresponds to the comboboxitem class.

Consider the following example. Let's put some stuff in ComboBox. Then, when we select a specific item, the text color in textblock changes accordingly.

1. layout the UI first.

<Grid background = "{staticresource applicationpagebackgroundthemebrush}"> <stackpanel> <ComboBox X: Name = "CB" width = "275" horizontalalignment = "Left"> <ComboBox. itemtemplate> <datatemplate> <grid. columndefinitions> <columndefinition width = "Auto"/> <columndefinition width = "*"/> </grid. columndefinitions> <rectangle grid. column = "0" width = "25" Height = "25" margin = "5" fill = "{binding Path = brush}"/> <textblock grid. column = "1" text = "{binding Path = colorname}" verticalignment = "center" margin = "3,2, 2, 2 "/> </GRID> </datatemplate> </ComboBox. itemtemplate> </ComboBox> <textblock margin = "5, 20, 0, 0" fontsize = "60" fontweight = "black" text = "text color" X: name = "TB"/> </stackpanel> </GRID>

Next, you have guessed that it must be the write processing code.

In the constructor of the mainpage class, we add four options for ComboBox. And process its selectionchanged event. For binding, we don't have to define a class this time. Don't forget ,. net contains a very flexible type-dynamic, with the full New Keyword, We can dynamically define an object.

Public mainpage () {This. initializecomponent (); List <dynamic> colorlist = new list <dynamic> (); colorlist. add (New {brush = new solidcolorbrush (colors. yellow), colorname = "yellow"}); colorlist. add (New {brush = new solidcolorbrush (colors. blue), colorname = "blue"}); colorlist. add (New {brush = new solidcolorbrush (colors. gray), colorname = "gray"}); colorlist. add (New {brush = new solidcolorbrush (colors. Pink), colorname = "pink"}); this. CB. itemssource = colorlist; // bind the event to respond to the choice of ComboBox CB. selectionchanged + = (a, argS) => {If (ARGs. addeditems. count <= 0) {return;} dynamic item = (dynamic) args. addeditems [0]; If (item! = NULL) {This. TB. Foreground = item. Brush ;}; if (CB. Items. Count> 0) {CB. selectedindex = 0 ;}}

 

 

This section has many instances. I will package the source code and upload it to the resource later.