Ejercicio: Adición de comportamiento a la página XAML

10 minutos

Ha modificado anteriormente la aplicación Notas para migrar el diseño de la interfaz de usuario de código C# a XAML. Ya está listo para agregar las siguientes características a la página:

Admite la personalización del color de fuente y el color de fondo de la etiqueta, los botones y el control de edición. De esta forma, es fácil ajustar la aplicación para que sea más accesible para los usuarios que requieren una interfaz de usuario de contraste alto.
Ajuste la altura del control de edición en Android e iOS. Cuando se ejecuta en Windows, este control tiene un ancho suficiente para permitir que el usuario escriba una cantidad de texto razonable antes de desplazarse. En un teléfono Android o iPhone, el ancho más estrecho hace que el desplazamiento se produzca más rápidamente, por lo que resulta beneficioso proporcionar más espacio vertical.

Uso de un recurso estático en XAML

Creará una clase estática para conservar los valores del color de fuente y el color de fondo de la aplicación. A continuación, usará la extensión de marcado x:Static para leer estos valores de la clase y aplicarlos al marcado XAML para los controles de la página.

En Visual Studio, vuelva a la aplicación Notes que editó en el ejercicio anterior.

Nota:

Hay disponible una copia en funcionamiento de la aplicación en la carpeta exercise2 del repositorio de ejercicios que ha clonado al principio del ejercicio anterior.
En la ventana Explorador de soluciones, haga clic con el botón derecho en el proyecto Notes , seleccione Agregar y, a continuación, seleccione Clase.
En el cuadro de diálogo Agregar nuevo elemento , asegúrese de que la plantilla Clase está seleccionada. Asigne un nombre al nuevo archivo de clase SharedResources.cs y, a continuación, seleccione Agregar:
En el archivo SharedResources.cs , reemplace las using directivas por el código siguiente y marque la clase SharedResources como static:
```
namespace Notes;

static class SharedResources
{

}
```
Agregue el static readonly campo FontColor a la clase SharedResources . Actualmente, este campo proporciona un valor que corresponde a azul, pero se puede modificar con cualquier combinación válida de valores RGB:
```
static class SharedResources
{
    public static readonly Color FontColor = Color.FromRgb(0, 0, 0xFF);
}
```

Agregue un segundo static readonly campo denominado BackgroundColor y establézcalo en un color de su elección:

static class SharedResources
{
    ...
    public static readonly Color BackgroundColor = Color.FromRgb(0xFF, 0xF0, 0xAD);
}

Abra el archivo MainPage.xaml .
Agregue la declaración del siguiente espacio de nombres XML al elemento ContentPage, antes del atributo x:Class. Esta declaración lleva las clases del espacio de nombres Notas de C# al ámbito de la página XAML:
```
<ContentPage ...
         xmlns:notes="clr-namespace:Notes"
         x:Class="Notes.MainPage"
         ...>
```
Agregue el atributo TextColor que se muestra en el código siguiente al control Label. Este marcado usa la x:Static extensión de marcado para recuperar los valores almacenados en los static campos de la clase SharedResources :
```
<Label Text="Notes"
    HorizontalOptions="Center"
    FontAttributes="Bold" 
    TextColor="{x:Static Member=notes:SharedResources.FontColor}" />
```

Use la extensión de marcado x:Static para establecer los atributos TextColor y BackgroundColor para los controles Editor y Button. El marcado completado para el archivo MainPage.xaml debe tener este aspecto:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:notes="clr-namespace:Notes"
         x:Class="Notes.MainPage">

    <VerticalStackLayout Padding="30,60,30,30">
        <Label Text="Notes"
            HorizontalOptions="Center"
            FontAttributes="Bold" 
            TextColor="{x:Static Member=notes:SharedResources.FontColor}" />

        <Editor x:Name="editor"
                Placeholder="Enter your note"
                HeightRequest="100" 
                TextColor="{x:Static Member=notes:SharedResources.FontColor}"/>

        <Grid Grid.Row="2" ColumnDefinitions="Auto,30,Auto">

            <Button Grid.Column="0"
                    Text="Save" 
                    WidthRequest="100"
                    TextColor="{x:Static Member=notes:SharedResources.FontColor}"
                    BackgroundColor="{x:Static Member=notes:SharedResources.BackgroundColor}"
                    Clicked="OnSaveButtonClicked" />

            <Button Grid.Column="2"
                    Text="Delete" 
                    WidthRequest="100"
                    TextColor="{x:Static Member=notes:SharedResources.FontColor}"
                    BackgroundColor="{x:Static Member=notes:SharedResources.BackgroundColor}"
                    Clicked="OnDeleteButtonClicked" />
        </Grid>
    </VerticalStackLayout>

</ContentPage>

Nota:

Este código XAML contiene la repetición del marcado que establece las propiedades TextColor y BackgroundColor. XAML permite definir recursos que se pueden aplicar globalmente en una aplicación mediante un diccionario de recursos en el archivo App.xaml . Esta técnica se describe en un módulo posterior.

Vuelva a compilar la aplicación y ejecútela en Windows. Compruebe que los colores coinciden con los especificados en la clase SharedResources . Si tiene tiempo, pruebe también a ejecutar la aplicación con el emulador de Android:
Cuando haya terminado, vuelva a Visual Studio.

Adición de personalización específica de la plataforma

Abra el archivo MainPage.xaml en Visual Studio.
Busque la definición del Editor control y modifique el valor de la propiedad HeightRequest como se muestra en el ejemplo siguiente:
```
<Editor x:Name="editor"
        ...
        HeightRequest="{OnPlatform 100, Android=500, iOS=500}" 
        .../>
```
Este marcado establece el alto de control predeterminado en 100 unidades, pero aumenta a 500 en Android.
Recompile la aplicación y ejecútela en Windows y, a continuación, en Android. La aplicación debería tener este aspecto en cada plataforma:

Comentarios

¿Le ha resultado útil esta página?