Oefening: Dynamische resources gebruiken om elementen bij te werken

  • 5 minuten

In deze oefening gebruikt u de mark-upextensie DynamicResource om de TipCalculator-gebruikersinterface bij te werken wanneer resourcewaarden worden gewijzigd.

Deze oefening is een voortzetting van de vorige oefening. Gebruik uw bestaande oplossing als uitgangspunt voor deze stappen of open het Project TipCalculator in de map exercise2/TipCalculator in de opslagplaats die u in de vorige oefening hebt gekloond.

Herhaalde code zoeken

De app implementeert eenvoudige kleurenschema's 'licht' en 'donker' voor de pagina StandardTipPage . Hier bekijkt u de code die wordt gebruikt om de kleuren te wijzigen.

  1. Open het StandardTipPage.xaml.cs bestand.

  2. Zoek de twee gebeurtenis-handlers die de kleuren van de gebruikersinterface bijwerken.

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

...

    U ziet hoe de code de kleuren voor elk besturingselement afzonderlijk bijwerken, wat resulteert in herhaalde code.

Resources bijwerken vanuit code

U begint met het schrijven van code waarmee een aantal resources worden bijgewerkt die zijn opgeslagen in de resourcewoordenlijst van een pagina.

  1. Verwijder alle code uit de OnLight-methode .

  2. Voeg de volgende code toe aan de OnLight-methode . Met deze code stelt u de fgColor-resource in de resourcewoordenlijst van de pagina in op de waarde in de colorNavy-variabele en stelt u de bgColor-resource in op de waarde in de variabele colorSilver . De variabelen colorNavy en colorSilver maken gebruik van de statische methode Color.FromRgb , waardoor u eenvoudig een hexadecimale waarde kunt converteren naar een kleur.

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

  3. Herhaal de vorige twee stappen voor de OnDark-methode , maar draai de kleuren om; stel fgColor in op colorSilver en bgColor op colorNavy.

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

  4. De app uitvoeren. Selecteer de knoppen Donker en Licht . De gebruikersinterface verandert niet. Hoewel de code de resourcewaarden in de woordenlijst wijzigt, wordt de nieuwe waarde niet doorgegeven aan de gebruikersinterface. Het probleem is dat u de staticResource-markeringsextensie gebruikt om de waarden in de XAML-code in te stellen.

De gebruikersinterface dynamisch bijwerken

Als u het probleem wilt oplossen, wijzigt u de Extensible Application Markup Language (XAML) zodat bijgewerkte resourcewaarden in uw gebruikersinterface worden geladen.

  1. Stop de app en open het bestand StandardTipPage.xaml .

  2. Zoek alle plaatsen waar u kleuren van resourcewaarden toewijst. Vervang het gebruik van de staticResource-markeringsextensie door DynamicResource, zoals wordt weergegeven in dit voorbeeld.

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

    Notitie

    Wijzig de eigenschappen FontSize niet van StaticResource in DynamicResource.

  3. De app uitvoeren. Selecteer de knoppen Donker en Licht . De gebruikersinterface wordt nu correct bijgewerkt.