內容 索引 搜尋
 

資料概觀

資料是所有使用者介面的核心。從旅館訂房表單到股市看盤軟體,使用者介面都具有一項特性,那就是以視覺化方式呈現資料,並以資料的某些形式來互動。如何選擇所要使用的使用者介面元件,以及如何加以放置以提供有用的工作流程,大部分是取決於您所要使用的資料本質。

資料來源

您的應用程式可能只需要使用「內部資料來源」,也可能會對使用者輸入表單中的部分數字進行運算。至於您所建立的其他應用程式,可能需要存取「外部資料來源」(如含有資訊的資料庫、Web 摘要、Web 服務或本機檔案)。在某些情況下,應用程式可能需要同時存取內部及外部資料來源。Microsoft® Expression Blend™ 目前支援兩種類型的外部資料來源:XML 及 CLR 物件。

[專案] 面板中的資料來源清單

Expression Blend [專案] 面板中的資料來源清單。

與 Expression Blend 使用中文件相關聯的外部資料來源,會列在 [專案] 面板的 [資料] 之下。您可以使用按鈕 1 新增及移除資料來源,也可以將資料項目 2 拖曳至畫板,以建立將資料繫結至項目的控制項。如果未設定資料來源,則 [專案] 面板中的 [資料] 只會顯示用來建立資料來源的按鈕。

資料繫結

資料繫結是將資料來源中的項目連接至使用者介面元件 (控制項) 的程序。這表示只要資料變更,介面元件就會選擇性地反映這些變更,反之亦然。最簡單的資料繫結範例是,內部繫結至矩形寬度的捲軸控制項。矩形會隨著捲軸的移動而放大及縮小。

Microsoft Windows® Presentation Foundation 及 Expression Blend 提供簡單且一致的方式,讓應用程式中的元素繫結至不同資料來源,以及設定可顯示並修改資料的元素。基本上,「來源」與「目標」之間建構了繫結關係。來源通常是某個資料來源或另一個控制項,而目標則是某個控制項。在捲軸的範例中,來源是捲軸控制項的 Value 屬性,而目標則是矩形的 Width 屬性。

您可以使用與 [屬性] 面板中的屬性相關聯的 [進階屬性選項] 進階屬性選項 按鈕,或將項目從 [專案] 面板的 [資料] 下拖曳至畫板,建立繫結關係。(如需指示,請參閱將資料繫結至屬性或元素)。這兩種選項都會開啟 [建立資料繫結] 對話方塊,以建立控制項 (目標) 與資料欄位或其他控制項 (來源) 之間的繫結連結。

展開 [進階選項] 區段的 [建立資料繫結] 對話方塊

展開 [進階選項] 區段的 [建立資料繫結] 對話方塊。

[建立資料繫結] 對話方塊會呈現三個用來選取資料來源的基本選項以及進階選項:

資料流程

將資料流程定義成資料在來源與目標之間流動的方向。如果需要使用捲軸縮放矩形,只需要建立捲軸 (來源) 到矩形 (目標) 的單向繫結關係。Windows Presentation Foundation 提供資料流程的下列繫結設定:

若要查看進行中的資料流程,請考慮使用下列含有 Slider 控制項 (來源) 及 TextBox 控制項 (目標) 的範例使用者介面:

文字方塊及滑桿

透過繫結類型來說明資料流程。

在上述範例說明中,繫結關係是使用下列程序設定於文字方塊 (目標) 上:

  1. 在 [屬性] 面板中,按一下與 [通用屬性] 下 [TextBox] 之 [Text] 屬性相關聯的 [進階屬性選項] 進階屬性選項 按鈕,並選取 [資料繫結]。
  2. 在出現的 [建立資料繫結] 對話方塊中,選取 [元素屬性] 索引標籤,並選取 [Slider] 的 [Value] 屬性。

下表根據繫結類型,描述此範例的繫結行為:

繫結類型 結果

OneWay

移動捲軸 (來源) 會更新文字方塊 (目標)。不過,在文字方塊中輸入數字並不會移動捲軸。

TwoWay

移動捲軸 (來源) 會更新文字方塊 (目標)。此外,如果在文字方塊外部按一下滑鼠,然後在文字方塊中輸入數字,捲軸位置就會變更。

OneWayToSource

在文字方塊 (目標) 中輸入數字,然後按一下文字方塊外部,則會移動捲軸 (來源)。不過,移動捲軸並不會更新文字方塊。

OneTime

啟動應用程式時,捲軸 (來源) 的初始值會更新文字方塊 (目標)。後續的捲軸變更則不會更新文字方塊,而且在文字方塊中輸入數字完全不會更新捲軸。

繫結至外部資料來源的方法

工作流程 1:從來源繫結至目標

建立外部資料來源之後,可以將該資料來源繫結至使用者介面控制項。有兩種方式可以達到此目標:

不論選擇繫結現有控制項或建立新的控制項,都會開啟 [建立資料繫結] 對話方塊,讓您選取想要繫結至資料來源的欄位。例如,如果您將類型為字串的資料項目拖放至 TextBox 來建立繫結關係,則可能會想要繫結至此節點的 Text 欄位 (預設為選取)。您也可以按一下對話方塊中的擴充器 [展開類別] 按鈕,以指定其他繫結設定。請按一下 [確定] 關閉對話方塊,並建立繫結關係。如果在設計階段就有資料可用,則所選欄位的值應該會更新控制項。如需指示,請參閱將資料繫結至屬性或元素

如果資料項目是項目的集合 (陣列),或資料項目未完全符合目標類型,則會開啟 [建立資料範本] 對話方塊,讓您可以選擇特定控制項以顯示資料。如需詳細資訊,請參閱本主題後面的「資料範本」。

工作流程 2:從目標繫結至來源

雖然前一個工作流程一律是從資料來源開始,而結束於目標控制項,但是如果您已建立控制項,而且知道想要繫結至資料來源或另一個控制項屬性的屬性,則可以反轉此程序。此工作流程在元素到元素的繫結關係中特別有用。

在 [屬性] 面板的每個屬性值編輯器旁邊,可以找到讓您設定 [進階屬性選項] (包括資料繫結) 的 [進階屬性選項] 進階屬性選項 按鈕。按一下進階選項功能表上的 [資料繫結],會開啟本主題前面之「工作流程 1」中所述的相同 [建立資料繫結] 對話方塊。

資料範本

您經常需要顯示資料來源中之項目的清單。含有項目清單的資料項目,是以項目名稱中的「(陣列)」識別。如果將清單節點從 [專案] 面板的 [資料] 拖放至文件,並從選用控制項清單中選取要繫結的 [ListBox],則會出現另一個標題為 [建立資料範本] 並可讓您設計「資料範本」的對話方塊。將文字控制項繫結至類型為字串的資料項目時,可能也會開啟此對話方塊。

資料範本定義了您要用來呈現資料的結構及格式。例如,如果將 ListBox 控制項的 ItemsSource 欄位繫結至資料來源中的連絡人節點清單,您可以使用資料範本指定要從此清單中併入的欄位,以及應該指派給每個欄位的控制項。您可以選擇以 TextBlock 呈現名稱、以 Image 呈現圖片,而以 CheckBox 呈現布林值欄位 (如 IsCurrentMember)。建立資料範本,可以確保連接節點中的資料會轉譯為所要的視覺格式。此範本可以更細地控制如何在控制項中顯示任意資料的方式。

附註 只有 ContentItemsSource 屬性才支援資料範本。

在 [建立資料範本] 對話方塊中,您可以選擇:

您可以使用 [預覽] 窗格,決定您是否喜歡範本的外觀。

[建立資料範本] 對話方塊

[建立資料範本] 對話方塊隨即開啟。

資料範本會以資源形式儲存。如果要修改現有資料範本,可以按一下 [資源] 面板之資料範本旁的 [編輯資源] 按鈕。Expression Blend 會進入範本編輯模式,並在 [物件與時間軸] 之下顯示範本結構。在此編輯模式中,您可以新增範本的控制項,並使用 [屬性] 面板中的資料繫結,將那些控制項的屬性繫結至資料來源的新項目中。