UI 與資料的簡介
假設您服務於訂製服裝設計公司，而且您想要建立一個應用程式，可協助您的客戶選擇他們最喜歡的材料或顏色。 使用者的名稱、可供選擇的顏色清單，以及他們所選擇的最喜歡的顏色全都是資料。 這是使用者輸入、選取，並透過許多顯示在 UI 上的控制項檢閱的資料：文字方塊、下拉式清單、清單、按鈕等等。 這全部都是由應用程式邏輯所控制。
大部分的應用程式有三個主要元件：
- 使用者介面 (UI)：用來向使用者呈現資訊的標籤、按鈕、文字方塊、滑桿、圖表，以及所有其他控制項。 這也包括讓使用者透過輸入資料、選取選項，或給予命令來與應用程式互動的控制項。
- 資料：應用程式正在處理的資訊。 若是基本計算機應用程式，它可以是目前顯示的數字、先前運算的結果，或是儲存在記憶體中的值。 若是遊戲，資料可以包括玩家和敵人的狀態與位置、環境的版面配置和行為，或武器和其他物件的屬性。 若是企業應用程式，資料可以是員工資料庫、訂單記錄等等。 若是我們範例中的服裝公司應用程式，資料會儲存在代表目前時間的實際物件中，或 UI 顯示的色彩中。
- 邏輯：與外部資源 (例如儲存體、資料庫、線上服務或其他應用程式) 進行通訊的建構會針對資料執行作業，並更新 UI 以反映資料變更。 邏輯也會從 UI 中接受使用者輸入，並且會根據輸入的資訊或指定的命令採取行動。 在我們的範例中，邏輯會更新時鐘、建置可用色彩的清單，以及儲存和擷取使用者的色彩喜好設定。
應用程式的邏輯與 UI 之間的連結非常重要。 Windows App SDK、通用 Windows 平台 (UWP) 和 Windows Presentation Foundation (WPF) 等架構已採用一種非常有效而且極具彈性的方法，在 UI 中來回傳輸資料，其稱為資料繫結。
在此課程模組中，您將了解如何使用資料繫結來：
- 顯示及自動更新簡單的文字資料 (在應用程式中顯示時鐘)。
- 在 UI 收到輸入時自動更新 C# 屬性 (輸入使用者的名稱)。
- 自動反映 UI 上上的資料變更 (問候使用者、顯示時鐘)。
- 顯示並編輯更複雜的資料結構清單 (列出可用及最愛的色彩)。
我們也將涵蓋一些最佳作法，妥善區別 UI 和邏輯。 區別 UI 和邏輯可協助您分別測試每個元件，以更輕鬆地找出錯誤。 它也可以大幅減少您需要撰寫的未定案程式碼數量。 未定案程式碼越少，表示錯誤越少、Bug 越少，因此會有更多的時間專注在您想要利用應用程式完成的重要事項。
必要條件
為充分利用此課程模組，您應該先熟悉：
- 在 Visual Studio 中建立新的 UWP 或 WPF 專案。
- C# 語言。
- XAML 標記的基本概念。
- 基本 XAML 版面配置控制項，包括
StackPanel和Grid。