Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

Laboratorio
Trabajando con datos: Vistas de Lista y Enlace de datos
Version: 2.0.0

Pgina 1 de 27

http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

CONTENIDO INTRODUCCIN EJERCICIO 1: CREAR UN PROYECTO METRO

Tarea 1: Crear el proyecto Tarea 2: Familiarizarse con el proyecto Tarea 3: Personalizar la pgina de inicio Tarea 4: Personalizar la aplicacin

EJERCICIO 2: CARGAR DATOS DE RECETAS

Tarea 1: Importar los datos de las Recetas Tarea 2: Cargar los datos de las recetas Tarea 3: Probar el resultado

EJERCICIO 3: PERSONALIZAR LA INTERFAZ DE USUARIO

Tarea 1: Modificar la pgina de inicio Tarea 2: Modificar la pgina de detalle del grupo Tarea 3: Modificar la pgina de detalle del elemento
RESUMEN

Pgina 2 de 27

http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

Introduccion
Windows 8 ofrece una nueva plataforma de desarrollo que permite a los desarrolladores escribir aplicaciones que pueden utilizarse de manera similar tanto en computadoras de escritorio, Tabletas u otros dispositivos. Las aplicaciones desarrolladas en esta nueva plataforma son conocidas como Aplicaciones estilo Metro o en ingls Metro-Style apps. Las aplicaciones que se ejecutan sobre esta nueva plataforma, pueden ser escritas con HTML y JavaScript o con XAML y C#, VB o C++. El modelo de programacin HTML permite a los desarrolladores familiarizados con HTML5 y JavaScript aplicar sus conocimientos para construir aplicaciones estilo Metro. De la misma forma, el modelo de programacin XAML proporciona un ambiente familiar para los desarrolladores de Silverlight y Windows Presentation Foundation que pueden ahora aplicar sus conocimientos para construir aplicaciones estilo Metro. Tanto los desarrolladores de HTML como los desarrolladores de XAML, pueden ofertar sus aplicaciones estilo Metro a travs del Windows Store. Las aplicaciones estilo Metro responden a las APIs proporcionadas por el Windows Runtime tambin conocido como WinRT. WinRT proporciona miles de clases agrupadas dentro de ms de 100 espacios de nombres y permiten realizar prcticamente cualquier cosa, desde compartir contenido con otras aplicaciones hasta acceder al Windows Storage. Para las aplicaciones desarrolladas con HTML y JavaScript, las APIs del WinRT son complementadas por La Biblioteca de Microsoft Windows para JavaScript, conocida en ingls como Microsoft Windows Library for JavaScript o simplemente WinJS. Para las aplicaciones desarrolladas en XAML y C#, VB o C++, las APIs del WinRT son complementadas por las APIs .NET para el estilo Metro, conocidas en ingls como .NET APIs for Metro style. En este laboratorio, utilizars XAML y C# para crear una aplicacin llamada Contoso CookBook. En los siguientes laboratorios, continuaras desarrollando la aplicacin para obtener finalmente una aplicacin Metro que est lista para ser publicada hacia el Windows Store.

Pgina 3 de 27

http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

Objetivos
Crear un nuevo proyecto Metro utilizando las plantillas de Visual Studio Entender la estructura del proyecto y los archivos incluidos Personalizar la aplicacin con imgenes que la individualicen Utilizar la clase HttpClient para obtener los datos de las recetas desde Windows Azure Consumir los datos obtenidos y enlazarlos a un control GridView Utilizar plantillas de datos para personalizar la forma en que los datos son presentados por el control GridView Modificar el cdigo y el marcado generado por Visual Studio para personalizar la interfaz de usuario de la aplicacin

Requisitos
Para la realizacin de este laboratorio es necesario contar con un equipo de desarrollo con el siguiente software instalado: Microsoft Windows 8 Release Preview Microsoft Visual Studio 2012 RC

Puede utilizarse una mquina virtual como equipo de desarrollo.

Tiempo estimado para completar este laboratorio: 60 minutos.

Pgina 4 de 27

http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

Ejercicio 1: Crear un proyecto Metro

En este primer ejercicio crears una nueva solucin en Visual Studio conteniendo un proyecto C# Windows Metro Style Grid Application. Posteriormente examinars los archivos generados y realizars modificaciones sencillas para personalizar la interfaz de usuario de la aplicacin. Tarea 1: Crear el proyecto El primer paso es crear un nuevo proyecto para hospedar el cdigo y los recursos que formarn parte de la aplicacin Contoso Cookbook as como para examinar los elementos que Visual Studio incluye en el proyecto creado. 1. Inicia Visual Studio y utiliza el comando File - New Project para crear un nuevo proyecto Visual C# llamado ContosoCookbook. Debes asegurarte de seleccionar Windows Metro Style desde la lista de plantillas Visual C# y de seleccionar Grid App (XAML) desde la lista de tipos de plantillas como se muestra en la siguiente figura.

Pgina 5 de 27

http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

2. Selecciona Start Debugging desde el men Debug o simplemente presiona F5 para lanzar la aplicacin en modo de depuracin. La aplicacin iniciar y se mostrar la pantalla de inicio de la aplicacin similar a la siguiente.

Esta pgina tambin es conocida como Home Page o Start Page. 3. Tomate un tiempo para jugar con la aplicacin. Utiliza el mouse (o tu dedo si tienes una pantalla sensible al tacto - touch screen -) para desplazar la pantalla horizontalmente. Nota: La cuadricula y el desplazamiento horizontal es proporcionado por el control GridView que es uno de los muchos controles proporcionados por el WinRT en el espacio de nombres Windows.UI.Xaml.Controls para construir ricas interfaces de usuario.

4. Examina que sucede cuando tocas o das clic en los elementos del GridView. Por ejemplo, da clic en el elemento Item Title: 1. Se mostrar la pgina de detalle del elemento.

Pgina 6 de 27

http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

Nota: Al estar en la pgina de detalle del elemento, puedes desplazarte horizontalmente para ver todos los elementos del grupo. Si estas utilizando un Mouse, puedes dar clic sobre las flechas que aparecen en los extremos derecho e izquierdo de la pantalla. Ese desplazamiento es proporcionado por un control FlipView, el cual, es otro de los controles que aparecen en Windows.UI.Xaml.Controls.

5. Regresa a la pgina de inicio de la aplicacin dando clic en el botn de regreso ubicado en la parte superior izquierda de la pantalla.

Pgina 7 de 27

http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

6.

Da clic sobre el ttulo Group Title: 1 debajo del titulo ContosoCookbook.

Se muestra ahora la imagen de la pgina de detalle del grupo similar a la siguiente.

7. Regresa a Visual Studio (puedes presionar la tecla Windows y la tecla D simultneamente para ir al modo Desktop de Windows 8). Selecciona Stop Debugging desde el men Debug para detener la aplicacin.

Tarea 2: Familiarizarse con el proyecto Visual Studio crea varios archivos al momento de crear el proyecto. Especficamente, crea varias pginas XAML. Tambin incluye lgica para navegar entre pginas y datos de ejemplo. Para implementar la aplicacin Contoso Cookbook debemos trabajar con lo que Visual Studio ha Pgina 8 de 27 http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

generado. Tmate un momento para familiarizarte con la estructura del proyecto y con los recursos creados por Visual Studio. 1. En la ventana Solution Explorer, observa el contenido del folder raz del proyecto. Ah podrs encontrar 4 archivos clave con el cdigo detrs (code-behind) de dichos archivos: App.xaml. Este archivo representa a la aplicacin y sus recursos. GroupDetailPage.xaml. Este archivo representa la pgina de detalle de un grupo. GroupedItemsPage.xaml. Este archivo representa la pgina de inicio de la aplicacin. ItemDetailPage.xaml. Este archivo representa la pgina de detalle de un elemento. 2. Examina el folder Assets del proyecto, ah encontrars imgenes utilizadas para personalizar la aplicacin. 3. Examina el folder Common del proyecto. Entre los archivos que podrs encontrar est el archivo BooleanToVisibilityConverter.cs el cual contiene una clase que implementa la Interface IValueConverter para convertir los valores booleanos False y True en Visibility.Collapsed y Visibility.Visible respectivamente. Ah mismo podrs encontrar el archivo StandardStyles.xaml que contiene recursos XAML utilizados para aplicar estilos a la aplicacin. 4. Examina el contenido del folder DataModel, ah encontrars un archivo llamado SampleDataSource.cs conteniendo clases para representar datos as como datos de ejemplo.

Tarea 3: Personalizar la pgina de inicio Actualmente el nombre del proyecto ContosoCookook aparece en la parte superior de la pgina de inicio. Lo que haremos es modificar ese texto para que se muestre Contoso Cookook. 1. Abre la pgina App.xaml en Visual Studio 2. Busca el recurso string llamado AppName y cambia su valor de ContosoCookook a Contoso Cookook como se muestra a continuacin:

3. Presiona F5 para lanzar la aplicacin y confirma que el texto del ttulo al inicio de la pgina de inicio ha cambiado.

Pgina 9 de 27

http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

4. Regresa a Visual Studio y detn la aplicacin utilizando el comando Debug/Stop Debugging.

Tarea 4: Personalizar la aplicacin Si vas a la pantalla de inicio de la interfaz Metro, podrs notar que aparece un mosaico (Tile) ContosoCookbook. Ese mosaico es el mosaico primario de la aplicacin y es creado normalmente cuando la aplicacin es instalada. En nuestro caso fue creado la primera vez que fue ejecutada la aplicacin desde Visual Studio. La imagen en el mosaico es tomada del archivo Logo.png dentro del folder Assets.

En esta tarea remplazars el logo que Visual Studio ha generado con uno propio. Al mismo tiempo remplazaras las otras imgenes para personalizar la aplicacin y finalizaras la personalizacin modificando el Manifiesto de la aplicacin. 1. En la pantalla de inicio de la interfaz Metro, da clic con el botn derecho del mouse sobre el mosaico de la aplicacin ContosoCookbook y selecciona Uninstall para desinstalar la aplicacin y eliminar el mosaico. Pgina 10 de 27 http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

2. Regresa a Visual Studio y da clic con el botn derecho del mouse sobre el folder Assets. Selecciona la opcin Add - Existing Item para importar los archivos Logo.png, SmallLogo.png, SplashScreen.png, Storelogo.png y WideLogo.png desde el folder labs\images que acompaan a este documento. Cuando te sea preguntado, permite que los archivos remplacen los archivos existentes con el mismo nombre. 3. En la ventana Solution Explorer da doble clic al archivo package.appxmanifest para abrir el manifiesto de la aplicacin. Nota: El manifiesto de la aplicacin contiene metadata relacionada con la aplicacin estilo Metro (Metro-style app) y es incrustada en cada aplicacin que construyas. En tiempo de ejecucin, el manifiesto le dice a Windows 8 todo lo que necesita saber acerca de la aplicacin incluyendo el nombre de la aplicacin, el publicador y las capacidades que la aplicacin requiere incluyendo el acceso a cmaras Web, micrfonos, Internet y elementos del sistema de archivos especficamente, las bibliotecas de los documentos del usuario, msica y videos.

4. Modifica el nombre a mostrar de la aplicacin por Contoso Cookbook y su descripcin por Contoso Cookbook application. Escribe tambin Assets\WideLogo.png en el cuadro de texto Wide logo para proporcionar a la aplicacin un mosaico amplio.

Pgina 11 de 27

http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

5. Presiona F5 para lanzar la aplicacin 6. Observa el nuevo splash screen (la pantalla que se muestra brevemente conforme la aplicacin se abre).

7. Dirgete hacia la pantalla de inicio de Windows 8 y confirma que contiene un mosaico similar al siguiente.

Pgina 12 de 27

http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

Nota: Si prefieres un mosaico cuadrado, haz clic con el botn derecho al mosaico (o en un monitor tctil arrastra el mosaico ligeramente hacia abajo y sultalo) y haz clic en Smaller de la barra de aplicacin.

El mosaico se mostrar ahora cuadrado.

8. Regresa a Visual Studio y detn la ejecucin.

Pgina 13 de 27

http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

Ejercicio 2: Cargar datos de recetas

El proyecto actualmente incluye datos de ejemplo pero desears remplazarlos con datos propios. En este ejercicio remplazaras los datos de ejemplo con datos reales de recetas as como de sus imgenes. Tarea 1: Importar los datos de las Recetas El primer paso es remplazar las clases de datos de ejemplo que Visual Studio ha creado con clases de datos de recetas. 1. En la ventana Solution Explorer, haz clic con el botn derecho del Mouse sobre el folder DataModel y utiliza el comando Add Existing Item para importar el archivo RecipeDataSource.cs localizado dentro del folder labs\data que acompaa a este documento. Puedes tambin copiarlo arrastrando el archivo desde el Windows Explorer hacia el folder DataModel en la ventana Solution Explorer.

Nota: Visual Studio proporciona un archivo llamado SampleDataSource.cs que contiene clases de datos llamadas SampleDataCommon, SampleDataItem, SampleDataGroup, y SampleDataSource. RecipeDataSource.cs contiene versiones de esas mismas clases, adaptadas a los datos de recetas: RecipeDataCommon, RecipeDataItem, RecipeDataGroup, y RecipeDataSource. A diferencia de SampleDataSource, la cual incluye datos de ejemplo por cdigo, RecipeDataSource contiene los mtodos llamados LoadLocalDataAsync y LoadRemoteDataAsync los cuales cargan los datos de las recetas desde archivos que importars en la siguiente tarea o desde Azure. Tambin incluye todo el cdigo Windows.Data.Json necesario para convertir los datos de recetas que se encuentran en formato JSON y cargarlos en instancias de RecipeDataItem y RecipeDataGroup. Tmate el tiempo necesario para examinar el contenido del archivo RecipeDataSource.cs para entender la forma en que carga y consume los datos. En particular, examina el mtodo LoadRemoteDataAsync el cual utiliza la clase HttpClient de .NET para cargar los datos de las recetas desde la nube.

2. Abre el archivo GroupdedItemsPage.xaml.cs y cambia todas las referencias de SampleDataSource hacia RecipeDataSource, todas las referencias de SampleDataGroup hacia RecipeDataGroup y todas las referencias de SampleDataItem hacia RecipeDataItem. 3. Realiza lo mismo en el archivo GroupDetailPage.xaml.cs. Pgina 14 de 27 http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

4. Realiza lo mismo con el archivo ItemDetailPage.xaml.cs.

Tarea 2: Cargar los datos de las recetas El siguiente paso es importar las imgenes de las recetas y modificar la aplicacin para cargar los datos de las recetas. 1. Crea un nuevo folder llamado Data en el proyecto ContosoCookbook. Puedes realizar esa accin dando clic con el botn derecho del Mouse sobre el proyecto dentro de la ventana Solution Explorer y seleccionando la opcin Add New Folder. 2. Haz clic con el botn derecho de Mouse sobre la carpeta Data y utiliza el comando Add Existing Item para importar el archivo Recipes.txt desde el folder labs\data que acompaa a este documento. Nota: Si examinas el archivo Recipes.txt, observars que contiene datos codificados en formato JSON denotando recetas y grupos de recetas. 3. Agregar un folder llamado Images al proyecto. 4. Copia los folders llamados chinese, french, german, indian, italian, y mexican (incluyendo sus contenidos) desde el folder labs\images que acompaa a este documento hacia el directorio images del proyecto. Es importante que los coloques en este directorio ya que los URLs de las imgenes dentro del archivo Recipes.txt asumen que ah estn colocadas las imgenes. Nota: La manera ms fcil de importar los archivos es arrastrndolos desde el Explorador de Windows hacia el directorio images de la ventana Solution Explorer de Visual Studio.

5. Abre el archivo App.xaml.cs y agrega la siguiente sentencia using al inicio.

6.

Ahora agrega el siguiente cdigo al mtodo OnLaunched justo despus del primer if:

Pgina 15 de 27

http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

Nota: RecipeDataSource.LoadLocalDataAsync lee los datos de las recetas en formato JSON desde el archivo Recipes.txt que importaste previamente. Los URLs de las imgenes que aparecen en el archivo Recipes.txt se refieren a imgenes dentro del folder images del Proyecto. Si lo prefieres, puedes descargar los datos de las recetas desde Windows Azure remplazando la llamada de RecipeDataSource.LoadLocalDataAsync por la llamada a RecipeDataSource.LoadRemoteDataAsync.

Tarea 3: Probar el resultado Ahora es tiempo de ejecutar la aplicacin y ver como Contoso Cookbook ha cambiado. 1. Presiona F5 para ejecutar la aplicacin y verifica que la pgina de inicio se muestra como la siguiente imagen.

Pgina 16 de 27

http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

2. Regresa a Visual Studio y detn la aplicacin.

Pgina 17 de 27

http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

Ejercicio 3: Personalizar la interfaz de usuario

Esto es un buen inicio considerando que solo hemos escrito algunas lneas de cdigo. Ahora necesitamos personalizar la interfaz de usuario y amoldarla a nuestro modelo de datos. En este ejercicio, modificars la pgina de inicio, la pgina de detalle de elemento y la pgina de detalle del grupo para mejorar la apariencia de la aplicacin Contoso Cookbook.

Tarea 1: Modificar la pgina de inicio Empecemos modificando la pgina de inicio para mejorar la apariencia de los elementos receta. 1. Abre el archivo StandardStyles.xaml localizado en el folder Common del proyecto. 2. Busca el elemento DataTemplate cuyo nombre es Standard250x250ItemTemplate. Esta es la plantilla de datos utilizada para mostrar los elementos de las recetas en la pgina de inicio. 3. Elimina el TextBlock del elemento DataTemplate (el TextBlock cuya propiedad Text esta enlazada a Subtitle) ya que la clase RecipeDataItem no tiene una propiedad Subtitle. 4. En la misma plantilla, cambia el ancho y alto del Grid a 320 por 240 para mantener la relacin de tamao de las imgenes de las recetas de manera proporcional. Tambin cambia la altura del TextBlock restante de 60 a 48 para decrementar la altura del rea parcialmente transparente sobrepuesta en la parte inferior de cada elemento (la parte negra parcialmente transparente en la que aparecen los ttulos de las recetas).

Pgina 18 de 27

http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

Cambia tambin la propiedad enlazada a la propiedad Text del TextBlock de Title por ShortTitle. El cdigo debe ser similar al siguiente:

5. Ahora presiona F5 para ejecutar la aplicacin. Verifica que los elementos en la pgina de inicio se muestren como en la siguiente imagen:

Pgina 19 de 27

http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

Se puede notar la diferencia en el aspecto del tamao de la imagen que ahora es proporcional en la altura y el ancho. Adems se puede notar la disminucin de la parte sobresaliente.

6. Regresa a Visual Studio y detn la ejecucin de la aplicacin.

Tarea 2: Modificar la pgina de detalle del grupo Pgina 20 de 27 http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

Hasta este momento, has modificado la pgina de inicio para mejorar la apariencia de la aplicacin pero tambin necesitas modificar la pgina de detalle del grupo. En esta tarea, trabajars con la pgina de detalle del grupo para mejorar la presentacin del detalle del grupo. 1. Inicia la aplicacin nuevamente y da clic en el titulo Chinese de la parte superior izquierda de la pantalla para navegar a la pgina de detalle del grupo que muestra las recetas chinas. Los cambios que realizaremos aqu son mnimos. Acortaremos el espacio entre el nombre del grupo Chinese y la imagen debajo de l. Remplazaremos los ttulos de las recetas con ttulos cortos y agregaremos el tiempo de preparacin de cada receta. 2. Regresa a Visual Studio y detn la ejecucin. 3. Abre el archivo GroupDetailPage.xaml y busca el elemento <GridView.Header>. Elimina el primer TextBlock. En el elemento Image remplaza Height=400 por Width=480 y cambia el margen superior de 0 a 10. El cdigo debe ser similar al siguiente:

4. Regresa al archivo StandardStyles.xaml y busca el elemento DataTemplate cuyo nombre es Standard500x130ItemTemplate. Esta es la plantilla de datos utilizada para mostrar los elementos de la receta en la pgina de detalle del grupo. 5. Cambia el ancho del Grid dentro de la plantilla de datos de 480 a 360. 6. Elimina el atributo Width=110 del elemento Border dentro de la plantilla para mantener el tamao proporcional de las imgenes de las recetas. 7. Elimina los dos TextBlock cuya propiedad Text esta enlazada a las propiedades Subtitle y Description de la fuente de datos respectivamente. 8. En el TextBlock restante, cambia la propiedad enlazada a la propiedad Text de Title a ShortTitle. 9. Debajo del elemento TextBlock, agrega las siguientes sentencias para incluir el tiempo de preparacin debajo del ttulo de la receta.

Pgina 21 de 27

http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

10. Despus de realizar los cambios anteriores, el elemento DataTemplate ser similar a lo siguiente:

Pgina 22 de 27

http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

11. Inicia la aplicacin y selecciona nuevamente Chinese. Verifica que la pgina de detalle del grupo sea similar a la siguiente:

12. Regresa a Visual Studio y detn la aplicacin.

Tarea 3: Modificar la pgina de detalle del elemento La tarea final de la creacin de una interfaz de usuario bsica para la aplicacin es modificar la pgina de detalle del elemento para mostrar ms informacin de las recetas incluyendo instrucciones de coccin y los ingredientes. 1. Ejecuta la aplicacin y selecciona una de las recetas. Claramente puede notarse que necesitaremos realizar ms trabajo en la pgina de detalle de la receta.

Pgina 23 de 27

http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

2. Regresa a Visual Studio y detn la ejecucin. 3. Haz clic sobre el folder en la ventana Solution Explorer y utiliza el comando Add New Item para agregar una nueva clase al proyecto. Nombra el archivo como ListConverter.cs. 4. Agrega las siguientes sentencias using:

5. Modifica la clase ListConverter para implementar la Interface IValueConverter.

6. Haz clic con el botn derecho del Mouse sobre el tipo IValueConverter y selecciona la opcin Implement Interface - Implement Interface.

7. Remplaza el contenido del mtodo Convert por el siguiente:

Pgina 24 de 27

http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

Nota: ListConverter es un convertidor de valor que convierte un arreglo de cadenas a una simple cadena conteniendo saltos de lneas. Esto lo necesitamos porque enlazaremos la propiedad Text de un TextBlock con un arreglo de cadenas y eso requiere de un convertidor del valor.

8. Abre el archivo itemDetailPage.xaml y agrega las siguientes sentencias a la seccin <Page.Resources> cerca del inicio del archivo para declarar una instancia de ListConverter.

9. Desplzate hacia abajo en el archivo itemDetailPage.xaml y busca el elemento FlipView cuyo nombre es flipView. 10. Remplaza el elemento DataTemplate dentro del elemento FlipView con el contenido del archivo DataTemplate.txt ubicado en el directorio labs\data que acompaa a este documento. Nota: La nueva plantilla de datos muestra recetas utilizando un formato de 3 columnas. El nombre de la receta, la imagen y tiempo de preparacin aparecen en la columna 1, una lista de ingredientes aparece en la columna 2 y las instrucciones de preparacin aparecen en la columna 3.

Pgina 25 de 27

http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

11. Ahora ejecuta la aplicacin nuevamente. Selecciona Fried Dumpling y verifica que la pgina de detalle del elemento sea similar a la siguiente:

12. Regresa a Visual Studio y detn la aplicacin.

Pgina 26 de 27

http://ticapacitacion.com

Desarrollo de Apps para Windows 8

Trabajando con datos: Vistas de Lista y Enlace de datos

Resumen
En este laboratorio creaste un nuevo proyecto Metro Style Grid App en Visual Studio, remplazaste los datos de ejemplo con datos reales, remplazaste las imgenes predeterminadas de la aplicacin con imgenes propias y personalizaste la interfaz de usuario modificando algunos de los archivos XAML proporcionados por Visual Studio. Por otra parte, tuviste la oportunidad de conocer la estructura de un proyecto Metro y la forma en que se relacionan cada uno de sus elementos. Aprendiste tambin como System.Net.Http.HttpClient puede ser utilizado para cargar datos de una fuente remota y cmo los datos pueden ser enlazados a un control ListView para mostrar la informacin en la pantalla y cmo las clases Windows.Data.Json del WinRT pueden ser utilizadas para consumir datos JSON en C#. Al modificar las plantillas de datos, personalizaste la forma en que los datos de las recetas y los grupos de recetas son presentados al usuario. Esto es un gran inicio, pero hay mucho por hacer para que la aplicacin Contoso Cookbook sea una aplicacin Metro de primera clase. La jornada contina en el siguiente laboratorio.

Pgina 27 de 27

http://ticapacitacion.com