Creación de una primera aplicación de Xamarin.FormsBuild your first Xamarin.Forms App

Vea este vídeo y siga el tutorial para crear una primera aplicación móvil con Xamarin.Forms.Watch this video and follow along to create your first mobile app with Xamarin.Forms.

Instrucciones paso a paso para WindowsStep-by-step instructions for Windows

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

Siga estos pasos, junto con el vídeo anterior:Follow these steps along with the video above:

  1. Elija archivo > nuevo proyecto de >. .. o presione el botón crear nuevo proyecto... :Choose File > New > Project... or press the Create new project... button:

    Crear un nuevo proyectoCreate a new project

  2. Busque "Xamarin" o elija móvil en el menú tipo de proyecto .Search for "Xamarin" or choose Mobile from the Project type menu. Seleccione el tipo de proyecto aplicación móvil (Xamarin. Forms) :Select the Mobile App (Xamarin.Forms) project type:

    Filtrar para proyectos de XamarinFilter for Xamarin projects

  3. Elegir un nombre – de proyecto en el ejemplo se usa "AwesomeApp":Choose a project name – the example uses "AwesomeApp":

    Elegir un nombre de proyectoChoose a project name

  4. Haga clic en el tipo de proyecto en blanco y asegúrese de que están seleccionados Android e iOS :Click on the Blank project type and ensure Android and iOS are selected:

    Android y iOS, con .NET StandardAndroid and iOS, with .NET Standard

  5. Espere hasta que se restauren los paquetes de NuGet (aparecerá un mensaje de "Restauración completada" en la barra de estado).Wait until the NuGet packages are restored (a "Restore completed" message will appear in the status bar).

  6. Las nuevas instalaciones de Visual Studio 2019 no tendrán un emulador de Android configurado.New Visual Studio 2019 installations won't have an Android emulator configured. Haga clic en la flecha desplegable en el botón depurar y elija crear Android Emulator para iniciar la pantalla de creación del emulador:Click the dropdown arrow on the Debug button and choose Create Android Emulator to launch the emulator creation screen:

    Crear Android Emulator lista desplegable

  7. En la pantalla creación del emulador, use la configuración predeterminada y haga clic en el botón crear :In the emulator creation screen, use the default settings and click the Create button:

    Pantalla de creación del emulador de AndroidAndroid emulator creation screen

  8. Al crear un emulador, se le devolverá a la ventana Device Manager.Creating an emulator will return you to the Device Manager window. Haga clic en el botón iniciar para iniciar el nuevo emulador:Click the Start button to launch the new emulator:

    Emulador de Android en el Device Manager

  9. Visual Studio 2019 debería mostrar ahora el nombre del nuevo emulador en el botón depurar:Visual Studio 2019 should now show the name of the new emulator on the Debug button:

    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:Click the Debug button to build and deploy the application to the Android emulator:

    Emulador de Android que muestra la aplicación

Personalización de la aplicaciónCustomize the application

La aplicación se puede personalizar para agregar funcionalidad interactiva.The application can be customized to add interactive functionality. Realice los pasos siguientes para agregar la interacción del usuario a la aplicación:Perform the following steps to add user interaction to the application:

  1. Edite MainPage.xaml, agregando este XAML antes del final de </StackLayout>:Edit MainPage.xaml, adding this XAML before the end of the </StackLayout>:

    <Button Text="Click Me" Clicked="Button_Clicked" />
    
  2. Edite MainPage.xaml, agregando este código al final de la clase:Edit MainPage.xaml.cs, adding this code to the end of the class:

    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:Debug the app on Android:

    Aplicación de Android

Nota

La aplicación de ejemplo incluye la funcionalidad interactiva adicional que no se trata en el vídeo.The sample application includes the additional interactive functionality that is not covered in the video.

Compilar una aplicación de iOS en Visual Studio 2019Build an iOS app in Visual Studio 2019

Es posible compilar y depurar la aplicación iOS desde Visual Studio con un equipo Mac en red.It's possible to build and debug the iOS app from Visual Studio with a networked Mac computer. Consulte las instrucciones de configuración para obtener más información.Refer to the setup instructions for more information.

En este vídeo se describe el proceso de creación y prueba de una aplicación iOS con Visual Studio 2019 en Windows:This video covers the process of building and testing an iOS app using Visual Studio 2019 on Windows:

Instrucciones paso a paso para WindowsStep-by-step instructions for Windows

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

Siga estos pasos, junto con el vídeo anterior:Follow these steps along with the video above:

  1. Elija Archivo > Nuevo > Proyecto... o presione el botón Crear proyecto nuevo... y, a continuación, seleccione Visual C# > Multiplataforma > Aplicación móvil (Xamarin.Forms) :Choose File > New > Project... or press the Create new project... button, then select Visual C# > Cross-Platform > Mobile App (Xamarin.Forms):

    Aplicación móvil (Xamarin.Forms)Mobile App (Xamarin.Forms)

  2. Asegúrese de que Android y iOS están seleccionados, con uso compartido del código .NET Standard:Ensure Android and iOS are selected, with .NET Standard code sharing:

    Android y iOS, con .NET StandardAndroid and iOS, with .NET Standard

  3. Espere hasta que se restauren los paquetes de NuGet (aparecerá un mensaje de "Restauración completada" en la barra de estado).Wait until the NuGet packages are restored (a "Restore completed" message will appear in the status bar).

  4. Inicie Android Emulator presionando el botón de depuración (o el elemento de menú Depurar > Iniciar depuración).Launch Android emulator by pressing the debug button (or the Debug > Start Debugging menu item).

  5. Edite MainPage.xaml, agregando este XAML antes del final de </StackLayout>:Edit MainPage.xaml, adding this XAML before the end of the </StackLayout>:

    <Button Text="Click Me" Clicked="Button_Clicked" />
    
  6. Edite MainPage.xaml, agregando este código al final de la clase:Edit MainPage.xaml.cs, adding this code to the end of the class:

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

    Aplicación de Android

    Sugerencia

    Es posible crear y depurar la aplicación de iOS desde Visual Studio con un equipo Mac en red.It is possible to build and debug the iOS app from Visual Studio with a networked Mac computer. Consulte las instrucciones de configuración para obtener más información.Refer to the setup instructions for more information.

Instrucciones paso a paso para MacStep-by-step instructions for Mac

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

Siga estos pasos, junto con el vídeo anterior:Follow these steps along with the video above:

  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:Choose File > New Solution... or press the New Project... button, then select Multiplatform > App > Blank Forms App:

    Aplicación de Forms en blancoBlank Forms App

  2. Asegúrese de que Android y iOS están seleccionados, con uso compartido del código .NET Standard:Ensure Android and iOS are selected, with .NET Standard code sharing:

    Android y iOS, con .NET StandardAndroid and iOS, with .NET Standard

  3. Restaurar paquetes de NuGet, haciendo clic en el botón derecho en la solución:Restore NuGet packages, by right-clicking on the solution:

    Aplicación de Android

  4. Inicie Android Emulator presionando el botón de depuración (o Ejecutar > Iniciar depuración).Launch Android emulator by pressing the debug button (or Run > Start Debugging).

  5. Edite MainPage.xaml, agregando este XAML antes del final de </StackLayout>:Edit MainPage.xaml, adding this XAML before the end of the </StackLayout>:

    <Button Text="Click Me" Clicked="Handle_Clicked" />
    
  6. Edite MainPage.xaml, agregando este código al final de la clase:Edit MainPage.xaml.cs, adding this code to the end of the class:

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

    Aplicación de Android

  8. Haga clic con el botón derecho para establecer iOS en el Proyecto de inicio:Right-click to set iOS to the Startup Project:

    Establecer el proyecto de inicio en iOSSet the startup project to iOS

  9. Depurar la aplicación en iOS:Debug the app on iOS:

    Aplicación de iOS

Puede descargar el código completo desde la galería de ejemplos o puede verlo en GitHub.You can download the completed code from the samples gallery or view it on GitHub.

Pasos siguientesNext Steps