Tutorial sobre los botones Xamarin.Forms

Artículo
Developer (Principiante)
Tiempo para finalizar: 7 minutos

Antes de intentar este tutorial, debe haber completado correctamente lo siguiente:

Inicio rápido Compilación de la primera aplicación de Xamarin.Forms.
Tutorial sobre el diseño de pila (StackLayout).

En este tutorial aprenderá a:

Crear Xamarin.FormsButton en XAML.
Responder al elemento Button que se pulsa.
Cambiar la apariencia del objeto Button.

Va a usar Visual Studio 2019, o Visual Studio para Mac, para crear una aplicación sencilla que demuestre cómo personalizar un Button. En las capturas de pantalla siguientes se muestra la aplicación final:

También usará la Recarga activa de XAML para Xamarin.Forms para ver cambios en la UI sin tener que volver a compilar la aplicación.

Creación de un botón

6 minutos restantes

Visual Studio
Visual Studio para Mac

Para completar este tutorial debe tener Visual Studio 2019 (versión más reciente), con la carga de trabajo Desarrollo para dispositivos móviles con .NET instalada. Además, necesita un equipo Mac emparejado para compilar la aplicación del tutorial en iOS. Para obtener información sobre la instalación de la plataforma de Xamarin, consulte Instalación de Xamarin. Para obtener información sobre cómo conectar Visual Studio 2019 a un host de compilación de Mac, consulte Emparejar con Mac para el desarrollo de Xamarin.iOS.

Inicie Visual Studio y cree una aplicación de Xamarin.Forms en blanco llamada ButtonTutorial.

Importante

Los fragmentos de código de C# y XAML en este tutorial necesitan que la solución se denomine ButtonTutorial. El uso de otro nombre dará como resultado errores de compilación al copiar el código de este tutorial en la solución.

Para obtener más información sobre la biblioteca de .NET Standard creada, vea Anatomía de una aplicación de Xamarin.Forms en Análisis detallado de inicio rápido de Xamarin.Forms.
En el Explorador de soluciones, en el proyecto ButtonTutorial, haga doble clic en MainPage.xaml para abrirlo. Después, en MainPage.xaml, quite todo el código de plantilla y sustitúyalo por el código siguiente:
```
<?xml version="1.0" encoding="utf-8"?>    
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ButtonTutorial.MainPage">
   <StackLayout Margin="20,35,20,20">
       <Button Text="Click me" />
   </StackLayout>
</ContentPage>
```
Este código define mediante declaración la interfaz de usuario de la página, que consiste en un objeto Button en un StackLayout. La propiedad Button.Text especifica el texto que aparece en el elemento Button.
En la barra de herramientas de Visual Studio, pulse el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador remoto de iOS elegido:

Tenga en cuenta que, de forma predeterminada un objeto Button tiende a ocupar todo el espacio del que dispone; en este caso, el ancho completo de su elemento primario (el objeto StackLayout).

En Visual Studio, detenga la aplicación.

Para completar este tutorial debe tener instalado Visual Studio para Mac (versión más reciente) con compatibilidad con la plataforma de iOS y Android. Además, también necesitará Xcode (versión más reciente). Para obtener más información sobre la instalación de la plataforma de Xamarin, consulte Instalación de Xamarin.

Inicie Visual Studio para Mac y cree una aplicación de Xamarin.Forms en blanco llamada ButtonTutorial.

Importante

Los fragmentos de código de C# y XAML en este tutorial necesitan que la solución se denomine ButtonTutorial. El uso de otro nombre dará como resultado errores de compilación al copiar el código de este tutorial en la solución.

Para obtener más información sobre la biblioteca de .NET Standard creada, vea Anatomía de una aplicación de Xamarin.Forms en Análisis detallado de inicio rápido de Xamarin.Forms.
En el Panel de solución, en el proyecto ButtonTutorial, haga doble clic en MainPage.xaml para abrirlo. Después, en MainPage.xaml, quite todo el código de plantilla y sustitúyalo por el código siguiente:
```
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ButtonTutorial.MainPage">
   <StackLayout Margin="20,35,20,20">
       <Button Text="Click me" />
   </StackLayout>
</ContentPage>
```
Este código define mediante declaración la interfaz de usuario de la página, que consiste en un objeto Button en un StackLayout. La propiedad Button.Text especifica el texto que aparece en el elemento Button.
En la barra de herramientas de Visual Studio para Mac, pulse el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador de iOS elegido:

Tenga en cuenta que, de forma predeterminada un objeto Button tiende a ocupar todo el espacio del que dispone; en este caso, el ancho completo de su elemento primario (el objeto StackLayout).

En Visual Studio para Mac, detenga la aplicación.

Administración de los clics

4 minutos restantes

Visual Studio
Visual Studio para Mac

En MainPage.xaml, modifique la declaración Button para que establezca un controlador para el evento Clicked:
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
Este código establece el evento Clicked en un controlador de eventos denominado OnButtonClicked que se creará en el paso siguiente.
En el Explorador de soluciones, en el proyecto ButtonTutorial, expanda MainPage.xaml y haga doble clic en MainPage.xaml.cs para abrirlo. Después, en MainPage.xaml.cs, agregue el controlador de eventos OnButtonClicked a la clase:
```
void OnButtonClicked(object sender, EventArgs e)
{
    (sender as Button).Text = "Click me again!";
}
```
Cuando se pulsa Button, se ejecuta el método OnButtonClicked. El argumento sender es el objeto Button responsable de la activación del evento Clicked y puede usarse para acceder al objeto Button. Este controlador de eventos actualiza el texto mostrado por Button.

Nota

Además del evento Clicked, Button también define los eventos Pressed y Released. Para obtener más información, consulte la sección Presionar y soltar el botón en la guía Button de Xamarin.Forms.
En la barra de herramientas de Visual Studio, pulse el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador remoto de iOS elegido. Haga clic en Button y observe que el texto muestra cambios:

Para obtener más información sobre cómo controlar los clics de botón, consulte la sección sobre el control de clics de botón en la guía Button de Xamarin.Forms.

En MainPage.xaml, modifique la declaración Button para que establezca un controlador para el evento Clicked:
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
Este código establece el evento Clicked en un controlador de eventos denominado OnButtonClicked que se creará en el paso siguiente.
En el Panel de solución, en el proyecto ButtonTutorial, expanda MainPage.xaml y haga doble clic en MainPage.xaml.cs para abrirlo. Después, en MainPage.xaml.cs, agregue el controlador de eventos OnButtonClicked a la clase:
```
void OnButtonClicked(object sender, EventArgs e)
{
    (sender as Button).Text = "Click me again!";
}
```
Cuando se pulsa Button, se ejecuta el método OnButtonClicked. El argumento sender es el objeto Button responsable de la activación del evento Clicked y puede usarse para acceder al objeto Button. Este controlador de eventos actualiza el texto mostrado por Button.

Nota

Además del evento Clicked, Button también define los eventos Pressed y Released. Para obtener más información, consulte la sección Presionar y soltar el botón en la guía Button de Xamarin.Forms.
En la barra de herramientas de Visual Studio para Mac, pulse el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador de iOS elegido. Haga clic en Button y observe que el texto muestra cambios:

Para obtener más información sobre cómo controlar los clics de botón, consulte la sección sobre el control de clics de botón en la guía Button de Xamarin.Forms.

Cambio del aspecto

2 minutos restantes

Visual Studio
Visual Studio para Mac

En MainPage.xaml, modifique la declaración Button para cambiar su apariencia visual:
```
<Button Text="Click me"
        Clicked="OnButtonClicked"
        TextColor="Blue"
        BackgroundColor="Aqua"
        BorderColor="Red"
        BorderWidth="5"
        CornerRadius="5"
        WidthRequest="150"
        HeightRequest="75" />
```
Este código establece las propiedades que cambian la apariencia visual del objeto Button. La propiedad TextColor establece el color del texto del objeto Button y la propiedad BackgroundColor establece el color de fondo del texto. La propiedad BorderColor establece el color de un área alrededor del objeto Button y la propiedad BorderWidth establece el ancho del borde. De forma predeterminada, el objeto Button es rectangular, pero puede presentarse esquinas redondeadas si se configura la propiedad CornerRadius con un valor adecuado. Además, el tamaño del objeto Button se puede cambiar configurando las propiedades WidthRequest y HeightRequest.
Si la aplicación se sigue ejecutando, guarde los cambios hechos al archivo, y la interfaz de usuario de la aplicación se actualizará automáticamente en su simulador o emulador. De lo contrario, en la barra de herramientas de Visual Studio, presione el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador remoto de iOS elegido. Observe que el aspecto del objeto Button ha cambiado:

En Visual Studio, detenga la aplicación.

Para obtener más información sobre la configuración del aspecto de Button, consulte Apariencia de los botones en la guía Button de Xamarin.Forms.

En MainPage.xaml, modifique la declaración Button para cambiar su apariencia visual:
```
<Button Text="Click me"
        Clicked="OnButtonClicked"
        TextColor="Blue"
        BackgroundColor="Aqua"
        BorderColor="Red"
        BorderWidth="5"
        CornerRadius="5"
        WidthRequest="150"
        HeightRequest="75" />
```
Este código establece las propiedades que cambian la apariencia visual del objeto Button. La propiedad TextColor establece el color del texto del objeto Button y la propiedad BackgroundColor establece el color de fondo del texto. La propiedad BorderColor establece el color de un área alrededor del objeto Button y la propiedad BorderWidth establece el ancho del borde. De forma predeterminada, el objeto Button es rectangular, pero puede presentarse esquinas redondeadas si se configura la propiedad CornerRadius con un valor adecuado. Además, el tamaño del objeto Button se puede cambiar configurando las propiedades WidthRequest y HeightRequest.
Si la aplicación se sigue ejecutando, guarde los cambios hechos al archivo, y la interfaz de usuario de la aplicación se actualizará automáticamente en su simulador o emulador. De lo contrario, en la barra de herramientas de Visual Studio para Mac, presione el botón Iniciar (el botón triangular similar a un botón de reproducción) para iniciar la aplicación en Android Emulator o en el simulador de iOS elegido. Observe que el aspecto del objeto Button ha cambiado:

En Visual Studio para Mac, detenga la aplicación.

Para obtener más información sobre la configuración del aspecto de Button, consulte Apariencia de los botones en la guía Button de Xamarin.Forms.

Tutorial sobre los botones Xamarin.Forms

Creación de un botón

Administración de los clics

Cambio del aspecto

¡Enhorabuena!

Pasos siguientes

Tutorial sobre los botones Xamarin.Forms

Creación de un botón

Administración de los clics

Cambio del aspecto

¡Enhorabuena!

Pasos siguientes

Vínculos relacionados