您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> ASP.NET 基礎 >> 關於ASP.NET

WinJS ListView 控件深度解析：打造高效能 Windows 應用商店資料呈現

編輯：關於ASP.NET

當應用程式需要處理大量資料——新聞文章、食譜、賽事比分、財務圖表等——如何讓使用者輕鬆瀏覽、搜尋與篩選，成為介面設計的核心挑戰。Windows 應用商店應用中的 ListView 控件 正是為了解決此問題而生，它提供網格與列表兩種佈局模式，支援分組、篩選、排序與虛擬化等進階功能，是構建資料密集型應用的基石。

ListView 控件基礎架構

ListView 同時存在於 HTML 與 XAML 兩種開發模型中。在 WinJS (Windows Library for JavaScript) 應用中，只需在 <div> 元素上設定 data-win-control 屬性即可啟用：

<div id="listView" data-win-control="WinJS.UI.ListView"></div>

核心配置屬性：data-win-options

透過 data-win-options 屬性可聲明式配置 ListView 行為：

<div id="listView" 
     data-win-control="WinJS.UI.ListView" 
     data-win-options="{ 
         selectionMode: 'single', 
         layout: { type: WinJS.UI.GridLayout } 
     }"></div>

關鍵屬性說明：

selectionMode：single（單選）或 multi（多選，預設）
layout：GridLayout（網格，預設）、ListLayout（列表）、CellSpanningLayout（儲存格跨越）
groupDataSource / itemDataSource：分組與項目資料來源
itemTemplate / groupHeaderTemplate：項目與群組標題樣板

資料繫結核心：WinJS.Binding.List

ListView 本身不儲存資料，必須搭配 WinJS.Binding.List 物件運作。List 物件將物件陣列繫結至樣板中定義的 HTML 元素——List 定義「顯示什麼」，樣板定義「如何顯示」。

var dataArray = [
    { title: "項目 1", subtitle: "說明文字", backgroundImage: "img1.jpg", key: "group1" },
    { title: "項目 2", subtitle: "說明文字", backgroundImage: "img2.jpg", key: "group1" },
    { title: "項目 3", subtitle: "說明文字", backgroundImage: "img3.jpg", key: "group2" }
];

var list = new WinJS.Binding.List(dataArray);
// 建立分組視圖
var groupedList = list.createGrouped(
    function(item) { return item.key; },      // 分組鍵選擇器
    function(item) { return { title: item.key }; } // 分組資料產生器
);

listView.winControl.itemDataSource = groupedList.dataSource;
listView.winControl.groupDataSource = groupedList.groups.dataSource;

建立 ListView 樣板

項目樣板

使用 WinJS.Binding.Template 定義項目外觀：

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <div class="item">
        <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
        <div class="item-overlay">
            <h4 class="item-title" data-win-bind="textContent: title"></h4>
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
        </div>
    </div>
</div>

群組標題樣板

群組標題通常包含導航連結，點擊可前往該群組詳細頁面：

<div class="headertemplate" data-win-control="WinJS.Binding.Template">
    <button class="group-header win-type-x-large win-type-interactive" 
            data-win-bind="groupKey: key" 
            onclick="Application.navigator.pageControl.navigateToGroup(event.srcElement.groupKey)"
            role="link" tabindex="-1" type="button">
        <span class="group-title win-type-ellipsis" data-win-bind="textContent: title"></span>
        <span class="group-chevron"></span>
    </button>
</div>