練習：使用頁面層級的資源

本課程模組中的所有練習都與預先建置的 TipCalculator 應用程式相關。 在這整個課程模組中，您會修改並改善此應用程式。 在本練習中，您將使用頁面層級資源來刪除 Extensible Application Markup Language (XAML) 程式碼中的重複值。

此模組使用 .NET 10.0 SDK。 請在你偏好的命令終端機執行以下指令，確保你已安裝 .NET 10.0：

dotnet --list-sdks

類似下列範例的輸出隨即出現：

9.0.100 [C:\Program Files\dotnet\sdk]
10.0.100 [C:\Program Files\dotnet\sdk]

確認已列出開頭為 10 的版本。 如果沒有列出或找不到指令，就 安裝最新的 .NET 10.0 SDK。

開啟入門解決方案

1. 從 GitHub 複製或下載練習存放庫。

   注意

   最好將練習內容複製或下載至簡短的資料夾路徑，例如 C：\dev，以避免組建產生的檔案超過最大路徑長度。

2. 使用 Visual Studio 從 [exercise1/TipCalculator] 資料夾開啟入門解決方案或直接在 Visual Studio Code 中開啟此資料夾。

3. 確認它能在您的環境中建置及執行。 (任何平台皆可)。

4. 請花幾分鐘的時間檢查並執行應用程式，了解它的特性。

   應用程式有兩頁。 StandardTipPage 頁面是簡單的小費計算機。 您只要輸入數值，頁面就會計算小費（15%）和應付總額。 下圖顯示在 Android 裝置上執行的應用程式：

   

   [淺色]及 [深色] 按鈕可變更頁面色彩主題。 預設色彩主題為淺色。 如果您選擇 [深色]，背景和文字的色彩就會反轉。

   按下 [使用自訂小算盤] 按鈕會將顯示器切換至 [自訂小費頁面]頁面。 此頁面能讓您使用滑桿來變更小費百分比。 您也可以選取 [15%] 和 [20%] 按鈕來根據預先定義的費率來計算小費。

   

尋找重複的 XAML

1. 開啟 StandardTipPage.xaml 檔案。

2. 尋找設定 LayoutRoot 方格背景色彩的 XAML 標記。 請注意，它使用硬編碼值。

   <Grid x:Name ="LayoutRoot" BackgroundColor="Silver" Padding="10">
   

3. 尋找 XAML 標記，將「左欄」中標籤文字的色彩設為 [海軍藍]，並將字型大小設為 22。 請注意，這些相同的值用於三個標籤上。

   <!-- Left column = static labels -->
   <Label x:Name="billLabel"  Text="Bill"  TextColor="Navy" FontSize="22" ... />
   <Label x:Name="tipLabel"   Text="Tip"   TextColor="Navy" FontSize="22" ... />
   <Label x:Name="totalLabel" Text="Total" TextColor="Navy" FontSize="22" ... />
   

4. 尋找 XAML 程式碼，將「右欄」中的標籤色彩設為 [海軍藍]，並將字型大小設為 22。 請注意，這些相同的值用於兩個標籤上。

   請注意，某些屬性設定似乎形成邏輯群組。 例如，Navy 和 22 的組合用於多個標籤。

   <!-- Right column = user input and calculated-value output -->
   <Entry ... />
   <Label x:Name="tipOutput"   Text="0.00" TextColor="Navy" FontSize="22"   ... />
   <Label x:Name="totalOutput" Text="0.00" TextColor="Navy" FontSize="22"   ... />
   

   請考慮關於 [TextColor] 和 [FontSize] 值的修改工作。 您會需要在五個位置變更它。

定義資源

現在讓我們在 XAML 中建立資源，以便開始消除您在應用程式中找到的一些重複程式碼。

1. 開啟 StandardTipPage.xaml 檔案。

2. 在 ContentPage.Resources 區段中定義 Color 資源。 為資源提供 bgColor 的 x：Key 資源識別碼和 #C0C0C0 的值（您也可以使用色彩Silver的名稱）。

3. 定義第二個 [色彩] 資源。 為它提供 fgColor 的 x：Key 資源識別碼和值 #0000AD（您也可以使用色彩Navy的名稱）。

4. 使用fontSize的標識碼定義 x：Double 資源。 將此資源的值設定為 22。

   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                ...>
   
       <ContentPage.Resources>
           <ResourceDictionary>
               <Color x:Key="bgColor">#C0C0C0</Color>
               <Color x:Key="fgColor">#0000AD</Color>
               <x:Double x:Key="fontSize">22</x:Double>
           </ResourceDictionary>
       </ContentPage.Resources>
   
       <Grid x:Name ="LayoutRoot" ...>
           ...
   

使用靜態資源

現在，讓我們套用您建立的資源。

1. 使用 StaticResource 標記延伸模組，將 bgColor 資源套用至 LayoutRootGrid 控件的 Background 屬性。

   ...
   <Grid x:Name ="LayoutRoot" BackgroundColor="{StaticResource bgColor}" Padding="10">
   

2. 將 fgColor 資源套用至目前將 TextColor 設定為 Navy 的所有 Label 控件的 TextColor 屬性。 此外，請用 [fontSize] 靜態資源取代應編碼字型大小。

   ...
   <!-- Left column = static labels -->
   <Label x:Name="billLabel"  Text="Bill"  TextColor="{StaticResource fgColor}" FontSize="{StaticResource fontSize}" ... />
   <Label x:Name="tipLabel"   Text="Tip"   TextColor="{StaticResource fgColor}" FontSize="{StaticResource fontSize}" ... />
   <Label x:Name="totalLabel" Text="Total" TextColor="{StaticResource fgColor}" FontSize="{StaticResource fontSize}" ... />
   ...
   

3. 執行應用程式。 確認 StandardTipPage 在啟動時仍會在淺色背景上顯示深色文字，就像之前所做的一樣。