Ćwiczenie: aktualizowanie elementów przy użyciu zasobów dynamicznych

  • 5 min

W tym ćwiczeniu użyjesz rozszerzenia dynamicResource mark-up, aby zaktualizować interfejs użytkownika TipCalculator po zmianie wartości zasobów.

To ćwiczenie jest kontynuacją poprzedniego ćwiczenia. Użyj istniejącego rozwiązania jako punktu początkowego dla tych kroków lub otwórz projekt TipCalculator w folderze exercise2/TipCalculator w repozytorium sklonowanym w poprzednim ćwiczeniu.

Znajdowanie powtarzającego się kodu

Aplikacja implementuje proste schematy kolorów "jasny" i "ciemny" dla strony StandardTipPage . W tym miejscu przeanalizujesz kod użyty do zmiany kolorów.

  1. Otwórz plik StandardTipPage.xaml.cs.

  2. Znajdź dwa programy obsługi zdarzeń, które aktualizują kolory interfejsu użytkownika.

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

...

    Zwróć uwagę, że kod aktualizuje kolory poszczególnych kontrolek indywidualnie, co powoduje powtórzenie kodu.

Aktualizowanie zasobów z kodu

Zacznij od napisania kodu, który aktualizuje kilka zasobów przechowywanych w słowniku zasobów strony.

  1. Usuń cały kod z metody OnLight .

  2. Dodaj następujący kod do metody OnLight . Ten kod ustawia zasób fgColor w słowniku zasobów strony na wartość zmiennej colorNavy i ustawia zasób bgColor na wartość zmiennej colorSilver. Zmienne colorNavy i colorSilver używają metody static Color.FromRgb , co ułatwia konwertowanie wartości szesnastkowej na kolor.

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

  3. Powtórz dwa poprzednie kroki dla metody OnDark , ale odwróć kolory; ustaw wartość fgColor na colorSilver i bgColor na colorNavy.

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

  4. Uruchom aplikację. Wybierz przyciski Ciemny i Jasny. Interfejs użytkownika nie zmienia się. Mimo że kod zmienia wartości zasobów w słowniku, nowa wartość nie jest propagowana do interfejsu użytkownika. Problem polega na tym, że używasz rozszerzenia znaczników StaticResource w celu ustawienia wartości w kodzie XAML.

Dynamiczne aktualizowanie interfejsu użytkownika

Aby rozwiązać ten problem, zmodyfikuj język XAML (Extensible Application Markup Language), aby zaktualizowane wartości zasobów były ładowane do interfejsu użytkownika.

  1. Zatrzymaj aplikację i otwórz plik StandardTipPage.xaml .

  2. Znajdź wszystkie miejsca, w których przypisujesz kolory z wartości zasobów. Zastąp użycie rozszerzenia znaczników StaticResource parametrem DynamicResource, jak pokazano w tym przykładzie.

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

    Uwaga

    Nie zmieniaj właściwości FontSize z StaticResource na DynamicResource.

  3. Uruchom aplikację. Wybierz przyciski Ciemny i Jasny. Interfejs użytkownika jest teraz poprawnie aktualizowany.