Control de eventos en XAML
- 5 minutos
Después de crear la interfaz de usuario de XAML, puede agregar código para responder a las interacciones que se producen mientras el usuario visita la página. .NET MAUI notifica a la aplicación la entrada del usuario y las interacciones a través de eventos de .NET estándar.
En esta unidad, aprenderá a controlar estos eventos y a llevar a cabo las operaciones esperadas por el usuario.
Asignación de nombres a elementos en una página XAML
Con frecuencia, el código de control de eventos necesita hacer referencia a controles específicos y sus propiedades en una página. Puede asignar un nombre único a cada control. Para ello, use el atributo x:Name de XAML. El atributo x:Name hace dos cosas:
Agrega un campo privado al archivo de código subyacente generado que se asigna a este elemento. Use este campo en el código para interactuar con el elemento visual para establecer propiedades de tiempo de ejecución y controlar eventos.
Hace que el elemento se conozca como XAML a través de este nombre. Se puede hacer referencia a estos elementos desde otros definidos en el mismo archivo XAML.
No se puede usar una cadena arbitraria como nombre del elemento. El valor asignado al atributo x:Name se usa para crear un campo en el código. En su lugar, debe cumplir las convenciones de nomenclatura de una variable. El nombre también debe ser único, ya que se compila en la definición de código subyacente.
Después de proporcionar un nombre para un elemento, puede interactuar con ese elemento en el archivo de código subyacente. El siguiente fragmento XAML define un control Label. Se denomina CounterLabel (este ejemplo se toma de la aplicación predeterminada que genera la plantilla MAUI de .NET):
<Label Text="Current count: 0"
...
x:Name="CounterLabel"
... />
En el código subyacente de esta página, puede hacer referencia a este control a través del campo CounterLabel y modificar sus propiedades:
count++;
CounterLabel.Text = $"Current count: {count}";
Importante
El campo no se inicializará hasta que se ejecute el método InitializeComponent de la página. Este método forma parte del proceso de análisis y creación de instancias de objeto de XAML. Coloque después de esta llamada cualquier código que interactúe con un elemento definido en XAML. La excepción a esta regla es la propia clase ContentPage. Puede acceder a todas las propiedades de la clase antes de la ejecución del método InitializeComponent. Pero si establece las propiedades de esta clase en XAML, estos valores de propiedad sobrescribirán los valores que es posible que se ejecuten antes de ejecutar InitializeComponent.
Uso de un atributo para conectar eventos
Muchos controles exponen propiedades que corresponden a los eventos a los que pueden responder dichos controles, como el evento Clicked de un botón. Los distintos controles admiten diferentes conjuntos de eventos. Por ejemplo, un control Button puede responder a eventos Clicked, Pressed y Released, mientras que un control Entry tiene eventos como TextChanged. Puede inicializar una propiedad de evento en el marcado XAML de una página y especificar el nombre del método que se ejecutará cuando se desencadene el evento. El método del evento debe cumplir los siguientes requisitos de firma:
- No puede devolver un valor; el método debe ser
void. - Debe tomar dos parámetros; referencia
objectque indica el objeto que desencadenó el evento (conocido como remitente) y unEventArgsparámetro que contiene los argumentos pasados al controlador de eventos por el remitente. - El controlador de eventos debe ser
private. Esto no se exige, pero si crea un controlador de eventos público, este se vuelve accesible para el público general y se podría invocar mediante una acción que no sea el evento esperado que se desencadena. - El controlador de eventos puede ser
asyncsi necesita ejecutar operaciones asincrónicas.
El ejemplo siguiente muestra la definición del controlador de eventos Clicked para el botón en la aplicación de ejemplo de la plantilla de .NET MAUI. El nombre del método sigue una convención estándar; En seguido por el nombre del control (el botón llamado Counter) y luego el nombre del evento (Clicked). No se exige esta convención, pero es una práctica recomendada:
private void OnCounterClicked(object sender, EventArgs e)
{
...
}
Separación de intereses
La conexión de eventos en XAML es práctica, pero mezcla el comportamiento del control con la definición de la interfaz de usuario. Muchos desarrolladores prefieren mantener esos elementos distintos y hacer todas las suscripciones del controlador de eventos en el código subyacente a los elementos con nombre. Resulta más sencillo ver lo que está conectado y a dónde se asigna el comportamiento. Este método también hace que sea más difícil dañar accidentalmente el código al eliminar un controlador en el XAML sin darse cuenta. El compilador no detectará un controlador quitado y solo se convertirá en un problema cuando el código no realice ese comportamiento correctamente.
No importa si elige conectar los controladores de eventos mediante XAML o mediante código, es una cuestión de elección personal.
Para realizar la conexión de un controlador de eventos en código, use el operador += para suscribirse al evento. Normalmente, se realiza esta operación en el constructor de la página, después de llamar a InitializeComponent:
public partial class MainPage : ContentPage, IPage
{
public MainPage()
{
InitializeComponent();
Counter.Clicked += OnCounterClicked;
}
...
private void OnCounterClicked(object sender, EventArgs e)
{
...
}
}
Nota:
Puede usar este método para suscribirse a varios métodos de control de eventos para el mismo evento. Cada método de control de eventos se ejecuta cuando se produce el evento, aunque no debe suponer que se ejecutarán en un orden determinado, por lo que no debe introducir dependencias entre ellos.
De forma similar, puede quitar un controlador de eventos cancelando la suscripción del evento con el operador -= más adelante en la aplicación:
Counter.Clicked -= OnCounterClicked;