Creación de una aplicación de Xamarin.Forms de una páginaCreate a Single Page Xamarin.Forms Application

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

En este inicio rápido aprenderá a:In this quickstart, you will learn how to:

  • Crear una aplicación de Xamarin.Forms multiplataforma.Create a cross-platform Xamarin.Forms application.
  • Definir la interfaz de usuario para una página mediante el lenguaje XAML.Define the user interface for a page using eXtensible Application Markup Language (XAML).
  • Interactuar con los elementos de la interfaz de usuario XAML desde el código.Interact with XAML user interface elements from code.

El inicio rápido le guía sobre cómo crear una aplicación de Xamarin.Forms multiplataforma que permite escribir una nota y conservarla en el almacenamiento del dispositivo.The quickstart walks through how to create a cross-platform Xamarin.Forms application, which enables you to enter a note and persist it to device storage. A continuación se muestra la aplicación final:The final application is shown below:

Aplicación NotesNotes Application

Requisitos previosPrerequisites

  • Visual Studio 2019 (última versión), con la carga de trabajo Desarrollo para dispositivos móviles con .NET instalada.Visual Studio 2019 (latest release), with the Mobile development with .NET workload installed.
  • Conocimientos de C#.Knowledge of C#.
  • (opcional) Un equipo Mac emparejado para compilar la aplicación en iOS.(optional) A paired Mac to build the application on iOS.

Para más información sobre estos requisitos previos, vea Instalación de Xamarin.For more information about these prerequisites, see Installing 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.For information about connecting Visual Studio 2019 to a Mac build host, see Pair to Mac for Xamarin.iOS development.

Introducción a Visual Studio 2019Get started with Visual Studio 2019

  1. Inicie Visual Studio 2019 y, en la ventana de inicio, haga clic en Crear un proyecto nuevo para crear un proyecto:Launch Visual Studio 2019, and in the start window click Create a new project to create a new project:

    nuevo proyecto

  2. En la ventana Crear un proyecto nuevo, seleccione Móvil en la lista desplegable Tipo de proyecto, elija la plantilla Aplicación móvil (Xamarin.Forms) y haga clic en el botón Siguiente:In the Create a new project window, select Mobile in the Project type drop down, select the Mobile App (Xamarin.Forms) template, and click the Next button:

    Plantillas de proyectos multiplataforma

  3. En el cuadro de diálogo Configure su nuevo proyecto, establezca Nombre del proyecto en Notes, elija una ubicación adecuada para el proyecto y haga clic en el botón Crear:In the Configure your new project window, set the Project name to Notes, choose a suitable location for the project, and click the Create button:

    Configurar el proyecto

    Importante

    Los fragmentos de XAML y C# en este inicio rápido requieren que la solución se denomine Notes.The C# and XAML snippets in this quickstart requires that the solution is named Notes. El uso de otro nombre dará como resultado errores de compilación al copiar el código de este inicio rápido en la solución.Using a different name will result in build errors when you copy code from this quickstart into the solution.

  4. En el cuadro de diálogo New Cross Platform App (Nueva aplicación multiplataforma), haga clic en En blanco y después en el botón Aceptar:In the New Cross Platform App dialog, click Blank App, and click the OK button:

    Nueva aplicación multiplataforma

    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.For more information about the .NET Standard library that gets created, see Anatomy of a Xamarin.Forms application in the Xamarin.Forms Quickstart Deep Dive.

  5. En el Explorador de soluciones, en el proyecto Notes, haga doble clic en MainPage.xaml para abrirlo:In Solution Explorer, in the Notes project, double-click MainPage.xaml to open it:

    Abrir MainPage.xaml

  6. En MainPage.xaml, quite todo el código de plantilla y sustitúyalo por el siguiente código:In MainPage.xaml, remove all of the template code and replace it with the following code:

    <?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="Notes.MainPage">
        <StackLayout Margin="10,35,10,10">
            <Label Text="Notes"
                   HorizontalOptions="Center"
                   FontAttributes="Bold" />
            <Editor x:Name="editor"
                    Placeholder="Enter your note"
                    HeightRequest="100" />
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button Text="Save"
                        Clicked="OnSaveButtonClicked" />
                <Button Grid.Column="1"
                        Text="Delete"
                        Clicked="OnDeleteButtonClicked"/>
            </Grid>
        </StackLayout>
    </ContentPage>
    

    Este código define mediante declaración la interfaz de usuario para la página, que consta de una instancia de Label para mostrar texto, una instancia de Editor para entrada de texto y dos instancias de Button que dirigen la aplicación para guardar o eliminar un archivo.This code declaratively defines the user interface for the page, which consists of a Label to display text, an Editor for text input, and two Button instances that direct the application to save or delete a file. Las dos instancias de Button se disponen horizontalmente en Grid, mientras que Label, Editor y Grid se disponen verticalmente en StackLayout.The two Button instances are horizontally laid out in a Grid, with the Label, Editor, and Grid being vertically laid out in a StackLayout. Para obtener más información sobre la creación de la interfaz de usuario, vea Interfaz de usuario en Análisis detallado de inicio rápido de Xamarin.Forms.For more information about creating the user interface, see User interface in the Xamarin.Forms Quickstart Deep Dive.

    Guarde los cambios en MainPage.xaml presionando CTRL+S y cierre el archivo.Save the changes to MainPage.xaml by pressing CTRL+S, and close the file.

  7. En el Explorador de soluciones, en el proyecto Notes, expanda MainPage.xaml y haga doble clic en MainPage.xaml.cs para abrirlo:In Solution Explorer, in the Notes project, expand MainPage.xaml and double-click MainPage.xaml.cs to open it:

    Abrir MainPage.xaml.cs

  8. En MainPage.xaml.cs, quite todo el código de plantilla y sustitúyalo por el siguiente código:In MainPage.xaml.cs, remove all of the template code and replace it with the following code:

    using System;
    using System.IO;
    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class MainPage : ContentPage
        {
            string _fileName = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "notes.txt");
    
            public MainPage()
            {
                InitializeComponent();
    
                if (File.Exists(_fileName))
                {
                    editor.Text = File.ReadAllText(_fileName);
                }
            }
    
            void OnSaveButtonClicked(object sender, EventArgs e)
            {
                File.WriteAllText(_fileName, editor.Text);
            }
    
            void OnDeleteButtonClicked(object sender, EventArgs e)
            {
                if (File.Exists(_fileName))
                {
                    File.Delete(_fileName);
                }
                editor.Text = string.Empty;
            }
        }
    }
    

    Este código define un campo _fileName, que hace referencia a un archivo denominado notes.txt que almacenará los datos de la nota en la carpeta de datos de la aplicación local para la aplicación.This code defines a _fileName field, which references a file named notes.txt that will store note data in the local application data folder for the application. Cuando se ejecuta el constructor de páginas, el archivo se lee, si existe, y se muestra en el Editor.When the page constructor is executed the file is read, if it exists, and displayed in the Editor. Al presionar el control Button Guardar, se ejecuta el controlador de eventos OnSaveButtonClicked, que guarda el contenido de Editor en el archivo.When the Save Button is pressed the OnSaveButtonClicked event handler is executed, which saves the content of the Editor to the file. Al presionar el control Button Eliminar, se ejecuta el controlador de eventos OnDeleteButtonClicked, que elimina el archivo, siempre que exista, y quita cualquier texto de Editor.When the Delete Button is pressed the OnDeleteButtonClicked event handler is executed, which deletes the file, provided that it exists, and removes any text from the Editor. Para obtener más información sobre la interacción del usuario, vea Respuesta a la interacción del usuario en Análisis detallado de inicio rápido de Xamarin.Forms.For more information about user interaction, see Responding to user interaction in the Xamarin.Forms Quickstart Deep Dive.

    Guarde los cambios en MainPage.xaml.cs presionando CTRL+S y cierre el archivo.Save the changes to MainPage.xaml.cs by pressing CTRL+S, and close the file.

Compilar el tutorial rápidoBuilding the quickstart

  1. En Visual Studio, seleccione el elemento de menú Compilación > Compilar solución (o presione F6).In Visual Studio, select the Build > Build Solution menu item (or press F6). La solución se compilará y aparecerá un mensaje de operación correcta en la barra de estado de Visual Studio:The solution will build and a success message will appear in the Visual Studio status bar:

    Compilación correcta

    Si hay errores, repita los pasos anteriores y corrija los errores hasta que la solución se compile correctamente.If there are errors, repeat the previous steps and correct any mistakes until the solution builds successfully.

  2. En la barra de herramientas de Visual Studio, pulse el botón Iniciar (el botón triangular que parece un botón de reproducción) para iniciar la aplicación en la instancia elegida de Android Emulator:In the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application in your chosen Android emulator:

    Barra de herramientas de Android en Visual Studio

    Notes en Android EmulatorNotes in the Android Emulator

    Escriba una nota y pulse el botón Guardar.Enter a note and press the Save button.

    Para obtener más información sobre cómo se inicia la aplicación en cada plataforma, vea Inicio de la aplicación en cada plataforma en Análisis detallado de inicio rápido de Xamarin.Forms.For more information about how the application is launched on each platform, see Launching the application on each platform in the Xamarin.Forms Quickstart Deep Dive.

    Nota

    Los pasos siguientes solo deben realizarse si se tiene un equipo Mac emparejado que cumpla los requisitos del sistema para el desarrollo de Xamarin.Forms.The following steps should only be carried out if you have a paired Mac that meets the system requirements for Xamarin.Forms development.

  3. En la barra de herramientas de Visual Studio, haga clic con el botón derecho en el proyecto Notes.iOS y seleccione Establecer como proyecto de inicio.In the Visual Studio toolbar, right-click on the Notes.iOS project, and select Set as StartUp Project.

    Establecer iOS como proyecto de inicio

  4. En la barra de herramientas de Visual Studio, pulse el botón Iniciar (el botón triangular que parece un botón de reproducción) para iniciar la aplicación en la instancia elegida de iOS Simulator:In the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application in your chosen iOS remote simulator:

    Barra de herramientas de iOS en Visual Studio

    Notes en el simulador de iOSNotes in the iOS Simulator

    Escriba una nota y pulse el botón Guardar.Enter a note and press the Save button.

    Para obtener más información sobre cómo se inicia la aplicación en cada plataforma, vea Inicio de la aplicación en cada plataforma en Análisis detallado de inicio rápido de Xamarin.Forms.For more information about how the application is launched on each platform, see Launching the application on each platform in the Xamarin.Forms Quickstart Deep Dive.

Requisitos previosPrerequisites

  • Visual Studio 2017, con la carga de trabajo Desarrollo para dispositivos móviles con .NET instalada.Visual Studio 2017, with the Mobile development with .NET workload installed.
  • Conocimientos de C#.Knowledge of C#.
  • (opcional) Un equipo Mac emparejado para compilar la aplicación en iOS.(optional) A paired Mac to build the application on iOS.

Para más información sobre estos requisitos previos, vea Instalación de Xamarin.For more information about these prerequisites, see Installing 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.For information about connecting Visual Studio 2019 to a Mac build host, see Pair to Mac for Xamarin.iOS development.

Introducción a Visual Studio 2017Get started with Visual Studio 2017

  1. Para crear un proyecto, inicie Visual Studio 2017 y, en la página de inicio, haga clic en Crear nuevo proyecto... :Launch Visual Studio 2017, and on the start page click Create new project... to create a new project:

    nuevo proyecto

  2. En el cuadro de diálogo Nuevo proyecto, haga clic en Multiplataforma, seleccione la plantilla Aplicación móvil (Xamarin.Forms) , establezca el nombre en Notes, elija una ubicación adecuada para el proyecto y haga clic en el botón Aceptar:In the New Project dialog, click Cross-Platform, select the Mobile App (Xamarin.Forms) template, set the Name to Notes, choose a suitable location for the project and click the OK button:

    Plantillas de proyectos multiplataforma

    Importante

    Los fragmentos de XAML y C# en este inicio rápido requieren que la solución se denomine Notes.The C# and XAML snippets in this quickstart requires that the solution is named Notes. El uso de otro nombre dará como resultado errores de compilación al copiar el código de este inicio rápido en la solución.Using a different name will result in build errors when you copy code from this quickstart into the solution.

  3. En el cuadro de diálogo New Cross Platform App (Nueva aplicación multiplataforma), haga clic en Aplicación en blanco, seleccione .NET Standard como estrategia de código de uso compartido y haga clic en el botón Aceptar:In the New Cross Platform App dialog, click Blank App, select .NET Standard as the Code Sharing Strategy, and click the OK button:

    Nueva aplicación multiplataforma

    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.For more information about the .NET Standard library that gets created, see Anatomy of a Xamarin.Forms application in the Xamarin.Forms Quickstart Deep Dive.

  4. En el Explorador de soluciones, en el proyecto Notes, haga doble clic en MainPage.xaml para abrirlo:In Solution Explorer, in the Notes project, double-click MainPage.xaml to open it:

    Abrir MainPage.xaml

  5. En MainPage.xaml, quite todo el código de plantilla y sustitúyalo por el siguiente código:In MainPage.xaml, remove all of the template code and replace it with the following code:

    <?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="Notes.MainPage">
        <StackLayout Margin="10,35,10,10">
            <Label Text="Notes"
                   HorizontalOptions="Center"
                   FontAttributes="Bold" />
            <Editor x:Name="editor"
                    Placeholder="Enter your note"
                    HeightRequest="100" />
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button Text="Save"
                        Clicked="OnSaveButtonClicked" />
                <Button Grid.Column="1"
                        Text="Delete"
                        Clicked="OnDeleteButtonClicked"/>
            </Grid>
        </StackLayout>
    </ContentPage>
    

    Este código define mediante declaración la interfaz de usuario para la página, que consta de una instancia de Label para mostrar texto, una instancia de Editor para entrada de texto y dos instancias de Button que dirigen la aplicación para guardar o eliminar un archivo.This code declaratively defines the user interface for the page, which consists of a Label to display text, an Editor for text input, and two Button instances that direct the application to save or delete a file. Las dos instancias de Button se disponen horizontalmente en Grid, mientras que Label, Editor y Grid se disponen verticalmente en StackLayout.The two Button instances are horizontally laid out in a Grid, with the Label, Editor, and Grid being vertically laid out in a StackLayout. Para obtener más información sobre la creación de la interfaz de usuario, vea Interfaz de usuario en Análisis detallado de inicio rápido de Xamarin.Forms.For more information about creating the user interface, see User interface in the Xamarin.Forms Quickstart Deep Dive.

    Guarde los cambios en MainPage.xaml presionando CTRL+S y cierre el archivo.Save the changes to MainPage.xaml by pressing CTRL+S, and close the file.

  6. En el Explorador de soluciones, en el proyecto Notes, expanda MainPage.xaml y haga doble clic en MainPage.xaml.cs para abrirlo:In Solution Explorer, in the Notes project, expand MainPage.xaml and double-click MainPage.xaml.cs to open it:

    Abrir MainPage.xaml.cs

  7. En MainPage.xaml.cs, quite todo el código de plantilla y sustitúyalo por el siguiente código:In MainPage.xaml.cs, remove all of the template code and replace it with the following code:

    using System;
    using System.IO;
    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class MainPage : ContentPage
        {
            string _fileName = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "notes.txt");
    
            public MainPage()
            {
                InitializeComponent();
    
                if (File.Exists(_fileName))
                {
                    editor.Text = File.ReadAllText(_fileName);
                }
            }
    
            void OnSaveButtonClicked(object sender, EventArgs e)
            {
                File.WriteAllText(_fileName, editor.Text);
            }
    
            void OnDeleteButtonClicked(object sender, EventArgs e)
            {
                if (File.Exists(_fileName))
                {
                    File.Delete(_fileName);
                }
                editor.Text = string.Empty;
            }
        }
    }
    

    Este código define un campo _fileName, que hace referencia a un archivo denominado notes.txt que almacenará los datos de la nota en la carpeta de datos de la aplicación local para la aplicación.This code defines a _fileName field, which references a file named notes.txt that will store note data in the local application data folder for the application. Cuando se ejecuta el constructor de páginas, el archivo se lee, si existe, y se muestra en el Editor.When the page constructor is executed the file is read, if it exists, and displayed in the Editor. Al presionar el control Button Guardar, se ejecuta el controlador de eventos OnSaveButtonClicked, que guarda el contenido de Editor en el archivo.When the Save Button is pressed the OnSaveButtonClicked event handler is executed, which saves the content of the Editor to the file. Al presionar el control Button Eliminar, se ejecuta el controlador de eventos OnDeleteButtonClicked, que elimina el archivo, siempre que exista, y quita cualquier texto de Editor.When the Delete Button is pressed the OnDeleteButtonClicked event handler is executed, which deletes the file, provided that it exists, and removes any text from the Editor. Para obtener más información sobre la interacción del usuario, vea Respuesta a la interacción del usuario en Análisis detallado de inicio rápido de Xamarin.Forms.For more information about user interaction, see Responding to user interaction in the Xamarin.Forms Quickstart Deep Dive.

    Guarde los cambios en MainPage.xaml.cs presionando CTRL+S y cierre el archivo.Save the changes to MainPage.xaml.cs by pressing CTRL+S, and close the file.

Compilar el tutorial rápidoBuilding the quickstart

  1. En Visual Studio, seleccione el elemento de menú Compilación > Compilar solución (o presione F6).In Visual Studio, select the Build > Build Solution menu item (or press F6). La solución se compilará y aparecerá un mensaje de operación correcta en la barra de estado de Visual Studio:The solution will build and a success message will appear in the Visual Studio status bar:

    Compilación correcta

    Si hay errores, repita los pasos anteriores y corrija los errores hasta que la solución se compile correctamente.If there are errors, repeat the previous steps and correct any mistakes until the solution builds successfully.

  2. En la barra de herramientas de Visual Studio, pulse el botón Iniciar (el botón triangular que parece un botón de reproducción) para iniciar la aplicación en la instancia elegida de Android Emulator:In the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application in your chosen Android emulator:

    Barra de herramientas de Android en Visual Studio

    Notes en Android EmulatorNotes in the Android Emulator

    Escriba una nota y pulse el botón Guardar.Enter a note and press the Save button.

    Para obtener más información sobre cómo se inicia la aplicación en cada plataforma, vea Inicio de la aplicación en cada plataforma en Análisis detallado de inicio rápido de Xamarin.Forms.For more information about how the application is launched on each platform, see Launching the application on each platform in the Xamarin.Forms Quickstart Deep Dive.

    Nota

    Los pasos siguientes solo deben realizarse si se tiene un equipo Mac emparejado que cumpla los requisitos del sistema para el desarrollo de Xamarin.Forms.The following steps should only be carried out if you have a paired Mac that meets the system requirements for Xamarin.Forms development.

  3. En la barra de herramientas de Visual Studio, haga clic con el botón derecho en el proyecto Notes.iOS y seleccione Establecer como proyecto de inicio.In the Visual Studio toolbar, right-click on the Notes.iOS project, and select Set as StartUp Project.

    Establecer iOS como proyecto de inicio

  4. En la barra de herramientas de Visual Studio, pulse el botón Iniciar (el botón triangular que parece un botón de reproducción) para iniciar la aplicación en la instancia elegida de iOS Simulator:In the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application in your chosen iOS remote simulator:

    Barra de herramientas de iOS en Visual Studio

    Notes en el simulador de iOSNotes in the iOS Simulator

    Escriba una nota y pulse el botón Guardar.Enter a note and press the Save button.

    Para obtener más información sobre cómo se inicia la aplicación en cada plataforma, vea Inicio de la aplicación en cada plataforma en Análisis detallado de inicio rápido de Xamarin.Forms.For more information about how the application is launched on each platform, see Launching the application on each platform in the Xamarin.Forms Quickstart Deep Dive.

Requisitos previosPrerequisites

  • Visual Studio para Mac (última versión) con compatibilidad con la plataforma iOS y Android.Visual Studio for Mac (latest release), with iOS and Android platform support installed.
  • Xcode (última versión).Xcode (latest release).
  • Conocimientos de C#.Knowledge of C#.

Para más información sobre estos requisitos previos, vea Instalación de Xamarin.For more information about these prerequisites, see Installing Xamarin.

Introducción a Visual Studio para MacGet started with Visual Studio for Mac

  1. Para crear un proyecto, inicie Visual Studio para Mac y, en la ventana de inicio, haga clic en Nuevo:Launch Visual Studio for Mac, and in the start window click New to create a new project:

    Nueva solución

  2. En el cuadro de diálogo Elija una plantilla para el nuevo proyecto, haga clic en Multiplataforma > Aplicación, seleccione la plantilla Aplicación de Forms en blanco y haga clic en el botón Siguiente:In the Choose a template for your new project dialog, click Multiplatform > App, select the Blank Forms App template, and click the Next button:

    Elegir una plantilla

  3. En el cuadro de diálogo Configurar su nueva aplicación de Forms en blanco, asigne a la nueva aplicación el nombre Notes, asegúrese de que el botón de radio Usar .NET Standard esté seleccionado y haga clic en el botón Siguiente:In the Configure your Blank Forms app dialog, name the new app Notes, ensure that the Use .NET Standard radio button is selected, and click the Next button:

    Configurar la aplicación de Forms

  4. En el cuadro de diálogo Configurar su nueva aplicación de Forms en blanco, deje los nombres de solución y de proyecto establecidos en Notes, elija una ubicación adecuada para el proyecto y haga clic en el botón Crear para crearlo:In the Configure your new Blank Forms app dialog, leave the Solution and Project names set to Notes, choose a suitable location for the project, and click the Create button to create the project:

    Configurar el proyecto de Forms

    Importante

    Los fragmentos de XAML y C# en este inicio rápido requieren que tanto la solución como el proyecto se denominen Notes.The C# and XAML snippets in this quickstart requires that the solution and project are both named Notes. El uso de otro nombre dará como resultado errores de compilación al copiar el código de este inicio rápido en la solución.Using a different name will result in build errors when you copy code from this quickstart into the project.

    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.For more information about the .NET Standard library that gets created, see Anatomy of a Xamarin.Forms application in the Xamarin.Forms Quickstart Deep Dive.

  5. En el Panel de solución, en el proyecto Notes, haga doble clic en MainPage.xaml para abrirlo:In the Solution Pad, in the Notes project, double-click MainPage.xaml to open it:

    MainPage.xaml

  6. En MainPage.xaml, quite todo el código de plantilla y sustitúyalo por el siguiente código:In MainPage.xaml, remove all of the template code and replace it with the following code:

    <?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="Notes.MainPage">
        <StackLayout Margin="10,35,10,10">
            <Label Text="Notes"
                   HorizontalOptions="Center"
                   FontAttributes="Bold" />
            <Editor x:Name="editor"
                    Placeholder="Enter your note"
                    HeightRequest="100" />
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button Text="Save"
                        Clicked="OnSaveButtonClicked" />
                <Button Grid.Column="1"
                        Text="Delete"
                        Clicked="OnDeleteButtonClicked"/>
            </Grid>
        </StackLayout>
    </ContentPage>
    

    Este código define mediante declaración la interfaz de usuario para la página, que consta de una instancia de Label para mostrar texto, una instancia de Editor para entrada de texto y dos instancias de Button que dirigen la aplicación para guardar o eliminar un archivo.This code declaratively defines the user interface for the page, which consists of a Label to display text, an Editor for text input, and two Button instances that direct the application to save or delete a file. Las dos instancias de Button se disponen horizontalmente en Grid, mientras que Label, Editor y Grid se disponen verticalmente en StackLayout.The two Button instances are horizontally laid out in a Grid, with the Label, Editor, and Grid being vertically laid out in a StackLayout. Para obtener más información sobre la creación de la interfaz de usuario, vea Interfaz de usuario en Análisis detallado de inicio rápido de Xamarin.Forms.For more information about creating the user interface, see User interface in the Xamarin.Forms Quickstart Deep Dive.

    Guarde los cambios en MainPage.xaml eligiendo Archivo > Guardar (o presionando ⌘ + S) y cierre el archivo.Save the changes to MainPage.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  7. En el Panel de solución, en el proyecto Notes, expanda MainPage.xaml y haga doble clic en MainPage.xaml.cs para abrirlo:In the Solution Pad, in the Notes project, expand MainPage.xaml and double-click MainPage.xaml.cs to open it:

    MainPage.xaml.cs

  8. En MainPage.xaml.cs, quite todo el código de plantilla y sustitúyalo por el siguiente código:In MainPage.xaml.cs, remove all of the template code and replace it with the following code:

    using System;
    using System.IO;
    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class MainPage : ContentPage
        {
            string _fileName = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "notes.txt");
    
            public MainPage()
            {
                InitializeComponent();
    
                if (File.Exists(_fileName))
                {
                    editor.Text = File.ReadAllText(_fileName);
                }
            }
    
            void OnSaveButtonClicked(object sender, EventArgs e)
            {
                File.WriteAllText(_fileName, editor.Text);
            }
    
            void OnDeleteButtonClicked(object sender, EventArgs e)
            {
                if (File.Exists(_fileName))
                {
                    File.Delete(_fileName);
                }
                editor.Text = string.Empty;
            }
        }
    }
    

    Este código define un campo _fileName, que hace referencia a un archivo denominado notes.txt que almacenará los datos de la nota en la carpeta de datos de la aplicación local para la aplicación.This code defines a _fileName field, which references a file named notes.txt that will store note data in the local application data folder for the application. Cuando se ejecuta el constructor de páginas, el archivo se lee, si existe, y se muestra en el Editor.When the page constructor is executed the file is read, if it exists, and displayed in the Editor. Al presionar el control Button Guardar, se ejecuta el controlador de eventos OnSaveButtonClicked, que guarda el contenido de Editor en el archivo.When the Save Button is pressed the OnSaveButtonClicked event handler is executed, which saves the content of the Editor to the file. Al presionar el control Button Eliminar, se ejecuta el controlador de eventos OnDeleteButtonClicked, que elimina el archivo, siempre que exista, y quita cualquier texto de Editor.When the Delete Button is pressed the OnDeleteButtonClicked event handler is executed, which deletes the file, provided that it exists, and removes any text from the Editor. Para obtener más información sobre la interacción del usuario, vea Respuesta a la interacción del usuario en Análisis detallado de inicio rápido de Xamarin.Forms.For more information about user interaction, see Responding to user interaction in the Xamarin.Forms Quickstart Deep Dive.

    Guarde los cambios en MainPage.xaml.cs eligiendo Archivo > Guardar (o presionando ⌘ + S) y cierre el archivo.Save the changes to MainPage.xaml.cs by choosing File > Save (or by pressing ⌘ + S), and close the file.

Compilación del inicio rápidoBuilding the quickstart

  1. En Visual Studio para Mac, seleccione el elemento de menú Compilación > Compilar todo (o pulse ⌘ + B).In Visual Studio for Mac, select the Build > Build All menu item (or press ⌘ + B). El proyecto se compilará y aparecerá un mensaje de operación correcta en la barra de herramientas de Visual Studio para Mac.The projects will build and a success message will appear in the Visual Studio for Mac toolbar.

    Compilación correcta

    Si hay errores, repita los pasos anteriores y corrija los errores hasta que la solución se compile correctamente.If there are errors, repeat the previous steps and correct any mistakes until the projects build successfully.

  2. En el Panel de solución, seleccione el proyecto Notes.iOS, haga clic con el botón derecho y seleccione Establecer como proyecto de inicio:In the Solution Pad, select the Notes.iOS project, right-click, and select Set As Startup Project:

    Establecer iOS como proyecto de inicio

  3. 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 la instancia elegida de iOS Simulator:In the Visual Studio for Mac toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen iOS Simulator:

    Barra de herramientas de Visual Studio para Mac

    Notes en el simulador de iOSNotes in the iOS Simulator

    Escriba una nota y pulse el botón Guardar.Enter a note and press the Save button.

    Para obtener más información sobre cómo se inicia la aplicación en cada plataforma, vea Inicio de la aplicación en cada plataforma en Análisis detallado de inicio rápido de Xamarin.Forms.For more information about how the application is launched on each platform, see Launching the application on each platform in the Xamarin.Forms Quickstart Deep Dive.

  4. En el Panel de solución, seleccione el proyecto Notes.Droid, haga clic con el botón derecho y seleccione Establecer como proyecto de inicio:In the Solution Pad, select the Notes.Droid project, right-click, and select Set As Startup Project:

    Establecer Android como proyecto de inicio

  5. 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 la instancia elegida de Android Emulator:In the Visual Studio for Mac toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen Android emulator:

    Notes en Android EmulatorNotes in the Android Emulator

    Escriba una nota y pulse el botón Guardar.Enter a note and press the Save button.

    Para obtener más información sobre cómo se inicia la aplicación en cada plataforma, vea Inicio de la aplicación en cada plataforma en Análisis detallado de inicio rápido de Xamarin.Forms.For more information about how the application is launched on each platform, see Launching the application on each platform in the Xamarin.Forms Quickstart Deep Dive.

Pasos siguientesNext steps

En este inicio rápido ha aprendido a:In this quickstart, you learned how to:

  • Crear una aplicación de Xamarin.Forms multiplataforma.Create a cross-platform Xamarin.Forms application.
  • Definir la interfaz de usuario para una página mediante el lenguaje XAML.Define the user interface for a page using eXtensible Application Markup Language (XAML).
  • Interactuar con los elementos de la interfaz de usuario XAML desde el código.Interact with XAML user interface elements from code.

Para convertir esta aplicación de página única en una de varias páginas, continúe con el siguiente inicio rápido.To turn this single page application into a multi-page application, continue to the next quickstart.