Windows Phone development (14): Data Template

Data templates. If you only hear this term, you will be confused. Why? What is it? Don't worry, kiss. Today, let's explore it together.
To put it bluntly, data templates are used to standardize the display mode of data. For templates, it is estimated that you are familiar with them. You should have used ppt and made presentations, right, there are many templates in the PPT. Do you understand? Do not understand? You must have filled out the form. If you take an exam, you will be asked to enter some registration forms or other information, or have you used it for work? Yes, there are also resume templates. Template usage is like filling in a blank question. With some standard content, you can fill in the appropriate content in a specific position according to this specification, you can't say that you should enter your name as "gender". This is not in line with the rules.
Well, I 've talked a lot about it. Let's get to the point below. What controls are most likely to use data templates? Actually, there are many, as long as they are sub-classes of contentcontrol, such as buttons. Of course, these controls are generally not necessary, in most cases, some text prompts are displayed to show you what to do. At most you put an icon on the button. It is estimated that few people put a video on the button, in WP, this is acceptable, but not necessary.
Right. Generally, data templates are most likely to be used for list controls, such as ListBox controls. If your list control only allows users to view information, no additional operations are required, you can fully consider using the "dad" -- itemscontrol of ListBox.

Well, let's take an example to see how the itemscontrol list items are displayed without customizing the data template.
First of all, it is of course to create a new project. I don't need to introduce it. I believe you will.
In this way, you can delete all the grid root containers on the page and directly throw an itemscontrol, just like this.

 

<Phone: phoneapplicationpage <br/> X: class = "datatemplatesample. pagea "<br/> xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "<br/> xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "<br/> xmlns: Phone =" CLR-namespace: Microsoft. phone. controls; Assembly = Microsoft. phone "<br/> xmlns: shell =" CLR-namespace: Microsoft. phone. shell; Assembly = Microsoft. phone "<br/> xmlns: D =" http://schemas.microsoft.com/expression/blend/2008 "<br/> xmlns: MC = "http://schemas.openxmlformats.org/markup-compatibility/2006" <br/> fontfamily = "{staticresource phonefontfamilynormal}" <br/> ....... <br/> </P> <p> <itemscontrol X: Name = "myitemcontrol"/> </P> <p> </Phone: phoneapplicationpage>

SwitchCodePage, set the data source of myitemcontrol to a string array.

Public pagea () <br/>{< br/> initializecomponent (); </P> <p> This. myitemcontrol. itemssource = new string [] {<br/> "Corn scrambled eggs", <br/> "roast duck rice", <br/> "cucumber fried meat ", <br/> "boiled bean curd", <br/> "glutinous rice chicken" <br/>}; <br/>}

Okay, don't drool. Now, you can run your super project.
You should have discovered that each item in the list is displayed as text. In fact, it is a textblock by default, which is used to display text.
What if the data source I set is not a character?
Now let's look at the second example.
Make a good layout first, just like the example above.

<Phone: phoneapplicationpage <br/> X: class = "datatemplatesample. pageb "<br/> xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "<br/> xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "<br/> xmlns: Phone =" CLR-namespace: Microsoft. phone. controls; Assembly = Microsoft. phone "<br/> xmlns: shell =" CLR-namespace: Microsoft. phone. shell; Assembly = Microsoft. phone "<br/> xmlns: D =" http://schemas.microsoft.com/expression/blend/2008 "<br/> xmlns: MC =" http://schemas.openxmlformats.org/markup-compatibility/2006 "<br/> ....... <br/> </P> <p> <itemscontrol name = "myitemscontrol" fontsize = "52"/> </P> <p> </Phone: phoneapplicationpage>

Next, we define a commodity class, which contains three attributes: commodity name, unit price, and bar code.
Set the itemscontrol data source to a collection of commodity classes.

Public partial class pageb: phoneapplicationpage <br/>{< br/> Public pageb () <br/>{< br/> initializecomponent (); </P> <p> system. collections. objectmodel. observablecollection <goods> goodslist = new system. collections. objectmodel. observablecollection <goods> <br/> {<br/> New Goods {goodsname = "", price = 0.02f, barcode = "21001475 "}, <br/> New Goods {goodsname = "", price = 0.6f, barcode = "21002345" },< br/> New Goods {goodsname = "dry bread ", price = 2.5f, barcode = "21003087" },< br/> New Goods {goodsname = "gutter oil", price = 33.4f, barcode = "21002020 "}, <br/> New Goods {goodsname = "Moutai beer", price = 0000f, barcode = "21009331" }< br/>}; <br/> This. myitemscontrol. itemssource = goodslist; <br/>}</P> <p> public class goods <br/>{< br/> // <summary> <br/>/ // product price <br/> /// </Summary> <br/> Public String goodsname {Get; set ;} </P> <p> // <summary> <br/> // unit price <br/> /// </Summary> <br/> public float price {Get; set ;} </P> <p> // <summary> <br/> // product barcode <br/> /// </Summary> <br/> Public String Barcode {Get; set ;}< br/>}

 

Run it. Ah, you will be surprised. How can this content be displayed?
(Figure 1)

As mentioned above, the data template is a textblock control by default and can only display text. when it encounters non-text data, it tries to call the tostring method of the data source type, so the example just now shows the class name. This is the tostring method inherited from the object class. Now let's change the goods class and rewrite its tostring method to see what the result is.

Public override string tostring () <br/>{< br/> return this. goodsname; <br/>}

 

At this time, you can run it again and see the product name?

However, you may find that the product name, unit price, and bar code value are not met yet? Yes. At this time, we really need to customize the data template.

Modify the above XAML.

<Itemscontrol name = "myitemscontrol" fontsize = "52"> <br/> <itemscontrol. itemtemplate> <br/> <datatemplate> <br/> <grid margin = ","> <br/> <grid. columndefinitions> <br/> <columndefinition width = "Auto"/> <br/> <columndefinition width = "*"/> <br/> </grid. columndefinitions> <br/> <grid. rowdefinitions> <br/> <rowdefinition Height = "Auto "/> <br/> </grid. rowdefinitions> <br/> <textblock grid. column = "0" grid. row = "0" text = "commodity:"/> <br/> <textblock grid. column = "1" grid. row = "0" text = "{binding goodsname}"/> <br/> <textblock grid. column = "0" grid. row = "1" text = "unit price:"/> <br/> <textblock grid. column = "1" grid. row = "1" text = "{binding price}"/> <br/> <textblock grid. column = "0" grid. row = "2" text = "Bar Code:"/> <br/> <textblock grid. column = "1" grid. row = "2" text = "{binding barcode}"/> <br/> </GRID> <br/> </datatemplate> <br/> </itemscontrol. itemtemplate> <br/> </itemscontrol>

Now we have basically met our requirements.
(Figure 2)