Aplicaciones multi plataforma con MVVMCross y Xamarin: Windows Phone 8

Una vez que ya tengas la PCL terminada del artículo anterior, puedes comenzar a crear tu aplicación de Windows Phone. Para eso, puedes agregar un nuevo proyecto de Windows Phone a tu solución (la que ya tienes con la PCL). Para hacer eso, lo que debes es crear un nuevo proyecto Windows Phone. Al hacerlo, si lo hiciste en el mismo proyecto, lo primero que debes hacer es agregar la referencia a la biblioteca de clases portable que acabas de crear.Además de haberlo hecho así, debes agregar la referencia al paquete de NuGet de MVVMCross. Una vez listo, todas las referencias de tu proyecto deben lucir de la siguiente manera.

Elimina los archivos de MainPage.xaml para que tu proyecto completo luzca como en la imagen.

Abre la clase Setup.cs y establece la referencia a la PCL y su clase App dentro del método CreateApp(), lo colocaré como imagen para que puedas notar la diferencia en cuanto a los colores, si usaste los mismos espacios de nombres que en el ejercicio anterior, la sintaxis es la misma.

Abre el archivo App.xaml.cs y ejecuta un nuevo manejador de eventos dentro de Application_Launching, este manejador es para el evento de Navigating y a su vez, este manejador de eventos se encargará de definir la nueva página de inicio sobre escribiendo incluso la que se encuentra dentro de tu archivo de configuración.

private void Application_Launching(object sender, LaunchingEventArgs e)
{
RootFrame.Navigating += RootFrameOnNavigating;
}
 
private void RootFrameOnNavigating(object sender, NavigatingCancelEventArgs args)
{
args.Cancel = true;
RootFrame.Navigating -= RootFrameOnNavigating;
RootFrame.Dispatcher.BeginInvoke(() => { Cirrious.CrossCore.Mvx.Resolve<Cirrious.MvvmCross.ViewModels.IMvxAppStart>().Start(); });
}

Después de eso abre el archivo FirstView.xaml que se encuentra dentro de la carpeta Views. En esa página nota primero que no se genera a partir de una página ordinaria, es decir a partir de una PhoneApplicationPage sino de una MvxPhonePage, esta clase se genera a partir del espacio de nombres views que se encuentra dentro de los ensamblados de clases que agregaste al inicio.

Dentro de esta página solo coloca tres controles, dos cajas de texto y un bloque de texto, si lo haces dentro de un StackPanel para hacerlo lucir más estético entonces tu resultado es como el siguiente.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel>
<TextBox Text="{Binding FirstName, Mode=TwoWay}" />
<TextBox Text="{Binding LastName, Mode=TwoWay}"/>
<TextBlock Text="{Binding FullName, Mode=OneWay}" />
</StackPanel>
</Grid>

Checa el enlazado de datos, los dos primeros corresponden a las dos propiedades que permiten establecer valores, en el caso de la tercera propiedad ve que el modo de lectura es de un solo camino, igual que la propiedad de nombre completo. Ejecuta el código y podrás ver como funciona. Escribe un nombre y un apellido, cuando una de las dos cajas de texto pierda su foco entonces podrás ver que el texto introducido se está replicando en el bloque de texto.

¡Listo! Acabas de terminar con el ejercicio de la aplicación de Windows Phone, ahora es momento de que vayas con los siguientes ejercicios.

Desarrollo de la aplicación Windows Store

Desarrollo de la aplicación Android