Creación de una aplicación de

Xamarin.Forms de una página

 01/04/2019
 Tiempo de lectura: 12 minutos

o

 
o

 
 o

Elija el entorno de desarrollo

Visual Studio 2019 Visual Studio 2017 Visual Studio para Mac
En este artículo
1. Introducción a Visual Studio 2019
2. Pasos siguientes
3. Vínculos relacionados

 Descargar el ejemplo

En este inicio rápido aprenderá a:

 Crear una aplicación de Xamarin.Forms multiplataforma.

 Definir la interfaz de usuario para una página mediante el lenguaje XAML.
 Interactuar con los elementos de la interfaz de usuario XAML desde el
código.

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. A continuación se muestra la aplicación final:
Requisitos previos

 Visual Studio 2019 (última versión), con la carga de trabajo Desarrollo

para dispositivos móviles con .NET instalada.
 Conocimientos de C#.
 (opcional) Un equipo Mac emparejado para compilar la aplicación en iOS.

Para más información sobre estos requisitos previos, vea 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.

Introducción a 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:
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:
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:
  Importante

Los fragmentos de XAML y C# en este inicio rápido requieren que la

solución se denomine 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.

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:
 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.

5. En el Explorador de soluciones, en el proyecto Notes, haga doble clic

en MainPage.xaml para abrirlo:
6. En MainPage.xaml, quite todo el código de plantilla y sustitúyalo por el
siguiente código:

XAMLCopiar
<?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. Las dos instancias
de Button se disponen horizontalmente en Grid, mientras
que Label, Editor y Grid se disponen verticalmente en 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.

Guarde los cambios en MainPage.xaml presionando CTRL+S y cierre el

archivo.

7. En el Explorador de soluciones, en el proyecto Notes,

expanda MainPage.xaml y haga doble clic en MainPage.xaml.cs para
abrirlo:
8. En MainPage.xaml.cs, quite todo el código de plantilla y sustitúyalo por el
siguiente código:

C#Copiar
using System;
using System.IO;
using Xamarin.Forms;

namespace Notes
{
public partial class MainPage : ContentPage
{
string _fileName =
Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalAp
plicationData), "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. Cuando se ejecuta el
constructor de páginas, el archivo se lee, si existe, y se muestra en
el Editor. Al presionar el control Button Guardar, se ejecuta el controlador de
eventos OnSaveButtonClicked, que guarda el contenido de Editor en el
 archivo. 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. 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.

Guarde los cambios en MainPage.xaml.cs presionando CTRL+S y cierre el

archivo.

Compilar el tutorial rápido

1. En Visual Studio, seleccione el elemento de menú Compilación >

Compilar solución (o presione F6). La solución se compilará y aparecerá
un mensaje de operación correcta en la barra de estado de Visual Studio:

Si hay errores, repita los pasos anteriores y corrija los errores hasta que la
solución se compile correctamente.

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:
 Escriba una nota y pulse el botón Guardar.

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.

 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.

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.
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:
 Escriba una nota y pulse el botón Guardar.

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.

Pasos siguientes
En este inicio rápido ha aprendido a:

 Crear una aplicación de Xamarin.Forms multiplataforma.

 Definir la interfaz de usuario para una página mediante el lenguaje XAML.
 Interactuar con los elementos de la interfaz de usuario XAML desde el
código.

Para convertir esta aplicación de página única en una de varias páginas,

continúe con el siguiente inicio rápido