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

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

En esta guía de inicio rápido, obtendrá información sobre cómo:In this quickstart, you will learn how to:

  • Cree una aplicación de Xamarin. Forms multiplataforma.Create a cross-platform Xamarin.Forms application.
  • Defina 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).
  • Interactúe con los elementos de la interfaz de usuario XAML desde el código.Interact with XAML user interface elements from code.

En la guía de inicio rápido se explica cómo crear una aplicación de Xamarin. Forms multiplataforma, que le permite escribir una nota y guardarla 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:

Requisitos previosPrerequisites

  • Visual Studio 2019 (versión más reciente), 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.
  • Conocimiento de C#.Knowledge of C#.
  • opta Un equipo Mac emparejado para compilar la aplicación en iOS.(optional) A paired Mac to build the application on iOS.

Para obtener más información acerca de estos requisitos previos, consulte 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 Inicio, haga clic en crear un nuevo proyecto para crear un nuevo proyecto:Launch Visual Studio 2019, and in the start window click Create a new project to create a new project:

  2. En la ventana crear un nuevo proyecto , seleccione móvil en el menú desplegable tipo de proyecto , seleccione la aplicación móvil (plantilla de 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:

  3. En la ventana configurar el nuevo proyecto , establezca el nombre del proyecto en notas, 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:

    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 nueva aplicación multiplataforma , haga clic en aplicación en blancoy haga clic en el botón Aceptar :In the New Cross Platform App dialog, click Blank App, and click the OK button:

    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:

  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 la interfaz de usuario de la página de forma declarativa, que consta Label de un para mostrar texto Editor , un para la entrada de Button texto y dos instancias que dirigen a 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 cómo crear la interfaz de usuario, consulte la interfaz de usuario en la guía 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:

  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 pulsar el botón Guardar Button, 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 pulsar el botón Eliminar Button, 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 responder a la interacción del usuario en la guía 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:

    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:

    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 iniciar la aplicación en cada plataforma en la guía 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.

  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:

    [Notas en el simulador de iOS ![(single-page-images/vs/notes-ios.png " ")]] (single-page-images/vs/notes-ios-large.png#lightbox "Notas en el simulador de iOS")

    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 iniciar la aplicación en cada plataforma en la guía 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.
  • Conocimiento de C#.Knowledge of C#.
  • opta Un equipo Mac emparejado para compilar la aplicación en iOS.(optional) A paired Mac to build the application on iOS.

Para obtener más información acerca de estos requisitos previos, consulte 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. Inicie Visual Studio 2017 y, en la página de inicio, haga clic en crear nuevo proyecto... para crear un nuevo proyecto:Launch Visual Studio 2017, and on the start page click Create new project... to create a new project:

  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:

    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:

    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:

  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 la interfaz de usuario de la página de forma declarativa, que consta Label de un para mostrar texto Editor , un para la entrada de Button texto y dos instancias que dirigen a 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 cómo crear la interfaz de usuario, consulte la interfaz de usuario en la guía 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:

  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 pulsar el botón Guardar Button, 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 pulsar el botón Eliminar Button, 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 responder a la interacción del usuario en la guía 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:

    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:

    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 iniciar la aplicación en cada plataforma en la guía 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.

  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:

    [Notas en el simulador de iOS ![(single-page-images/vs/notes-ios.png " ")]] (single-page-images/vs/notes-ios-large.png#lightbox "Notas en el simulador de iOS")

    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 iniciar la aplicación en cada plataforma en la guía 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 (versión más reciente), con compatibilidad con la plataforma iOS y Android instalada.Visual Studio for Mac (latest release), with iOS and Android platform support installed.
  • Xcode (versión más reciente).Xcode (latest release).
  • Conocimiento de C#.Knowledge of C#.

Para obtener más información acerca de estos requisitos previos, consulte 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. Inicie Visual Studio para Mac y, en la ventana Inicio, haga clic en nuevo para crear un nuevo proyecto:Launch Visual Studio for Mac, and in the start window click New to create a new project:

  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:

  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:

  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:

    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:

  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 la interfaz de usuario de la página de forma declarativa, que consta Label de un para mostrar texto Editor , un para la entrada de Button texto y dos instancias que dirigen a 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 cómo crear la interfaz de usuario, consulte la interfaz de usuario en la guía 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:

  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 pulsar el botón Guardar Button, 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 pulsar el botón Eliminar Button, 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 responder a la interacción del usuario en la guía 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.

    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:

  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:

    [Notas en el simulador de iOS ![(single-page-images/vsmac/notes-ios.png " ")]] (single-page-images/vsmac/notes-ios-large.png#lightbox "Notas en el simulador de iOS")

    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 iniciar la aplicación en cada plataforma en la guía 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:

  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:

    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 iniciar la aplicación en cada plataforma en la guía 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 esta guía de inicio rápido, aprendió a:In this quickstart, you learned how to:

  • Cree una aplicación de Xamarin. Forms multiplataforma.Create a cross-platform Xamarin.Forms application.
  • Defina 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).
  • Interactúe 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 una sola página en una aplicación de varias páginas, continúe con la siguiente guía de inicio rápido.To turn this single page application into a multi-page application, continue to the next quickstart.