練習：使用動態資源來更新元素

5 分鐘

在本練習中，您會使用 DynamicResource 標記延伸模組在資源值變更時更新 TipCalculator UI。

此練習是前一個練習的延續。您可以使用現有的解決方案做為這些步驟的起點，或開啟您在上一次練習中複製存放庫中 exercise2/TipCalculator 資料夾內的 TipCalculator 專案。

尋找重複的程式碼

應用程式會實作 StandardTipPage 頁面的簡單「淺色」和「深色」色彩配置。在此，您會檢查用來變更色彩的程式碼。

開啟 StandardTipPage.xaml.cs 檔案。

找出更新 UI 色彩的兩個事件處理常式。

private Color colorNavy = Colors.Navy;
private Color colorSilver = Colors.Silver;

...

void OnLight(object sender, EventArgs e)
{
    LayoutRoot.BackgroundColor = colorSilver;

    tipLabel.TextColor = colorNavy;
    billLabel.TextColor = colorNavy;
    totalLabel.TextColor = colorNavy;
    tipOutput.TextColor = colorNavy;
    totalOutput.TextColor = colorNavy;
}

void OnDark(object sender, EventArgs e)
{
    LayoutRoot.BackgroundColor = colorNavy;

    tipLabel.TextColor = colorSilver;
    billLabel.TextColor = colorSilver;
    totalLabel.TextColor = colorSilver;
    tipOutput.TextColor = colorSilver;
    totalOutput.TextColor = colorSilver;
}

...

請注意程式碼個別為每個控制項更新色彩的做法，這會導致重複的程式碼產生。

從程式碼更新資源

您會從撰寫會更新幾個儲存在頁面資源字典中之資源的程式碼開始著手。

從 OnLight 方法移除所有程式碼。
將下方顯示的程式碼新增至 OnLight 方法。此程式碼會將頁面資源字典中的 fgColor 資源設為 colorNavy 變數中的值，並將 bgColor 資源設為 colorSilver 變數中的值。 colorNavy 和 colorSilver 變數使用靜態 Color.FromRgb 方法，可讓您輕鬆地將十六進位值轉換成色彩。
```
void OnLight(object sender, EventArgs e)
{
    Resources["fgColor"] = colorNavy;
    Resources["bgColor"] = colorSilver;
}
```
對 OnDark 方法重複前兩個步驟，但反轉色彩；將 fgColor 設定為 colorSilver，以及 bgColor 設定為 colorNavy。
```
void OnDark(object sender, EventArgs e)
{
    Resources["fgColor"] = colorSilver;
    Resources["bgColor"] = colorNavy;
}
```
執行應用程式。按一下 [深色] 和 [淺色] 按鈕。 UI 並未變更。雖然程式碼變更字典中的資源值，但新值並未傳播到 UI。問題在於您使用 StaticResource 標記擴充功能來設定 XAML 程式碼中的值。

以動態方式更新 UI

若要修正此問題，請修改您的 XAML，使已更新的資源值載入到 UI 中。

停止應用程式，並開啟 StandardTipPage.xaml 檔案。

找出您從資源值指派色彩的所有地方。以 DynamicResource 取代使用 StaticResource 標記延伸模組，如下列範例所示。

<Grid x:Name ="LayoutRoot" BackgroundColor="{DynamicResource bgColor}" Padding="10">
...
<Label x:Name="billLabel"  Text="Bill"  TextColor="{DynamicResource fgColor}" ... />
<Label x:Name="tipLabel"   Text="Tip"   TextColor="{DynamicResource fgColor}" ... />
<Label x:Name="totalLabel" Text="Total" TextColor="{DynamicResource fgColor}" ... />
...

注意

請勿將 FontSize 屬性從 StaticResource 變更為 DynamicResource。

執行應用程式。按一下 [深色] 和 [淺色] 按鈕。 UI 現在會正確更新。

練習：使用動態資源來更新元素

尋找重複的程式碼

從程式碼更新資源

以動態方式更新 UI

意見反應