在下面的标志中，我们到场了三个标志：一个必需的ScriptManager控件。一个id为myList的div，用来让Atlas把衬着后的ListView安排于这里。一个埋没的div，用于界说我们的模版。这个埋没div中的元素在页面上是不成见的，只是用来供应给Atlas需要的模版。
我们在这个埋没的div中到场以下ListView的模版：
＜!--LayoutTemplate--＞
[attach]292535[/attach]＜tableid="myList_layoutTemplate"border="1"cellpadding="3"＞
[attach]292536[/attach]＜thead＞
[attach]292537[/attach]＜tr＞
[attach]292538[/attach]＜td＞＜span＞No.＜/span＞＜/td＞
[attach]292539[/attach]＜td＞＜span＞Name＜/span＞＜/td＞
[attach]292540[/attach]＜td＞＜span＞Email＜/span＞＜/td＞
[attach]292541[/attach]＜/tr＞
[attach]292542[/attach]＜/thead＞
[attach]292543[/attach]＜!--RepeatTemplate--＞
[attach]292544[/attach]＜tbodyid="myList_itemTemplateParent"＞
[attach]292545[/attach]＜!--RepeatItemTemplate--＞
[attach]292546[/attach]＜trid="myList_itemTemplate"＞
[attach]292547[/attach]＜td＞＜spanid="lblIndex"/＞＜/td＞
[attach]292548[/attach]＜td＞＜spanid="lblName"/＞＜/td＞
[attach]292549[/attach]＜td＞＜spanid="lblEmail"/＞＜/td＞
[attach]292550[/attach]＜/tr＞
[attach]292551[/attach]＜!--SeparatorItemTemplate--＞
[attach]292552[/attach]＜trid="myList_separatorTemplate"＞
[attach]292553[/attach]＜tdcolspan="3"＞Separator＜/td＞
[attach]292554[/attach]＜/tr＞
[attach]292555[/attach]＜/tbody＞
[attach]292556[/attach]＜/table＞
[attach]292557[/attach]＜!--EmptyTemplate--＞
[attach]292558[/attach]＜divid="myList_emptyTemplate"＞
[attach]292559[/attach]NoData
[attach]292560[/attach]＜/div＞
下面的代码中您能够看到我提到的一切四种模版。别的还要指定每个模版一个id，将用于上面的Atlas剧本声明中。在这个例子中我将以HTMLTable的情势衬着这个ListView，很抱愧分开元素将会很丑恶（一个空行）。
最初在页面中增加Atlas剧本声明：
＜dataSourceid="listDataSource"autoLoad="true"serviceURL="MyService.asmx"/＞
[attach]292561[/attach]
[attach]292562[/attach]＜listViewid="myList"itemTemplateParentElementId="myList_itemTemplateParent"＞
[attach]292563[/attach]＜bindings＞
[attach]292564[/attach]＜bindingdataContext="listDataSource"dataPath="data"property="data"/＞
[attach]292565[/attach]＜/bindings＞
[attach]292566[/attach]＜layoutTemplate＞
[attach]292567[/attach]＜templatelayoutElement="myList_layoutTemplate"/＞
[attach]292568[/attach]＜/layoutTemplate＞
[attach]292569[/attach]＜itemTemplate＞
[attach]292570[/attach]＜templatelayoutElement="myList_itemTemplate"＞
[attach]292571[/attach]＜labelid="lblIndex"＞
[attach]292572[/attach]＜bindings＞
[attach]292573[/attach]＜bindingdataPath="$index"transform="Add"property="text"/＞
[attach]292574[/attach]＜/bindings＞
[attach]292575[/attach]＜/label＞
[attach]292576[/attach]＜labelid="lblName"＞
[attach]292577[/attach]＜bindings＞
[attach]292578[/attach]＜bindingdataPath="Name"property="text"/＞
[attach]292579[/attach]＜/bindings＞
[attach]292580[/attach]＜/label＞
[attach]292581[/attach]＜labelid="lblEmail"＞
[attach]292582[/attach]＜bindings＞
[attach]292583[/attach]＜bindingdataPath="Email"property="text"/＞
[attach]292584[/attach]＜/bindings＞
[attach]292585[/attach]＜/label＞
[attach]292586[/attach]＜/template＞
[attach]292587[/attach]＜/itemTemplate＞
[attach]292588[/attach]＜separatorTemplate＞
[attach]292589[/attach]＜templatelayoutElement="myList_separatorTemplate"/＞
[attach]292590[/attach]＜/separatorTemplate＞
[attach]292591[/attach]＜emptyTemplate＞
[attach]292592[/attach]＜templatelayoutElement="myList_emptyTemplate"/＞
[attach]292593[/attach]＜/emptyTemplate＞
＜/listView＞
这里我增加了一个Atlas客户端DataSource工具以从WebService中获得数据。这里我们临时未几谈DataSource（大概在后续文章中有所先容）。让我们来看一下ListView相干的界说：在ListView的界说中，我们指定了itemTemplateParentElementId属性。然后在ListView的外部界说了一个binding段，用来把DataSource中获得的数据与这个ListView绑定起来。我们还界说了四个模版段，每一个模版段都用layoutElement与下面界说过的四种模版联系关系。注重到在layoutTemplate模版中的第一个label控件，我们在其绑定中指定了一个Addtransformer以将从0入手下手的按次变成从1入手下手（关于AtlasTransformer，请参考我的这篇文章：
http://dflying.cnblogs.com/archive/2006/04/05/367908.html）。
半途而废，运转一下吧。
装载中：
装载完成：
