Aplicaciones multi plataforma con MVVMCross y Xamarin: Windows Store App

En este tercer artículo vamos a hacer lo mismo que en el anterior, pero ahora para Windows 8.1, los pasos esencialmente son los mismos, salvo algunas diferencias en el proyecto. Comienza por crear tu nuevo proyecto y agregar las referencias de MVVMCross en tu proyecto Windows Store.

Agrega después la referencia a la  misma biblioteca de clases que creaste en el primer artículo, si tus proyectos se encuentran dentro de la misma solución entonces podrás hacerlo desde la ventana de Solución en la ventana de Agregar Referencias.

Elimina los archivos de MainPage para que tu proyecto de Windows Store App sea igual en apariencia como la siguiente imagen.

Ya que tu proyecto luce igual a la imagen anterior entonces abre primero tu archivo Setup.cs y configura el método CreateApp para apuntar a la biblioteca de clases portable.

protected override IMvxApplication CreateApp()
{
return new FirstDemoPCL.App();
}

Después de eso, abre el archivo App.xaml.cs y modifícalo para que ejecute una nueva página durante su arranque. El código original es el siguiente.

if (rootFrame.Content == null)
{
// When the navigation stack isn't restored navigate to the first page,
// configuring the new page by passing required information as a navigation
// parameter
rootFrame.Navigate(typeof(MainPage), e.Arguments);
}

Y lo debes reemplazar por este.

if (rootFrame.Content == null)
{
// When the navigation stack isn't restored navigate to the first page,
// configuring the new page by passing required information as a navigation
// parameter
var setup = new Setup(rootFrame);
setup.Initialize();
 
var start = Cirrious.CrossCore.Mvx.Resolve<Cirrious.MvvmCross.ViewModels.IMvxAppStart>();
start.Start();
}

Después de eso, ve a la carpeta de Views y abre FirstView.xaml en donde debes colocar algunos elementos para su interfaz, el enlazado de datos es el mismo que en el proyecto de Windows Phone así que no te aburriré escribiéndolo de nuevo.

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<StackPanel>
<TextBox Text="{Binding FirstName, Mode=TwoWay}" />
<TextBox Text="{Binding LastName, Mode=TwoWay}"/>
<TextBlock Text="{Binding FullName, Mode=OneWay}" />
</StackPanel>
</Grid>

¡Listo! Ya tienes la aplicación terminada, ejecútala en tu simulador o tu máquina y verás el resultado. Lo mismo que en el ejercicio anterior, un cambio y actualización de información cuando alguna de tus dos cajas de texto pierda el foco.

Después de hacer estas pruebas, puedes leer ahora los otros artículos.

Desarrollo de la aplicación Windows Phone

Desarrollo de la aplicación Android