UI 與資料的簡介

已完成

技術標誌。

假設您服務於訂製服裝設計公司,而且您想要建立一個應用程式,可讓您的客戶選擇他們最喜歡的材料或顏色。 使用者的名稱、可供選擇的顏色清單,以及他們所選擇的最喜歡的顏色全都是資料。 這是使用者輸入、選取,並透過許多顯示在 UI 上的控制項檢閱的資料:文字方塊、下拉式清單、清單、按鈕等等。 這全部都是由應用程式邏輯所控制。

大部分的應用程式有三個主要元件:

  • 使用者介面 (UI):用來向使用者呈現資訊的標籤、按鈕、文字方塊、滑桿、圖表,以及所有其他控制項。 這也包括讓使用者透過輸入資料、選取選項,或給予命令來與應用程式互動的控制項。
  • 資料:應用程式正在處理的資訊。 若是基本計算機應用程式,它可以是目前顯示的數字、先前運算的結果,或是儲存在記憶體中的值。 若是遊戲,資料可以是玩家和敵人的狀態與位置、環境的版面配置和行為,或武器和其他物件的屬性。 若是企業應用程式,資料可以是員工資料庫、訂單記錄等等。 若是我們範例中的服裝公司應用程式,資料會儲存在代表目前時間的實際物件中,或 UI 顯示的色彩中。
  • 邏輯:與外部資源 (例如儲存體、資料庫、線上服務或其他應用程式) 進行通訊的建構會針對資料執行作業,並更新 UI 以反映資料變更。 邏輯也會從 UI 中接受使用者輸入,並且會根據輸入的資訊或指定的命令採取行動。 在我們的範例中,邏輯會更新時鐘、建置可用色彩的清單,以及儲存和擷取使用者的色彩喜好設定。

應用程式的邏輯與 UI 之間的連結非常重要。 例如Windows 應用程式 SDK、通用 Windows 平臺 (UWP) 和Windows Presentation Foundation (WPF) 等架構,已納入一種非常有效率且彈性的方法,可將資料傳輸至 UI 和從稱為資料系結的 UI。

在此課程模組中,您將了解如何使用資料繫結來:

  • 顯示及自動更新簡單的文字資料 (在應用程式中顯示時鐘)。
  • 在 UI 收到輸入時自動更新 C# 屬性 (輸入使用者的名稱)。
  • 自動反映 UI 上上的資料變更 (問候使用者、顯示時鐘)。
  • 顯示並編輯更複雜的資料結構清單 (列出可用及最愛的色彩)。

我們也將涵蓋一些能妥善區別 UI 和邏輯的最佳做法。 區別 UI 和邏輯可協助您分別測試每個元件,以更輕鬆地找出錯誤。 它也可以大幅減少您需要撰寫的未定案程式碼數量。 未定案程式碼越少,表示錯誤越少、Bug 越少,因此會有更多的時間專注在您想要利用應用程式完成的重要事項。

必要條件

為充分利用此課程模組,您應該先熟悉:

  • 在 Visual Studio 中建立新的 UWP 專案。
  • C# 語言。
  • XAML 的基本概念。
  • XAML 配置的基本概念,包括 StackPanelGrid