Silverlight practical tips series: 65. Data Template of Silverlight datatemplate (1) Use Data Template

In Silverlight, our data list display controls include ListBox and DataGrid. The emplate (Data Template) is used to manage the appearance of the displayed data entry styles. This section describes how to use datatemplate Based on datatemplate.

First, prepare the data source as follows:

     ///   <Summary>      ///   ArticleModel  ///   </Summary>      Public   Class  Articlemodel {  Public   String Artname { Get ;Set  ;}  Public   String Artcontent { Get ; Set  ;}  Public   String Artauthor { Get ; Set  ;}  Public   String Artupdatetime { Get ;Set  ;}}  ///   <Summary>      ///  Article list  ///   </Summary>      Public   Class  Artlist {  Public  Artlist () {articlelist = New List <articlemodel>(); Articlelist. Add (  New Articlemodel () {artname = "  Chengdu  " , Artcontent = "  Tianfu country  "  , Artauthor = "  Leung  " , Artupdatetime = "  11:12:36  " }); Articlelist. Add (  New Articlemodel () {artname = "  Shanghai  " , Artcontent = "  Emerald Pearl  "  , Artauthor = "  Ailen  " , Artupdatetime = "  2012-05-16 21:32:10  " }); Articlelist. Add (  New Articlemodel () {artname = "  Guangzhou  " , Artcontent = "  Coastal Cities  "  , Artauthor = "  Minghe  " , Artupdatetime = "  2012-01-17 05:01:45  " }); Articlelist. Add (  New Articlemodel () {artname = "  Tibet  " , Artcontent = "  Plateau cities  "  , Artauthor = "  Weifeng  " , Artupdatetime = "  2012-03-22 09:30:14  " });}  ///   <Summary>          ///  Article list attributes  ///   </Summary>          Public List <articlemodel> articlelist { Get ; Set  ;}} 

How do I bind a data source to the foreground control? As described in the previous section, set a static resource

// Reference Domain Name Space  
Xmlns: Local = " CLR-namespace: sldatatemplate  " // Initialize to static Resources 
<Usercontrol. Resources> <local: artlist X: Key = "  Sourcelist  " > </Local: artlist> </usercontrol. Resources> // Set as data context 
<Grid X: Name = "  Layoutroot  " Background = "  White " Datacontext = "  {Staticresource sourcelist}  " > // Set Data Source binding 
<ListBox X: Name = "  Lbart  " Itemssource = "  {Binding articlelist}  " /> </GRID>

 

Taking ListBox as an example, there are three methods in this article:

1. Add datatemplate directly to ListBox. itemtemplate.

<ListBox X: Name = "  Lbart  " Itemssource = "  {Binding articlelist}  " Width = "  350  "  Height = "  300  " Horizontalalignment = "  Left " Verticalalignment = "  Top  " > <ListBox. itemtemplate> <datatemplate> <stackpanel orientation = "  Horizontal  " > <Textblock text = "  {Binding artname}  " > </Textblock> <textbox text = "  {Binding artcontent} " > </Textbox> <textbox text = "  {Binding artauthor}  " > </Textbox> <textblock text = "  {Binding artupdatetime}  " > </Textblock> </stackpanel> </datatemplate> </ListBox. itemtemplate> </ListBox>

2. Use datatemplate as resources and reference itemtemplate = "{staticresource lbtmp}" in ListBox.

<Usercontrol. Resources> <datatemplate X: Key = " Lbtmp  " > <Stackpanel orientation = "  Horizontal  " > <Textblock text = "  {Binding artname}  " > </Textblock> <textbox text = "  {Binding artcontent}  " > </Textbox> <textbox text = "  {Binding artauthor} " > </Textbox> <textblock text = "  {Binding artupdatetime}  " > </Textblock> </stackpanel> </datatemplate> </usercontrol. Resources>

 

<ListBox X: Name = "  Lbres  " Itemssource = "  {Binding articlelist}  "  Itemtemplate ="  {Staticresource lbtmp}  " Margin = "  370 0 0 0  "  Horizontalalignment = "  Left  " Verticalalignment = "  Top  "  Width = " 350  " Height = "  300  " > </ListBox>

3. Place datatemplate in the backgroundCodeIn the background code.

//Front-end code
<ListBox X: Name ="Lbcsret"Margin ="0 370 0 0"Horizontalalignment ="Left"Verticalalignment="Top"Width ="350"Height ="300"> </ListBox>
 

 

// Background code 
 Public  Mainpage () {initializecomponent (); datatemplate dtemp = Gettemplate ();  This . Lbcsret. itemtemplate = Dtemp;  This . Lbcsret. itemssource = New  Artlist (). articlelist ;}  Private  Datatemplate gettemplate (){ String Xamlstring = @"  <Datatemplate xmlns = "" http://schemas.microsoft.com/winfx/2006/xaml/presentation "" xmlns: X = "" http://schemas.microsoft.com/winfx/2006/xaml "> <stackpanel orientation =" "horizontal" "> <textblock text =" "{binding artname}"> </textblock> <textbox text =" "{binding artcontent}" "> </textbox> <textbox text =" "{binding artauthor}"> </textbox> <textblock text = "" {binding artupdatetime }" "> </textblock> </stackpanel> </datatemplate>  "  ;  Return (Datatemplate) xamlreader. Load (xamlstring );} 

Finally, we can see that datatemplate is also used in the DataGrid.

<SDK: DataGrid itemssource = "  {Binding articlelist}  " Margin = "  370 370 0 0  "  Horizontalalignment = "  Left  " Verticalalignment = "  Top "  Width = "  350  " Height = "  300  " Autogeneratecolumns = "  False  " > <SDK: DataGrid. Columns> <SDK: Maid header = "  List  " Celltemplate ="  {Staticresource lbtmp}  " > </SDK: Maid> </SDK: DataGrid. Columns> </SDK: DataGrid>

Next let's take a look at the running effect. If you need the source code, click sldatatemplate.zip to download it.