Ejercicio: Uso de recursos dinámicos para actualizar elementos

  • 5 minutos

En este ejercicio, usará la extensión de marcado DynamicResource para actualizar la interfaz de usuario de TipCalculator cuando cambien los valores de los recursos.

Este ejercicio es una continuación del anterior. Use la solución existente como punto de partida para estos pasos o abra el proyecto TipCalculator en la carpeta exercise2/TipCalculator en el repositorio que ha clonado en el ejercicio anterior.

Buscar código repetido

La aplicación implementa combinaciones de colores "claros" y "oscuros" sencillas para la página StandardTipPage. En este caso, examinará el código que se usa para cambiar los colores.

  1. Abra el archivo StandardTipPage.xaml.cs.

  2. Busque los dos controladores de eventos que actualizan los colores de la interfaz de usuario.

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

...

    Observe cómo el código actualiza los colores de cada control de forma individual, lo que da lugar a código repetido.

Actualizar recursos desde el código

Comience por escribir código que actualice algunos recursos almacenados en el diccionario de recursos de la página.

  1. Quite todo el código del método OnLight.

  2. Agregue el código que se muestra debajo al método OnLight. Este código establece el recurso fgColor del diccionario de recursos de la página en el valor de la variable colorNavy y el recurso bgColor en el valor de la variable colorSilver. Las variables colorNavy y colorSilver usan el método estático Color.FromRgb, que facilita la conversión de un valor hexadecimal en un color.

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

  3. Repita los dos pasos anteriores para el método OnDark, pero invierta los colores: establezca fgColor en colorSilver y bgColor en colorNavy.

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

  4. Ejecutar la aplicación. Seleccione los botones Dark y Light. La interfaz de usuario no cambia. A pesar de que el código cambia los valores de los recursos del diccionario, el nuevo valor no se propaga a la interfaz de usuario. El problema es que está usando la extensión de marcado StaticResource para establecer los valores en el código XAML.

Actualización dinámica de la interfaz de usuario

Para corregir el problema, modifique el XAML para que los valores de recursos actualizados se carguen en la interfaz de usuario.

  1. Detenga la aplicación y abra el archivo StandardTipPage.xaml.

  2. Busque todos los lugares en los que se asignen colores a partir de valores de recursos. Reemplace el uso de la extensión de marcado StaticResource por DynamicResource, tal como se muestra en este ejemplo.

    <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:

    No cambie las propiedades FontSize de StaticResource a DynamicResource.

  3. Ejecutar la aplicación. Seleccione los botones Dark y Light. La interfaz de usuario ahora se actualiza correctamente.