Jorge Serrano - MVP Visual Developer - Visual Basic

Barras de botones o barras de aplicación (II)

Estilos a usar en los controles de la barra de aplicación

Los estilos utilizados en este ejemplo corresponden con los estilos que Microsoft nos ofrece y que nos simplifica el trabajo.

Situándonos en el Explorador de Soluciones y en nuestro proyecto Sample4, encontraremos dentro de la carpeta Common un fichero de nombre StandardStyles.xaml.

Este fichero contiene los estilos con los que podemos trabajar.

Si observamos el código XAML, veremos que por ejemplo para el control Button denominado Editar, utilizamos un estilo EditAppBarButtonStyle.

Como digo, este estilo no lo hemos creado, y hemos utilizado uno que Microsoft nos ha dado y que encontramos en el fichero de estilos mencionado anteriormente, StandardStyles.xaml.

        1: <Style x:Key="EditAppBarButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}">

       2:         <Setter Property="AutomationProperties.AutomationId" Value="EditAppBarButton"/>

       3:         <Setter Property="AutomationProperties.Name" Value="Edit"/>

       4:         <Setter Property="Content" Value="&#xE104;"/>

       5: </Style>

Si nos fijamos bien en este código XAML, éste estilo utiliza a su vez el estilo AppBarButtonStyle que es un estilo genérico de comportamiento de un botón en la barra de botones de la aplicación.

Aquí también, encontramos algo que nos puede interesar.

Es la propiedad AutomationProperties.Name y que por defecto, tiene un valor Value a Edit.

También tenemos otra propiedad no menos interesante, de nombre Content y que tiene valor Value a .

Si quisiéramos cambiar el valor concreto para un idioma y otro distinto para otro idioma, deberíamos empezar a jugar con la localización de nuestra aplicación en Content.

Nota: Ver las entradas sobre localización que tratan la internacionalización de nuestras aplicaciones.

Es interesante ver que la propiedad Content corresponde con un código de escritura, ya que se utiliza una fuente de letra que encontraremos en el estilo AppBarButtonStyle.

Es el Setter siguiente:

       1: <Setter Property="FontFamily" Value="Segoe UI Symbol"/>

Y es que en Metro, podemos hacer uso de la fuente de letra Segoe UI Symbol.

Una fuente de letra Metro con códigos que corresponden con iconos ya prediseñados para ser utilizados en nuestras aplicaciones.

Un ejemplo de uso de esta fuente de letra y un código de la misma sería:

       1: <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

       2:         <Canvas>

       3:             <TextBlock Margin="200,200,0,0" FontFamily="Segoe UI Symbol" 

       4:                        FontSize="20" Text="Fotos &#xE114;" />

       5:         </Canvas>

       6: </Grid>

He incluso si quisiéramos aprovechar lo que Microsoft nos ofrece, podríamos crear un botón fuera de la propia barra de botones rizando el rizo de la siguiente manera:

       1: <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

       2:         <Canvas>

       3:             <Button Style="{StaticResource AppBarButtonStyle}"  

       4:                     Margin="200,200,0,0" FontFamily="Segoe UI Symbol" 

       5:                     FontSize="20" Content="&#xE114;" />            

       6:         </Canvas>

       7: </Grid>

No voy a descubrir ahora la bondad de los estilos, pero como podemos observar, podemos sacar mucho provecho de todo esto y en concreto de los estilos que encontraremos por defecto en el fichero StandardStyles.xaml.

Agregando eventos a un botón de la barra de aplicación

Como viene siendo habitual, la forma de agregar un evento a un botón de la barra de aplicación no difiere en nada con la forma estándar o habitual de hacerlo dentro del código XAML.

Imaginemos uno de los botones de la barra de aplicación. Bastará con indicarle el evento Click por ejemplo y asignarle el código del evento propiamente dicho.

       1: <Button x:Name="Edit" Style="{StaticResource EditAppBarButtonStyle}" 

       2:         Tag="Editar" Click="Edit_Click_1" />

Dentro del código del evento en C# para el caso de MainPage.xaml.cs, escribiremos las acciones correspondientes.

Agregando otros controles a la barra de aplicación

Ya comenté anteriormente, que en la barra de aplicación podíamos agregar los controles que consideráramos oportunos.

Imaginemos que de acuerdo a la barra de aplicación con la que hemos estado jugando, quisiéramos agregar un control TextBlock en el que mostrásemos la fecha y hora actual.

Podríamos insertar nuestro control en uno de los dos StackPanel que existen, pero vamos a crear un tercer StackPanel para que veamos como quedaría todo.

Nuestro control en código XAML quedaría de la siguiente manera:

       1: <TextBlock x:Name="FechaHora" Text="30/06/2012 11:56:12" FontSize="20" VerticalAlignment="Center" />

Y en nuestra barra de aplicación, los tres bloques o paneles StackPanel quedarían de la siguiente manera:

       1: <Page.BottomAppBar>

       2:         <AppBar x:Name="MenuOptionBottom" IsOpen="True" Opacity="0.75" IsSticky="False" 

       3:                 Background="#055565" VerticalAlignment="Bottom">

       4:             <Grid>

       5:                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">

       6:                     <Button x:Name="Edit" Style="{StaticResource EditAppBarButtonStyle}" Tag="Editar" />

       7:                     <Button x:Name="Refresh" Style="{StaticResource RefreshAppBarButtonStyle}" Tag="Refrescar" />

       8:                     <Button x:Name="Save" Style="{StaticResource SaveAppBarButtonStyle}" Tag="Guardar" />

       9:                 </StackPanel>

      10:                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">

      11:                     <TextBlock x:Name="FechaHora" Text="30/06/2012 11:56:12" FontSize="20" VerticalAlignment="Center" />

      12:                 </StackPanel>

      13:                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">

      14:                     <Button x:Name="Help" Style="{StaticResource HelpAppBarButtonStyle}" Tag="Ayuda" />

      15:                     <Button x:Name="Delete" Style="{StaticResource DeleteAppBarButtonStyle}" Tag="Eliminar" />

      16:                 </StackPanel>

      17:             </Grid>

      18:         </AppBar>

      19: </Page.BottomAppBar>

Nuestra aplicación en ejecución quedaría de la siguiente manera:

Publicado por Jorge Serrano | con no comments

Archivado en: Windows 8,Microsoft .NET Framework 4.5,.NET Framework 4.5,Visual Studio 2012

30/6/2012 16:00

Operaciones básicas de programación con Metro y Windows 8 (XII)

Barras de botones o barras de aplicación

Barras de botones o barras de aplicación (I)

Introducción

El estilo Metro es muy particular.

Cuando digo muy particular me refiero a que Microsoft no nos recomienda salirnos de las guías de diseño establecidas para que una aplicación tenga ese aspecto.

Una de esas guías es la recomendación de usar barras de botones que tienen una determinada forma y que para facilitarnos la vida, ha incorporado Microsoft con un conjunto de iconos por defecto.

Todo lo que sea salirnos de esos márgenes, puede llevar con una posibilidad muy alta, a que nuestra aplicación no pase el corte de certificación.

Pero no nos preocupemos con esos detalles y veamos entonces como crear barras de botones con un aspecto Metro en nuestras aplicaciones.

Creación de nuestra aplicación

La primera acción que acometeremos es la de crear nuestra aplicación Metro.

En nuestro caso, iniciaremos Visual Studio 2012 y crearemos un aplicación como lo hemos venido haciendo en todas las entradas anteriores de esta pequeña guía.

Como nombre de nuestra aplicación, Sample4.

Nuestra aplicación en el Explorador de Soluciones quedará como se indica en la siguiente imagen:

Una vez hecho esto, vamos a ponernos manos a la obra.

Creación de la barra de aplicación

Para crear la barra de aplicación en nuestra página MainPage.xaml, vamos a acceder al código XAML de la misma.

Dentro del código XAML, vamos a centrarnos en una etiqueta Page que podemos variar en el caso de que queramos que nuestra barra de opciones aparezca en la parte superior de la página:

        1: <Page.TopAppBar>

       2: ...

       3: </Page.TopAppBar>

O en la parte inferior de la misma:

       1: <Page.BottomAppBar>

       2: ...

       3: </Page.BottomAppBar>

Dentro de estas etiquetas, prepararemos el menú de opciones de nuestra aplicación.

Dentro de la barra que vamos a crear, podemos insertar otros controles (una caja de texto, un botón,...) pero por defecto, Microsoft nos proporciona un conjunto de opciones que podemos reutilizar estableciendo un aspecto Metro de forma muy ágil.

Aún y así, aunque hayamos declarado la barra de botones superior o inferior a la página, todavía no hemos creado ninguna barra.

Para crear una barra de botones u opciones, vamos a utilizar la etiqueta AppBar:

       1: <AppBar>

       2:    <Grid>

       3:    ...

       4:    </Grid>

       5: </AppBar>

Y dentro de la etiqueta Grid, indicaremos cada uno de los botones o controles que queremos insertar dentro de la barra de botones.

Para hacerlo al revés, voy a mostrar en primer lugar lo que quiero lograr, y posteriormente como lo he hecho.

El aspecto de nuestra aplicación final es el que se muestra en la siguiente imagen:

El cómo lo he llevado a cabo, es creando dos barras de opciones para la página MainPage.xaml.

En el caso de la barra superior, el código XAML quedará de la siguiente manera:

       1: <Page.TopAppBar>

       2:         <AppBar x:Name="MenuOptionTop" IsOpen="True" Opacity="1" IsSticky="True" 

       3:                 Background="#055565" VerticalAlignment="Bottom">

       4:             <Grid>

       5:                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">

       6:                     <Button x:Name="Edit2" Style="{StaticResource EditAppBarButtonStyle}" Tag="Editar" />

       7:                     <Button x:Name="Refresh2" Style="{StaticResource RefreshAppBarButtonStyle}" Tag="Refrescar" />

       8:                     <Button x:Name="Save2" Style="{StaticResource SaveAppBarButtonStyle}" Tag="Guardar" />

       9:                 </StackPanel>

      10:                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">

      11:                     <Button x:Name="Help2" Style="{StaticResource HelpAppBarButtonStyle}" Tag="Ayuda" />

      12:                     <Button x:Name="Delete2" Style="{StaticResource DeleteAppBarButtonStyle}" Tag="Eliminar" />

      13:                 </StackPanel>

      14:             </Grid>

      15:         </AppBar>

      16: </Page.TopAppBar>

En el caso de la barra inferior, el código XAML quedará de una manera prácticamente idéntica:

       1: <Page.BottomAppBar>

       2:         <AppBar x:Name="MenuOptionBottom" IsOpen="True" Opacity="0.75" IsSticky="True" 

       3:                 Background="#055565" VerticalAlignment="Bottom">

       4:             <Grid>

       5:                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">

       6:                     <Button x:Name="Edit" Style="{StaticResource EditAppBarButtonStyle}" Tag="Editar" />

       7:                     <Button x:Name="Refresh" Style="{StaticResource RefreshAppBarButtonStyle}" Tag="Refrescar" />

       8:                     <Button x:Name="Save" Style="{StaticResource SaveAppBarButtonStyle}" Tag="Guardar" />

       9:                 </StackPanel>

      10:                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">

      11:                     <Button x:Name="Help" Style="{StaticResource HelpAppBarButtonStyle}" Tag="Ayuda" />

      12:                     <Button x:Name="Delete" Style="{StaticResource DeleteAppBarButtonStyle}" Tag="Eliminar" />

      13:                 </StackPanel>

      14:             </Grid>

      15:         </AppBar>

      16: </Page.BottomAppBar>

Como son dos barras de botones prácticamente idénticas con la salvedad de que una se muestra en la parte superior de la página y otra en la inferior, vamos a centrarnos en una de ellas, por ejemplo, en la de la barra inferior de la página y que corresponde con la etiqueta Page.BottomAppBar.

Etiqueta AppBar

Si analizamos esta barra de opciones, comprobamos que dentro de esta etiqueta tal y como explicaba anteriormente, nos encontramos con una etiqueta AppBar.

A esta etiqueta la he dado algunas propiedades que considero interesantes a destacar.

En el código XAML lo identificamos con el siguiente código:

       1: <AppBar x:Name="MenuOptionBottom" IsOpen="True" Opacity="0.75" 

       2: IsSticky="False" Background="#055565" VerticalAlignment="Bottom">

La propiedad IsOpen nos indica si la barra de opciones debe estar abierta (visible) True o no False.

La propiedad Opacity nos indica la opacidad del fondo de la barra de botones. Esta propiedad vale 1 por defecto y su valor oscila de 0 a 1, siendo 1 el valor de opacidad más baja o nula, y 0 la de mayor opacidad o transparencia completa.

La propiedad IsSticky a False hará que nuestra barra se desvanezca cuando perdemos el foco.

La propiedad Background corresponde con el código de color de fondo de la barra, y la propiedad VerticalAlignment que he usado, me permite alinear verticalmente el contenido de la barra.

Botones de la barra de aplicación

Dentro de la etiqueta AppBar hemos creado una etiqueta Grid, y dentro de esta última, un par de etiquetas StackPanel.

El objetivo de cada bloque StackPanel es el de hacer que unos botones aparezcan en la parte izquierda de la barra, y otros en la parte derecha de la misma.

En el código XAML, nuestro código queda de la siguiente manera:

       1: <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">

       2:                     <Button x:Name="Edit" Style="{StaticResource EditAppBarButtonStyle}" Tag="Editar" />

       3:                     <Button x:Name="Refresh" Style="{StaticResource RefreshAppBarButtonStyle}" Tag="Refrescar" />

       4:                     <Button x:Name="Save" Style="{StaticResource SaveAppBarButtonStyle}" Tag="Guardar" />

       5: </StackPanel>

       6: <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">

       7:                     <Button x:Name="Help" Style="{StaticResource HelpAppBarButtonStyle}" Tag="Ayuda" />

       8:                     <Button x:Name="Delete" Style="{StaticResource DeleteAppBarButtonStyle}" Tag="Eliminar" />

       9: </StackPanel>

Como podemos apreciar, hemos creado dos bloques o paneles (StackPanel) dentro de nuestra barra de botones.

La propiedad Orientation nos permite indicar la orientación de nuestra barra de botones. En este caso, Horizontal.

De igual manera, aquí podemos alinear horizontalmente cada panel. De hecho, el primero de ellos lo hemos orientado a la izquierda y el segundo a la derecha.

Esto lo logramos con la propiedad HorizontalAlignment, dándole el valor que consideremos oportuno. Left o Right. Hay otros dos posibles valores Center o Stretch.

Igualmente, podríamos utilizar la propiedad VerticalAlignment que en este caso he obviado.

Finalmente y dentro de la cada StackPanel, he agregado los controles y botones que he considerado oportuno.

       1: <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">

       2:                     <Button x:Name="Edit" Style="{StaticResource EditAppBarButtonStyle}" Tag="Editar" />

       3:                     <Button x:Name="Refresh" Style="{StaticResource RefreshAppBarButtonStyle}" Tag="Refrescar" />

       4:                     <Button x:Name="Save" Style="{StaticResource SaveAppBarButtonStyle}" Tag="Guardar" />

       5: </StackPanel>

Cada control Button que he insertado tiene tres propiedades.

La propiedad Name indica el nombre del botón.

La propiedad Tag indica una etiqueta o tag que podemos utilizar en nuestra aplicación si lo deseamos.

Finalmente, la propiedad Style indica el estilo del botón.

Respecto a los estilos cabe señalar algunos detalles que veremos a continuación.

(…Continúa…)

Publicado por Jorge Serrano | con no comments

Archivado en: Windows 8,Microsoft .NET Framework 4.5,.NET Framework 4.5,Visual Studio 2012

30/6/2012 15:45

Operaciones básicas de programación con Metro y Windows 8 (XI)

Trabajando con ficheros de recursos e idiomas

Trabajando con ficheros de recursos e idiomas (IV)

Creación de ficheros de recursos por idioma

¿En qué idiomas quiero que funcione mi aplicación?.

Parece una pregunta obvia, pero es necesario que nos la hagamos.

En mi caso, español e inglés.

¿Cómo llevar a cabo esto?.

Bastará con crear una carpeta en nuestra aplicación (para tener más ordenados nuestros ficheros de recursos) y crear tantos subdirectorios dentro como idiomas tenga nuestra aplicación.

Cada subdirectorio, pertenecerá a un idioma, teniendo el fichero de recursos el mismo nombre.

Dicho de otro modo.

Nuestra aplicación tendrá una estructura que podría ser por ejemplo igual a la que se indica en la siguiente imagen.

En el caso de nuestro fichero de recursos en español, el contenido del mismo quedará de la siguiente manera:

En el caso de nuestro fichero de recursos en inglés, el contenido del mismo quedará de la siguiente manera:

Si ejecutamos nuestra aplicación, observaremos que ésta se ejecuta en español.

Y es que aún no hemos cambiado el idioma del sistema como idioma preferente, así que volvamos al Panel de Control y a donde nos quedamos anteriormente para cambiar las preferencias del idioma.

Seleccionaré en inglés y lo subiré como preferencia del idioma para hacerlo como lenguaje preferente.

Si ejecutamos nuevamente nuestra aplicación, observaremos que ésta se ejecutará ahora en inglés.

Publicado por Jorge Serrano | con no comments

Archivado en: Windows 8,Microsoft .NET Framework 4.5,.NET Framework 4.5,Visual Studio 2012

30/6/2012 15:30

Operaciones básicas de programación con Metro y Windows 8 (X)

Trabajando con ficheros de recursos e idiomas

Trabajando con ficheros de recursos e idiomas (III)

Consumiendo el fichero de recursos vía XAML

Sin embargo, es posible que (obviando la caja de mensaje), deseemos consumir el fichero de recursos vía XAML en lugar de hacerlo vía código como hemos mostrado anteriormente.

Para ello, por cada control que utilicemos en el código XAML, deberemos utilizar la etiqueta Uid.

La particularidad de hacerlo así es que podemos en el fichero de recursos debemos no sólo indicar el nombre del recursos, sino su propiedad.

Es decir, abriendo el fichero de recursos, las modificaciones que deberemos hacer corresponderían a lo que se indica en la siguiente imagen:

Dentro del código C# correspondiente con la página con la que estamos trabajando, deberemos comentar o eliminar el código del evento OnNavigatedTo para que no interfiera en el ejemplo.

Pero aún falta trabajar con la etiqueta Uid dentro de cada control en el código XAML. Vamos con ello.

Modificando el código XAML

Las modificaciones a realizar son bastante simples.

Basta con agregar una etiqueta Uid en cada control indicándole únicamente el nombre de la etiqueta de recursos identificadora (sin la propiedad a la que queremos vincular).

Es decir, en nuestro, el código XAML quedaría de la siguiente manera:

        1: <Page

       2:     x:Class="Sample3.MainPage"

       3:     IsTabStop="false"

       4:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       5:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       6:     xmlns:local="using:Sample3"

       7:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

       8:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

       9:     mc:Ignorable="d">

      10:  

      11:     <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

      12:         <Canvas>

      13:             <TextBlock x:Name="tbNombre" Margin="140,120,0,0" Text="Nombre:" 

      14:              FontSize="18" x:Uid="TituloNombre" />

      15:             <TextBox x:Name="txtNombre" Margin="220,120,0,0" Text="Escriba aquí su nombre" />

      16:             <Button x:Name="btnAceptar" Margin="140,180,0,0" Content="Aceptar" 

      17:              BorderThickness="1" Click="btnAceptar_Click_1" x:Uid="BotonAceptar" />

      18:         </Canvas>

      19:     </Grid>

      20:     

      21: </Page>

Como podemos apreciar para el control TextBlock por ejemplo, la etiqueta Uid tiene TituloNombre.

TituloNombre corresponde con TituloNombre.Text en el fichero de recursos.

Basta con ejecutar nuestra aplicación para comprobar y demostrar el comportamiento de nuestra aplicación.

Internacionalización de nuestra aplicación

Una cosa que me choca y que no sé si va a ser así siempre, es que una aplicación Metro funciona en el idioma que está configurado en el sistema operativo.

Es decir, si está en inglés, funcionará en inglés, y si está en español, en español.

Sin embargo, digo que me choca porque a veces y aún trabajando con un sistema operativo en español por ejemplo, es posible que queramos que una aplicación esté en inglés (por la razón que sea).

Indudablemente, si hacemos lo que he mostrado anteriormente, da igual como esté configurado nuestro sistema operativo, ya que nuestra aplicación tirará de los ficheros de recursos y se presentará en el idioma que le indiquemos en ese fichero Resources.resw.

Sin embargo, la mayoría de las veces no va a ser así.

El caso es que no he encontrado la forma de hacer que nuestras aplicaciones Metro funcionen con el idioma que queramos. Me extraña que no se pueda hacer, pero no he encontrado la forma de hacerlo de momento y no sé si es que estará escondida la forma, si es un aspecto relacionado con la beta del producto, o es que simplemente no se puede.

Es por eso que para hacer que nuestro sistema maneje diferentes idiomas, debemos cambiarlo nosotros en la configuración del sistema.

Para cambiar el idioma en nuestro Windows 8, pulsaremos la combinación de teclas Windows + Q para acceder desde allí al Panel de Control, o bien accederemos al Panel de Control directamente.

Dentro del Panel de Control, voy a seleccionar los iconos grandes para localizar más rápidamente la opción que quiero modificar.

Dentro de la ventana que aparece, seleccionaremos la opción Idioma.

Y en esta ventana modificaremos, agregaremos o eliminaremos los idiomas de nuestro sistema.

En mi sistema tengo esta configuración:

Esto significa, que el idioma que aparece como preferente es el español.

Llegados a este punto, hagamos un salto y retornemos al código de nuestra aplicación para volver a este punto una vez hagamos las modificaciones que quiero contar.

(…Continúa…)

Publicado por Jorge Serrano | con no comments

Archivado en: Windows 8,Microsoft .NET Framework 4.5,.NET Framework 4.5,Visual Studio 2012

30/6/2012 15:15

Operaciones básicas de programación con Metro y Windows 8 (IX)

Trabajando con ficheros de recursos e idiomas

Trabajando con ficheros de recursos e idiomas (II)

Creando el fichero de recursos

La primera acción a acometer es la de crear el fichero de recursos.

Para ello, vamos a hacer clic con el botón derecho del ratón sobre el proyecto, y vamos a seleccionar la opción Add > New Item o a pulsar la combinación de teclas Ctrl + Shift + A tal y como se indica en la siguiente imagen:

Como nombre del fichero de recursos le he indicado el que normalmente aparece por defecto, Resources.resw.

Aquí conviene hacer un pequeño alto en el camino para explicar alguna cosa al respecto.

Si has trabajado con aplicaciones .NET y has tenido que hacer que tu aplicación se comporte como una aplicación multiidioma, habrás tenido que trabajar con ficheros de recursos.

En .NET (hasta ahora), los ficheros de recursos tenían la extensión resx. Sin embargo, en Metro, esta extensión cambia a resw.

Otro detalle a tener en cuenta, es que con .NET (hasta ahora), los ficheros resx tenían asociado un fichero de código (cs en el caso de C# y vb en el caso de VB). En Metro, eso ya no es así.

Llegado a este punto y estas breves explicaciones, vamos a ver como trabajar con este fichero de recursos.

Preparando el fichero de recursos

Para preparar nuestro fichero de recursos, haremos simplemente doble clic sobre el fichero Resources.resw.

De esta forma, se abrirá el gestor de recursos.

Si hemos trabajado con ficheros resx en .NET, observaremos que el gestor es prácticamente idéntico.

En nuestro ejemplo, hemos agregado las siguientes entradas:

Nota: Intencionadamente le he indicado unos valores recortados de los originales para demostrar su funcionamiento.

Ahora que tenemos la base de nuestra aplicación preparada, vamos a hacerlo funcionar.

Consumiendo el fichero de recursos vía código

No nos vamos a complicar en exceso.

Queremos utilizar el fichero de recursos vía código, así que vamos a ello.

Recordemos un poco alguno de los conceptos Metro explicados en otras entradas.

¿Qué evento se lanza cuando la página es cargada?. Dicho de otra manera aunque no exacta, ¿qué evento se lanza cuando la página obtiene el foco de carga?.

El evento OnNavigatedTo.

Por lo tanto, parece lógico que dentro de este evento, recorramos el fichero de recursos para mostrar en cada control el contenido que queremos localizar.

En nuestro sencillo ejemplo, el código C# del evento OnNavigatedTo para la página MainPage.xaml, quedará de la siguiente manera:

        1: /// <summary>

       2: /// Invoked when this page is about to be displayed in a Frame.

       3: /// </summary>

       4: /// <param name="e">Event data that describes how this page was reached.  The Parameter

       5: /// property is typically used to configure the page.</param>

       6: protected override void OnNavigatedTo(NavigationEventArgs e)

       7: {

       8:     var resourceLoader = new ResourceLoader();

       9:     this.tbNombre.Text = resourceLoader.GetString("TituloNombre");

      10:     this.btnAceptar.Content = resourceLoader.GetString("BotonAceptar");

      11: } // OnNavigatedTo

Como podemos observar, estamos utilizando una clase de nombre ResourceLoader.

Esta clase pertenece al siguiente namespace:

       1: using Windows.ApplicationModel.Resources;

Finalmente, utilizaremos la función GetString() por cada control sobre el que queremos mostrar un texto localizado.

Nuestra aplicación en ejecución quedará de la siguiente manera:

Igualmente, si hubiéramos querido, podríamos haber modificado el texto que aparece en la caja de diálogo o de mensaje.

Bastaría con haber agregado una entrada en el fichero Resources.resw como por ejemplo:

Y en el código C# donde mostramos la caja de mensaje, haber escrito algo similar a esto:

       1: private void btnAceptar_Click_1(object sender, RoutedEventArgs e)

       2: {

       3:     var resourceLoader = new ResourceLoader();

       4:     // Preparamos la caja de mensaje.

       5:     MessageDialog messageDialog = new MessageDialog(string.Format(

       6:                                                                   resourceLoader.GetString("DialogMessageInfo"),

       7:                                                                   this.txtNombre.Text));

       8:     // Mostramos la caja de mensaje.

       9:     messageDialog.ShowAsync();

      10: } // btnAceptar_Click_1

Sin embargo, aún nos quedaría una pregunta que hacernos.

¿Cómo consumir el fichero de recursos vía XAML?.

(…Continúa…)

Publicado por Jorge Serrano | con no comments

Archivado en: Windows 8,Microsoft .NET Framework 4.5,.NET Framework 4.5,Visual Studio 2012

30/6/2012 15:00

Operaciones básicas de programación con Metro y Windows 8 (VIII)

Trabajando con ficheros de recursos e idiomas

Trabajando con ficheros de recursos e idiomas (I)

Introducción

Cuando desarrollamos aplicaciones Software, es muy normal que nos veamos interesados o incluso obligados, a que nuestra aplicación sea multiidioma con el fin de que pueda ser utilizada por usuarios que hablen diferentes idiomas.

En la siguiente entrada, vamos a ver como desarrollar nuestra aplicación Metro con esta capacidad.

Iniciando nuestra aplicación

Vamos a crear una nueva aplicación Metro, tal y como hemos hecho en las anteriores entradas, con el nombre de Sample3.

Dentro de la página principal de nombre MainPage.xaml, vamos a insertar tres controles.

Un control TextBlock, un control TextBox, y un control Button.

La disposición de estos tres controles en la pantalla es la que se indica en la siguiente imagen.

El código XAML de nuestra página quedará entonces constituido de la siguiente manera:

        1: <Page

       2:     x:Class="Sample3.MainPage"

       3:     IsTabStop="false"

       4:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       5:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       6:     xmlns:local="using:Sample3"

       7:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

       8:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

       9:     mc:Ignorable="d">

      10:  

      11:     <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

      12:         <Canvas>

      13:             <TextBlock x:Name="tbNombre" Margin="140,120,0,0" Text="Nombre:" FontSize="18" />

      14:             <TextBox x:Name="txtNombre" Margin="220,120,0,0" Text="Escriba aquí su nombre" />

      15:             <Button x:Name="btnAceptar" Margin="140,180,0,0" Content="Aceptar" BorderThickness="1" 

      16:              Click="btnAceptar_Click_1" />

      17:         </Canvas>

      18:     </Grid>

      19:     

      20: </Page>

Lógicamente, en el control Button observamos que hemos indicado un evento.

El código de este evento en la página MainPage.xaml.cs quedará de la siguiente forma:

       1: private void btnAceptar_Click_1(object sender, RoutedEventArgs e)

       2: {

       3:     // Preparamos la caja de mensaje.

       4:     MessageDialog messageDialog = new MessageDialog(string.Format(

       5:                                                                   "Hola {0}",

       6:                                                                   this.txtNombre.Text));

       7:     // Mostramos la caja de mensaje.

       8:     messageDialog.ShowAsync();

       9: } // btnAceptar_Click_1

Nuestra aplicación en ejecución es la que se indica en la siguiente imagen:

Como podemos apreciar, nada excepcional aún.

Ahora bien, supongamos que queremos que nuestros controles TextBlock y Button tengan un contenido diferente del que tenemos por defecto. ¿Cómo lo podemos hacer?.

Para eso está el fichero de recursos que veremos en la siguiente entrada de este pequeño tutorial.

(…Continúa…)

Publicado por Jorge Serrano | con no comments

Archivado en: Windows 8,Microsoft .NET Framework 4.5,.NET Framework 4.5,Visual Studio 2012

29/6/2012 20:15

Operaciones básicas de programación con Metro y Windows 8 (VII)

Navegación entre páginas de una aplicación – Avanzado

Navegación entre páginas de una aplicación – Avanzado (IV)

Trabajando con OnNavigatedTo en la página principal

Cada vez que navegamos de una página a otra, el evento de la página a la que se navega que se lanza, es el evento OnNavigatedTo.

En nuestro ejemplo, tendremos un código similar al siguiente:

/// <summary>

/// Invoked when this page is about to be displayed in a Frame.

/// </summary>

/// <param name="e">

/// Event data that describes how this page was reached.  The Parameter

/// property is typically used to configure the page.

/// </param>

protected override void OnNavigatedTo(NavigationEventArgs e)

{

    if (e.NavigationMode == NavigationMode.Back)

    {

        // Cargamos el estado previo.

        Planeta planeta = App.Current.Resources["Planeta"] as Planeta;

        if (planeta != null)

        {

            MessageDialog messageDialog = new MessageDialog(String.Format(

                                                            "Ha seleccionado {0} con un diámetro 

                                                             ecuatorial de {1} kilómetros.",

                                                            planeta.Nombre,

                                                            planeta.Diametro));

            messageDialog.ShowAsync();

            // Mostramos la imagen.

            var uri = new Uri("ms-appx:///" + planeta.RutaImagen);

            this.imgPlaneta.Source = new BitmapImage(uri);

            this.tbNombrePlaneta.Text = planeta.Nombre;

            this.tbDiametroPlaneta.Text = String.Format("{0} kilómetros", planeta.Diametro);

        }

    }

} // OnNavigatedTo

De acuerdo al código anterior, observamos varias cosas.

Al principio del todo, podemos preguntar si estamos regresando a la página principal desde otra página o no.

Esto lo logramos con este código:

if (e.NavigationMode == NavigationMode.Back)

{

}

Nota: Recordemos, que en Metro, nosotros debemos crear y gestionar el flujo de navegación de nuestra aplicación.

Una vez dentro de esta cláusula if, podemos realizar la operación u operaciones que consideremos oportunas.

En nuestro caso, he querido obtener el planeta seleccionado, sin embargo, aquí estoy obligado a hacer un alto en el camino.

Alto en el camino que hago por haberme tomado la libertad de gestionar el almacenamiento del planeta seleccionado dentro de la aplicación de una manera particular.

He pensado en este ejemplo, compartir el recurso planeta utilizando la clase App.

El funcionamiento es muy sencillo, basta con utilizar App.Current.Resources[key] para indicar al recurso el valor del mismo o para recuperarlo.

En MainPage.xaml estamos recuperando ese valor, y en BasicPage1.xaml lo asignaremos como veremos más adelante.

Es por eso que en nuestro ejemplo, recuperamos el valor de la clase Planeta de esta forma:

   1: Planeta planeta = App.Current.Resources["Planeta"] as Planeta;

Finalmente y para asegurarnos de que posee un valor válido, preguntamos si planeta es nulo o no.

En el caso de que no sea nulo, mostramos un mensaje en pantalla indicando los detalles del planeta seleccionado, y acto seguido, mostramos esos mismos datos en la página junto a la imagen del planeta seleccionado.

Un detalle a tener en cuenta es la carga de una imagen en Metro.

Como podemos apreciar, la instrucción de carga que hemos utilizado es de la siguiente forma:

var uri = new Uri("ms-appx:///" + planeta.RutaImagen);

this.imgPlaneta.Source = new BitmapImage(uri);

Existen dos maneras de cargar una imagen, a través de ms.appx:///ruta_imagen, o a través de la ruta ms-appdata:///ruta_imagen.

Finalmente, vamos a ver como se comporta BasicPage1.xaml para que podamos jugar con los datos que devuelve hacia MainPage.xaml.

Programando la página secundaria BasicPage1.xaml

El código fuente de esta página secundaria quedará de la siguiente manera:

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using Windows.Foundation;

using Windows.Foundation.Collections;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Navigation;

  

namespace Sample2

{

  

    /// <summary>

    /// A basic page that provides characteristics common to most applications.

    /// </summary>

    public sealed partial class BasicPage1 : Sample2.Common.LayoutAwarePage

    {

  

        /// <summary>

        /// Constructor de la clase.

        /// </summary>

        public BasicPage1()

        {

            this.InitializeComponent();

            // Habilitamos la caché.

            this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;

            // Cargamos los datos en el control comboBox.

            LoadPlanetas();

        } // BasicPage1 Constructor

  

        /// <summary>

        /// Variable privada encargada de almacenar

        /// los datos del planeta seleccionado.

        /// </summary>

        public Planeta planeta;

  

        /// <summary>

        /// Populates the page with content passed during navigation.  Any saved state is also

        /// provided when recreating a page from a prior session.

        /// </summary>

        /// <param name="navigationParameter">The parameter value passed to

        /// <see cref="Frame.Navigate(Type, Object)"/> when this page was initially requested.

        /// </param>

        /// <param name="pageState">A dictionary of state preserved by this page during an earlier

        /// session.  This will be null the first time a page is visited.</param>

        protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)

        {

        } // LoadState

  

        /// <summary>

        /// Preserves state associated with this page in case the application is suspended or the

        /// page is discarded from the navigation cache.  Values must conform to the serialization

        /// requirements of <see cref="SuspensionManager.SessionState"/>.

        /// </summary>

        /// <param name="pageState">An empty dictionary to be populated with serializable state.</param>

        protected override void SaveState(Dictionary<String, Object> pageState)

        {

        } // SaveState

  

        /// <summary>

        /// Método encargado de cargar el listado de 

        /// los planetas del Sistema Solar.

        /// </summary>

        private void LoadPlanetas()

        { 

            SistemaSolar sistemaSolar = new SistemaSolar();

            List<Planeta> planetas = sistemaSolar.GetPlanetas();

            this.cboPlanetas.ItemsSource = planetas;

            this.cboPlanetas.DisplayMemberPath = "Nombre";

            this.cboPlanetas.SelectedValuePath = "Id";

            this.cboPlanetas.SelectedIndex = 0;

        } // LoadPlanetas

  

        /// <summary>

        /// Evento que se lanza al seleccionar un planeta de la lista de planetas.

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

        private void cboPlanetas_SelectionChanged_1(object sender, SelectionChangedEventArgs e)

        {

            this.planeta = (Planeta)(this.cboPlanetas.SelectedItem);

        } // cboPlanetas_SelectionChanged_1

  

        /// <summary>

        /// Evento que ejecutamos al dejar la página.

        /// </summary>

        /// <param name="e"></param>

        protected override void OnNavigatedFrom(NavigationEventArgs e)

        {

            // En nuestro ejemplo, sólo tenemos 1 elemento en los recursos,

            // por lo que la validación es muy sencilla.

            // Basta con ver si hay algún recurso o no creado.

            // Si no lo hay, lo creamos, y en caso contrario, lo reutilizamos.

            if (App.Current.Resources.Count() == 0)

            {

                App.Current.Resources.Add(

                                          "Planeta", 

                                          this.planeta);

            }

            else

            {

                App.Current.Resources["Planeta"] = this.planeta;

            }

        } // OnNavigatedFrom

  

    } // BasicPage1

  

} // Sample2

Atendiendo al código de esta página secundaria, observamos que en el constructor, hemos habilitado la caché y hemos llamado a un método que se encargará de cargar los planetas y sus datos (tómese como un ejemplo demo).

/// <summary>

/// Constructor de la clase.

/// </summary>

public BasicPage1()

{

    this.InitializeComponent();

    // Habilitamos la caché.

    this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;

    // Cargamos los datos en el control comboBox.

    LoadPlanetas();

} // BasicPage1 Constructor

Nuestra función de carga de los planetas y la carga de todos estos datos en el control ComboBox de la página BasicPage1.xaml queda de la siguiente manera:

/// <summary>

/// Método encargado de cargar el listado de 

/// los planetas del Sistema Solar.

/// </summary>

private void LoadPlanetas()

{ 

    SistemaSolar sistemaSolar = new SistemaSolar();

    List<Planeta> planetas = sistemaSolar.GetPlanetas();

    this.cboPlanetas.ItemsSource = planetas;

    this.cboPlanetas.DisplayMemberPath = "Nombre";

    this.cboPlanetas.SelectedValuePath = "Id";

    this.cboPlanetas.SelectedIndex = 0;

} // LoadPlanetas

De igual manera, hemos declarado una variable para trabajar con el planeta seleccionado:

/// <summary>

/// Variable privada encargada de almacenar

/// los datos del planeta seleccionado.

/// </summary>

public Planeta planeta;

Evidentemente, cada vez que modificamos la selección de un planeta, damos cuenta de ellos:

/// <summary>

/// Evento que se lanza al seleccionar un planeta de la lista de planetas.

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

private void cboPlanetas_SelectionChanged_1(object sender, SelectionChangedEventArgs e)

{

    this.planeta = (Planeta)(this.cboPlanetas.SelectedItem);

} // cboPlanetas_SelectionChanged_1

Para finalizar, al igual que en la página principal trabajábamos con el evento OnNavigatedTo, aquí trabajaremos con el evento OnNavigatedFrom.

Este evento será utilizado cada vez que dejemos la página en la que estamos.

Podemos utilizar este evento para muchísimos fines, y uno de ellos según lo he querido yo aquí, para guardar el recurso del planeta seleccionado:

/// <summary>

/// Evento que ejecutamos al dejar la página.

/// </summary>

/// <param name="e"></param>

protected override void OnNavigatedFrom(NavigationEventArgs e)

{

    // En nuestro ejemplo, sólo tenemos 1 elemento en los recursos,

    // por lo que la validación es muy sencilla.

    // Basta con ver si hay algún recurso o no creado.

    // Si no lo hay, lo creamos, y en caso contrario, lo reutilizamos.

    if (App.Current.Resources.Count() == 0)

    {

        App.Current.Resources.Add(

                                  "Planeta", 

                                  this.planeta);

    }

    else

    {

        App.Current.Resources["Planeta"] = this.planeta;

    }

} // OnNavigatedFrom

En este caso, no he querido llamar al método Contains ni a ningún otro método o función para saber si ya hay recursos guardados.

En esta aplicación sólo voy a tener un solo recurso, por lo que simplemente pregunto cuantos hay, y si hay 0, es que el usuario ha accedido a esta página por primera vez, y si hay uno, entonces simplemente sobreescribo el recurso de clave o key "Planeta" con el objeto Planeta seleccionado del control ComboBox.

Nuestra aplicación en ejecución es tal y como se indican en las dos siguientes capturas:

El resultado una vez cerrada la ventana de mensaje de diálogo es de esta manera:

En próximas entradas, espero podamos ver otras cosas diferentes relacionadas con la programación Metro.

Publicado por Jorge Serrano | 1 comment(s)

Archivado en: Windows 8,Microsoft .NET Framework 4.5,.NET Framework 4.5,Visual Studio 2012

29/6/2012 20:00

Operaciones básicas de programación con Metro y Windows 8 (VI)

Navegación entre páginas de una aplicación – Avanzado

Navegación entre páginas de una aplicación – Avanzado (III)

Agregando imágenes a nuestro proyecto

Las imágenes de nuestra aplicación las podemos situar donde consideremos oportuno, pero lo más obvio y rápido es situarla en la carpeta Images.

En el Explorador de Soluciones, encontrará un botón que indica Show All Files.

Esta opción nos permite ver los archivos visibles en el proyecto y los que no son visibles (porque no se han cargado) en el mismo.

En mi carpeta Images he colocado una imagen por cada planeta, por lo que haciendo clic sobre Show All Files, me he situado sobre la carpeta Images y he pulsado el botón derecho del ratón sobre cada imagen y he elegido la opción Include in Project para incluirlas en el proyecto.

Preparando la página principal

Nos hemos centrado bastante en la página secundaria y en las clases que utilizaremos para cargar datos, pero aún no nos hemos detenido en la página principal.

Para nuestra página principal, he querido agregar una imagen lateral en el lado izquierdo con los diferentes planetas del sistema solar, a modo de imagen genérica para darle un aspecto menos tosco a nuestra aplicación.

Además, he agregado un control HyperlinkButton para que al pulsar sobre él, podamos ir a la página secundaria BasicPage.xaml.

También he agregado un control Button para que al hacer clic sobre él, cerremos la aplicación.

Y para finalizar, he agregado un control Image que mostrará la imagen del planeta seleccionado en la página secundaria, y dos controles TextBlock para mostrar los datos del planeta seleccionado.

Nuestra ventana quedará de la siguiente manera.

Y el código XAML asociado a MainPage.xaml corresponderá con el siguiente código.

        1: <Page

       2:     x:Class="Sample2.MainPage"

       3:     IsTabStop="false"

       4:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       5:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       6:     xmlns:local="using:Sample2"

       7:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

       8:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

       9:     mc:Ignorable="d">

      10:  

      11:     <Grid Background="Black">

      12:         <Image HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" 

      13:                Source="ms-appx:///Images/Planetas_Sistema_Solar.png" Height="598" Width="202" />

      14:         <Canvas>

      15:             <HyperlinkButton Margin="300,100,0,0" Content="Seleccione un planeta del Sistema Solar" 

      16:                              Foreground="DarkGoldenrod" FontSize="20" Click="HyperlinkButton_Click_1" />

      17:             <Button x:Name="btnSalir" Content="Volver a casa" Canvas.Left="40" Canvas.Top="620" 

      18:                     FontSize="16" BorderThickness="1" Background="Black" BorderBrush="BlueViolet" 

      19:                     Foreground="DarkSlateBlue" Click="btnSalir_Click_1" />

      20:             <Image x:Name="imgPlaneta" Height="200" Canvas.Left="400" Canvas.Top="220" Width="200" />

      21:             <TextBlock x:Name="tbNombrePlaneta" Canvas.Top="440" Canvas.Left="400" 

      22:                        Foreground="DarkOrange" FontSize="24" />

      23:             <TextBlock x:Name="tbDiametroPlaneta" Canvas.Top="480" Canvas.Left="400" 

      24:                        Foreground="Orange" FontSize="20" />

      25:         </Canvas>

      26:     </Grid>

      27: </Page>

Programando la página principal

Una vez que hemos preparado la interfaz de usuario en ambas páginas y que hemos preparado las clases en las que vamos a cargar los datos, vamos a escribir el código de la página principal.

En primer lugar nos centraremos en el constructor de la clase MainPage.xaml.

Con el fin de que accedamos a los datos de la página que teníamos cargados al regresar a nuestra página, debemos cachear la instancia de nuestra página.

Para ello, utilizaremos la siguiente instrucción:

       1: this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;

Nuestro constructor quedará por lo tanto de la siguiente forma:

       1: /// <summary>

       2: /// Constructor de la clase.

       3: /// </summary>

       4: public MainPage()

       5: {

       6:     this.InitializeComponent();

       7:     // Habilitamos la caché.

       8:     this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;

       9: } // MainPage Constructor

A continuación, vamos a preparar los eventos de los dos controles de la página principal, el del control Button y el del control HyperlinkButton.

El código de estos dos eventos quedarán de la siguiente manera:

       1: private void btnSalir_Click_1(object sender, RoutedEventArgs e)

       2: {

       3:     // Cerramos la aplicación.

       4:     Application.Current.Exit();

       5: } // btnSalir_Click_1

       6:  

       7: private void HyperlinkButton_Click_1(object sender, RoutedEventArgs e)

       8: {

       9:     // Navegamos a la página BasicPage1.

      10:     this.Frame.Navigate(typeof(BasicPage1));

      11: } // HyperlinkButton_Click_1

Nota: Aunque aquí me he sacado de la chistera el botón de cerrar la aplicación, esto en Metro no está permitido, y nuestra aplicación no pasaría la validación del Store de Windows 8. Ojo con esto.

El último evento a tener en cuenta es el evento OnNavigatedTo de la página.

(…Continúa…)

Publicado por Jorge Serrano | 1 comment(s)

Archivado en: Windows 8,Microsoft .NET Framework 4.5,.NET Framework 4.5,Visual Studio 2012

29/6/2012 19:30

Operaciones básicas de programación con Metro y Windows 8 (V)

Navegación entre páginas de una aplicación – Avanzado

Navegación entre páginas de una aplicación – Avanzado (II)

Dando forma a la aplicación

No obstante, he comentado anteriormente que en esta aplicación vamos a cargar una serie de datos.

Para tal propósito, vamos a crear una clase de nombre Planeta que contendrá información de los planetas con sus respectivos datos, como son un identificador del planeta (que no utilizaremos en este ejemplo), un nombre de planeta, un diámetro del planeta, y una ruta de la imagen del planeta para mostrarla en la página principal una vez hayamos seleccionado el planeta.

Para agregar la clase Planeta a la aplicación, vamos a hacer clic con el botón derecho del ratón sobre el proyecto del Explorador de Soluciones, y vamos a seleccionar la opción Add > New Item, o bien, podemos utilizar la combinación de teclas Ctrl + Shift + A.

Buscaremos como elemento a agregar una clase, y como nombre de la misma, Planeta, tal y como se indica en la siguiente imagen.

Repetiremos la misma acción pero creando una clase de nombre SistemaSolar. Esta segunda clase será la encargada de cargar los datos de cada uno de los planetas, en este caso, pertenecientes al Sistema Solar.

El código asociado a nuestra clase Planeta quedará de la siguiente manera:

        1: namespace Sample2

       2: {

       3:  

       4:     /// <summary>

       5:     /// Clase pública sellada que indica los planetas del Sistema Solar.

       6:     /// </summary>

       7:     public sealed class Planeta

       8:     {

       9:  

        #region CONSTRUCTOR

  

            /// <summary>

            /// Constructor de la clase.

            /// </summary>

            /// <param name="id">

            /// Identificador único para cada planeta.

            /// </param>

            /// <param name="nombre">

            /// Nombre del planeta.

            /// </param>

            /// <param name="diametro">

            /// Diámetro ecuatorial del planeta medido en kilómetros.

            /// </param>

            /// <param name="rutaImagen">

            /// Ruta de la imagen a mostrar en la aplicación.

            /// </param>

            public Planeta(

                           int id,

                           string nombre,

                           int diametro,

                           string rutaImagen)

            {

                this.Id = id;

                this.Nombre = nombre;

                this.Diametro = diametro;

                this.RutaImagen = rutaImagen;

            } // Planeta Constructor

  

        #endregion

  

        #region PROPERTIES

  

            /// <summary>

            /// Propiedad pública que indica el identificador del planeta.

            /// </summary>

            public int Id { get; set; }

  

            /// <summary>

            /// Propiedad pública que indica el nombre del planeta.

            /// </summary>

            public string Nombre { get; set; }

  

            /// <summary>

            /// Propiedad pública que indica el diámetro ecuatorial 

            /// medido en kilómetros.

            /// </summary>

            public int Diametro { get; set; }

  

            /// <summary>

            /// Propiedad pública que indica la ruta en la que se 

            /// encuentra la imagen del planeta a mostrar en la 

            /// aplicación.

            /// </summary>

            public string RutaImagen { get; set; }

  

        #endregion

  

    } // Planeta

  

} // Sample2

El código asociado a nuestra clase SistemaSolar por su parte, quedará de esta otra manera:

       1: namespace Sample2

       2: {

       3:  

       4:     using System.Collections.Generic;

       5:  

       6:  

       7:     /// <summary>

       8:     /// Clase pública sellada que permite simular la carga de datos 

       9:     /// de los planetas del Sistema Solar.

    /// </summary>

    public sealed class SistemaSolar

    {

  

        #region CONSTRUCTORS

  

            /// <summary>

            /// Constructor de la clase.

            /// </summary>

            public SistemaSolar()

            {

            } // SistemaSolar Constructor

  

        #endregion

  

        #region FUNCTIONS

  

            /// <summary>

            /// Función que permite obtener una colección de

            /// planetas pertenecientes al Sistema Solar.

            /// </summary>

            /// <returns>

            /// Devolvemos una colección de planetas.

            /// </returns>

            public List<Planeta> GetPlanetas()

            {

                // Creamos la colección de planetas.

                List<Planeta> planetas = new List<Planeta>();

                planetas.Add(new Planeta(1, "Júpiter", 142984, "Images/Jupiter.png"));

                planetas.Add(new Planeta(2, "Marte", 6787, "Images/Marte.png"));

                planetas.Add(new Planeta(3, "Mercurio", 4878, "Images/Mercurio.png"));

                planetas.Add(new Planeta(4, "Neptuno", 49538, "Images/Neptuno.png"));

                planetas.Add(new Planeta(5, "Plutón", 2390, "Images/Pluton.png"));

                planetas.Add(new Planeta(6, "Saturno", 120536, "Images/Saturno.png"));

                planetas.Add(new Planeta(7, "Tierra", 12756, "Images/Tierra.png"));

                planetas.Add(new Planeta(8, "Urano", 51108, "Images/Urano.png"));

                planetas.Add(new Planeta(9, "Venus", 12100, "Images/Venus.png"));

                // Devolvemos la colección de planetas.

                return planetas;

            } // GetPlanetas

  

        #endregion

  

    } // SistemaSolar

  

} // Sample2

Si observamos el código de esta segunda clase, veremos que en la carga de los datos, le estamos indicando una ruta de imágenes que corresponde cada una de ellas, con la imagen de cada planeta.

(…Continúa…)

Publicado por Jorge Serrano | 1 comment(s)

Archivado en: Windows 8,Microsoft .NET Framework 4.5,.NET Framework 4.5,Visual Studio 2012

29/6/2012 19:00

Operaciones básicas de programación con Metro y Windows 8 (IV)

Navegación entre páginas de una aplicación – Avanzado

Navegación entre páginas de una aplicación – Avanzado (I)

Introducción

Otro de los aspectos que debemos controlar a la hora de desarrollar aplicaciones en Windows 8 con Metro es la capacidad o posibilidad que tenemos los programadores a la hora de jugar con los datos de ida y vuelta.

A continuación, vamos a ver como recargar datos entre páginas y como tratarlos.

Nota: Para este capítulo y sus subcapítulos, se entiende que el lector ya tiene algún conocimiento de Visual Studio 2012 y que para ello ha leído y comprendido la anterior entrada "Navegación entre páginas de una aplicación - Introducción" o cualquier otra documentación similar de Internet.

Objetivo del ejemplo

El objetivo de este ejemplo es el de preparar una página principal de aplicación y una página secundaria.

En la página secundaria tendremos una colección de planetas que tendrá entre otros datos, su nombre, su diámetro y la ruta de la imagen del planeta seleccionado para mostrarla en la página principal.

Cuando regresemos de esa página secundaria a la página principal, cargaremos en ésta los datos del planeta seleccionado y su imagen como decía anteriormente.

Parece sencillo ¿verdad?.

Pues vamos a ello.

Preparando la aplicación

Iniciaremos un nuevo proyecto con Visual Studio 2012 con las plantillas de Windows Metro style y en concreto utilizando una plantilla vacía (Blank App (XAML)) en C#.

Como nombre de proyecto, Sample2.

Esta plantilla habrá creado una página de nombre MainPage.xaml.

La siguiente acción que realizaremos será la de agregar una nueva página de tipo básica a la aplicación, agregando para ello una página de tipo Basic Page.

Nota: Repase el capítulo de introducción que anteriormente se comentó si tiene alguna duda para crear el proyecto.

Como nombre de la nueva página que queremos añadir, elegiremos el nombre que Visual Studio 2012 nos recomienda por defecto, y que es BasicPage1.xaml.

Es posible que aparezca un mensaje de aviso. Si ocurre así, responderemos afirmativamente.

Una vez hecho esto, vamos a compilar nuestra solución, y acto seguido vamos a situarnos en el código XAML de la página que acabamos de crear, es decir, en el fichero BasicPage1.xaml.

Recordemos que en el Explorador de Soluciones tendremos algo similar a lo que se indica en la siguiente imagen.

Centrándonos en el código XAML de BasicPage1.xaml, vamos a buscar el control TextBlock con el nombre pageTitle, y vamos a cambiar su propiedad Text a "Seleccione un planeta".

A continuación, agregaremos a la página BasicPage1.xaml, un control TextBlock y un control ComboBox.

El control TextBlock lo utilizaremos para mostrar un texto genérico que en nuestro caso es "Listado de planetas:".

El control ComboBox lo utilizaremos para agregar en dicho control, una lista de planetas que habremos cargado previamente simulando una carga de datos sobre este control.

El aspecto de nuestra página BasicPage1.xaml será similar al siguiente:

El código XAML asociado a la página será similar al siguiente:

        1: <common:LayoutAwarePage

       2:     x:Name="pageRoot"

       3:     x:Class="Sample2.BasicPage1"

       4:     DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"

       5:     IsTabStop="false"

       6:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       7:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       8:     xmlns:local="using:Sample2"

       9:     xmlns:common="using:Sample2.Common"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

  

    <Page.Resources>

        <x:String x:Key="AppName">My Application</x:String>

    </Page.Resources>

  

    <Grid Style="{StaticResource LayoutRootStyle}">

        <Grid.RowDefinitions>

            <RowDefinition Height="140"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

  

        <Grid>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="Auto"/>

                <ColumnDefinition Width="*"/>

            </Grid.ColumnDefinitions>

            <Button x:Name="backButton" Click="GoBack" 

                    IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" 

                    Style="{StaticResource BackButtonStyle}"/>

            <TextBlock x:Name="pageTitle" Grid.Column="1" Text="Seleccione un planeta" 

                       Style="{StaticResource PageHeaderTextStyle}"/>

        </Grid>

        <TextBlock HorizontalAlignment="Left" Margin="60,40,0,0" Grid.Row="1" 

                   TextWrapping="Wrap" Text="Listado de planetas:" VerticalAlignment="Top" 

                   FontSize="20" Foreground="LightCyan" />

        <ComboBox x:Name="cboPlanetas" HorizontalAlignment="Left" Margin="60,80,0,0" 

                  Grid.Row="1" VerticalAlignment="Top" Width="180" FontSize="16" 

                  SelectionChanged="cboPlanetas_SelectionChanged_1" ItemsSource="{Binding}" />

  

        <VisualStateManager.VisualStateGroups>

  

            <VisualStateGroup x:Name="ApplicationViewStates">

                <VisualState x:Name="FullScreenLandscape"/>

                <VisualState x:Name="Filled"/>

  

                <VisualState x:Name="FullScreenPortrait">

                    <Storyboard>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" 

                                                       Storyboard.TargetProperty="Style">

                            <DiscreteObjectKeyFrame KeyTime="0" 

                                                    Value="{StaticResource PortraitBackButtonStyle}"/>

                        </ObjectAnimationUsingKeyFrames>

                    </Storyboard>

                </VisualState>

  

                <VisualState x:Name="Snapped">

                    <Storyboard>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" 

                                                       Storyboard.TargetProperty="Style">

                            <DiscreteObjectKeyFrame KeyTime="0" 

                                                    Value="{StaticResource SnappedBackButtonStyle}"/>

                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" 

                                                       Storyboard.TargetProperty="Style">

                            <DiscreteObjectKeyFrame KeyTime="0" 

                                                    Value="{StaticResource SnappedPageHeaderTextStyle}"/>

                        </ObjectAnimationUsingKeyFrames>

                    </Storyboard>

                </VisualState>

            </VisualStateGroup>

        </VisualStateManager.VisualStateGroups>

    </Grid>

</common:LayoutAwarePage>

(…Continúa…)

Publicado por Jorge Serrano | con no comments

Archivado en: Windows 8,Microsoft .NET Framework 4.5,.NET Framework 4.5,Visual Studio 2012

29/6/2012 8:30

Operaciones básicas de programación con Metro y Windows 8 (III)

Navegación entre páginas de una aplicación - Introducción

Navegación entre páginas de una aplicación - Introducción (III)

Pasando datos de una página a otra

Dentro de nuestra página Prueba.xaml.cs observaremos que por defecto, Visual Studio 2012 ha agregado dos métodos, uno de nombre LoadState y otro llamado SaveState.

De momento, vamos a obviar ambos métodos, y vamos a centrar nuestra atención en un evento que por defecto no existe. Hablo del evento OnNavigatedTo.

Para ello, vamos a escribir dentro del código C# de nuestra página, la palabra reservada override y seleccionaremos el método mencionado anteriormente.

Una vez hecho esto, tendremos un código similar al siguiente:

        1: protected override void OnNavigatedTo(NavigationEventArgs e)

       2: {

       3:     base.OnNavigatedTo(e);

       4: }

Obviamente, deberemos realizar algún ajuste en el contenido de este evento.

Éste quedará de la siguiente forma:

       1: protected override void OnNavigatedTo(NavigationEventArgs e)

       2: {

       3:     this.txtSaludo.Text = String.Format("Hola {0}", e.Parameter.ToString());

       4: } // OnNavigatedTo

Con esta instrucción, mostraremos en la página Prueba.xaml el contenido del control TextBox que indicamos en la página MainPage.xaml una vez hayamos pulsado el control Button de esta última.

Podemos ejecutar nuestra aplicación pulsando la tecla F5 para ver el resultado obtenido.

Daños colaterales

Sin embargo, nuestra aplicación tiene un daño colateral.

Si ejecutamos nuestra aplicación, observaremos que cuando pulsamos el botón de volver de nuestra página Prueba.xaml, el texto que teníamos en el control TextBox de nuestra página MainPage.xaml ha desaparecido.

Esto es debido a que la página MainPage.xaml no ha sido cacheada, por lo que si queremos que nuestra página principal MainPage.xaml no pierda el contenido indicado en la misma, deberemos ejecutar una sencilla instrucción que permita cachear dicha página.

Para tal fin y dentro del constructor de nuestra página principal (en nuestro caso), vamos a habilitar la opción de cachear la página.

La porción de código de nuestro constructor quedaría de la siguiente manera:

       1: public MainPage()

       2: {

       3:     this.InitializeComponent();

       4:     this.NavigationCacheMode = Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;

       5: } // MainPage

OnNavigatedTo y OnNavigatedFrom

Otro daño colateral que mucho me temo, se debe a un bug de la versión preliminar de Visual Studio 2012 y sus plantillas (en la versión anterior beta de Visual Studio 2012 no ocurría), es el hecho de que ejecutando nuestra aplicación se produzca una excepción al volver de Prueba.xaml a MainPage.xaml.

Para comprobar esta excepción, ejecute la aplicación desde Visual Studio 2012 pulsando la tecla F5, y escriba un nombre o texto en la caja de texto de MainPage.xaml y pulse el botón correspondiente.

Una vez mostrada la página Prueba.xaml, regrese a la página MainPage.xaml nuevamente.

Observará entonces que se produce una excepción.

El motivo de que se lance esta excepción es que para la clase autogenerada por Visual Studio 2012 llamada LayoutAwarePage.cs, y en su evento OnNavigatedFrom, la variable privada _pageKey vale en este caso null.

Pero antes de continuar repasemos los dos eventos que debemos conocer.

Cabe recordar que hay dos eventos dentro de una página que pueden ser sobre escritos y que tienen los nombres de OnNavigatedTo y OnNavigatedFrom.

Estos dos eventos los utilizaremos para navegar hacia una página o desde una página. En concreto, utilizaremos OnNavigatedTo cuando la página hacia la que se navega se convierte en primer plano, y OnNavigatedFrom cuando se abandona el primer plano.

Es normal y habitual utilizar estos dos eventos para cargar datos o almacenar un contexto determinado al abandonar la página sobre la que se estaba trabajando.

Por lo tanto, y después de lo comentado, lo normal es que se lance OnNavigatedTo y no OnNavigatedFrom. De hecho, el código no entra en OnNavigatedTo. Es por esto que se genera la excepción indicada anteriormente.

Regresando al problema anterior, soy honesto al decir que no tengo del todo claro si la ejecución del código es ahora mismo la correcta o si se debe a algún bug de Visual Studio 2012 y de .NET, pero la siguiente solución que voy a dar al problema con el que nos hemos encontrado resuelve el problema que acabamos de ver, al menos momentáneamente.

Bastaría simplemente con comprobar primero si _pageKey vale null o no, y en el caso de que no valga null, ejecutar la instrucción que da la excepción.

Nuestro código quedaría por lo tanto de la siguiente manera:

       1: protected override void OnNavigatedFrom(NavigationEventArgs e)

       2: {

       3:     var frameState = SuspensionManager.SessionStateForFrame(this.Frame);

       4:     var pageState = new Dictionary<String, Object>();

       5:     this.SaveState(pageState);

       6:     if (_pageKey != null)

       7:     {

       8:         frameState[_pageKey] = pageState;

       9:     }

      10: } // OnNavigatedFrom

Y hasta aquí lo que podríamos entender como toma de contacto Metro.

En próximas entradas, iremos mejorando algunas de las cosas comentadas y profundizando un poco más en el desarrollo Metro.

Publicado por Jorge Serrano | 1 comment(s)

Archivado en: Windows 8,Microsoft .NET Framework 4.5,Visual Studio 2012

29/6/2012 8:00

Operaciones básicas de programación con Metro y Windows 8 (II)

Navegación entre páginas de una aplicación - Introducción

Navegación entre páginas de una aplicación - Introducción (II)

Agregando funcionalidad a la página principal

Lo primero que vamos a hacer es agregar algo de funcionalidad a la página principal.

Lo más típico es agregar algún tipo de control al formulario principal y la posibilidad de abrir la segunda página Prueba.xaml desde esta página.

Para ese fin, vamos a hacer doble clic sobre MainPage.xaml con el fin de que se abra esta página en nuestro diseñador.

Una vez hecho esto, vamos a agregar en esta página, un control TextBlock, un control TextBox, y un control Button.

El objetivo es que escribamos algo en la caja de texto (control TextBox), y al pulsar el control Button, vayamos a la página Prueba.xaml y mostremos en esa página el texto escrito en la caja de texto. Algo simple y sencillo como podemos ver.

El código XAML de esta página (MainPage.xaml) es el que se puede ver a continuación:

        1: <Page

       2:     x:Class="Sample1.MainPage"

       3:     IsTabStop="false"

       4:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       5:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       6:     xmlns:local="using:Sample1"

       7:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

       8:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

       9:     mc:Ignorable="d">

      10:  

      11:     <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

      12:         <TextBlock HorizontalAlignment="Left" Margin="20,40,0,0" TextWrapping="Wrap" 

      13:                    Text="Escriba su nombre:" VerticalAlignment="Top" FontSize="24" />

      14:         <TextBox HorizontalAlignment="Left" Margin="240,40,0,0" TextWrapping="Wrap" 

      15:                  Text="" VerticalAlignment="Top" Width="300" />

      16:         <Button Content="Saludar" HorizontalAlignment="Left" Margin="20,90,0,0" 

      17:                 VerticalAlignment="Top" BorderThickness="1" FontSize="20" 

      18:                 Foreground="LightBlue" BorderBrush="Beige" />

      19:     </Grid>

      20: </Page>

Si ejecutamos nuestra aplicación, observaremos que aún no hemos cargado la página Prueba.xaml ni hemos realizado ninguna acción concreta.

Antes de esto, vamos a preparar nuestra página Prueba.xaml.

Preparando nuestra página secundaria

Nuestra página secundaria, Prueba.xaml, tendrá un aspecto similar al que se presenta en la siguiente imagen:

Por esta razón, lo primero que vamos a hacer es cambiar el texto que aparece en el título de nuestra página.

Para ello, vamos a buscar un control de tipo TextBlock que tiene la propiedad Name como pageTitle, y vamos a cambiar su propiedad Text a Prueba. Servirá cualquier nombre, pero quiero poner este para que veamos claramente que se carga la segunda página de nuestro proyecto.

Para completar nuestra aplicación y puesto que cuando pulsemos el botón de nuestra primera página y página principal, MainPage.xaml, queremos que nos muestre un texto, vamos a agregar además un control TextBlock para que haga la función de mostrar ese texto.

Para ello, escribiremos el siguiente código XAML.

       1: <StackPanel Grid.Row="1" Margin="120,20,20,20">

       2:     <TextBlock HorizontalAlignment="Left" Name="txtSaludo" Text="" FontSize="24" />

       3: </StackPanel>

Cabe descacar que de acuerdo a la página que hemos creado y por defecto en su creación, ésta tiene un Grid que actúa como panel principal en el que se encuentran dos filas.

La primera de esas filas está reservada para el botón de retroceso y que nos llevará a la página que ha llamado a esta y que en nuestro caso será MainPage.xaml, y una segunda segunda fila que contendrá el resto de la página que es donde hemos querido insertar nuestros controles.

Esto lo logramos utilizando la instrucción XAML Grid.Row="número_de_fila".

Volvamos nuevamente a nuestra página principal MainPage.xaml.

Agregando eventos a la página principal

Nos hemos centrado bastante en el diseño de nuestras dos páginas, sin embargo y para que haya funcionalidad, debemos hacer aún algunos pequeños ajustes.

Por un lado, la caja de texto o control TextBox de la página MainPage.xaml no posee ningún nonbre. Dicho de otra forma, cuando queramos hacer referencia a este objeto o control, no tendremos forma de hacerlo, por lo que agregaremos al código XAML una propiedad Name.

El código de nuestro control TextBox para nuestra página XAML MainPage.xaml de la siguiente manera.

       1: <TextBox x:Name="txtNombre" HorizontalAlignment="Left" Margin="240,40,0,0" 

       2:          TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="300" />

En otro orden de cosas, nuestro control Button no tiene asociado ningún evento.

Lo que queremos, es que al hacer clic sobre el botón, éste llame y cargue la página Prueba.xaml que hemos creado.

Para ello, vamos a hacer un clic sobre el control Button del código XAML, y vamos a acudir a la ventana de Propiedades.

Dentro de esta ventana, vamos a situarnos en los eventos del control (el icono que simula un rayo) y vamos a hacer doble clic sobre la caja de texto a la derecha de Click.

De esta forma, agregaremos un evento Click asociado a nuestro control Button, de tal manera que al hacer clic sobre el botón, carguemos la página Prueba.xaml que es el objetivo buscado.

Una vez hecho esto, se abrirá el código asociado a nuestro código XAML, es decir, para MainPage.xaml, el fichero de código C# MainPage.xaml.cs.

       1: private void Button_Click_1(object sender, RoutedEventArgs e)

       2: {

       3: }

Nota adicional: Como acabamos de hacer diferentes acciones como agregar un nombre a los controles y un evento, antes de continuar se recomienda compilar la aplicación para que los ajustes y cambios estén bien acoplados a la aplicación.

Bien, llegados a este punto, ha llegado el momento de programar nuestro evento Click sobre el control Button.

Programando el evento del control Button de nuestra página principal

¿Qué queremos hacer?.

Sencillamente, que al hacer clic sobre el control Button, llamemos a la página Prueba.xaml.

Sin embargo, debemos tener en cuenta algunos detalles.

Un detalle funcional de nuestro ejemplo que no obligado, es obligar a que en la caja de texto o control TextBox, tengamos algo de texto. En caso contrario, impediremos la llamada y consiguiente carga de la página Prueba.xaml.

El segundo de los detalles y de carácter funcional puro, es que cuando llamemos a la página Prueba.xaml, lo hagamos porque la caja de texto o control TextBox posee un texto, y que ese texto viaje a dicha ventana y nos lo muestre, de forma que cerremos el círculo de navegación entre una página y otra.

Para llevar a cabo ambas operaciones, vamos a escribir el siguiente código fuente en C# asociado con el evento Click del control Button.

       1: private void Button_Click_1(object sender, RoutedEventArgs e)

       2: {

       3:     if (string.IsNullOrWhiteSpace(this.txtNombre.Text))

       4:     {

       5:         Windows.UI.Popups.MessageDialog messageDialog = new Windows.UI.Popups.MessageDialog(

       6:                                                                     "Debe escribir un nombre válido.",

       7:                                                                     "Sample 1");

       8:         var response = messageDialog.ShowAsync();

       9:     }

      10:     else

      11:     {

      12:         this.Frame.Navigate(typeof(Prueba), this.txtNombre.Text);

      13:     }

      14: } // Button_Click_1

Si ejecutamos nuestra aplicación, observaremos que nuestra aplicación trabajar de momento, tal y como queremos.

Observando el código de la llamada, vemos que además de llamar a la página Prueba u tilizando el método Navigate, le estamos indicando el texto de nuestro control TextBox.

this.Frame.Navigate(typeof(Prueba), this.txtNombre.Text);

Sin embargo, nuestra página Prueba.xaml aún no es consciente de que la estamos indicando nada (concretamente y en nuestro caso, el contenido de nuestro control TextBox en nuestra página principal MainPage.xaml).

(…Continúa…)

Publicado por Jorge Serrano | 1 comment(s)

Archivado en: Windows 8,.NET Framework 4.5,Visual Studio 2012

29/6/2012 7:30

Operaciones básicas de programación con Metro y Windows 8 (I)

Nota preliminar del autor: Las entradas y subentradas que he elaborado constituyen una toma de contacto con Metro y Visual Studio 2012, pero no están pensadas pensando en la interfaz Metro. Por esta razón, las entradas tratan de abordar conceptos de una forma de desarrollar una aplicación Metro, pero debemos tener en cuenta que a la hora de desarrollar una aplicación Metro, ésta debe seguir unas normas y pautas de diseño por las cuales, Microsoft podría rechazar nuestra aplicación.

Navegación entre páginas de una aplicación - Introducción