Compilación de la primera aplicación de Xamarin.Forms

Instrucciones paso a paso para Windows

Siga estos pasos, junto con el vídeo anterior:

  1. Elija Archivo > Nuevo > Proyecto... o presione el botón Crear nuevo proyecto....

  2. Busque "Xamarin" o elija Dispositivos móviles en el menú Tipo de proyecto. Seleccione el tipo de proyecto Aplicación móvil (Xamarin.Forms).

  3. Elija un nombre de proyecto; en el ejemplo se usa "AwesomeApp".

  4. Haga clic en el tipo de proyecto En blanco y asegúrese de que Android e iOS estén seleccionados:

    Aplicación vacía de iOS y Android

  5. Espere hasta que se restauren los paquetes de NuGet (aparecerá un mensaje de "Restauración completada" en la barra de estado).

  6. Las nuevas instalaciones de Visual Studio 2022 no tendrán instalados los SDK de Android, es posible que se le pida que instale el Android SDK más reciente:

    Instalación de Android SDK

  7. Las nuevas instalaciones de Visual Studio 2022 no tendrán un emulador de Android configurado. Haga clic en la flecha desplegable del botón Depurar y elija Crear Android Emulator para iniciar la pantalla de creación del emulador:

    Lista desplegable Crear Android Emulator

  8. En la pantalla de creación del emulador, use la configuración predeterminada y haga clic en el botón Crear:

    Pantalla de creación del emulador de Android

  9. Al crear un emulador, se le devolverá a la ventana Administrador de dispositivos. Haga clic en el botón Iniciar para iniciar el nuevo emulador:

    Emulador de Android en el Administrador de dispositivos

  10. Ahora en Visual Studio 2022 se debería mostrar el nombre del nuevo emulador en el botón Depurar:

    Nombre del emulador de Android en el botón Depurar

  11. Haga clic en el botón Depurar para compilar e implementar la aplicación en el emulador de Android:

    Aplicación mostrada en el emulador de Android

Personalización de la aplicación

La aplicación se puede personalizar para agregar funcionalidad interactiva. Realice los pasos siguientes para agregar la interacción del usuario a la aplicación:

  1. Edite MainPage.xaml, agregando este XAML antes del final de </StackLayout>:

    <Button Text="Click Me" Clicked="Button_Clicked" />
    
  2. Edite MainPage.xaml, agregando este código al final de la clase:

    int count = 0;
    void Button_Clicked(object sender, System.EventArgs e)
    {
        count++;
        ((Button)sender).Text = $"You clicked {count} times.";
    }
    
  3. Depurar la aplicación en Android:

    Aplicación de Android con Botón

Compilación de una aplicación iOS en Visual Studio 2022

Es posible crear y depurar la aplicación iOS desde Visual Studio con un equipo Mac en red. Consulte las instrucciones de configuración para obtener más información.

Instrucciones paso a paso para Windows

Siga estos pasos, junto con el vídeo anterior:

  1. Seleccione Archivo > Nuevo > Proyecto... o presione el botón Crear nuevo proyecto...:

    Creación de un nuevo proyecto

  2. Busque "Xamarin" o elija Dispositivos móviles en el menú Tipo de proyecto. Seleccione el tipo de proyecto Aplicación móvil (Xamarin.Forms) :

    Filtrado por proyectos de Xamarin

  3. Elija un nombre de proyecto; en el ejemplo se usa "AwesomeApp":

    Elección de un nombre de proyecto

  4. Haga clic en el tipo de proyecto En blanco y asegúrese de que Android e iOS estén seleccionados:

    Android e iOS, con .NET Standard

  5. Espere hasta que se restauren los paquetes de NuGet (aparecerá un mensaje de "Restauración completada" en la barra de estado).

  6. Las nuevas instalaciones de Visual Studio 2019 no tendrán un emulador de Android configurado. Haga clic en la flecha desplegable del botón Depurar y elija Crear Android Emulator para iniciar la pantalla de creación del emulador:

    Lista desplegable Crear Android Emulator

  7. En la pantalla de creación del emulador, use la configuración predeterminada y haga clic en el botón Crear:

    Pantalla de creación del emulador de Android

  8. Al crear un emulador, se le devolverá a la ventana Administrador de dispositivos. Haga clic en el botón Iniciar para iniciar el nuevo emulador:

    Emulador de Android en el Administrador de dispositivos

  9. Ahora en Visual Studio 2019 se debería mostrar el nombre del nuevo emulador en el botón Depurar:

    Nombre del emulador de Android en el botón Depurar

  10. Haga clic en el botón Depurar para compilar e implementar la aplicación en el emulador de Android:

    Aplicación mostrada en el emulador de Android

Personalización de la aplicación

La aplicación se puede personalizar para agregar funcionalidad interactiva. Realice los pasos siguientes para agregar la interacción del usuario a la aplicación:

  1. Edite MainPage.xaml, agregando este XAML antes del final de </StackLayout>:

    <Button Text="Click Me" Clicked="Button_Clicked" />
    
  2. Edite MainPage.xaml, agregando este código al final de la clase:

    int count = 0;
    void Button_Clicked(object sender, System.EventArgs e)
    {
        count++;
        ((Button)sender).Text = $"You clicked {count} times.";
    }
    
  3. Depurar la aplicación en Android:

    Aplicación de Android

Nota

En la aplicación de ejemplo se incluye la funcionalidad interactiva adicional que no se trata en el vídeo.

Compilación de una aplicación iOS en Visual Studio 2019

Es posible crear y depurar la aplicación iOS desde Visual Studio con un equipo Mac en red. Consulte las instrucciones de configuración para obtener más información.

En este vídeo se describe el proceso de compilación y prueba de una aplicación iOS con Visual Studio 2019 en Windows:

Instrucciones paso a paso para Mac

Siga estos pasos, junto con el vídeo anterior:

  1. Elija Archivo > Nueva solución... o presione el botón Nuevo proyecto... y, posteriormente, seleccione Multiplataforma > Aplicación > Aplicación de Forms en blanco:

    Aplicación de Forms en blanco

  2. Asegúrese de que Android e iOS están seleccionados:

    Android e iOS, con .NET Standard

Nota

Solo los caracteres A-Z, a-z, '_', '.' y los números son caracteres admitidos en el nombre de la aplicación y el identificador de la organización.

  1. Restaurar paquetes de NuGet, haciendo clic en el botón derecho en la solución:

    Captura de pantalla en la que se muestra la opción Restaurar paquetes NuGet seleccionada en el menú contextual de la solución.

  2. Inicie Android Emulator presionando el botón de depuración (o Ejecutar > Iniciar depuración).

  3. Edite MainPage.xaml, agregando este XAML antes del final de </StackLayout>:

    <Button Text="Click Me" Clicked="Handle_Clicked" />
    
  4. Edite MainPage.xaml, agregando este código al final de la clase:

    int count = 0;
    void Handle_Clicked(object sender, System.EventArgs e)
    {
        count++;
        ((Button)sender).Text = $"You clicked {count} times.";
    }
    
  5. Depurar la aplicación en Android:

    Captura de pantalla en la que se muestra Android Emulator.

  6. Haga clic con el botón derecho para establecer iOS en el Proyecto de inicio:

    Establecimiento del proyecto de inicio en iOS

  7. Para depurar la aplicación en iOS, seleccione un simulador de iOS en la lista desplegable.

Instrucciones paso a paso para Mac

Siga estos pasos, junto con el vídeo anterior:

  1. Elija Archivo > Nueva solución... o presione el botón Nuevo proyecto... y, posteriormente, seleccione Multiplataforma > Aplicación > Aplicación de Forms en blanco:

    Aplicación de Forms en blanco

  2. Asegúrese de que Android y iOS están seleccionados, con uso compartido del código .NET Standard:

    Android e iOS, con .NET Standard

Nota

Solo los caracteres A-Z, a-z, '_', '.' y los números son caracteres admitidos en el nombre de la aplicación y el identificador de la organización.

  1. Restaurar paquetes de NuGet, haciendo clic en el botón derecho en la solución:

    Captura de pantalla en la que se muestra la opción Restaurar paquetes NuGet seleccionada en el menú contextual de la solución.

  2. Inicie Android Emulator presionando el botón de depuración (o Ejecutar > Iniciar depuración).

  3. Edite MainPage.xaml, agregando este XAML antes del final de </StackLayout>:

    <Button Text="Click Me" Clicked="Handle_Clicked" />
    
  4. Edite MainPage.xaml, agregando este código al final de la clase:

    int count = 0;
    void Handle_Clicked(object sender, System.EventArgs e)
    {
        count++;
        ((Button)sender).Text = $"You clicked {count} times.";
    }
    
  5. Depurar la aplicación en Android:

    Captura de pantalla en la que se muestra Android Emulator.

  6. Haga clic con el botón derecho para establecer iOS en el Proyecto de inicio:

    Establecimiento del proyecto de inicio en iOS

  7. Depurar la aplicación en iOS:

    Aplicación de iOS

Puede ver el código completado en GitHub.

Pasos siguientes