使用ListView的時候應該提供給其一些必要的模版（Template），以告訴Atlas應該如何渲染您的內容。ListView中有如下模版：
- layoutTemplate：這個模版用來渲染包含列表項目的容器（例如使用 ＜table＞標記），列表的頭部（例如使用 ＜thead＞標記），尾部等。您必須為ListView指定一個layoutTemplate。而且這個模版必須包含一個itemTemplate模版，也可選包含一個separatorTemplate模版。
- itemTemplate：這個模版用來渲染列表中的一個項目（例如使用 ＜tr＞標記）。這個模版必須被置于layoutTemplate中。
- separatorTemplate：這個模版用來渲染列表中的項目之間的分隔元素（例如使用 ＜hr＞標記）。這個模版必須被置于layoutTemplate中。
- emptyTemplate.：這個模版用來渲染沒有項目存在時的ListView。此時可能與該ListView相關的DataSource對象中沒有項目，或是正在從服務器中取得的過程中。
- itemCssClass：指定項目條目的css class。
- alternatingItemCssClass：指定間隔的項目條目的css class。
- selectedItemCssClass：指定被選中的項目條目的css class。
- separatorCssClass：指定分隔元素的css class。
- itemTemplateParentElementId：這個屬性指定了itemTemplate和separatorTemplate的父元素。這樣itemTemplate和separatorTemplate元素就可以在其中被重復渲染。
首先，我們編寫一個返回.NET中DataTable的Web Service。注意到在這里將繼承于Microsoft.Web.Services.DataService基類，并且為service方法加上定義在名稱空間System.ComponentModel中的屬性DataObjectMethod。在service方法的開頭，我們使用System.Threading.Thread.Sleep(2000)來模擬2秒鐘的網絡延遲，以便可以看到emptyTemplate中的內容。
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class MyService : Microsoft.Web.Services.DataService 
{
[DataObjectMethod(DataObjectMethodType.Select)]
public DataTable GetListData()
{
System.Threading.Thread.Sleep(2000);
DataTable dt = new DataTable("MyListData");
dt.Columns.Add("Name", typeof(string));
dt.Columns.Add("Email", typeof(string));
DataRow newRow;
for (int i = 0; i ＜ 5; ++i)
{
newRow = dt.NewRow();
newRow["Name"] = string.Format("Dflying {0}", i);
newRow["Email"] = string.Format("Dflying{0}@dflying.net", i);
dt.Rows.Add(newRow);
}
return dt;
}
}然后，添加一些ASP.NET頁面中必須的控件/標記：
＜atlas:ScriptManager ID="ScriptManager1" runat="server" /＞
＜!-- Element for myList (container) --＞
＜div id="myList"＞ ＜/div＞
＜!-- Layout Elements --＞
＜div style="display: none;"＞
＜/div＞在上面的標記中，我們加入了三個標記：一個必須的ScriptManager控件。一個id為myList的div，用來讓Atlas把渲染后的ListView放置于這里。一個隱藏的div，用于定義我們的模版。這個隱藏div中的元素在頁面上是不可見的，只是用來提供給Atlas必要的模版。
我們在這個隱藏的div中加入如下ListView的模版：
＜!-- Layout Template --＞
＜table id="myList_layoutTemplate" border="1" cellpadding="3"＞
＜thead＞
＜tr＞
＜td＞ ＜span＞No. ＜/span＞ ＜/td＞
＜td＞ ＜span＞Name ＜/span＞ ＜/td＞
＜td＞ ＜span＞Email ＜/span＞ ＜/td＞
＜/tr＞
＜/thead＞
＜!-- Repeat Template --＞
＜tbody id="myList_itemTemplateParent"＞
＜!-- Repeat Item Template --＞
＜tr id="myList_itemTemplate"＞
＜td＞ ＜span id="lblIndex" /＞ ＜/td＞
＜td＞ ＜span id="lblName" /＞ ＜/td＞
＜td＞ ＜span id="lblEmail" /＞ ＜/td＞
＜/tr＞
＜!-- Separator Item Template --＞
＜tr id="myList_separatorTemplate"＞
＜td colspan="3"＞Separator ＜/td＞
＜/tr＞
＜/tbody＞
＜/table＞
＜!-- Empty Template --＞
＜div id="myList_emptyTemplate"＞
No Data
＜/div＞
上面的代碼中您可以看到我提到的所有四種模版。另外還要指定每一個模版一個id，將用于下面的Atlas腳本聲明中。在這個例子中我將以HTML Table的形式渲染這個ListView，很抱歉分隔元素將會很丑陋（一個空行）。
最后在頁面中添加Atlas腳本聲明：
＜dataSource id="listDataSource" autoLoad="true" serviceURL="MyService.asmx" /＞
＜listView id="myList" itemTemplateParentElementId="myList_itemTemplateParent"＞
＜bindings＞
＜binding dataContext="listDataSource" dataPath="data" property="data" /＞
＜/bindings＞
＜layoutTemplate＞
＜template layoutElement="myList_layoutTemplate" /＞
＜/layoutTemplate＞
＜itemTemplate＞
＜template layoutElement="myList_itemTemplate"＞
＜label id="lblIndex"＞
＜bindings＞
＜binding dataPath="$index" transform="Add" property="text"/＞
＜/bindings＞
＜/label＞
＜label id="lblName"＞
＜bindings＞
＜binding dataPath="Name" property="text" /＞ 
＜/bindings＞
＜/label＞
＜label id="lblEmail"＞
＜bindings＞
＜binding dataPath="Email" property="text" /＞
＜/bindings＞
＜/label＞ 
＜/template＞
＜/itemTemplate＞
＜separatorTemplate＞
＜template layoutElement="myList_separatorTemplate" /＞
＜/separatorTemplate＞
＜emptyTemplate＞
＜template layoutElement="myList_emptyTemplate"/＞
＜/emptyTemplate＞
＜/listView＞
這里我添加了一個Atlas客戶端DataSource對象以從Web Service中取得數據。這里我們暫且不多談DataSource（可能在后續文章中有所介紹）。讓我們來看一下ListView相關的定義：在ListView的定義中，我們指定了itemTemplateParentElementId屬性。然后在ListView的內部定義了一個binding段，用來把DataSource中取得的數據與這個ListView綁定起來。我們還定義了四個模版段，每個模版段都用layoutElement與上面定義過的四種模版關聯。注意到在layoutTemplate模版中的第一個label控件，我們在其綁定中指定了一個Add transformer以將從0開始的順序變為從1開始（關于Atlas Transformer，請參考我的這篇文章：http://dflying.cnblogs.com/archive/2006/04/05/367908.html）。
大功告成，運行一下吧。
裝載中：
裝載完成：