Esercizio - Usare risorse dinamiche per aggiornare gli elementi

  • 5 minuti

In questo esercizio si userà l'estensione di markup DynamicResource per aggiornare l'interfaccia utente di TipCalculator quando cambiano i valori delle risorse.

Questo esercizio è una continuazione dell'esercizio precedente. Usare la soluzione esistente come punto di partenza per queste procedure oppure aprire il progetto TipCalculator nella cartella exercise2/TipCalculator nel repository clonato nell'esercizio precedente.

Trovare il codice ripetuto

L'app implementa le semplici combinazioni colori "chiaro" e "scuro" per la pagina StandardTipPage. Ora si esaminerà il codice usato per modificare i colori.

  1. Aprire il file StandardTipPage.xaml.cs.

  2. Individuare i due gestori di eventi che aggiornano i colori dell'interfaccia utente.

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

...

    Come si può notare, il codice aggiorna i colori di ogni controllo singolarmente, generando così codice ripetuto.

Aggiornare le risorse dal codice

Si inizierà scrivendo il codice che aggiorna alcune risorse archiviate nel dizionario risorse della pagina.

  1. Rimuovere tutto il codice dal metodo OnLight.

  2. Aggiungere il codice seguente al metodo OnLight. Questo codice imposta la risorsa fgColor nel dizionario risorse della pagina sul valore della variabile colorNavy e imposta la risorsa bgColor sul valore della variabile colorSilver. Le variabili colorNavy e colorSilver usano il metodo statico Color.FromRgb, che consente di convertire facilmente un valore esadecimale in un colore.

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

  3. Ripetere i due passaggi precedenti per il metodo OnDark ma invertendo i colori, ossia impostando fgColor su colorSilver e bgColor su colorNavy.

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

  4. Eseguire l'app. Selezionare i pulsanti Dark (Scuro) e Light (Chiaro). L'interfaccia utente rimane invariata. Anche se il codice cambia i valori delle risorse nel dizionario, il nuovo valore non viene propagato all'interfaccia utente. Il problema è dovuto all'uso dell'estensione di markup StaticResource per impostare i valori nel codice XAML.

Aggiornare l'interfaccia utente in modo dinamico

Per correggere il problema, modificare il codice Extensible Application Markup Language (XAML) in modo da caricare nell'interfaccia utente i valori delle risorse aggiornati.

  1. Arrestare l'app e aprire il file StandardTipPage.xaml.

  2. Individuare tutte le posizioni a cui si assegnano i colori in base ai valori delle risorse. Sostituire l'uso dell'estensione di markup StaticResource con DynamicResource, come illustrato in questo esempio.

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

    Nota

    Non modificare le proprietà FontSize da StaticResource a DynamicResource.

  3. Eseguire l'app. Selezionare i pulsanti Dark (Scuro) e Light (Chiaro). L'interfaccia utente ora viene aggiornata correttamente.