Ejercicio: Creación de la primera página XAML

  • 10 minutos

Los ingenieros de su compañía eléctrica realizan habitualmente visitas a los clientes para reparar electrodomésticos y realizar otras tareas de mantenimiento eléctrico. Parte de la aplicación permite al ingeniero tomar notas sobre la visita. Muestra un editor sencillo en el que el ingeniero puede escribir los detalles y guardarlos.

En Android, la aplicación tiene este aspecto:

La aplicación del ingeniero que se ejecuta en Android, que muestra la página del editor.

Se le ha pedido que agregue algunas características adicionales a esta página. Antes de empezar, quiere comprender cómo se ha creado la página, por lo que debe consultar el código fuente. Observa que toda la interfaz de usuario se ha creado con código de C#. Aunque este enfoque funciona, intercala el código que controla el diseño con el código que controla la forma en que funciona la interfaz de usuario. Se da cuenta de que, al poco tiempo, hay un peligro de que los dos aspectos de la aplicación se bloqueen juntos, lo que dificulta el mantenimiento futuro y tal vez hace que la aplicación sea más frágil a medida que se agregan más características. Para separar el diseño de la interfaz de usuario de su lógica, extrae el código de C# que define el diseño de la aplicación y lo reemplaza con una página XAML.

Este módulo usa el SDK de .NET 10.0. Asegúrese de que tiene instalado .NET 10.0 ejecutando el siguiente comando en el terminal de comandos preferido:

dotnet --list-sdks

Aparecerá un resultado similar al del ejemplo siguiente:

9.0.100 [C:\Program Files\dotnet\sdk]
10.0.100 [C:\Program Files\dotnet\sdk]

Asegúrese de que aparezca una versión que comience en 10. Si no aparece ninguno o no se encuentra el comando, instale el SDK de .NET 10.0 más reciente.

Revisión de la aplicación existente

  1. Clona el repositorio de GitHub para este ejercicio en tu ordenador.

    Nota:

    Es mejor clonar o descargar el contenido del ejercicio en una ruta de acceso de carpeta corta, como C:\dev, para evitar que los archivos generados por la compilación superen la longitud máxima de la ruta de acceso.

  2. Vaya a la carpeta exercise1 en la copia local del repositorio.

  3. Abra el Notes.sln archivo de solución de Visual Studio en esta carpeta o en la carpeta de Visual Studio Code.

  4. En la ventana Explorador de soluciones, expanda el proyecto Notes , expanda el archivo MainPage.xaml y abra el archivo MainPage.xaml.cs .

  5. Revise la clase MainPage definida en este archivo. El constructor contiene el código siguiente que crea la interfaz de usuario:

    public MainPage()
{
    var notesHeading = new Label() { Text = "Notes", HorizontalOptions = LayoutOptions.Center, FontAttributes = FontAttributes.Bold };

    editor = new Editor() { Placeholder = "Enter your note", HeightRequest = 100 };
    editor.Text = File.Exists(_fileName) ? File.ReadAllText(_fileName) : string.Empty;

    var buttonsGrid = new Grid() { HeightRequest = 40.0 };
    buttonsGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1.0, GridUnitType.Auto) });
    buttonsGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(30.0, GridUnitType.Absolute) });
    buttonsGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1.0, GridUnitType.Auto) });

    var saveButton = new Button() { WidthRequest = 100, Text = "Save" };
    saveButton.Clicked += OnSaveButtonClicked;
    Grid.SetColumn(saveButton, 0);
    buttonsGrid.Children.Add(saveButton);

    var deleteButton = new Button() { WidthRequest = 100, Text = "Delete" };
    deleteButton.Clicked += OnDeleteButtonClicked;
    Grid.SetColumn(deleteButton, 2);
    buttonsGrid.Children.Add(deleteButton);

    var stackLayout = new VerticalStackLayout 
    { 
        Padding = new Thickness(30, 60, 30, 30),
        Children = { notesHeading, editor, buttonsGrid }
    };

    this.Content = stackLayout;
}

    La interfaz de usuario consta de un elemento VerticalStackLayout, que contiene un elemento Label, otro Editor y otro Grid con tres columnas. La primera columna contiene el control saveButton , el segundo es un espaciador y la tercera columna tiene el control deleteButton .

    En el siguiente diagrama se muestra la estructura de la interfaz de usuario:

    Diagrama de la estructura de la interfaz de usuario de la aplicación Notes.

    Tenga en cuenta que la clase MainPage también contiene métodos de control de eventos para los botones y algún código que inicializa el Editor control. Este código no se distingue de la definición de la interfaz de usuario.

  6. Compile y ejecute la aplicación en Windows, solo para ver su apariencia. Seleccione F5 para compilar y ejecutar la aplicación.

  7. Cierre la aplicación y vuelva a Visual Studio o Visual Studio Code cuando haya terminado.

Creación de una versión XAML de la interfaz de usuario

  1. Abra el archivo MainPage.xaml . El marcado de esta página representa una página de contenido MAUI vacía:

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

</ContentPage>

  2. Agregue un control VerticalStackLayout a la página de contenido:

    <ContentPage ...>
    <VerticalStackLayout Margin="30,60,30,30">

    </VerticalStackLayout>
</ContentPage>

  3. Agregue un control Label a VerticalStackLayout. Establezca las propiedades Text, HorizontalTextAlignment y FontAttributes de este control, como se muestra a continuación:

    <ContentPage ...>
    <VerticalStackLayout ...>
        <Label Text="Notes"
               HorizontalOptions="Center"
               FontAttributes="Bold" />
    </VerticalStackLayout>
</ContentPage>

  4. Agregue un control Editor a VerticalStackLayout:

    <ContentPage ...>
    <VerticalStackLayout ...>
        <Label .../>

        <Editor x:Name="editor"
                Placeholder="Enter your note"
                HeightRequest="100" />
    </VerticalStackLayout>
</ContentPage>

  5. Agregue un elemento secundario Grid a VerticalStackLayout. Este elemento Grid debería tener tres columnas; el tamaño de la primera y la tercera se determina automáticamente, mientras que la segunda tiene un ancho de 30:

    <ContentPage ...>
    <VerticalStackLayout ...>
        <Label .../>

        <Editor .../>

        <Grid ColumnDefinitions="Auto, 30, Auto">

        </Grid>
    </VerticalStackLayout>
</ContentPage>

  6. Agregue un elemento Button a la primera columna del elemento secundario Grid. Este es el botón Guardar :

    <ContentPage ...>
    <VerticalStackLayout ...>
        <Label .../>

        <Editor .../>

        <Grid ...>                    
            <Button Grid.Column="0"
                    Text="Save" 
                    WidthRequest="100"
                    Clicked="OnSaveButtonClicked" />
        </Grid>
    </VerticalStackLayout>
</ContentPage>

  7. Agregue otro elemento Button a la tercera columna del elemento secundario Grid. Este es el botón Eliminar :

    <ContentPage ...>
    <VerticalStackLayout ...>
        <Label .../>

        <Editor .../>

        <Grid ...>                    
            <Button ... />

            <Button Grid.Column="2"
                    Text="Delete" 
                     WidthRequest="100"
                    Clicked="OnDeleteButtonClicked" />
        </Grid>
    </VerticalStackLayout>
</ContentPage>

Eliminación del código de diseño del archivo de código subyacente

  1. En la ventana Explorador de soluciones, expanda el nodo MainPage.xaml y abra el archivo MainPage.xaml.cs .

  2. Quite el campo Editor de la clase MainPage .

  3. En el archivo MainPage.xaml.cs , en el constructor MainPage , quite todo el código que crea los elementos de la interfaz de usuario y reemplácelos por una llamada al método InitializeComponent . Agregue código que compruebe si el archivo usado para almacenar las notas existe y, si es así, lee el contenido y rellena el campo Texto del control Editor. El constructor debe tener el siguiente aspecto:

    public partial class MainPage : ContentPage
{
    string _fileName = Path.Combine(FileSystem.AppDataDirectory, "notes.txt");

    public MainPage()
    {
        InitializeComponent();

        if (File.Exists(_fileName))
        {
            editor.Text = File.ReadAllText(_fileName);
        }
    }

    ...
}

  4. En el menú Compilar , seleccione Recompilar solución. Compruebe que la aplicación se compila sin errores.

  5. Ejecute la aplicación. Debería funcionar exactamente como antes.

  6. Si tiene tiempo, implemente y ejecute la aplicación con el emulador de Android. La interfaz de usuario de la aplicación debe ser similar a la que se muestra en la imagen al comienzo de este ejercicio.