Übung: Verwenden von dynamischen Ressourcen zum Aktualisieren von Elementen

  • 5 Minuten

In dieser Übung verwenden Sie die DynamicResource-Markuperweiterung, um die TipCalculator-Benutzeroberfläche zu aktualisieren, wenn sich Ressourcenwerte ändern.

Diese Übung ist eine Fortsetzung der vorherigen Übung. Verwenden Sie entweder Ihre vorhandene Lösung als Ausgangspunkt für diese Schritte, oder öffnen Sie das TipCalculator-Projekt im Ordner exercise2/TipCalculator im Repository, das Sie in der vorherigen Übung geklont haben.

Suchen von wiederholtem Code

Die App implementiert einfache helle und dunkle Farbschemas für die StandardTipPage-Seite. Hier untersuchen Sie den Code, der zum Ändern von Farben verwendet wird.

  1. Öffnen Sie die Datei StandardTipPage.xaml.cs.

  2. Suchen Sie die beiden Ereignishandler, die die Farben der Benutzeroberfläche aktualisieren.

    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;
}

...

    Beachten Sie, dass der Code die Farben für jedes Steuerelement einzeln aktualisiert, was zu wiederholtem Code führt.

Aktualisieren von Ressourcen aus dem Code

Zu Beginn schreiben Sie Code, der einige Ressourcen aktualisiert, die im Ressourcenverzeichnis einer Seite gespeichert sind.

  1. Entfernen Sie den gesamten Code aus der OnLight-Methode.

  2. Fügen Sie der OnLight-Methode den folgenden Code hinzu. Mit diesem Code werden die fgColor-Ressource im Ressourcenverzeichnis der Seite auf den Wert in der colorNavy-Variablen und die bgColor-Ressource auf den Wert in der colorSilver-Variablen festgelegt. Die Variablen colorNavy und colorSilver verwenden die statische Color.FromRgb-Methode, die die Konvertierung eines Hexadezimalwerts in eine Farbe erleichtert.

    void OnLight(object sender, EventArgs e)
{
    Resources["fgColor"] = colorNavy;
    Resources["bgColor"] = colorSilver;
}

  3. Wiederholen Sie die beiden vorherigen Schritte für die OnDark-Methode aber mit umgekehrten Farben, d. h. legen Sie fgColor auf colorSilver und bgColor auf colorNavy fest.

    void OnDark(object sender, EventArgs e)
{
    Resources["fgColor"] = colorSilver;
    Resources["bgColor"] = colorNavy;
}

  4. Führen Sie die App aus. Klicken Sie auf die Schaltflächen Dark und Light. Die Benutzeroberfläche ändert sich nicht. Der Code ändert zwar die Ressourcenwerte im Verzeichnis, aber der neue Wert wird nicht an die Benutzeroberfläche weitergegeben. Das Problem liegt darin, dass Sie die StaticResource-Markuperweiterung verwenden, um die Werte im XAML-Code festzulegen.

Dynamisches Aktualisieren der Benutzeroberfläche

Um das Problem zu beheben, ändern Sie die XAML so, dass aktualisierte Ressourcenwerte in die Benutzeroberfläche geladen werden.

  1. Beenden Sie die App, und öffnen Sie die Datei StandardTipPage.xaml.

  2. Suchen Sie alle Stellen, an denen Sie Farben aus Ressourcenwerten zuweisen. Ersetzen Sie die StaticResource-Markuperweiterung durch DynamicResource, wie in diesem Beispiel gezeigt.

    <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}" ... />
...

    Hinweis

    Ändern Sie nicht die FontSize-Eigenschaften von StaticResource in DynamicResource.

  3. Führen Sie die App aus. Klicken Sie auf die Schaltflächen Dark und Light. Die Benutzeroberfläche wird jetzt ordnungsgemäß aktualisiert.