Hoy nuestro foco es en menús contextuales. Estos son aquellos pequeños comandos que se muestran ocasionalmente en tu aplicación cuando das un clic derecho o algo similar. Microsoft ofrece una guía muy especial en cuanto al uso de menús contextuales y cuando usar un control de AppBar en su lugar y seguiremos estas reglas en este artículo.

¿Qué es un menú contextual?

Si has usado Windows 8, probablemente los hayas encontrado. Comúnmente ellos se muestran al momento de dar clic derecho en algo que no puedas seleccionar o texto con el que quieras interactuar. Aquí hay un ejemplo de menú contextual:

(imagen de: http://msdn.microsoft.com/library/windows/apps/Hh465308)

Podrías también lanzar un menú contextual desde un elemento en tu página que no sea seleccionable como esta imagen en mi aplicación de ejemplo:

Dar clic derecho en la imagen lanza el menú contextual a la derecha. (Te mostraré como hacer que esto suceda a continuación). Cada uno de los comandos tendrán una función asignada a ella, el cual es ejecutado cuando el elemento sea presionado.

Determinando la ubicación de un elemento.

Quizá hayas notado que los menús contextuales aparecen adyacentes directamente al elemento que ha sido seleccionado. Esto no sucede por magia. De hecho deberemos determinar la posición del elemento seleccionado por nosotros mismos (así como su tamaño) y pasarlo a nuestro control menú cuando lo creamos en forma de un objeto de Rectángulo. Aquí esta el método que he creado para determinar su ubicación.

private Rect ObtenerRect(object sender)
{
FrameworkElement elemento = sender as FrameworkElement;
GeneralTransform transformacionElemento = elemento.TransformToVisual(null);
Point point = transformacionElemento.TransformPoint(new Point());
return new Rect(point, new Size(elemento.ActualWidth, elemento.ActualHeight));
}

Como puedes ver, seré capaz de para mi “sender” en este método y regresar un objeto Rectángulo con un punto (la ubicación de la esquina superior derecha de nuestro elemento) y tamaño (las dimensiones de nuestro objeto llamado).

Creando un menú contextual

Una vez que ya tengo el método ObtenerRect() en su lugar creando un menú contextual cerca de nuestros controles es simple. En este ejemplo, he agregado un evento Right Tapped a mi imagen el cual llama a este método.

private async void Element_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
PopupMenu menuContextual = new PopupMenu();
menuContextual.Commands.Add(new UICommand("La liga silverlight", (command) => { ((Grid)Logo.Parent).Background = new SolidColorBrush(Colors.Red); }));
await menuContextual.ShowForSelectionAsync(ObtenerRect(sender), Placement.Right);
}

Como puedes ver arriba, esto simplemente crea un nuevo control de tipo PopupMenu, agrega un comando a el (con el código de ejecución especificado en la expresión lambda) y llama al método ShowForSelectionAsync() para mostrarlo. Este método toma dos parámetros.

* El primero es el valor de Rectángulo que estamos obteniendo de nuestro método ObtenerRect(). Pasa el sender y obtiene el rectángulo apropiado de regreso.

* El segundo es la ubicación del menú contextual. En mi ejemplo, coloqué Placement.Right como mi valor. Tienes cuatro opciones pero no pierdas tiempo en esto. La guía de Microsoft en menús contextuales es que “aparezcan sobre el objeto sobre el que están actuando a menos que se interponga sobre otros elementos de la interfaz en cuyo caso se debe colocar a un lado o por debajo del objeto”. Mantén la experiencia en Windows 8 consistente para tus usuarios a menos de que tengas una buena razón para hacerlo de otra manera.

Ejecutar este código, como se muestra arriba, resultará en un menú que lucirá como esto:

Y cuando yo ejecute esta opción, el fondo de la página se volverá rojo. Como esto.

Así que así es como mostramos un menú contextual. Pero ¿cuántos comandos podemos tener a la vez? La respuesta es SEIS. Agregar más de 6 elementos a tu menú PopupMenu resultará en un error cuando trates de crearlo. Lo mostré antes pero aquí está un ejemplo de un menú de cinco elementos.

Finalmente, también tienes la opción de crear un UICommandSeparator() el cual es simplemente una línea horizontal en lugar de un comando. Los separadores tomarán lugar en uno de tus seis espacios disponibles sin embargo; así que ten esto en cuenta cuando lo uses, esto lucirá así.

Para hacer esto, tu sentencia de creación del comando debería lucir como esto:

menuContextual.Commands.Add(new UICommand("31 Días de Windows 8", (command) => { ((Grid)Logo.Parent).Background = new SolidColorBrush(Colors.Orange); }));
menuContextual.Commands.Add(new UICommandSeparator());

¡Esto es todo! Ahora deberías ser capaz de agregar menús contextuales a tus aplicaciones cuando las AppBars y otros elementos no tienen sentido. Pero ¿qué hay acerca interactuar con algo de texto en una caja de texto?

Lanzar un menú contextual desde una caja de texto

Actualmente, cerca de todo en este proceso es el mismo, excepto por las matemáticas de donde surge la la caja contextual. Inicialmente al comenzar a resolver este problema, estaba esperando agregarla en un menú contextual que ya apareciera cuando des clic derecho en el texto.

Mientras aparece no puede. Así que para nuestro ejemplo, vamos a decir que queremos mantener todas esas opciones, pero también agregar algunas nuevas. Para hacerlo, primero necesitamos sobre escribir el menú contextual creando un manejador de eventos para cancelar el pre establecido y recrear toda su funcionalidad.

Para hacer esto, creamos un manejador de eventos como el siguiente.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
txtLipsum.ContextMenuOpening += txtLipsum_ContextMenuOpening;
}

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
txtLipsum.ContextMenuOpening -= txtLipsum_ContextMenuOpening;
}

También cree una sentencia para retirar el manejador de eventos cuando deje la página.

En el método que este manejador de eventos llama, cancelaremos la llamada inicial con Handled = true, y después crear nuestro propio menú contextual que aún haga algunas de las llamadas apropiadas al portapapeles. Solo vamos a cubrir esta parte brevemente en este artículo pero consumiremos el artículo entero de mañana para las diferentes formas de usar esta gran herramienta.

En suma, encontrar el lugar adecuado para mostrar un menú contextual dentro de un TextBox es diferente a solo determinar la posición de un control en la página. Aquí está mi método ObtenerRectanguloTexto().

private Rect ObtenerRectanguloTexto(TextBox cajaTexto)
{
Rect contenedorDatos = cajaTexto.GetRectFromCharacterIndex(cajaTexto.SelectionStart, false);

GeneralTransform transform = cajaTexto.TransformToVisual(null);
Point punto = transform.TransformPoint(new Point());
punto.X = punto.X + contenedorDatos.X;
punto.Y = punto.Y + contenedorDatos.Y;

return new Rect(punto, new Size(contenedorDatos.Width, contenedorDatos.Height));
}

Y aquí esta el método para crear nuestro menú Popup (notarás que he usado un método secundario para determinar que comando es presionado que no use expresiones lambdas en esta ocasión. Es más fácil para lectura pero deberías también notar que el método es mucho más largo).

async void txtLipsum_ContextMenuOpening(object sender, ContextMenuEventArgs e)
{
e.Handled = true;
TextBox textoResaltado = (TextBox)sender;

PopupMenu menuContextual = new PopupMenu();
menuContextual.Commands.Add(new UICommand("Cortar", null, 0));
menuContextual.Commands.Add(new UICommand("Copiar", null, 1));
menuContextual.Commands.Add(new UICommand("Pegar", null, 2));
menuContextual.Commands.Add(new UICommand("Seleccionar todo", null, 3));
menuContextual.Commands.Add(new UICommandSeparator());
menuContextual.Commands.Add(new UICommand("Borrar", null, 4));

var comandoElegido = await menuContextual.ShowForSelectionAsync(ObtenerRectanguloTexto(textoResaltado));

if (comandoElegido != null)
{
String texto;
DataPackage paqueteDatos;

switch ((int)comandoElegido.Id)
{
case 0: //Cortar
texto = textoResaltado.SelectedText;
textoResaltado.SelectedText = "";
paqueteDatos = new DataPackage();
paqueteDatos.SetText(texto);
Clipboard.SetContent(paqueteDatos);
break;
case 1: //Copiar
texto = textoResaltado.SelectedText;
paqueteDatos = new DataPackage();
paqueteDatos.SetText(texto);
Clipboard.SetContent(paqueteDatos);
break;
case 2: //Pegar
texto = await Clipboard.GetContent().GetTextAsync();
textoResaltado.SelectedText = texto;
break;
case 3: //Seleccionar todo
textoResaltado.SelectAll();
break;
case 4: //Borrar
textoResaltado.SelectedText = "";
break;
}
}
}

Si estás siguiendo tu propio proyecto, deberías ahora ser capaz de resaltar algo de texto en tu caja de texto y obtener un menú similar al de la imagen de arriba.

En resumen

Hoy vimos el arte de crear menús contextuales para nuestros usuarios. Hay una manera excelente de proveer interacciones con elementos que no sean seleccionables o para comandos que tengan más sentido estando directamente adyacentes al elemento con el que se está interactuando.

Si quisieras ver el código de ejemplo completo para este artículo, presiona sobre el ícono de abajo.

Mañana, como prometí, nos aventuraremos en la funcionalidad del portapepeles disponible para nosotros en el desarrollo de Windows 8. ¡Nos vemos entonces!

Hoy vamos a dar un vistazo al teclado en pantalla de Windows 8. Microsoft no parece hacer una distinción de nombres entre el teclado que aparece cuando haces tap con tu dedo en un control TextBox y el que encuentras en el Centro de Accesibilidad. Vamos a enfocarnos hoy en el teclado que se ve como esto:

Por otro lado, el teclado de Accesibilidad, es una herramienta diseñada para hacer más fácil el uso de la computadora a quienes no pudieran usar el teclado de ninguna forma. Lo puedes encontrar abriendo el centro de Accesibilidad en tu maquina…

Y haciendo click en la opción de “Iniciar Teclado en Pantalla” vas a descubrir un teclado que se ve como este:

El enfoque principal de este teclado es permitir al usuario usar Windows completamente sin tener un teclado conectado a su computadora. No es personalizable, y no responde a ningún código que escribamos en este artículo. El teclado es también una de las pocas ventana que pueden ser puestas sobre la pantalla de Inicio. Míralo aquí:

OK, así hemos usado los primeros párrafos de este artículo hablando acerca de un teclado que NO es el objetivo de este artículo. ¿Porque? Hay dos razones:

1. Si estas usando dispositivos no touch mientras trabajas con este artículo (o en tu propia app y quieres usar las características del teclado regular touch), te encontraras con que los clicks del mouse no lanzan el teclado touch en tu máquina. Así que buscaras en la web una solución para hacer que se muestren.
2. Mientras buscas por la web más información sobre manipular el teclado en pantalla en Windows 8, vas a encontrar varios artículos sobre el de la versión de Accesibilidad, que es el que no necesitas. Si encuentras un artículo apropiado sobre como lanzar el teclado touch, probablemente sea este, porque no pude hallar una forma de hacerlo funcionar.

La primera razón de esto es porque este es uno de las pocas veces que Windows 8 hace distinción entre un click de mouse y un tap de dedo. Si das click en un TExtBox, Windows 8 asume que estas usando un teclado real, incluso si estas usando una máquina habilitada para touch. Un tap de dedo, sin embargo, mostrara el teclado que vamos a usar hoy.

Para ahorrarte algo de frustración, al desarrollar tu aplicación que tomara ventaja de el teclado en pantalla, usa el simulador si no estas trabajando en una maquina touch. Te permite simular “taps” con tu mouse. Aquí es donde lo puedes ver:

OK, ahora que hemos hecho a un lado todo eso, iniciemos de una vez este artículo.

Usando el teclado en pantalla

Primero, demos un vistazo a los estados por defecto del teclado en pantalla que el usuario puede navegar en cualquier momento cuando la pantalla está abierta. Hemos visto ya la vista QWERTY standard:

Pero hay muchas más. Cuando construimos una aplicación, nuestro primer enfoque, mas que cualquier otro, debe ser el hacer que las tareas que el usuario necesita hacer sean lo más fácil de cumplir que se pueda. (Eso ESTÁ en tus prioridades, correcto?) En ese sentido, el teclado en pantalla puede ser manipulado para que eso sea posible. Hay una propiedad que puede establecerse en los controles TextBox llamada InputScrope que nos permite mostrar el teclado apropiado para la tarea a realizar. Si un InputScope no se especifica, el teclado normal se mostrará. Aquí está como luce el código:

<TextBox InputScope="EmailSmtpAddress" />

Vas a encontrar, mienstra empiezas a jugar con el InputScope, que hay de hecho 18 diferentes valores de InputScope que pueden ser usados (pero para usuarios Anglo-parlantes, hay de hecho solo tres teclados diferentes por ahora). Estos son (en orden alfabético):

• AlphanumericFullWidth
• AlphaNumericHalfWidth
• ChineseFullWidth
• ChineseHalfWidth
• Default
• EmailSmtpAddress
• HangulFullWidth
• HangulHalfWidth
• Hanja
• Hiragana
• KatakanaFullWidth
• KatakanaHalfWidth
• NativeScript
• Number
• NumberFullWidth
• Search
• TelephoneNumber
• Url

Los únicos valores de ámbito de entrada que responden a computadoras con el lenguaje Inglés de pantalla son: Default, EmailSmtpAddress, Number, Search, TelephoneNumber, y Url. Aquí está como se ven:

EmailSmtpAddress (agrega el botón “@” y “.com”)

Url (agrega botones “/” y “.com”, barra de espacio más pequeña, tecla Go)

Number y TelephoneNumber (muestra el teclado numérico)

Búsqueda (lo mismo que el teclado por defecto, pero la tecla Enter remplazada por Search o Búsqueda)

El resto de los valores InputScope están generalmente enfocados a los lenguajes Asiatico Orientales, y aunque no les quiero faltar al respeto, no se lo suficiente acerca de esos conjuntos de caracteres para tener una discusión inteligente acerca de las pequeñas diferencias entre caracteres FullWidth y HalfWidth.

Sumado a nuestros valores InputScope, es importante entender las otras opciones que nuestros usuarios pueden navegar en cualquier momento cuando el teclado esta en la pantalla del usuario. Aquí las tienes:

Letras Mayúsculas

Emoji (hay de hecho 30 PAGINAS de emoji, haz click aquí para verlos todos)

Simbolos (un segundo set de simbolos después del que se muestra con el teclado Number)

Teclado dividido (una opción del usuario, este teclado esta optimizado para escritura con pulgar)

Teclado de tinta (Este teclado hace reconocimiento de escritura a mano)

Obviamente, este es un gran conjunto de puntos de entrada para nosotros como desarrolladores, y proporcionando el teclado adecuado para el trabajo hará tu app más útil para tus usuarios. Hay también una distribución de teclado más, y es el del control PasswordBox. Un control PasswordBox muestra símbolos en vez de los caracteres que se escribieron, y el teclado se ve como esto:

Notaras que también tiene un botón “Ocultar presión de teclas”. Hay veces cuando la gente puede ver tu máquina (especialmente si la estás proyectando a una audiencia) y no quieres que sean capaces de ver los teclazos de tu password. Este botón no resalta los botones cuando son tocados. (Vas a notar también que el botón de Emoji esta deshabilitado, porque esos caracteres no deben ser usados para un password.)

En el pasado, he escrito artículo acerca de TextBoxes y teclados virtuales, y revise cada uno de los casos de uso donde quieras mostrar el teclado sin mostrar lo que escribe el usuario. Un gran ejemplo de esto podría ser el juego de Ahorcado. Quieres que el usuario sea capaz de elegir una letra, pero también ocultar el teclado así el usuario puede ver su progreso.

En Windows 8, esto no es posible ya. No puedes lanzar el teclado en pantalla vía código. De hecho, establecer el foco a un control TextBox no hara nada más que hacer el cursor intermitente. Específicamente requiere que un evento tap (no un click de mouse) ocurra en el TextBox antes que aparezca el teclado en pantalla. (Esa es la misma razón de porque debes usar el Simulador al depurar este tipo de funcionalidad en tus apps.)

Resúmen

Hot, hemos cubierto una variedad de teclado que están disponibles a nuestros usuarios. Podemos aprovechar los valores InputScop para mostrar el teclado correcto en el momento correcto. Adicionalmente, aprendí que hay 30 paginas completa de caracteres Emoji para usar también. (Si no es obvio, me beneficio mucho de escribir estos artículos también!)

Si quieres ver una aplicación funcional que usa cada uno de los valores InputSCop, haz click en el icono para descargarlo:

Mañana, vamos a echarnos un clavado a usar los Menus Contextuales para ofrecer a nuestro usuario comandos contextuales directamente en la pantalla de la app. ¡Hasta entonces!

Aquí esta la lista enorme de Emoji, en caso de que hayas olvidado hacerle click:

Hoy vamos a hablar acerca de uno de mis elementos favoritos e cualquier plataforma de desarrollo. Tener el conocimiento de la ubicación del usuario (o más específicamente, del dispositivo) hace mejor a cualqueir aplicación. Aquí están algunos ejemplos de como:

Aplicaciones de línea de negocios

Conoce que planta estará visitando tu gerente hoy de modo que el tenga toda la documentación apropiada para la maquinaria en esa instalación. Además tu aplicación podrá navegar e fotos y nombres de los empleados en ese lugar así ellos estarán más preparados cuando el llegue.

Juegos

Identifica otros jugadores cercanos y ten la oportunidad de retarlos a un juego. No solo mejorará potencialmente la latencia de red para ellos sino que también podrás formar un gremio de nada. Crea un juego global de parejas, basado únicamente en la proximidad, no en contacto.

Mapas

Duh. Haremos esto como una parte del código de ejemplo de hoy.

Viajes

Reconoce la distancia del usuario y tiempo de viaje potencial desde el aeropuerto y alértalos  de caer en la urgencia de perder su vuelo. Además, una vez que has establecido que no llegarán a tiempo podrás ayudarlos a encontrar el siguiente vuelo disponible sin que el usuario lo tenga que hacer por sí solo.

Ejercicio

Hay toneladas de aplicaciones disponibles para seguir tu ruta de ejercicio. Piensa en correr, ciclismo, etcétera. La aplicación de geolocalización obvia de estas aplicaciones es la habilidad de mapear la ruta que tomaste durante tus viajes. Una más importante, sin embargo, creo que es la responsabilidad que probablemente cae en los fabricantes de SO mismos, es la habilidad de reconocer un accidente. En promedio, 4500 ciclistas al año son víctimas de situaciones de accidentes, donde ellos son abandonados lastimados (o peor) en un lado del camino. En el mundo de hoy, casi todo el mundo tiene un teléfono con ellos, incluso al correr o andar en bicicleta. Imagina que tu teléfono es capaz de reconocer un impacto grande (usando información del acelerómetro o giroscopio), seguido de ningún movimiento. Después de 30 segundos de movimiento nulo, tu teléfono te incita a llamar a un número de emergencia y enviar mensajes de texto a una lista pre seleccionada de contactos con un mensaje de ayuda y tu ubicación. Después de otros 30 segundos inmediatamente llama a emergencias y envía la información. Esta funcionalidad podría salvar vidas, tantas como esos ciclistas que fallecen sin ayuda solo porque nadie sabe donde están. Siento ser tan crudo, pero es una razón importante en la cual pensar.

Como puedes ver, hay siempre una razón por la cual tomar información de ubicación y hacer tu aplicación incluso mejor. Además, si amas las ideas que te doy arriba eres completamente libre de robarlas en tu favor. Probablemente yo nunca cree ninguna de estas aplicaciones. Necesitaría haber 48 horas en un día para hacer que eso sucediera.

Actualizando nuestro manifiesto

Afortunadamente, obtener la información de nuestra ubicación geográfica es muy sencillo y como de costumbre, tenemos que declarar que la Ubicación es una de nuestras capacidades a usar. Para hacer esto, abre la sección de Capacidades de tu archivo package.appxmanifest y selecciona la caja de Ubicación.

Si omites este paso y solo tratas de implementar el código del resto del artículo no tendrás ningún error pero tampoco obtendrás ninguna información.

Obteniendo nuestra ubicación geográfica

En este ejemplo, he construido una aplicación que monitoree constantemente la ubicación del dispositivo del usuario. Lo primero que me confundió en este proceso fue como preguntar al usuario por permiso para iniciar la localización en la aplicación. Si revisas el Día #11 Pantalla de bloqueo, necesitamos pedir un permiso explícito del usuario para acceder a su pantalla de bloqueo. Con la ubicación, sin embargo no. El simple acto de tratar de acceder a la información le preguntará a tu usuario por ti. Para hacer esto increíblemente más fácil, aquí está TODO el código que necesitarás para acceder a la ubicación de un dispositivo desde tu aplicación (Ten en cuenta que estoy enviando todos mis valores a cajas de texto en mi MainPage.xaml que muestran la información. Todas están nombradas como [DataType]Value para hacerlo obvio).

Geolocator ubicacion;

protected override void OnNavigatedTo(NavigationEventArgs e)
{
ubicacion = new Geolocator();
ubicacion.PositionChanged += location_PositionChanged;
ubicacion.StatusChanged += location_StatusChanged;
}

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
ubicacion.PositionChanged -= location_PositionChanged;
ubicacion.StatusChanged -= location_StatusChanged;
}

async void location_PositionChanged(Geolocator sender, PositionChangedEventArgs args)
{
await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
{
Geoposition posicion = args.Position;

LatitudeValue.Text = posicion.Coordinate.Latitude.ToString();
LongitudeValue.Text = posicion.Coordinate.Longitude.ToString();
AccuracyValue.Text = posicion.Coordinate.Accuracy.ToString();

TimestampValue.Text = posicion.Coordinate.Timestamp.ToString();

if (posicion.Coordinate.Altitude != null)
AltitudeValue.Text = posicion.Coordinate.Altitude.ToString()
+ "(+- " + posicion.Coordinate.AltitudeAccuracy.ToString() + ")";
if (posicion.Coordinate.Heading != null)
HeadingValue.Text = posicion.Coordinate.Heading.ToString();
if (posicion.Coordinate.Speed != null)
SpeedValue.Text = posicion.Coordinate.Speed.ToString();
});
}

async void location_StatusChanged(Geolocator sender, StatusChangedEventArgs args)
{
await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
{
StatusValue.Text = args.Status.ToString();
});
}

Como podrás haber adivinado, esta es una operación manejada por eventos. Cuando mi página se carga, creo un nuevo objeto de tipo Geolocator y agrego dos eventos: PositionChanged y StatusChanged.

PositionChanged es el importante. Aquí es donde obtenemos toda la información útil como Latitud, Longitud y Precisión. Todos estos valores vienen de la clase Geocoordinate y como puedes ver en el código de arriba, hay muchas más.

* Accuracy es la medida, en metros, del radio de un círculo que tenga nuestros valores de latitud y longitud como punto central. Como esto.

* Timestamp es el tiempo actual en el que el valor de la ubicación fue leído. Esto incluye información de la zona horaria así que tendrás que convertir los tiempos para almacenar todo en UTC.

* Altitude es la elevación del dispositivo, en metros. Este es probablemente encontrado en dispositivos con un barómetro (cubriremos los sensores más tarde en esta serie) pero es una pieza valiosa de información si la puedes tener.

*AltitudeAccuracy es como nuestro otro valor de precisión, excepto que es el simple margen de error para el valor de altitud. Es decir, que estás en + o – estos metros.

* Heading también será mostrado con el sensor adecuado, la brújula. Esto mide en grados relativos a nuestro norte verdadero.

* Speed puede ser técnicamente calculado al monitorear los valores de latitud/longitud cada determinado tiempo, pero ellos nos lo han hecho increíblemente fácil para nosotros. Es medido en metros/segundo pero es un valor opcional que el dispositivo GPS puede dar. Esto significa que no todos los dispositivos pueden regresar un valor.

El otro código, del ejemplo de arriba del que me gustaría hablar es acerca de la cosa async/await. Quizá hayas notado que ambos manejadores de eventos tienen async en el inicio, y que después tenemos algo como esto:

await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => { });

Dado que la adquisición de nuestra ubicación sucede en un hilo en segundo plano, necestiamos usar un Dispatcher para regresar a nuestro hilo primario para poder escribir nuestros valores en la pantalla. Sin este código tendremos un error en el momento que tratamos de manipular la capa de la UI dado que los hilos en segundo plano no tienen acceso a esto directamente. Aquí está como luce mi UI básica (no, no es ahí donde vivo pero podrías saberlo si checas esa ubicación):

Así que hemos obtenido nuesta información de ubicación pero aún está el manejador de eventos de StatusChanged que creamos antes. Esto no es algo a lo que generalmente le damos acceso a nuestro usuario es más como información administrativa para nosotros pero es un conjunto importante de información de cualquier manera. Puede tener seis diferentes valores.

* notInitialized es regresado cuando tu aplicación no ha solicitado permiso para acceder a la información de ubicación.

* disabled es el valor que obtendrás cuando el usuario rechace tu solicitud de acceder a su información de ubicación.

* notAvailable es regresado si el dispositivo del usuario no soporta la ubicación espacial.

* noData es regresado si el dispositivo del usuario soporta la ubicación pero no puede obtener ninguna. Esto podría pasar en un escenario donde el dispositivo no está conectado a Wi-Fi y está dentro de un edificio por ejemplo.

* initializing es el valor del estado que recibirás entre el momento en que el usuario autorice el acceso a su ubicación y el momento en que comiences a recibir esa información. En usos futuros de tu aplicación, este también se mandará cuando tu aplicación esté esperando a acceder a los datos de ubicación por primera vez.

* ready es la respuesta de oro y te permite saber que la información esta disponible para tu uso.

Así que el ejemplo que te he dado en este artículo te permite reconocer cada vez que la ubicación de tu usuario cambie y todas las veces que eso suceda. Si solo necesitas obtener esta información UNA SOLA VEZ, digamos, para etiquetar una imagen que el usuario acaba de tomar, solo haces una solicitud al objeto de tipo Geolocator sin tener que crear todos los eventos que he marcado arriba. En el método de abajo, podemos hacer una llamada simple al método ObtenerPosicionUnaVez en su lugar.

async private void ObtenerUbicacionUnaVez()
{
Geoposition posicion = await ubicacion.GetGeopositionAsync().AsTask();

LatitudeValue.Text = posicion.Coordinate.Latitude.ToString();
LongitudeValue.Text = posicion.Coordinate.Longitude.ToString();
AccuracyValue.Text = posicion.Coordinate.Accuracy.ToString();
}

En este caso, solo necesitamos un valor simple, una ocasión. No crees un ciclo que haga esta llamada una y otra vez, es mucho más lento y ahorrarás toneladas de recursos de la máquina siguiendo el ejemplo anterior que registró nuestros manejadores de eventos.

Usar el simulador para para fingir ubicación

Si estás usando una PC de escritorio tradicional, quizá ya has notado que tu máquina no hace un gran trabajo determinando tu posición. La ubicación por red puede ser decente pero es poco probable que tus coordenadas latitud y longitud sean muy acertadas. Entra al simulador. Puedes ajustar una ubicación específica en el simulador sin tener que estar en un avión. Para hacer esto solo abre los ajustes de ubicación del simulador.

En este punto, puedes darle los valores de latitud, longitud, altitud y valores de precisión:

¡Ahí tienes! Puedes ahora escribir una aplicación que pueda determinar donde se encuentra el dispositivo del usuario y mientras la estás construyendo, puedes pretender que estás en cualquier parte de la tierra. No es una forma mala de viajar ¡al menos los costos son menores!

En resumen

Hoy hablamos acerca de los datos de geo localización y que tan importante puede ser para cualquier aplicación en el mercado. Vimos como seguir la ruta de un usuario, también obtener su ubicación una sola vez para aplicaciones que solo necesitan la ubicación específica “justo ahora” pero no todo el tiempo.

Si quisieras descargar una aplicación de ejemplo que incluya todo el código de este artículo, da clic en el ícono de abajo.

Mañana, vamos a ver el teclado en pantalla, InputScopes y cajas de texto. ¡Nos vemos entonces!

Hemos pasado los últimos días enfocándonos mucho en actualizar el sistema con información para permitirle saber al usuario que es lo que sucede. De hecho, en los primeros 12 días esta serie hemos pasado muy poco tiempo hablando de una de las actividades más comunes que vamos a encontrar en el desarrollo de Windows 8: La navegación entre páginas con XAML.

Hoy corregiremos lo que estaba incorrecto metiéndonos en este tema. Hay tres escenarios específicos que quiero asegurarme de cubrir en este artículo:

* El simple acto de navegación de la página A a la página B. ¿Qué sucede entonces y qué información está disponible para nosotros?

* Pasar información de una página a otra. Esto no solo incluye cadenas y enteros, podemos pasar también objetos enteros entre páginas.

* Guardar el caché de las páginas. Cuando un usuario presiona el botón de retroceso, ellos no quieren descubrir que toda la información que ingresaron ha desaparecido. Discutiremos esto más adelante.

Navegar entre páginas en Windows 8 XAML

Parece que cada vez que encontramos una nueva plataforma hay también una nueva manera de navegar entre páginas en una aplicación XAML. Windows 8 no es diferente en ese aspecto. Este proceso es fácilmente explicado guiándote al momento de crear algunas páginas, así que iniciemos ahí.

Crea una nueva aplicación en blanco y después agrega dos nuevas páginas básicas en ella. Para este ejemplo puedes llamarlas PaginaA.xaml y PaginaB.xaml

En cada una de esas páginas, hay una línea de XAML que ajusta el el AppName.

<page .Resources>
<x:string x:Key="AppName">My Application</x:string>
</page>

Normalmente, moveríamos esto a nuesto archivo App.xaml y lo haríamos aplicar a todas las páginas de nuestra aplicación. Por hoy, vamos a usar este mecanismo simple para darle a cara una de nuestras páginas un nombre distinto que podamos ver cuando esté cargada. Ajusta el valor de PaginaA a “Página A” y el de PaginaB a “´Página B” de modo que tus páginas luzcan así:

Para hacer el ejemplo sencillo de usar, también vamos a hacer un cambio rápido a nuestro archivo App.xaml.cs. Cerca del fondo del método OnLaunched() está algo de código que luce como lo siguiente.

if (rootFrame.Content == null)
{
if (!rootFrame.Navigate(typeof(MainPage), args.Arguments))
{
throw new Exception("Failed to create initial page");
}
}

Vamos a querer cambiar la referencia de typeof(MainPage) a typeof(PaginaA). Como se muestra a continuación:

if (rootFrame.Content == null)
{
if (!rootFrame.Navigate(typeof(PaginaA), args.Arguments))
{
throw new Exception("Failed to create initial page");
}
}

Esto causará que tu aplicacion arranque con PaginaA como página inicial. Hasta este punto, ejecuta tu proyecto. Verás que comienza la pantalla de inicio y después PaginaA aparecerá. Deberías notar que incluso aún cuando en Visual Studio apareceuna flecha cerca del título de nuestra página esta enlazada a si es posible o no la página de “ir hacia atrás” con la propiedad Frame.GoBack. Hablaremos de ello más adelante.

Por ahora, vamos a la navegación. Has visto técnicamente como hacerlo desde App.xaml.cs pero luce un poco diferente cuando vayas de página en página. He agregado un control de tipo botón a mi archivo PaginaA.xaml.cs justo antes de la sección VisualStateManager. El XAML luce así:

<button x:Name="btnPagina"
Grid.Row ="1"
Content="A página B"
Width="150"
Height="150"
Click="btnPagina_Click"></button>

En el manejador de eventos para el botón, escribimos nuestra primera sentencia de navegación (¡finalmente!).

private void btnPagina_Click(object sender, RoutedEventArgs e)
{
Frame.Navigate(typeof(PaginaB));
}

Como puedes ver es un proceso muy sencillo. Lo vamos a hacer más complicado ahora al agregar a un nuevo botón a la página B. Esto podría parecer una tarea repetitiva pero notarás que podemos meternos en problemas rápidamente (deberías ejecutar tu proyecto en este momento para asegurar que de hecho navegas a tu página B). Agrega el mismo botón y su manejador de eventos en Pagina B pero obviamente apuntando a página A en esta ocasión. Ahora tienes un botón en cada página que apunta a la otra. Si tu solo usas estos botones para hacer tu navegación vas a terminar creando una GRAN fila de navegación de retroceso y esto hará al concepto del botón de regreso completamente irrelevante. Lo que necesitamos hacer en este caso es implementar un manejador de eventos para GoHome que es parte del objeto LayoutAwarePage que estamos usando. Para ilustrar efectivamente este ejemplo, agrega un segundo botón en tu PaginaB.xaml con un nuevo manejador de eventos. En este manejador de eventos, sin embargo no vamos a navegar a una página. En su lugar vamos a crear un evento GoHome y llamarlo. Lucirá así:

private void btnPagina_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
if (this.Frame != null)
{
while (this.Frame.CanGoBack) Frame.GoBack();
}
}

private void btnHome_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
base.GoHome(sender, e);
}

Como puedes ver, nuestro método GoHome ejecuta un ciclo rápido intentando “Volver” hasta que ya no pueda más. En este punto, terminamos en la cima de la fila de navegación en nuestra página inicial. Es un buen truco, pero creo que se ilustrará mejor con un video breve.

Pasar información entra páginas en Windows 8

Después, vamos a querer pasar información entre páginas. Quizá un objeto, quizá una cadena, información en todo caso. Mientras se retira, nuestro método Frame.Navigate() es sobrecargado para poder aceptar un parámetro de información. Para este ejemplo he agregado un TextBox y un Button a mi página A pero ahora voy a asumir que sabes como hacer esto. La parte importante de esto es donde tengo un manejador de eventos que envíe el valor del texto del TextBox y lo envíe como parte del método Navigate(). Como lo siguiente:

private void btnPagina_Click(object sender, RoutedEventArgs e)
{
Frame.Navigate(typeof(PaginaB), txtMensaje.Text);
}

Por otro lado, en la páginaB necesitamos atrapar esta información y desplegarla. De nuevo, he agregado un TextBlock en mi código de ejemplo (el cual podrás descartar al final del artículo) pero la pieza importante es mi nuevo manejador para el evento OnNavigatedTo() y atrapar la información cuando llegue.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);

string mensaje = e.Parameter as string;

if (!string.IsNullOrWhiteSpace(mensaje))
{
txtRecibido.Text = mensaje;
}
else
{
txtRecibido.Text = "Necesitas recibir una cadena. Regresa e ingresa un valor";
}
}

En la página B podremos recoger el valor obtenido de NavigationEventArgs.Parameter, donde lo estoy convirtiendo a valor de cadena. Necesitarás convertir tu valor a un tipo apropiado antes de que puedas utilizarlo, pero una vez que lo hayas hecho, podrás ¡pasar datos de una página a otra!

Además, mencionéantes que puedes pasar objetos completos, usando este mecanismo también. ¿Recuerdas nuestra clase Elemento del Día 4? Voy a pasar un Elemento personalizado de la página A a la página B en el siguiente ejemplo. Aquí está el código de la página A:

private void btnGalio_Click(object sender, RoutedEventArgs e)
{
Frame.Navigate(typeof(PaginaB), new Elemento
{
NumeroAtomico = 31,
PesoAtomico = 69.72,
Categoria = "Otros metales",
Nombre = "Galio",
Simbolo = "Ga",
Estado = "Sólido"
});
}

Puedes ver claramente que estamos pasando un elemento completamente nuevo a la página B. Aquí está la manera de atrapar esta información en la página B.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);

Elemento elementoRecibido = e.Parameter as Elemento;
txtRecibido.Text = elementoRecibido.Categoria;
}

Creando caché de páginas para un mejor rendimiento del botón de regreso

La última cosa que queremos manejar relacionado a la navegación es el caché de las páginas. Para este ejemplo final estoy usando nuestra aplicación de ejemplo en el estado donde estaba pasando valores de cadenas hacia atrás y adelante. Quizá hayas notado, si construiste tu propia aplicación de ejemplo que si escribes algo en el texto de la página A y envías la información a la página B, cuando presiones el botón de volver y regreses a la página A, esta no recordará lo que has escrito en la caja. Este es un patrón de experiencia de usuario increíblemente frustrante que puedes ver en la web todo el tiempo.

Podemos evitar esto con una simple línea en el constructor de las páginas a las que queremos crearles caché.

public PaginaA()
{
this.InitializeComponent();
NavigationCacheMode = NavigationCacheMode.Enabled;
}

Después de que ajustes el NavigationCacheMode, encontrarás que los valores del TextBox (y todo lo demás en tu página) permanecerán al momento de regresar. Dale una prueba, es una mucho mejor experiencia y no requiere que nosotros llenemos y rellenemos la forma cada vez que el usuario regrese a la página.

En resumen

Esta es una vista extensa de la nevegación en aplicaciones XAML para Windows 8. Cubrimos la manera de movernos entre páginas, pasar datos entre páginas y atrapar estas páginas para cuando el usuario de clic en los botones de volver.

Si quisieras descargar el código completo de este artículo, puedes dar clic sobre el ícono de abajo. (Nota por favor que el botón del Galio está deshabilitado, necesitarás eliminar los comentarios para el manejador de eventos para este botón, también como el código en la página B para hacerlo funcionar. La página B solo puede aceptar un tipo de parámetro a la vez y está actualmente listo para la cadena).

Mañana, vamos a iniciar nuestra conversación determinando la ubicación actual de un usuario usando GeoLocalización, incluyendo las reglas que van al usar esta tecnología. ¡Nos vemos entonces!

Hoy, vamos a hablar acerca de las tareas en segundo plano. La vía pequeña para describir una tarea en segundo plano es esta:

Una tarea en segundo plano es el código que corre cuando tu aplicación no.

Piensa en estos escenarios.

* Audio vía streaming continuo, incluso cuando el usuario esta ejecutando otra aplicación.

* Actualizar el mosaico de la aplicación para reflejar nuevos datos.

* Mostrar una notificación toast para hacerle saber al usuario que nueva información ha sucedido.

* Actualizar la pantalla de bloqueo, incluso cuando el dispositivo esta bloqueado.

Obtener una tarea en segundo plano establecida y registrada con el sistema es un proceso de dos pasos. Primero, tienes que registrar la tarea en segundo plano en tu archivo package.appxmanifest. Una vez que ha sido hecho, aún necesitas registrar los eventos de la tarea con el sistema del código de tu aplicación y después están los eventos adicionales para controlar lo que sucede cuando la tarea en segundo plano finaliza. Cubriremos estos escenarios en este artículo.

Crear una clase de tarea en segundo plano

Mi primer paso es siempre crear un proyecto secundario que contendrá mis tareas en segundo plano. No es requerido pero es una buena separación visual de tu código.

Cuando creas un proyecto, elige “Windows Runtime Component” como el tipo de proyecto.

Por defecto, tendrás una clase llamada Class1.cs. Puedes renombrarla si gustas o solo eliminarla y agregar una nueva clase al proyecto. En cualquier caso, vas a crear una nueva clase llamada ActualizarMosaico.cs

Ahora, las tareas en segundo plano deben implementar una interfaz muy específica: IBackgroundTask. Esta solo implementa un método, Run(), este método es el que llamaremos cuando nuestra aplicación inicie la tarea en segundo plano. Solo para que inicies, aquí está como luce mi código C# después de implementar la interfaz.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.ApplicationModel.Background;

namespace AgenteSegundoPlano
{
class ActualizarMosaico : IBackgroundTask
{
public void Run(IBackgroundTaskInstance taskInstance)
{
//Agregaremos código aquí después
}
}
}

He agregado un comentario donde nuestro código residirá, pero por ahora es un buen inicio.

Configurando tu archivo Package.appxmanifest

El siguiente paso en este proceso es declara que usaremos las tareas en segundo plano en esta aplicación. Hacemos esto en el archivo package.appxmanifest en la sección de Declaraciones como se muestra en la imagen de abajo.

Como puedes ver , he agregado una declaración para la tarea en segundo plano (necesitarás una nueva de estas por cada tarea en segundo plano que quieras agregar en tu proyecto), y ajustar el punto de entrada a AgenteSegundoPlano.ActualizarMosaico, nuestra nueva clase. Después, necesitamos registrar esta tarea in nuestra aplicación actual de modo que Windows 8 lo sepa ejecutar en los momentos adecuados.

Registrando tu tarea en segundo plano

Vamos a tomar un par de pasos en este código de nuestro MainPage.xaml.cs, iniciando con checar si nuestra tarea en segundo plano ha sido ya registrada en el sistema. Yo generalmente hago esto tan pronto como la página se cargue en mi método OnNavigatedTo(). He creado un nuevo método llamado VerificarRegistroTarea() que verifique este estado por mí y ajuste un valor booleano global en la página. Tu puedes de hecho hacer esto en tu archivo App.xaml.cs también pero para nuestros propósitos simples, esta ubicación bastará.

bool estaTareaRegistrada = false;

protected override void OnNavigatedTo(NavigationEventArgs e)
{
VerificarRegistroTarea();
}

private void VerificarRegistroTarea()
{
foreach (var tarea in BackgroundTaskRegistration.AllTasks)
{
if (tarea.Value.Name == "ActualizarMosaico")
{
estaTareaRegistrada = true;
break;
}
}
if (!estaTareaRegistrada)
{
RegistrarTarea("ActualizarMosaico", "AgenteSegundoPlano.ActualizarMosaico");
}
}

Como puedes ver, estamos recorriendo a través de la colección BackgroundTaskRegistration.AllTasks porque podríamos tener muchas tareas en segundo plano ejecutándose bajo de nuestra aplicación y en este caso yo solo estoy interesado en uno: ActualizarMosaico. Puedes también ver que he hecho una llamada a RegistrarTarea() si la tarea no está aún registrada.

Depende de ti como manejar este caso pero en mi aplicación yo quiero asegurarme de que mi tarea en segundo plano esté siempre registrada y si ha sido eliminada del registro por alguna razón, quiero agregarla de nuevo. Así es como luce mi método RegistrarTarea().

private void RegistrarTarea(string nombre, string puntoEntrada)
{
BackgroundTaskBuilder tareaSegundoPlano = new BackgroundTaskBuilder();
tareaSegundoPlano.Name = nombre;
tareaSegundoPlano.TaskEntryPoint = puntoEntrada;
tareaSegundoPlano.SetTrigger(new SystemTrigger(SystemTriggerType.InternetAvailable, false));
BackgroundTaskRegistration tarea = tareaSegundoPlano.Register();
}

Puedes ver que estoy pasando el valor del nombre y punto de entrada pero puedes de hecho establecer estos valores dependiendo de tu situación. Dado que esta aplicación podría tener múltiples tareas en segundo plano, he decidido hacer esta construcción un poco más simple y pasarlos en algunos parámetros.

En nuestro método de registro, creamos un objeto de tipo BackgroundTaskBuilder(), ajusta el nombre y punto de entrada y después determina un SystemTrigger que ejecutará nuestra tarea en segundo plano. En este caso, he elegido el lanzador fácilmente probable InternetAvailable. Para probarlo, estaremos cortando el acceso a internet en nuestra máquina.

Si en algún momento necesitas eliminar el registro de la tarea en segundo plano es muy sencillo. Aquí está el método de ejemplo EliminarRegistroTarea() que puedes usar para eliminar la tarea.

private void EliminarRegistroTarea(string nombre)
{
foreach (var tarea in BackgroundTaskRegistration.AllTasks)
{
if (tarea.Value.Name == nombre)
{
tarea.Value.Unregister(true);
}
}
}

En ese ejemplo revisamos a través de las tareas que están registradas de nuevo y si encontramos alguna de ellas con el nombre que estamos buscando llamamos al método Unregister() confirmándolo con el parámetro en verdadero.

Así que hemos trabajado con la forma de registrar o eliminar el registro de nuestra tarea en segundo plano y ahora hemos especificado que nuestra aplicación debería lanzar nuestra tarea en segundo plano cuando la zona horaria de nuestra máquina cambie. Vamos a escribir algo de código en nuestra clase AgenteSegundoPlano y después darle una prueba a esto.

Haciendo que tu tarea en segundo plano HAGA algo

Antes, hemos creado un archivo llamado ActualizarMosaico.cs en nuestro nuevo proyecto de tipo Windows Runtime Component y dejamos un espacio en blanco para agregar código en el método Run() que debe ser implementado como parte de la interfaz IBackgroundTask. Aquí está como debería lucir el archivo con el código para actualizar nuestro mosaico.

public void Run(IBackgroundTaskInstance taskInstance)
{
XmlDocument datosTile = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText04);
XmlNodeList datosTexto = datosTile.GetElementsByTagName("text");
datosTexto[0].InnerText = "Actualizar mosaicos es absolutamente genial. #31daysofwin8";
TileNotification notificacion = new TileNotification(datosTile);
notificacion.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(30);
TileUpdateManager.CreateTileUpdaterForApplication().Update(notificacion);
}

Obviamente, podríamos escribir una tarea en segundo plano similar para implementar el envío de una notificación toast, actualizar la pantalla de bloqueo u otras llamadas a servicios web por ejemplo.

En resumen

Hay una cosa más a notar acerca de las tareas en segundo plano: son mucho más complejas de depurar que el código en tu aplicación. De hecho Microsoft ha escrito un artículo entero acerca de como depurar exactamente las tareas en segundo plano. Yo recomiendo ampliamente leerlo. Ellos han creado también un tutorial de inicio rápido llamado Crear y Registrar una tarea en segundo plano.

Si quisieras descargar el código de ejemplo funcional de este artículo, da clic sobre la imagen de abajo.

Mañana, vamos a doblar por completo de nuevo y comenzaremos a hablar acerca de navegación. Específicamente como navegar entre páginas en una aplicación XAML y pasar parámetros como información entre páginas como parte del proceso. ¡Nos vemos entonces!

Hoy cubrimos la última parte de notificaciones en Windows 8: La pantalla de bloqueo. Si estás corriendo Windows 8 en tu máquina es probable que te hayas familiarizado con la pantalla de bloqueo. Te muestra cuantos correos has recibido, mensajes de Facebook, el reloj y tu el estado de tu conectividad. Aquí está mi pantalla de bloqueo:

Si, esta es una foto de mi pantalla. Pasé 30 minutos esta mañana encontrando una solución para tomar una captura de mi pantalla de bloqueo sin éxito (si, lo se, pude haber creado una MV o una remota en máquina pero no cuento con nada de eso en este momento). De cualquier manera, puedes ver que solo estoy escribiendo este artículo a unos días antes de la fecha de publicación y tengo una reunión en 30 minutos.

Nosotros, como desarrolladores, tenemos la habilidad de agregar nuestros íconos a esta pantalla también pero es peligroso hacerlo así nada más. Toma esto. Es la guía de Microsoft de las mejores maneras de utilizar el área de notificaciones de la pantalla de bloqueo.

Configurando nuestro manifiesto

Primero, necesitamos ajustar nuestro package.appxmanifest para permitir las notificaciones de la pantalla de bloqueo.

Cuando haces esto, notarás que se aparecen pequeños símbolos rojos con una X. Cuando las notificaciones están habilitadas somos requeridos para tener un logo “badge” y dado que elegimos la opción que incluye actualizaciones por mosaicos también somos requeridos  para dar una imagen de logo ancha. Aquí esta la tabla de UI de la aplicación con esos archivos agregados.

Notarás que ahora tienes una X roja lo cual nos hace saber que “Si las notificaciones de pantalla están habilitadas, debes especificar una o más declaraciones de tareas en segundo plano del tipo ‘Timer’, ‘Control channel’ o ‘Push notifications’”.

Lo que significa es que las aplicaciones con la pantalla de bloqueo esperan ser actualizadas a paritr de un agente en segundo plano. Vamos a movernos a nuestra tablas de Declarations y agregar las tareas en segundo plano como esto:

En mi aplicación de ejemplo, sin embargo, vamos a crear una tarea en segundo plano. Voy a cubrir esto extensivamente mañana. En su lugar vamos a enfocarnos específicamente en los procesos y el código que nos permite actualizar nuestra información en la pantalla de bloqueo.

Pidiendo permiso

Antes de siquiera comenzar a pensar acerca de escribir contenido en la pantalla de bloqueo del usuario necesitas pedir permiso de tu usuario. Ahora, no TIENES que preguntar pero sin preguntar por permiso el camino a la pantalla de bloqueo es complicado y casi cayendo en lo peligroso. Aquí esta lo que quiere decir.

Tu solo tienes UNA y solo UNA oportunidad para pedir por la autorización del usuario para estar en su pantalla de bloqueo. Si preguntas una vez y ellos dicen “No permitir”, no serás capaz de preguntar de nuevo. Aquí está como parece cuando preguntas.

Y así es como lo haces:

BackgroundAccessStatus status = await BackgroundExecutionManager.RequestAccessAsync();

Si nunca preguntas, la única manera de llegar a la pantalla de bloqueo es para que el usuario abara sus configuraciones de PC y explícitamente te agregue, como esto (ignora por favor la horrible imagen de mi cara sin afeitar a menos de que quieras soportar mi campaña Movember):

Los usuarios pueden seleccionar hasta 7 aplicaciones para msotrarse en su pantalla de bloqueo. Queremos asegurarnos que somos una de ellas. Así que porque nuestro estado puede cambiar el ánimo del usuario deberíamos ser responsables antes de mandar actualizaciones a su pantalla de bloqueo.

Asegurándonos de que tienes permisos

Este no es un paso requerido. Puedes tener tu aplicación o tarea en segundo plano (como lo veremos mañana) enviando continuamente actualizaciones incluso si no tienes permiso. Dicho esto, tus actualizaciones tampoco serán vistas por el usuario. Sin permiso, tus actualizaciones desaparecerán en el limbo.

Aquí es como verificamos si el usuario nos ha dado permisos para actualizar la pantalla de bloqueo.

BackgroundAccessStatus status = BackgroundExecutionManager.GetAccessStatus();

if ((status == BackgroundAccessStatus.AllowedWithAlwaysOnRealTimeConnectivity) ||
(status == BackgroundAccessStatus.AllowedMayUseActiveRealTimeConnectivity))
{
//ENVÍA AQUÍ TU ACTUALIZACIÓN.
}

Así que hasta este punto, hemos cubierto la posibilidad de  permisos del usuario  y después asegurarte de que el permiso ha sido garantizado. El siguiente paso es de hecho enviar la actualización.

Actualizando la pantalla de bloqueo

Enviar una actualización lucirá muy familiar si has leído los dos artículos previos (Día 9: Mosaicos, Día 10: Notificaciones). Como en esos ejemplos previos, vamos a utilizar una plantilla que consiste en XML (en este caso, es increíblemente simple):

<badge value="badge_value"></badge>

Después, necesitamos especificar el valor que queremos mostrar. Tenemos muchas opciones en este escenario. No solo podemos usar cualquier número del 1 – 99, sino también tener un número de íconos para elegir. La mejor parte es que la plantilla es lo suficientemente inteligente para reconocer la diferencia así que la única cosa que cambiará en nuestro código es  el valor actual que pasamos. Aquí está el código para hacer la actualización del elemento.

 private void btnPantallaBloqueo_Click(object sender, RoutedEventArgs e)
{
BackgroundAccessStatus status = BackgroundExecutionManager.GetAccessStatus();

if ((status == BackgroundAccessStatus.AllowedWithAlwaysOnRealTimeConnectivity) ||
(status == BackgroundAccessStatus.AllowedMayUseActiveRealTimeConnectivity))
{
XmlDocument datosElemento = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeNumber);
XmlNodeList xmlElemento = datosElemento.GetElementsByTagName("badge");
((XmlElement)xmlElemento[0]).SetAttribute("value", "Playing");

BadgeNotification badge = new BadgeNotification(datosElemento);
BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badge);
}
}

Puedes ver que en el método SetAttribute() paso el valor de 31. Esto resulta en el elemento que se muestra en la pantalla de bloqueo que luce como lo siguiente.

Si pudiéramos elegir usar uno de los íconos, aquí esta una lista de los que está disponible, cortesía de la página de vistas de íconos de la página de MSDN.

Para especificar un glifo, necesitamos cambiar el valor en el método SetAttribute() como a continuación se muestra.

[sourcecode lang="csharp"]((XmlElement)badgeXML[0]).SetAttribute(“value”, “Playing”);[/sourcode]

Eso es todo acerca de las aplicaciones con pantalla de bloqueo. Espero que hayas aprendido algo hoy. Espera hay una cosa más. Olvidé mencionar que cuando elegimos “Badge and Tile Text” en nuestro manifiesto appxmanifest, habilitamos los elementos que creamos para aparecer en nuestro mosaico también (Esta es la razón por la que WideTile.png fue requerido). Aquí es cuando el mosaico luce igual que el mismo elemento de “Reproducir” aplicado.

En resumen

Podemos actualizar la información de nuestra pantalla de bloqueo de nuestra aplicación en cualquier momento, pero la parte truculenta es obtener el permiso del usuario. Una vez que lo has tenido, actualizar la información es bastante simple como pudimos ver en este artículo.

Si quisieras descargar una aplicación funcional que utiliza el código de este artículo da clic en la imagen.

Mañana, vamos a unir estos tres días de hablar acerca de tareas en segundo plano. Te mostramos como actualizar mosaicos, notificaciones e información de la pantalla de bloqueo de una tarea en segundo plano. ¡Nos vemos!

Ayer, pasamos algo de tiempo viendo los mosaicos y como dejar que los usuarios supieran acerca de notificaciones importantes desde tu aplicación. Hoy vamos a ver un tipo diferente de notificación para el usuario: Notificaciones toast.

Si no has trabajado con Notificaciones en el pasado, la palabra quizá suene un poco ridícula para ti. La palabra “toast” en este caso viene de la imagen de una pieza de pan tostado emergiendo de nuestro tostador. Nuestras notificaciones aparecen de una manera similar, mostrándose frente a nuestro usuario para hacerle saber que algo interesante ha sucedido.

La diferencia primaria entre las notificaciones y los mosaicos es que los mensajes de notificaciones aparecerán en la pantalla del usuario sin importar que aplicación se esté ejecutando en el momento. Los mosaicos tienen que ser vistos por el usuario en su pantalla de inicio.

Los mensajes de notificaciones gritan “NECESITAS SABER ESTO ¡AHORA MISMO!” donde los mosaicos son significativamente más pasivos. Asegurate de considerar esto cuando envíes mensajes. Si comienzas a mandar muchos mensajes sin sentido tus usuarios deshabilitarán la función de enviar notificaciones o peor aún desinstalarán tu aplicación. Asegurate de tener un tiempo para leer la guía de Microsoft acerca de notificaciones antes de comenzar a meterte aún más en esto.

Para referencia, aquí hay algunos ejemplos de notificaciones.

Así como los mosaicos activos, hay un catálogo entero de tipos de notificaciones que puedes usar pero iremos a ello en un momento.

Habilitando las notificaciones en tu aplicación

Nuestro primer paso a la grandeza con las notificaciones es de hecho habilitarlas en el manifiesto de la aplicación. Abre tu archivo manifiesto y ve a la tabla de “Application UI”, selecciona “Si” desde la lista en la opción “Toast capable”.

Será muy tentador en lo que recorres este artículo crear un archivo “Bagde” y subirlo a tu aplicación, pero para este tutorial no lo hagas. Aquí está el porqué:

Si subes un archivo de este tipo deberás habilitar las notificaciones de pantalla bloqueada. Sin embargo si estás son habilitadas debes contar con una tarea de segundo plano. No estamos cubriendo las tareas en segundo plano  por dos días más y las actualizaciones de pantalla bloqueada son mañana. Solo se paciente.

Hoy nos enfocaremos en notificar al usuario vía mensajes. Vamos a hacerlo

Lanzar una notificación desde tu aplicación

Ayer, en el día 9, si lo leíste, entonces lanzar una notificación te será increíblemente familiar. Aquí está el código que necesitas para lograrlo.

ToastTemplateType tipoNotificacion = ToastTemplateType.ToastImageAndText02;
XmlDocument xmlToast = ToastNotificationManager.GetTemplateContent(tipoNotificacion);
XmlNodeList textoToast = xmlToast.GetElementsByTagName("text");
XmlNodeList imagenesToast = xmlToast.GetElementsByTagName("image");
textoToast[0].InnerText = "Gato curioso";
textoToast[1].InnerText = "Este gatos parece que esta queriendo comer tu cara.";
((XmlElement)imagenesToast[0]).SetAttribute("src", "ms-appx:///Assets/10-XAML-CatImageSmall.png");
((XmlElement)imagenesToast[0]).SetAttribute("alt", "Cara de gato espantado");

ToastNotification toast = new ToastNotification(xmlToast);
ToastNotificationManager.CreateToastNotifier().Show(toast);

Como lo hicimos con los mosaicos lo hacemos con las notificaciones. La primera línea selecciona nuestra plantilla. Después agarramos el XML para esa plantilla y lo almacenamos en xmlToast. Aquí está como luce la plantilla de ese XML.

<toast>
<visual>
<binding template="ToastImageAndText02">
<image id="1" src="image1" alt="image1"></image>
<text id="1">headlineText</text>
<text id="2">bodyText</text>
</binding>
</visual>
</toast>

Como puedes ver, tenemos dos propiedades de texto y una propiedad de imagen. Los siguientes pasos en nuestro código de ejemplo de arriba fueron asignar valores a esas propiedades. Para la imagen notarás que he agregado una línea adicional esta ocasión haciendo referencia al atributo “alt”. Si has hecho algo de desarrollo web antes probablemente ya conoces que es, pero es una pieza importante para historia de la accesibilidad en Windows 8. Te da la representación en texto de una imagen, para aquellos usuarios que son incapaces de ver su pantalla.

Finalmente creamos un nuevo objeto de tipo ToastNotification y lo mostramos con el método Show(). Esta es la simple historia acerca de crear notificaciones en Windows 8. Y así es como lucirá en mi máquina:

Pero espera ¡Aún hay más! Si creaste un proyecto  y lanzaste un mensaje de notificación quizá hayas notado que hay un sonido que lo acompaña. Este es el sonido por defecto de la notificación, pero tienes opciones. Hay algunas otras cosas que de hecho puedes hacer con las notificaciones.

Ajustar el audio para una notificación (¡y mas!)

Todo lo relacionado a crear una notifcacion permanece igual, pero podemos agregar algunos nodos adicionales a nuestro XML para seleccionar un sonido diferente, ajustar la duración del mensaje e incluso determinar la página a mostrar cuando la notificación sea presionada (¡con parámetros de consulta también!).

Primero, a pesar de nuestro audio tengo algunas malas noticias. No puedes usar tu propio archivo de audio. Se que esperabas deleitar a tu usuario con el sonido de un pan expulsado de la tostadora pero simplemente no es posible. En lugar de ello puedes seleccionar de una lista de nueve archivos de audio, cuatro de los cuales son sonidos cíclicos que pueden ser usados como tonos de llamada o alarmas. Puedes ver la lista de archivos de audio y descriptores disponibles para las notificaciones aquí.

Para ajustar el audio primero necesitamos modificar el XML que hemos estado creando. Por defecto ninguna de las plantillas de las notificaciones cuentan con un nodo de audio determinado así que necesitamos crear una. Lo primero en lo que necesitamos enfocarnos es en el nodo <toast> de nuestra plantilla y después podemos establecer nuestras opciones. En el código de ejemplo de abajo he incluido la misma notificación de antes pero con algunos comentarios explicando las líneas nuevas para las características opcionales.

private void btnOpcionesNotificaciones_Click(object sender, RoutedEventArgs e)
{
ToastTemplateType tipoNotificacion = ToastTemplateType.ToastImageAndText02;
XmlDocument xmlToast = ToastNotificationManager.GetTemplateContent(tipoNotificacion);
XmlNodeList TextoToast = xmlToast.GetElementsByTagName("text");
XmlNodeList imagenesToast = xmlToast.GetElementsByTagName("image");
TextoToast[0].InnerText = "Gato curioso";
TextoToast[1].InnerText = "Este gatos parece que esta queriendo comer tu cara.";
((XmlElement)imagenesToast[0]).SetAttribute("src", "ms-appx:///Assets/10-XAML-CatImageSmall.png");
((XmlElement)imagenesToast[0]).SetAttribute("alt", "Scary Cat Face");

//Este es el código de opciones lo cual es todo lo opcional basado en tus necesidades
IXmlNode nodoToast = xmlToast.SelectSingleNode("/toast");

((XmlElement)nodoToast).SetAttribute("duration", "long");

XmlElement nodoAudio = xmlToast.CreateElement("audio");
nodoAudio.SetAttribute("src", "ms-winsoundevent:Notification.Looping.Alarm");

//Debe ser usado cuando un audio cíclico ha sido seleccionado
nodoAudio.SetAttribute("loop", "true");
nodoToast.AppendChild(nodoAudio);

//Puedes colocar cualquier texto que te guste en la propiedad
//opcional de lanzamiento, pero al presionar una notificación el mensaje te deberá llevar
//a algo contextualmente relevante.
((XmlElement)nodoToast).SetAttribute("launch", "<cat state='angry'><facebite state='true'></facebite></cat>");

ToastNotification toast = new ToastNotification(xmlToast);
ToastNotificationManager.CreateToastNotifier().Show(toast);
}

Es importante recordar que todas estas características son opcionales, puedes verificarlo por su ausencia en nuestro primer ejemplo. Aquí hay un par de cosas para recordar acerca de estas opciones:

Los mensajes de notificación  de larga duración están hechos para cosas como llamadas VOIP y alarmas de reloj, no para las notificaciones de correo. Utilízalas poco.

Todas las opciones de audio cíclicas que están disponibles solo trabajarán si has ajustado la duración a Long.

Las opciones de audio cíclico solo trabajarán si también ajustaste el atributo “loop” a verdadero.

Fallar en algunas de estas reglas resultará en que se reproducirá el audio Notification.Default en su lugar.

En adición, quizá quieres tener SILENCIO para su notificación en lugar de cualquiera de las opciones de audio. Puedes hacerlo, en ese caso especificarás un audioNode pero ajusta un nuevo atributo, silent a true como en lo siguiente.

audioNode.SetAttribute(“silent”, “true”);

Esto resultará en silencio, pero fuera de ello será una notificación normal para el usuario. Finalmente, hay un atributo “launch”. Dentro de este podemos pasar cualquier cadena de texto que quisieramos y será pasada de regreso a nosotros como parámetro para la página cuando la notifiación sea presionada por el usuario. Esta información nos deberá permitir determinar a que página debemos apuntar que información la llenará. No pongas nada en el parámetro “launch” que no necesite hacer este viaje.

En resumen

Eso es todo acerca de las notificaciones en Windows 8. Muy similares a los mosaicos, los mensajes son una gran manera de obtener la atención inmediata del usuario sin importar que es lo que están haciendo. Algunos de ustedes quizá se estén preguntando como hacer esas actualizaciones desde una tarea en segundo plano y solo te pido paciencia. Qusimos asegurarnos de darte una base sólida de cada uno de estos tipos de notificación antes de meternos por completo a los agentes en segundo plano. Solo estás a dos días de este tema, lo prometo.

Si quieres descargar el código fuente completo de este artículo da clic sobre la siguiente imagen:

Mañana,cubriremos nuestro último tema en el mundo de las notificaciones. La pantalla de bloqueo. ¡Hasta entonces!

Hoy cubriremos un tema muy importante: Live Tiles. Como hemos mencionado en artículos anteriores, tu tile es una de las partes más importantes del éxito de tu aplicación, y es una de las más ignoradas.

Tus tiles representan tu relación con tu usuario. Ellos cariñosamente lo pinean en su pantalla de inicio, lo acomodan con apps similares, incluso deciden si quieren que sea grande o pequeña. Tu trabajo es hacer el tile tan responsivo y acorde a sus necesidades como sea posible. Esto lo hacemos enviándole actualizaciones útiles al tile. Aquí hay algunos ejemplos de algunas de mis apps favoritas:

Como mencione antes, Soy un gran fan de Jetpack Joyride, pero su tile es excelente también. Aquí hay un tour de los cinco estados por los que rota, recordándome mi score más alto, así como los logros que aún no he completado. Estas actualizaciones me han llevado de regreso al juego más de una ocasión.

La aplicación del clima, por otra parte, nunca se voltea. Pero también no necesito nada más que lo que un tile estático me puede proveer cuando se trata del clima. Obtengo la temperatura más alta, más baja y la actual. El pronóstico del clima esta siempre a un click de distancia.

Finalmente, respecto a tiles, creo que la app de Fotos es mi favorita. No se aun que tan frecuentemente actualiza el set de rotación de fotos, o incluso que librerías usa, pero parece siempre tener alguna gran vieja foto en el tile que me hace recordar ese evento. Aquí hay algunos pantallazos:

Tengo miles y miles de viejas fotos almacenadas en mi librería de fotos (si, están respaldadas en línea, gracias), y obtener un vistazo del pasado diariamente es grandioso.

Las Reglas

Cuando trabajamos en nuestras apps, he descubierto que hay algunas reglas que necesitamos tener en cuenta:

· Primero, lee, y después re-lee los Directrices para Live Tiles. Son extensos, pero interesantes.

· Debes SIEMPRE tener un tile pequeño. Los tiles anchos son deseables, pero DEBES tener un tile pequeño.

Los tiles pequeños no son siempre tan interesantes como sus hermanos mayores, pero aun así pueden transmitir información interesante. Aquí están los tiles pequeños de las tres apps que mostre antes:

Probablemente solo por restricciones de espacio, el tile de Jetpack no se actualiza. Sin embargo las apps de Clima y Fotos me dan todos los mismos datos que obtengo en los tiles largos, solo que en un paquete más pequeño.

Mientras estaba investigando las diferentes formas en las que un tile puede verse, me preocupe de que éste artículo fuera a ser SUPER largo después de mostrar un ejemplo de cada plantilla de tile posible. Pero resulta, sin embargo, que Microsoft ha provisto una página grandiosa que muestra cada plantilla de tile, todas las 45 de ellas. Asegurate de revisarla. Definitivamente te ayudará a elegir la plantilla de tile que es apropiada para ti, y provee el marcado XML que necesitaras también.

DEBES LEER: Catálogo de plantillas de icono

Entonces, ¿Cómo hacer a nuestro tile bailar? Vamos a empezar.

Actualizando el Tile Estático Por Defecto

Por defecto, obtienes un icono en tu app que se ve como esto:

(Agregue un fondo ligeramente gris a este para que puedas verlo con fondo blanco, el tuyo se verá más transparente.) Si solo quieres un tile estático que use su propia imagen de 150 x 150, puedes hacerlo de dos formas:

· Remplaza la imagen que actualmente reside en Assets/Logo.png en tu proyecto.

· Actualiza tu archivo Package.appxmanifest, y cambia el valor de Logo a una imagen diferente en tu proyecto, así:

OK, suficiente de la parte aburrida. ¡Escribamos algo de código!

Enviando una Notificación a un Live Tile Pequeño

Vamos a empezar con enviar una notificación de tile pequeña primero, dado que los tiles largos serán un poco más complejos. Primero, como discutimos al principio, necesitas decidir que plantilla quieres usar del catálogo. (He creado una versión en PDF estática del documento para ti, ¡Así de importante será!)

En éste ejemplo, he elegido TileSquareText04, que se ve como esta plantilla:

Y es representado por este XML (sabría esto si abrieras la página del catálogo):

<tile>

<visual>

<binding template=”TileSquareText04″>

<text id=”1″>Text Field 1</text>

</binding>

</visual>

</tile>

Entonces ahora sólo necesitamos crear una nueva actualización de tile basado en ese XML, y la empujamos al TileUpdateManager. Así es como funciona para el TileSquareText04:

//Primero, agarramos la plantilla especifica que queremos usar.
XmlDocument tileData = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareText04);
//Después agarramos una referencia al nodo que queremos actualizar.
XmlNodeList textData = tileData.GetElementsByTagName("text");
//Después asignamos el valor de ese nodo.textData[0].InnerText = "31 Days of Windows 8";
//Después creamos un objeto TileNotification con esa información.
TileNotification notification = new TileNotification(tileData);
//Opcionalmente podemos establecer una fecha de expiración de la notificación.
notification.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(30);
//Finalmente, empujamos la actualización hacia el tile.
TileUpdateManager.CreateTileUpdaterForApplication().Update(notification);

Como puedes ver en los comentarios del código, es un proceso bastante simple. Notaras que usamos notación de arreglo para establecer el valor del texto de la plantilla del tile. Esto es porque podemos tener más de un nodo de cada tipo. Si usáramos TileSquareBlock en su lugar, se vería como sigue:

Tendríamos dos valores de texto que actualizar, que sería algo así:

textData[0].InnerText = "31";
textData[1].InnerText = "Days of Windows 8";

Una nota final acerca de estas plantillas es que es común que tu archivo SmallLogo.png se mostrará en algunos de estos tiles también. Es una buena forma de extender tu marca, pero es algo también que hay que tener presente al estar trabajando en esto. Al usar la plantilla TileSquareBlock, aquí tienes como mi tile se ve al final:

Esta es otra razón más, como lo dije en Día #1, para que uses imágenes personalizadas para tu app mientras exploras el desarrollo de Windows 8. Sin esa imagen morada, tendría que estarme preguntando cual estaba siendo usada, o peor, no darme cuenta que si quiera estuviera disponible. Verás que hay varias propiedades que pueden ser editadas para tu tile en el archivo Package.appxmanifest de tu proyecto. No solo puedes cambiar la imagen de logo, sino también las propiedades del fono, el archivo de logo pequeño, y otros valores de texto y color.

Una pieza importante de esta sección es el menú desplegable “Show name” o “Mostrar nombre”.

Mencione esto brevemente antes, pero quiero asegurarme de que entiendes donde se establecen estos valores e imágenes. Adicionalmente, simplemente definiendo un archivo de Wide logo en el manifiesto, inmediatamente soportas el tamaño Large Tile. Tu aplicación ni siquiera ofrecerá el tamaño como una opción hasta que hayas especificado ese valor. Inténtalo tú mismo. Ahora vamos a ver como enviar actualizaciones a un Tile Largo.

Enviando una Notificación a un Live Tile Largo

Esta vez, vamos a elegir una plantilla de Tile Largo, pero también incluir una imagen, para que puedas ver la sintaxis para esto también.

Lección Importante: Recuerda que el usuario está en control aquí. Si han decidido hacer tu tile largo o pequeño, no puedes controlarlo. Lo que si puedes controlar, sin embargo, es si quieres o no soportar “notificaciones” de ambos tamaños. Yo lo recomiendo, porque es una oportunidad de hacer que tu usuario ponga atención a tu app en su pantalla de Inicio.

Debido a esto, cuando enviamos actualizaciones, de hecho podemos crear dos. Una para el tile pequeño, y una para el largo. Entonces, a través de la magia de XML, vamos a juntarlos, y enviarlo como una sola notificación. Aquí está como se vería tu código:

//Crear el Tile Largo exactamente de la misma forma.

XmlDocument largeTileData = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWidePeekImage01);

XmlNodeList largeTextData = largeTileData.GetElementsByTagName(“text”);

XmlNodeList imageData = largeTileData.GetElementsByTagName(“image”);

largeTextData[0].InnerText = “Funny cat”;

largeTextData[1].InnerText = “This cat looks like it’s trying to eat your face.”;

((XmlElement)imageData[0]).SetAttribute(“src”, “ms-appx:///Assets/9-XAML-CatImage.png”);

//((XmlElement)imageData[0]).SetAttribute(“src”, “http://jeffblankenburg.com/downloads/9-XAML-CatImage.png”);

//Crear una notificación de Tile Pequeño también (no requerido, pero recomendado.)

XmlDocument smallTileData = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquarePeekImageAndText02);

XmlNodeList smallTileText = smallTileData.GetElementsByTagName(“text”);

XmlNodeList smallTileImage = smallTileData.GetElementsByTagName(“image”);

smallTileText[0].InnerText = “Funny cat”;

smallTileText[1].InnerText = “This cat looks like it’s trying to eat your face.”;

((XmlElement)smallTileImage[0]).SetAttribute(“src”, “ms-appx:///Assets/9-XAML-CatImageSmall.png”);

//Junta las dos actualizaciones en un nodo XML <visual>

IXmlNode newNode = largeTileData.ImportNode(smallTileData.GetElementsByTagName(“binding”).Item(0), true);

largeTileData.GetElementsByTagName(“visual”).Item(0).AppendChild(newNode);

//Crear las notificaciones de la misma forma.

TileNotification notification = new TileNotification(largeTileData);

notification.ExpirationTime = DateTimeOffset.UtcNow.AddSeconds(30);

//Empujar la actualización al tile.

TileUpdateManager.CreateTileUpdaterForApplication().Update(notification);

Lo deje ahí comentado, pero puedes ver que adicionalmente a empujar imágenes de tu proyecto local, también tienes la habilidad de usar imágenes que son hospedadas en la web. Toman mucho más tiempo en cargar, así que ten en mente eso cuando las uses.

Por ejemplo, puse la expiración de mi notificación a 30 segundos, y para el final de los 30 segundos, la notificación no había sucedido aun porque la imagen aún no ha llegado a mostrarse. Tu medida puede variar, pero usando imágenes locales, las notificaciones aparecen inmediatamente.

Aquí hay un video corto de esta actualización de Live Tile en acción en mi pantalla de Inicio:

http://www.youtube.com/watch?feature=player_embedded&v=EF1lvVbBeeQ

También, mencione que juntando dos archivos XML diferentes, una por cada plantilla. Aquí está la plantilla pequeña, para el TileSquarePeekImageAndText02:

<tile>

<visual>

<binding template=”TileSquarePeekImageAndText02″>

<image id=”1″ src=”image1″ alt=”alt text”/>

<text id=”1″>Text Header Field 1</text>

<text id=”2″>Text Field 2</text>

</binding>

</visual>

</tile>

Y aquí el XML para el tile Largo:

<tile>

<visual>

<binding template=”TileWidePeekImage01″>

<image id=”1″ src=”image1.png” alt=”alt text”/>

<text id=”1″>Text Header Field 1</text>

<text id=”2″>Text Field 2</text>

</binding>

</visual>

</tile>

Cuando se juntan, se ve así:

<tile>

<visual>

<binding template=”TileWidePeekImage01″>

<image id=”1″ src=”image1.png” alt=”alt text”/>

<text id=”1″>Text Header Field 1</text>

<text id=”2″>Text Field 2</text>

</binding>

<binding template=”TileSquarePeekImageAndText02″>

<image id=”1″ src=”image1″ alt=”alt text”/>

<text id=”1″>Text Header Field 1</text>

<text id=”2″>Text Field 2</text>

</binding>

</visual>

</tile>

Como puedes ver, terminamos con múltiples binding en un nodo <visual>. Para agregar notificaciones adicionales, pasarías por el mismo proceso, agregando aún más al mismo código.

Eliminando Tus Notificaciones

También habrá tiempos donde vas a querer borrar tus notificaciones. Tal vez nueva información está disponible, o algo cambio antes de que tus fechas de expiración caducaran, y necesitas iniciar de nuevo. Para hacer esto, es una simple línea de código:

TileUpdateManager.CreateTileUpdaterForApplication().Clear();

Entonces, hemos cubierto tiles largos y pequeños, incluso combinándolos, pero ¿Qué si quieres proveer a tu usuario con múltiples tiles?

Tiles Secundarios

Los tiles secundarios son una excelente forma de resaltar la información que tus usuarios quieren directamente en la pantalla de Inicio. Si eres una aplicación de clima, pueden anclar múltiples ciudades para una referencia rápida. Si eres la app de People, me permites anclar la gente que es importante para mí, así puedo ver fácilmente en que andan.

Originalmente pretendía escribir una sección entera aquí acerca de cómo anclar un Tile Secundario en la pantalla de inicio de tu usuario, pero Microsoft ha hecho un trabajo fenomenal al respecto. Chécalo aquí:

Inicio rápido: Anclaje de Tiles Secundarios

No solo te guían a través de crear un Tile Secundario, pero también te dan todo el código para preguntar al usuario desde una AppBar, determinar si ya la ha anclado, e incluso eliminar el tile cuando ya no es necesario. Es un gran tutorial, y lo recomiendo altamente.

Resumen

Hemos cubierto una gran cantidad de contenido hoy relacionado a las actualizaciones de Live Tiles de Windows 8. Desde la creación hasta la actualización, puedes ver que es bastante simple de hacer en tu app. No me canso de recomendarte actualizar los tiles de tu app con información relevante tan frecuentemente como sea posible. Esto hará tu app mucho más atractiva al usuario.

Para descargar la solución completa de código ejemplo para este artículo, haz click en el icono de abajo:

Mañana, vamos a ver el otro lado de las notificaciones: mensajes Toast. Hasta entonces, feliz codeo, ¡Y nos vemos mañana!

En muchos artículos de esta serie hemos mencionado que almacenar información no solo es increíblemente importante sino también es super sencillo hacerlo de ambas maneras localmente en el dispositivo así como de manera itinerante (roaming) entre múltiples dispositivos que un usuario puede utilizar.

Microsoft nos ofrece algunas guías específicas de cuando utilizar almacenamiento por roaming y local, pero te daré un resumen rápido  aquí para que tengas la oportunidad de leerlo (porque ambos sabemos que no diste clic en este link). De nuevo, estas son guías, por lo que no estarás rechazado de la tienda por romper estas reglas pero también hay límites al tamaño de transferencia y velocidad. Al exceder estos límites evitará que tu aplicación permanezca enviando información por un largo periodo de tiempo.

Hacer

Usa roaming para preferencias y personalización. Cualquier opción en la que el usuario probablemente deba hacerla en cada máquina que utilice. Estas son configuraciones básicas como preferencias de color, actores favoritos o si publicar o no información vía Twitter.

Usa roaming para permitir a los usuarios continuar con una tarea. Tener los favoritos de mi explorador siguendome o incluso mis más altos resultados de un videojuego es maravilloso. Permitirme continuar escribiendo ese correo (o post) que nunca terminé. Mucho mejor.

No hacer

Usar roaming para información que es claramente solo local. Esto incluye cosas como rutas de archivos y cualquier otra información que solo tiene sentido en un dispositivo.

No envíes grandes cantidades de información. Hay un límite el cual puedes determinar en código, esto limitará el tamaño de tu envío de datos. Es mejor solo enviar preferencias y poca información como lo mostraremos en este artículo.

No uses roaming para sincronizaciones instantáneas o información que pueda cambiar rápidamente. Windows controla cuando y que tan seguido la información de tu aplicación será enviada, así que no debes contar con una sincronización instantánea. Crea un servicio web para ti mismo si necesitas este tipo de confiabilidad. También, no actualices la información de roaming constantemente. Por ejemplo, no necesitas almacenar de esta manera la ubicación de tu usuario en todo momento, en su lugar actualiza cada minuto o algo así. Aún tendrás la posibilidad de dar una experiencia buena sin destruir tu transferencia.

Una última cosa para recordar: La forma en la que tu información es enviada entre dispositivos es administra por la cuenta de usuario de Microsoft. Si ellos ingresan en dos máquinas con las mismas credenciales e instalan la misma aplicación en dos lugares ENTONCES las configuraciones de roaming y archivos viajarán. Hasta entonces, nada pasará.

Ahora que ya te he espantado en nunca usar esto, vamos a ver como se hace. Hay dos tipos de información que puede ser almacenada y nosotros manejaremos cada una de ellas localmente y vía roaming. Primero ajustemos la configuración seguida por archivos.

Ajustes locales y de roaming

Cuando escuchas la palabra “ajustes” en el desarrollo de Windows 8 (o incluso en Windows Phone), lo que te viene a la mente es “información simple y pequeña” y lo que realmente estamos diciendo es almacenar pares de nombres y valores.

Buenos ejemplos de esto son las preferencias del usuario. Quizá almacenaste el nombre del usuario (un valor de tipo cadena) de modo que podrías utilizarlo en algo como un juego. Quizá ellos decidieron inhabilitar las notificaciones (un valor booleano) de tu aplicación. Los ajustes son también una de las maneras más fáciles de almacenar información y me he encontrado a mi mismo en más de una ocasión almacenando un gran número de ajustes en mis aplicaciones. Dado que estos valores son invisibles y viven en un espacio de almacenamiento invisible, he cambiado un conjunto de métodos juntos que crearán, después leerán y por último eliminarán los valores de ajustes, ambos, locales y de roaming. Verás que es muy sencillo de usar.

ApplicationDataContainer settingsLocal;
ApplicationDataContainer settingsRoaming;
string currentBook;
int currentPage;

public MainPage()
{
this.InitializeComponent();

settingsLocal = ApplicationData.Current.LocalSettings;
settingsRoaming = ApplicationData.Current.RoamingSettings;

AddSettings();
}

ApplicationDataContainer ajustesLocales;
ApplicationDataContainer ajustesRoaming;
string libroActual;
int paginaActual;

public MainPage()
{
this.InitializeComponent();

ajustesLocales = ApplicationData.Current.LocalSettings;
ajustesRoaming = ApplicationData.Current.RoamingSettings;

AgregarConfiguracion();
}

private void AgregarConfiguracion()
{
ajustesLocales.Values["libroActual"] = "Secreto 1910";
ajustesLocales.Values["paginaActual"] = 33;

ajustesRoaming.Values["libroActual"] = "Secreto 1910";
ajustesRoaming.Values["paginaActual"] = 33;

LeerConfiguracion();
}

private void LeerConfiguracion()
{
libroActual = (string)ajustesLocales.Values["libroActual"];
paginaActual = (int)ajustesRoaming.Values["paginaActual"];

BorrarConfiguracion();
}

private void BorrarConfiguracion()
{
ajustesLocales.Values.Remove("libroActual");
ajustesLocales.Values.Remove("paginaActual");

ajustesRoaming.Values.Remove("libroActual");
ajustesRoaming.Values.Remove("paginaActual");
}

En este proyecto de ejemplo puedes establecer puntos de interrupción en cada método y después usar Visual Studio para inspeccionar nuestros valores de configuración en la tabla “Locals”.

Aquí esta como luce mi información después de que el método AgregarConfiguracion() se ha ejecutado.

Ahora, he leído la información de los ajustes y los he almacenado en valores en mi página.

Finalmente, después de que mi método para borrar los ajustes se ha ejecutado.

Mientras estás creando tus aplicaciones, es importante recordar que toda esta información, tanto ajustes como archivos, se encuentran dentro de una caja de arena de tu aplicación. Lo que significa es que cuando tu aplicación se desinstale, todos estos valores se irán con ella. Esto también significa que estás creando una aplicación que utiliza estos valores y quieres comenzar con una experiencia de usuario greenfield, quizá quieres desinstalar la aplicación antes de probarlo para evitar cualquier valor legado que haya sido guardado anteriormente.

Además de salvar estos pares de valor/nombre quizá quiere categorizarlos un poco. Podemos crear categorías de ajustes, lo cual hará que agregar y remover grupos de ajustes una tarea muy simple por hacer. Esto puede también obviamente ser hecho localmente y por roaming. Aquí esta una vista de crear una categoría y agregar un ajuste a ello.

settingsLocal.CreateContainer("mediaSettings", ApplicationDataCreateDisposition.Always);
settingsLocal.Containers["mediaSettings"].Values["Volume"] = 11;

Hasta aquí hemos llegado con la revisión profunda de los ajustes, vamos a movernos ahora a los archivos.

Archivos locales y vía roaming

Los archivos operan en una forma muy similar a los ajustes, excepto que estamos leyendo y escribiendo los valores al disco duro y demostraré eso en este ejemplo también. He colocado un conjunto idéntico de métodos a los que usamos en la sección de ajustes; un método AgregarArchivo(), LeerArchivo() y EliminarArchivo(). Aquí está un vistazo al código.

StorageFolder folderLocal;
StorageFolder folderRoaming;
string nombreArchivo = "tacotext.txt";
string contenidoArchivo = "taco";

public MainPage()
{
this.InitializeComponent();

folderLocal = ApplicationData.Current.LocalFolder;
folderRoaming = ApplicationData.Current.RoamingFolder;

AgregarArchivo();
}

private async void AgregarArchivo()
{
StorageFile archivoLocal = await folderLocal.CreateFileAsync(nombreArchivo, CreationCollisionOption.ReplaceExisting);
await FileIO.WriteTextAsync(archivoLocal, contenidoArchivo + "taco");

LeerArchivo();
}

private async void LeerArchivo()
{
StorageFile archivoLocal = await folderLocal.GetFileAsync(nombreArchivo);
string textoLocal = await FileIO.ReadTextAsync(archivoLocal);

contenidoArchivo = textoLocal;

BorrarArchivo();
}

private async void BorrarArchivo()
{
StorageFile archivoLocal = await folderLocal.GetFileAsync(nombreArchivo);
await archivoLocal.DeleteAsync();
}

Como puedes ver la única gran diferencia es que ahora tenemos async/await en nuestros métodos que se encargan de leer el disco duro. No tenemos que especificar las ubicaciones de carpeta, ni siquiera tenemos que definir una estructura de carpetas si no queremos.

Además, puedes ver en tus archivos que estos se han guardado. Cada aplicación almacena sus archivos localmente en la máquina y si usas un pinto de interrupción puedes determinad la ubicación en tu dispositivo. Por ejemplo, el archivo “tacotext.txt” que he creado esta almacenado en la propiedad Path mostrada abajo.

Una vez que has lo has creado puedes incluso llegar al folder, abrirlo y ver el contenido, incluso puedes abrir el archivo por ti mismo.

¡Eso es todo! Guardar archivos, incluso archivos grandes puede ser hecho de esta manera. Solo necesitas recordar el nombre del archivo que le diste. La caja de arena de Windows 8 se encargará del resto.  Por favor nota que mi ejemplo arriba solo almacena un archivo local pero puedes usar el MISMO código (pero con la referencia a ApplicationData.Current.RoamingFolder en su lugar) para los archivos vía roaming.

Como recordatorio, los archivos vía roaming no se transferirán inmediatamente así que no esperes el tipo de rendimiento que has visto con las aplicaciones como SkyDrive o DropBox. Se cauteloso del la transferencia de información pero de cualquier manera, usa esto mucho.

En resumen

Los ajustes y configuraciones son una herramienta poderosa en el arsenal de desarrollo de Windows 8. Es fácil de hacer y hacer a tu aplicación mucho más genial cuando es capaz de trabajar con diferentes dispositivos a la vez. Yo aún cuento historias acerca de la primera vez que jugué Jetpack Joyride en una segunda máquina y todas mis compras, jetpacks, equipo y ajustes se mostraron de inmediato. Hizo lo que ya era un juego increíble algo mucho mejor para mí. Por esto recomiendo que lo hagas por ti mismo. (Es un juego gratuito pero hay una opción de in-app purchasing por $1.49 USD para duplicar tus monedas por cada nivel completado. Lo vale totalmente).

Para descargar el código de ejemplo de este artículo da clic en el ícono de abajo.

Mañana, vamos a discutir acerca de los mosaicos activos (Live Tiles) y como crear ambos, tanto los primarios como secundarios así como actualizarlos. ¡Nos vemos entonces!

Los dos últimos días hemos trabajado con un nuevo elemento en Windows 8: Los contratos. Presentamos esta noción de contratos al explorar como incorporar ajustes a nuestras aplicaciones. Entonces exploramos como extender la presencia de nuestras aplicaciones a los usuarios mediante la búsqueda. Hoy vamos a tomar el siguiente paso y explorar uno de los elementos que más nos emociona. Compartir.

Antes de Windows 8, crear una aplicación “social” era complicado. No solo porque tuvieras que aprender bastantes APIs de las plataformas con las que quisieras trabajar sino también tenías que conocer el API para Facebook, Twitter y cualquier otra red social que quisieras incluir.

Eso era demasiado abrumador sino es que caía en lo imposible de realizar efectivamente.

Con Windows 8, solo nos debemos preocupar por crear nuestra aplicación. De hecho, colocar botones en tu aplicación que digan “Compartir en X red social” ya es desaprobado en este sistema. ¿Por qué darle al usuario un botón de Twitter cuando no usan Twitter? Lo mismo para Google+, Facebook, Flickr, GitHub o cualquier otra plataforma basada en modo social.

Con el contrato de Compartir, el usuario se encuentra en total control.Tu haces tu contenido compartible y ELLOS deciden donde y como compartirlo. Es un sentimiento de control que es verdaderamente unos de los mejores elementos de Windows 8 para mí.

Definir lo compartido

Compartir sucede en dos formas, quien comparte (la aplicación origen) y quien recibe (la aplicación destino). Esto sucede por medio de un corredor.

Imagen vía: http://msdn.microsoft.com/en-us/library/windows/apps/hh758314.aspx

¿Qué tipo de archivos puedes compartir? Hay 6 diferentes tipos de contenido que puedes compartir con el corredor:

* Texto plano sin formato

* Enlaces

* Contenido con formato / HTML

* Archivos

* Una imagen sencilla

* Un formato de información personalizado

La información es compartida por medio de un objeto llamado DataPackage- En este artículo vamos a dividir el compartir origen y el compartir destino en dos secciones separadas.

Compartir Origen

Vamos a comenzar con el más simple de dos escenarios.  El origen para compartir. En este escenario vamos a mostrar como puedes compartir cada uno de los siete tipos de contenidos mostrados arriba. Primero, necesitamos  crear una nueva solución en blanco para comenzar desde ahí. En el código de ejemplo para este artículo notarás que he creado una página separada para cada tipo de información. Ciertamente no necesitas hacerlo en tu aplicación pero ten en cuenta que puedes solo compartir un tipo de información a la vez desde cualquier página. Vamos a comenzar con el texto sin formato.

El plan de compartir para el texto sin formato

Este será el ejemplo más largo para el código de compartir porque la mayoría del código es exactamente el mismo para cada ejemplo. Solo voy a resaltar lo necesario y después me enfocaré en los elementos que son diferentes en los ejemplos sucesivos.

Primero necesitamos crear una referencia al DataTransferManager. Necesitarás agregar el espacio de nombres Windows.ApplicationModel.DataTransfer a tu página. En el código debajo verás que instancío la referencia al DataTransferManager y después creo un manejador de eventos (en el método OnNavigated()) para cuando la información sea solicitada para ser compartida desde este página con el manejador de eventos DataRequest().

DataTransferManager dtm;

protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
dtm = DataTransferManager.GetForCurrentView();
dtm.DataRequested += dtm_DataRequested;
}

protected override void OnNavigatedFrom(NavigationEventArgs e)
{
base.OnNavigatedFrom(e);
dtm.DataRequested -= dtm_DataRequested;
}

Deberás también notar que ajustamos el método OnNavigatedFrom para retirar el manejador de DataRequested cuando dejamos la página. Esta es una buena práctica que deberías incorporar en cada una de tus páginas. Asegúrate de cancelar cualquier manejador de eventos que estás registrando.

Finalmente, necesitamos compartir algo de texto y hacemos esto por medio de nuestro método dtm_DataRequested().

void dtm_DataRequested(DataTransferManager sender, DataRequestedEventArgs args)
{
string tituloFiltro = "31 días de Windows 8";
string DescripcionArchivo = "Esto solo explica lo que estamos compartiendo";

DataPackage informacion = args.Request.Data;
informacion.Properties.Title = tituloFiltro;
informacion.Properties.Description = DescripcionArchivo;
informacion.SetText("Probando la funcionalidad en Windows 8");
}

Como puedes ver simplemente creamos un objeto DataPacker y ajustamos sus propiedades de manera acordada. Usando los valores que he puesto en el código aquí está el mensaje que el usuario verá.

Una vez que hayas seleccionado una aplicación (en este caso la del correo), verán que la información llena la aplicación elegida:

Para el resto de los tipos de información te mostraré los contenidos del método dtm_DataRequest() pero todo lo demás se resume básicamente de la misma forma.

Compartir enlaces

La única diferencia entre un enlace y el texto sin formato es que debes especificar un objeto de tipo Uri al DataPackage. Aquí está el código.

void dtm_DataRequested(DataTransferManager sender, DataRequestedEventArgs args)
{
Uri fuenteLink = new Uri("http://aminespinoza.com/");
string tituloFiltro = "31 días de Windows 8";
string DescripcionArchivo = "Esto solo explica lo que estamos compartiendo";

DataPackage data = args.Request.Data;
data.Properties.Title = tituloFiltro;
data.Properties.Description = DescripcionArchivo;
data.SetUri(fuenteLink);
}

La principal diferencia está en la UI. Aquí está el mensaje inicial para compartir.

Notarás que tienes la posibilidad de colocarlo no solo como correo. Si abrierara la aplicación de Contactos tendría la facilidad de elegir entre Facebook y Twitter. Aquí está lo que la aplicación de correo hará con la información una vez abierta.

Lo genial de esta implementación son unos cuantos elementos:

La aplicación de correo ha navegado en la web y obtenido un par de imágenes que podrían ser útiles como muestra.

La aplicación de correo también obtuvo el título del sitio web y lo usó en el listado. Muy útil.

En el ejemplo del texto sin formato, la propiedad Descripcion no fue utilizada en la aplicación de correo. En este caso fue incrustada en el enlace.

Vamos a pasar ahora a la manera de compartir contenido con formato como HTML.

Compartiendo Contenido con formato / HTML

Aquí está una vista de nuestra implementación de código.

void dtm_DataRequested(DataTransferManager sender, DataRequestedEventArgs args)
{
string cadenaHTML = "<strong>Texto resaltado,</strong> texto normal.  <a href='http://blogs.ligasilverlight.com/blog/'>Checa nuestros 31 días con Windows 8</a>";
string tituloHTML = "31 Días de Windows 8";
string DescripcionHTML = "Esto solo explica lo que estamos compartiendo";

DataPackage informacion = args.Request.Data;
informacion.Properties.Title = tituloHTML;
informacion.Properties.Description = DescripcionHTML;
informacion.SetHtmlFormat(HtmlFormatHelper.CreateHtmlFormat(cadenaHTML));
}

Tuvimos que tratar este contenido de una manera ligeramente diferentes. Notarás que cuando mandamos nuestro contenido desde nuestro DataPackage en esta ocasión tuvimos que llamar al elemento HtmlFormat. Esto tomará a nuestra cadena ordinaria y la convertirá en un conjunto HTML activo que puede ser colocado y utilizado. El mensaje inicial luce exactamente de la misma forma pero puedes ver el contenido HTML con formato aparece en el cuerpo de nuestro mensaje de correo.

Una grana plicación de esto podría ser crear mensajes de correo con contenido HTML. Crear mensajes de este tipo es extremadamente difícil para aquellos que no conocen HTML. Imagina una aplicación simple que permita crear una interfaz visualmente de HTML y después puedan compartirla a su lista de clientes y enviarla. Alguien hizo esto.

Compartir archivos

Uno o más archivos son tratados de la misma manera que en esta situación pero dado que estamos leyendo archivos desde el almacenamiento hay un poco más de código necesario para ser escrito. Si tienes archivos adicionales encontrarás y agregarás simplemente  la lógica asíncrona necesaria, y después los agregarás a una colección de tipo List<IStorageItem> Asíncronamente vamos a obtener los archivos y cuando la operación esté completada, los compartiremos.

async void dtm_DataRequested(DataTransferManager sender, DataRequestedEventArgs args)
{
string tituloHTML = "31 Días de Windows 8";
string DescripcionHTML = "Esto solo explica lo que estamos compartiendo";

DataPackage informacion = args.Request.Data;
informacion.Properties.Title = tituloHTML;
informacion.Properties.Description = DescripcionHTML;

DataRequestDeferral waiter = args.Request.GetDeferral();

try
{
StorageFile archivoDeTexto = await Package.Current.InstalledLocation.GetFileAsync("ArchivoCompartir.txt");
List<istorageitem> archivos = new List</istorageitem><istorageitem>();
archivos.Add(archivoDeTexto);
informacion.SetStorageItems(archivos);

}
finally
{
waiter.Complete();
}
}

Nota que el método entero necesitó ser decorado con la palabra reservada “async” para poder hacer que todo funcione. Veras esto muchas veces en el desarrollo de Windows 8 y es la manera de lidiar con eventos asíncronos. Simplemente te hace la vida mucho más simple. Si no es esta enteramente claro, cree un archivo de texto simple y lo agregué en mi proyecto. Este es el archivo que tomaré y compartiré. De nuevo, el mensaje de compartir lucirá idéntico la primera vez pero cuando abres la aplicación de correo lucirá abierto de la siguiente manera.

La parte interesante a notar en esta situación es que la aplicación de correo previamente utilizó nuestro título como tema del mensaje del correo. En este ejemplo no lo hace. Estoy seguro que el equipo de producto tiene una razón por la cual esto sucede pero yo votaría por consistencia en esto.

Compartir imágenes

Cuando compartes un archivo de imagen quizá quieres tratarlo diferente a un solo archivo básico o quizá no. En este ejemplo, vamos a compartir nuestro archivo de imagen de dos maneras diferentes de modo que las aplicaciones objetivo puedan usar la información en la que están interesadas. Las aplicaciones que buscan por archivos estarán disponibles tanto como las aplicaciones que buscan por imágenes específicamente. Puedes usar este útil truco cuando has tenido múltiples tipos de información para compartir también, no solo cuando la misma cosa puede ser compartida de dos maneras diferentes.

async void dtm_DataRequested(DataTransferManager sender, DataRequestedEventArgs args)
{
string tituloHTML = "31 Días de Windows 8";
string DescripcionHTML = "Esto solo explica lo que estamos compartiendo";

DataPackage informacion = args.Request.Data;
informacion.Properties.Title = tituloHTML;
informacion.Properties.Description = DescripcionHTML;

DataRequestDeferral waiter = args.Request.GetDeferral();

try
{
StorageFile imagen = await Package.Current.InstalledLocation.GetFileAsync("Assets\\Logo.png");
informacion.Properties.Thumbnail = RandomAccessStreamReference.CreateFromFile(imagen);
informacion.SetBitmap(RandomAccessStreamReference.CreateFromFile(imagen));

List</istorageitem><istorageitem> archivos = new List</istorageitem><istorageitem>();
archivos.Add(imagen);
informacion.SetStorageItems(archivos);
}
finally
{
waiter.Complete();
}
}

Puedes ver que hemos la llamado ambos métodos SetBitmap así como al método SetStorageItems. En cualquier caso el mensaje de compartir lucirá idéntico. Por ejemplo, la aplicación de correo no permite imágenes “crudas” pero si las acepta como StorageItems. Dale a este código de ejemplo un intento. Estaba también sorprendido de ver que la aplicación de contacto no acepta ningún tipo de compartir.  Hablaremos más tarde en este artículo acerca de ser una aplicación objeto para compartir y como podemos aceptar diferentes tipos de información.

Compartiendo un formato personalizado de información

Hay muchas veces en las que vas a querer compartir algún tupo de información personalizada. En el 99% de las ocasiones, para hacerlo debes caer en un esquema estándar como los que puedes encontrar en http://schema.org. De hecho no estás bloqueado en un esquema predeterminado pero asegúrate de que entiendes la guía que Microsoft ofrece para crear tus tipos de información personalizados.

La historia pequeña acerca de compartir información personalizada es que vas a especificar un DataPackageFormat pero puede ser absolutamente lo que tu quieras. Para la mayoría de propósitos solo podrás compartir información personalizada entre dos de tus propias aplicaciones pero estandarizando en un esquema estándar ciertamente incrementa las posibilidades de compartir con otras aplicaciones también. Al final tu especificarás una cadena que represente el esquema de tu información y si otra aplicación es un objeto para el mismo y específico tipo de caracteres de la cadena entonces se mostrarán en la lista de aplicaciones potenciales.

void dtm_DataRequested(DataTransferManager sender, DataRequestedEventArgs args)
{
string informacionPersonalizada = @"{
""type"" : ""http://schema.org/Person"",
""properties"" :
{
""image"" : ""http://jeffblankenburg.com/images/200x200.png"",
""name"" : ""Jeff Blankenburg"",
""affiliation"" : ""Microsoft"",
""birthDate"" : ""07/22/1976"",
""jobTitle"" : ""Senior Technical Evangelist"",
""nationality"" : ""United States of America"",
""gender"" : ""Male""
}
}";
string tituloCompartir = "31 Days of Windows 8!";
string enlaceDescripcion = "This just explains what we're sharing.";  //This is an optional value.

DataPackage informacion = args.Request.Data;
informacion.Properties.Title = tituloCompartir;
informacion.Properties.Description = enlaceDescripcion;
informacion.SetData("http://schema.org/Person", informacionPersonalizada);
}

En el ejemplo de arriba estoy usando el esquema de http://schema.org/Person y dado que ninguna de mis otras aplicaciones en mi máquina reconocen este esquema obtendré un mensaje al momento de compartir como el siguiente.

Como has visto a lo largo de esta sección, nuestro título y descripción continúan mostrándose en el mismo lugar pero esta ocasión no hay ninguna app disponible para compartir. En la siguiente sección, vamos a ver como hacer que nuestra aplicación sea capaz de recibir estos tipos de datos.

Objetivo para compartir

Cuando me senté por primera vez a escribir este artículo hice a esta parte la última porque pensé que sería mucho más difícil (y largo) que la otra. Ahora que lo veo, estoy equivocado. Mucho del trabajo para ser una aplicación para compartir cae en tu archivo Package.appmanifest.

Abre el tuyo en la sección de Declaraciones y será probable que encuentres una tierra estéril. Lo que necesitamos hacer es agregar la declaración de Share Target al elegir de la caja de elecciones y presiona el botón de Agregar.

Una vez que has agregado la opción de compartir, se comenzarán a mostrar muchos signos rojos de advertencia.

Agregar una declaración para compartir no es suficiente. También necesitas especificar que tipo de archivo va a recibir. Afortunadamente podemos elegir cualquiera o todos los formatos que hemos cubierto en este artículo. La siguiente imagen muestra mis declaraciones completamente llenas haciendo mi aplicación un objeto para casi todo.

Ahora como nos metemos en el código, hay un largo camino aquí que probablemente necesitas para tu aplicación. He creado un ejemplo que comparte y consume cada posible tipo de información y como tal tiene muchas más líneas de código que las que quisieras.

Primero, necesitamos abrir nuestro archivo App.xaml.cs y agregar un nuevo método para manejar cuando el compartir esté activado. Es sin sorpresa OnShareTargetActivated.

protected override void OnShareTargetActivated(ShareTargetActivatedEventArgs args)
{
var rootFrame = new Frame();
rootFrame.Navigate(typeof(MainPage), args.ShareOperation;
Window.Current.Content = rootFrame;
Window.Current.Activate();
}

Todo esto realmente indica a la aplicación cual es la página que quieres mostrar una vez que tu aplicación ha sido seleccionada para compartir. Esto probablemente es una página separada para ti (no MainPage) pero para mi ejemplo, es exactamente la que he usado.

Ahora para el proceso largo de lógica. He agregado comentarios de modo que puedes encontrar las piezas en las que estés específicamente interesado. Ubica el método entero de OnNavigatedTo() en el ejemplo en MainPage.xaml.cs. Recuerda que esta lógica irá en una página separada en tu aplicación para poder delegar una sola responsabilidad de atrapar ciertos tipos de información compartida.

Podrás ver que cada ejemplo es ligeramente diferente dependiendo del tipo de información.

En resumen

Hoy, vimos un repaso muy extendido para agregar la opción de compartir en tu aplicación. El contrato para compartir te da un increíble nuevo paradigma de aplicaciones con las cuales interactuar. Es algo enormemente refrescanta acerca de saber que aplicaciones que no tienen idea que la mía existe puedan aún comunicarse entre ellas. Espero que tomes esta oportunidad para compartir y consumir la información que sea útil en tu aplicación.

Puedes descargar el ejemplo entero de este artículo desde aquí.

Mañana, vamos a enfocarnos en almacenar información de ambas maneras, localmente en el dispositivo así como información en la nube ¡Nos vemos!

Ayer comenzamos a hablar de contratos al explorar como agregar ajustes a nuestras aplicaciones. Hoy vamos a trabajar sobre la búsqueda y mañana con compartir porque estas funciones le dan más vida a tu aplicación cunado no está ejecutándose precisamente. En el contexto de buscar, esto significa que tu aplicación puede potencialmente exponerse a sí misma al usuario en una nueva forma.

Por los últimos 10 años “buscar” ha sido típicamente sinónimo de los motores de búsqueda. Hace algunos años buscar se ha vuelto muy importante en Windows y si eras como yo te volviste muy hábil en presionar el botón de inicio y escribir el nombre del programa en lugar de ir por el. Hoy en Windows 8 puedes solo escribir y esos resultados serán desplegados de una manera agradable.

Mejor aún, Windows 8 esta realmente extendiendo la manera en como conocemos la búsqueda y la está trayendo justo a nuestras aplicaciones de Windows Store. Ahora no hay ninguna magia, solo atamos algunos eventos y desplegamos las cosas adecuadas a nuestros usuarios pero cambia el típico “punto de entrada” en nuestras aplicaciones. Ahora, en lugar de que nuestro usuario abra su aplicación, busque la caja de búsqueda y comience a buscar, podrá presionar buscar y ser llevado directamente a lo que ellos estuvieran buscando sin más pasos.

Comenzando a configurar

Como lo hemos hecho cada día desde el inicio de esta serie, vamos a comenzar  con la plantilla en blanco. De nuevo, la razón por la que hacemos esto es porque hay mucho código extra para filtrar antes de encontrar lo que estabas buscando.

Una vez que has tenido tu nuevo proyecto (y reemplazado la imagen por defecto… ¿Hiciste eso no? ¿No recuerdas el día 1?). Ahora vamos a agregar la búsqueda a nuestra aplicación. Afortunadamente la búsqueda básica esta a solo un clic de distancia.

Da clic derecho sobre tu proyecto y selecciona Agregar > Nuevo elemento > Search contract.

Te preguntará por el nombre de una página para trabajar con ella. Yo he usado ResultadosBusqueda.xaml pero puedes llamar a la página como desees

Vamos a discutir cada uno de estos archivos brevemente un poco después pero por ahora, deberías ver una solución que luzca como la siguiente.

Hasta aquí, deberías ser capaz de correr tu proyecto, elegir el botón de búsqueda y comenzar a escribir. Aquí está como luce mi aplicación cuando busco por “taco”.

Como puedes ver, funciona pero no estamos dándole ningún valor porque no tenemos nada para buscar. Esto viene después pero antes de ello vamos a hablar acerca de la filosofía detrás de la búsqueda en Windows 8.

Filosofía de búsqueda

Cuando piensas en una aplicación tradicional de Windows 8 estas son generalmente de menor tamaño. No encontrarás una versión de Outlook por ejemplo, que administre muchos tipos de información. En su lugar, hay una aplicación de calendario, una aplicación de correo y una aplicación de contactos.

Las aplicaciones Windows 8 están hechas para hacer una cosa y hacerla realmente bien. Afortunadamente estoy quizá describiendo la aplicación que estás creando ahora. Las aplicaciones Windows 8 pueden ser también buscadas incluso cuando no están corriendo. Eso quiere decir que cuando el usuario esta buscando por algo, el nombre de tu aplicación quizá muestre ciertos tipos de información.

Por ejemplo, la aplicación iHeartRadio. Si estoy buscándola quizá encontraré una estación de radio.

Para una aplicación de clima es como si buscara por una ciudad.

Netflix, quizá estoy buscando por el título de una película o show.

Finalmente, la aplicación de Gente asume que estoy buscando por el nombre de una persona.

Así que como tu estas creando tu aplicación. Hazte a ti mismo una pregunta.

¿Que esperarían los usuarios buscar en mi aplicación?

Otra discusión importante acerca de la búsqueda revuelve el concepto de “Buscar” contra “Encontrar”. El botón de buscar NOT es usado para mirar dentro de un documento. Buscar siempre debe ser algo que puede ser hecho en tu aplicación incluso si no está ejecutándose.

Aquí hay una guía específica de Microsoft de como usar la el botón de Buscar.

Haciendo funcionar la búsqueda

Como vimos en nuestros párrafos de inicio, agregar el contrato de búsqueda a tu proyecto es solo el primer paso. Después necesitamos dar algo de información importante para que el usuario busque. Si vuelves a visitar el artículo del día 4, cree un conjunto pequeño de elementos de la tabla periódica para demostrar el control de Zoom Semántico.

Podremos usar la misma información en este ejemplo. En el caso de que lo hayas dejado pasar aquí tienes la clase Elemento.

class Elemento
{
public double AtomicWeight { get; set; }
public int AtomicNumber { get; set; }
public string Symbol { get; set; }
public string Name { get; set; }
public string Category { get; set; }
public string State { get; set; }
}

Por simplicidad, voy a poblar la una lista de tipo Elemento en nuestro archivo PaginaResultados.xaml.cs. Iniciaré creando un nuevo método, CrearListaElementos() y llamándolo desde nuestro constructor, después crearé un nuevo objeto de tipo Elemento para los 36 elementos que estaré usando.

private void CrearListaElementos()
{
elementos.Add(new Elemento { NumeroAtomico = 1, PesoAtomico = 1.01, Categoria = "Metales alcalinos", Nombre = "Hidrógeno", Simbolo = "H", Estado = "Gas" });
elementos.Add(new Elemento { NumeroAtomico = 2, PesoAtomico = 4.003, Categoria = "Gases nobles", Nombre = "Helio", Simbolo = "He", Estado = "Gas" });
elementos.Add(new Elemento { NumeroAtomico = 3, PesoAtomico = 6.94, Categoria = "Metales alcalinos", Nombre = "Litio", Simbolo = "Li", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 4, PesoAtomico = 9.01, Categoria = "Tierras alcalinas", Nombre = "Berilio", Simbolo = "Be", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 5, PesoAtomico = 10.81, Categoria = "No Metales", Nombre = "Boro", Simbolo = "B", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 6, PesoAtomico = 12.01, Categoria = "No Metales", Nombre = "Carbono", Simbolo = "C", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 7, PesoAtomico = 14.01, Categoria = "No Metales", Nombre = "Nitrogeno", Simbolo = "N", Estado = "Gas" });
elementos.Add(new Elemento { NumeroAtomico = 8, PesoAtomico = 15.999, Categoria = "No Metales", Nombre = "Oxígeno", Simbolo = "O", Estado = "Gas" });
elementos.Add(new Elemento { NumeroAtomico = 9, PesoAtomico = 18.998, Categoria = "No Metales", Nombre = "Flúor", Simbolo = "F", Estado = "Gas" });
elementos.Add(new Elemento { NumeroAtomico = 10, PesoAtomico = 20.18, Categoria = "Gases nobles", Nombre = "Neón", Simbolo = "Ne", Estado = "Gas" });
elementos.Add(new Elemento { NumeroAtomico = 11, PesoAtomico = 22.99, Categoria = "Metales alcalinos", Nombre = "Sodio", Simbolo = "Na", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 12, PesoAtomico = 24.31, Categoria = "Tierras alcalinas", Nombre = "Magnesio", Simbolo = "Mg", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 13, PesoAtomico = 26.98, Categoria = "Otros metales", Nombre = "Aluminio", Simbolo = "Al", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 14, PesoAtomico = 28.09, Categoria = "No Metales", Nombre = "Silicio", Simbolo = "Si", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 15, PesoAtomico = 30.97, Categoria = "No Metales", Nombre = "Fósforo", Simbolo = "P", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 16, PesoAtomico = 32.06, Categoria = "No Metales", Nombre = "Azufre", Simbolo = "S", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 17, PesoAtomico = 35.45, Categoria = "No Metales", Nombre = "Cloro", Simbolo = "Cl", Estado = "Gas" });
elementos.Add(new Elemento { NumeroAtomico = 18, PesoAtomico = 39.95, Categoria = "Gases nobles", Nombre = "Argón", Simbolo = "Ar", Estado = "Gas" });
elementos.Add(new Elemento { NumeroAtomico = 19, PesoAtomico = 39.10, Categoria = "Metales alcalinos", Nombre = "Potasio", Simbolo = "K", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 20, PesoAtomico = 40.08, Categoria = "Tierras alcalinas", Nombre = "Calcio", Simbolo = "Ca", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 21, PesoAtomico = 44.96, Categoria = "Metales de transición", Nombre = "Escandio", Simbolo = "Sc", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 22, PesoAtomico = 47.90, Categoria = "Metales de transición", Nombre = "Titanio", Simbolo = "Ti", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 23, PesoAtomico = 50.94, Categoria = "Metales de transición", Nombre = "Vanadio", Simbolo = "V", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 24, PesoAtomico = 51.996, Categoria = "Metales de transición", Nombre = "Cromo", Simbolo = "Cr", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 25, PesoAtomico = 54.94, Categoria = "Metales de transición", Nombre = "Manganeso", Simbolo = "Mn", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 26, PesoAtomico = 55.85, Categoria = "Metales de transición", Nombre = "Hierro", Simbolo = "Fe", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 27, PesoAtomico = 58.93, Categoria = "Metales de transición", Nombre = "Cobalto", Simbolo = "Co", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 28, PesoAtomico = 58.70, Categoria = "Metales de transición", Nombre = "Níquel", Simbolo = "Ni", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 29, PesoAtomico = 63.55, Categoria = "Metales de transición", Nombre = "Cobre", Simbolo = "Cu", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 30, PesoAtomico = 65.37, Categoria = "Metales de transición", Nombre = "Zinc", Simbolo = "Zn", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 31, PesoAtomico = 69.72, Categoria = "Otros metales", Nombre = "Galio", Simbolo = "Ga", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 32, PesoAtomico = 72.59, Categoria = "Otros metales", Nombre = "Germanio", Simbolo = "Ge", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 33, PesoAtomico = 74.92, Categoria = "No Metales", Nombre = "Arsénico", Simbolo = "As", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 34, PesoAtomico = 78.96, Categoria = "No Metales", Nombre = "Selenio", Simbolo = "Se", Estado = "Sólido" });
elementos.Add(new Elemento { NumeroAtomico = 35, PesoAtomico = 79.90, Categoria = "No Metales", Nombre = "Bromo", Simbolo = "Br", Estado = "Líquido" });
elementos.Add(new Elemento { NumeroAtomico = 36, PesoAtomico = 83.80, Categoria = "Gases nobles", Nombre = "Kryptón", Simbolo = "Kr", Estado = "Gas" });
}

Obviamente, vas a querer obtener tu información desde otra ubicación pero este artículo es acerca de búsqueda no de fuentes de datos.

Si miras en el método FilterSelectionChanged() que fue creado en PaginaResultados.xaml.cs verías algunos comentarios como el siguiente.

// TODO: Respond to the change in active filter by setting this.DefaultViewModel["Results"]
// to a collection of items with bindable Image, Title, Subtitle, and Description properties

Justo debajo de estos comentarios, vamos a agregar nuestra lógica para obtener los registros adecuados desde nuestra fuente de datos. Antes de que hagamos eso, sin embargo, hay muchas suposiciones a considerar por ti para este método y es importante entender que esas suposiciones están antes de que escribas cualquier otra cosa.

La primera suposición es que los resultados de tu búsqueda van a ser una colección de objetos que tengan una propiedad para imagen, título, subtitulo y descripción. Es improbable que tu información tenga esta información y no quieras forzarla a hacerlo para que se alinee a lo que te están pidiendo. La razón para esta suposición es muy simple.

Abre brevemente su página de PaginaResultados.xaml. Mira al control de tipo GridView llamado “resultsGridView” así como al control ListView llamado “resultasListVie”. Hemos ya cubierto estos tipos de controles en el Día 4 pero ellos tienen ahora un ItemTemplate ya definido. Aquí es donde viven todas las suposiciones. Están usando el DataTemplate por defecto llamado “StandardSmallIcon300x70ItemTemplate”. Si das un vistazo a tu archivo “Common/StandardStyles.xaml” lo encontrarás ahí y está tratando de enlazar aquellas cuatro propiedades que mencioné antes. No queremos usar esa plantilla, pero es un buen inicio.

Lo que he hecho es copiar esa DataTemplate completa y moverla a mi página PaginaResultados.xaml en la sección de recursos. Aquí está lo que he modificado de la sección.

<page .Resources>
<collectionviewsource x:Name="resultsViewSource" Source="{Binding Results}"></collectionviewsource>
<collectionviewsource x:Name="filtersViewSource" Source="{Binding Filters}"></collectionviewsource>
<common:booleantovisibilityconverter x:Key="BooleanToVisibilityConverter"></common:booleantovisibilityconverter>
<!-- TODO: Update the following string to be the name of your app -->
<x:string x:Key="AppName">App Name</x:string>
<datatemplate x:Key="ModifiedSmallIcon300x70ItemTemplate">
<grid Width="294" Margin="6">
</grid><grid .ColumnDefinitions>
<columndefinition Width="Auto"></columndefinition>
<columndefinition Width="*"></columndefinition>
</grid>
<border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Margin="0,0,0,10" Width="40" Height="40">
<textblock Text="{Binding Symbol}" FontSize="32" FontWeight="Bold" TextAlignment="Center" VerticalAlignment="Center"></textblock>
</border>
<stackpanel Grid.Column="1" Margin="10,-10,0,0">
<textblock Text="{Binding Name}" Style="{StaticResource BodyTextStyle}" TextWrapping="NoWrap"></textblock>
<textblock Text="{Binding Category}" Style="{StaticResource BodyTextStyle}" Foreground="{StaticResource ApplicationSecondaryForegroundThemeBrush}" TextWrapping="NoWrap"></textblock>
<textblock Text="{Binding State}" Style="{StaticResource BodyTextStyle}" Foreground="{StaticResource ApplicationSecondaryForegroundThemeBrush}" TextWrapping="NoWrap"></textblock>
</stackpanel>

</datatemplate>
</page>

Puedes ver que es casi idéntico al original pero lo he renombrado a “ModifiedSmallIcon300x70ItemTemplate”. Las otras diferencias son quehe cambiado el control Imagen por otro TextBlock y cambiado los enlazados a las propiedades que mi objeto posee, Simbolo, Nombre,Categoria y Estado. He cambiado también el nombre de los ItemTemplates usados por el control GridView y ListView para apuntar a mi versión modificada también. Ahora podemos comenzar a dar algunos resultados a nuestra Página de Resultados.

¿Recuerdas esos controles desde antes? Los que estaban en el método Filter_SelectionChanged()? Vamos a volver a visitarlos y agregar algo de código.

IEnumerable<elemento> resultadosBusqueda = from el in elementos
where el.Nombre.ToLower().Contains(cadenaBusqueda)
orderby el.Nombre ascending
select el;

DefaultViewModel["Resultados"] = resultadosBusqueda;

object resultados;
IEnumerable</elemento><elemento> coleccionResultados;

if (DefaultViewModel.TryGetValue("Resultados", out resultados) &amp;amp;amp;&amp;amp;amp;
(coleccionResultados = resultados as IEnumerable</elemento><elemento>) != null &amp;amp;amp;&amp;amp;amp;
coleccionResultados.Count() != 0)
{
VisualStateManager.GoToState(this, "ResultsFound", true);
return;
}

He agregado una sentencia LINQ simple para obtener la información adecuada desde mi fuente de datos y asigné los resultados a this.DefaultViewModel[“Resultados”]. Esto es lo que llenará a nuestro control GridView.

También he modificado un poco del código por defecto en la sección de abajo para llamar explícitamente que estoy usando una lista IEnumerable de objetos de tipo Element. Si tu término de búsqueda tiene de hecho algunos resultados, esta lógica será la que muestre los resultados.

En este punto, si ejecutas tu proyecto y haces una búsqueda deberías obtener algo así como lo que se ve a continuación.

Puedes incluso cerrar la aplicación enteramente, ejecutar una búsqueda en tu máquina y después elegir tu aplicación. Trabaja exactamente de la misma forma.

Hasta aquí, habrás pensado que estamos listos. Bueno, estás equivocado. Tenemos mucho de que hablar aún. Específicamente que hará el usuario una vez que tenga los valores resultantes de acuerdo a lo que ellos han buscado. Vamos a ver lo siguiente.

Definir sugerencias de búsqueda

Este es un proceso muy simple de hecho, específicamente comparado con lo que hemos hecho en este artículo. En nuestra página PaginaResultados.xaml necesitamos iniciar con una referencia a la clase SearchPane (quizá también necesites agregar la referencia a Windows.ApplicationModel.Search). También iniciamos una instancia del objeto SerachPane in nuestro constructor.

SearchPane panelBusqueda;

public PaginaResultados()
{
this.InitializeComponent();
CrearListaElementos();
panelBusqueda = SearchPane.GetForCurrentView();
}

Una vez que lo hayas hecho, el siguiente paso es crear un manejador de eventos para el evento SuggestionsRequested. Crea un nuevo método OnNavigatedTo como el de abajo y agrega el nuevo manejador de eventos (también retíralo en el método OnNavigatedFrom).

protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
panelBusqueda.SuggestionsRequested += searchPane_SuggestionsRequested;
}

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
base.OnNavigatingFrom(e);
panelBusqueda.SuggestionsRequested -= searchPane_SuggestionsRequested;
}

void searchPane_SuggestionsRequested(SearchPane sender, SearchPaneSuggestionsRequestedEventArgs args)
{
args.Request.SearchSuggestionCollection.AppendQuerySuggestions((from el in elementos
where el.Nombre.ToLower().StartsWith(args.QueryText.ToLower()) || el.Simbolo.ToLower().StartsWith(args.QueryText.ToLower())
orderby el.Nombre ascending
select el.Nombre).Take(5));
}

Puedes ver que simplemente estoy dándole a la colección un conjunto de máximo cinco valores como recomendación. Esto es lo más que podrá mostrar así que estoy limitando mis resultados a cinco por mucho.

¡Eso es todo! Si tu buscas por un elemento en esta aplicación ahora, verás (basado en mi consulta) que si escribiste caracteres que coincidan con el nombre de un elemento nombre o símbolo obtendrás un máximo de cinco recomendaciones.

Forzar la búsqueda cuando las pulsaciones de teclado sean detectadas

Hay un último truco del que deberíamos hablar y es permitir al usuario abrir la caja de búsqueda simplemente escribiendo. Para agregar una simple declaración en nuestros métodos OnLaunched y OnSuspending en nuestro archivo App.xaml.cs, podremos habilitar esta funcionalidad a través de nuestra aplicación entera.

Agrega esta línea a tu método OnLaunched.

SearchPane.GetForCurrentView().ShowOnKeyboardInput = true;

Y esta línea a tu método OnSuspending para deshabilitar lo cuando la aplicación esté cerrada.

SearchPane.GetForCurrentView().ShowOnKeyboardInput = false;

¡Y eso es todo! Corre tu aplicación y solo comienza a escribir. El botón de búsqueda se abrirá automáticamente y comenzará a capturar tus teclas presionadas.

Declaraciones

Hay una última cosa que quiero cubrir en este artículo y es mas para tu conocimiento que para algo que necesites hacer. Cuando tu agregaste el contrato de búsqueda a tu proyecto se agregaron muchos archivos a tu proyecto pero también hubo una declaración hecha en tu archivo appxmanifest. Si tu abres ese archivo y navegas a la tabla de Declaraciones verás algo como lo siguiente.

Sin esta declaración ninguna de las funcionalidades que has agregado a tu aplicación será capaz de funcionar. Obtendrás un erro diciendo que el acceso esta negado.

Solo recuerda que necesitas declarar que estás usando la búsqueda antes de que tu aplicación este habilitada para hacer uso de esta API.

En resumen

Hoy, tomamos un vistazo rápido al agregar Búsquedas en tu aplicación. El contrato de búsqueda le da una nueva manera a tus aplicaciones de mostrarse a sus usuarios. Ahora solo necesitas determinar que es exatamente lo que quieres mostrar. Colócate frente a tus usuarios asegurará que estén inclinados por tu aplicación. Entre más lo uses más vida le darás.

Puedes descargar la solución entera de ejemplo desde aquí.

Mañana, vamos al paso final de la exploración de contratos, Compartir. ¡Nos vemos entonces!

Hoy vamos a lanzar una serie de artículos enfocados en contratos iniciando con el contrato de configuraciones. Las oportunidades de que tu aplicación los use son realmente altas y quizá odies lidiar con ello. La configuración de la aplicación es solo una parte de algo más grande en Windows 8 llamado contratos. Vamos a iniciar nuestra conversación de configuraciones con la definición de Microsoft de contratos.

Contratos: Un contrato es como un acuerdo entre una o más aplicaciones. Los contratos definen los requerimientos que la aplicación debe cumplir para participar en estas interacciones únicas en Windows. Por ejemplo, Windows le permite a los usuarios compartir contenido de una aplicación a otra. La aplicación que comparte contenido hacia afuera soporta un contrato fuente al cumplir con requerimientos específicos mientras que la aplicación que recibe el contenido compartido soporta un contrato al cumplir un conjunto diferente de requerimientos. Ninguna aplicación necesita saber nada acerca de la otra. Cada aplicación que participa en el contrato de compartir puede ser independiente sin contar el flujo de información al compartir datos por Windows.

Interesante, esto suena como a una “interfaz administrada” entre aplicaciones en el sistema operativo Windows. Hay cinco contratos disponibles para nuestras aplicaciones:

• Selector de archivos
• Reproducir
• Búsqueda
• Configuración
• Compartir

Tal como una interfaz típica de programación lo que significa que puede estar compartiendo algún tipo de funcionalidad sin que la otra sepa acerca de ello.

Con Windows 8, todo esto parece suceder en el nivel de experiencia de usuario. ¿Qué quiere decir? Bueno, vamos a tomar el contrato de compartir por ejemplo. Simplemente colócalo, las aplicaciones le dicen al sistema operativo para lo que ellas quieren ingresar. En el caso de compartir quizá sea aceptar o compartir una imagen, Windows se encargará del resto.

Imagina un escenario donde encuentres un gran artículo mientras navegas en la web en algo como Internet Explorer. Quieres compartirlo a alguien más vía correo o Twitter. Asumiendo que tenías una aplicación instalada que los gestione y ellas acepten el compartir una URI entonces Internet Explorer podría compartírselo. Mejor aún, esas aplicaciones ni siquiera tendrían que estar ejecutándose para hacerlo. Windows se encarga de hacer toda la magia.

Suena como una interfaz típica de programación ¿No es así?

Empezando simples

Si das un vistazo a muchos de los ejemplos afuera, vas a encontrar un conjunto complejo de métodos en diferentes páginas, si eres como yo terminarás confundido. Esta serie de artículos esta hecha para hacer los temas como este simples de entender y usar de modo que eso es lo que haré.

Cuando nuestra aplicación inicia hay un método en el archivo App.xaml.cs llamado OnLaunched que es ejecutado. Al principio de OnLaunched vamos a crear un manejador de eventos para cuando el usuario intente abrir el panel de configuración. Tus elementos no serán agregados hasta que el usuario trate de abrir la barra lateral (Charms bar) Este evento podrías ser usado cuando necesites pauser tu aplicación o juego y las configuraciones sean abiertas.

protected override void OnLaunched(LaunchActivatedEventArgs args)
{
SettingsPane.GetForCurrentView().CommandsRequested += App_CommandsRequested;
Frame rootFrame = Window.Current.Content as Frame;
...
}

Una vez que has agregado el manejador de eventos, podemos ir abajo para agregar SettingsComands a nuestro SettingsPane. Hay muchos pasos para crear un SettingsCommand:

• Crear un nuevo SettingsCommand: Esto requiere tres propiedades; un ID, una etiqueta y una acción para realizar cuando el comando sea presionado. En nuestro caso esto será creando un control Popup, llenarlo con un control de usuario que vamos a crear y desplazarlo desde un lado de la pantalla.
• Manejar todos los casos de la destitución del control Popup: Nosotros también necesitaremos manejar el como regresar a nuestra aplicación cuando el usuario haya terminado la operación.

Si no lo has generado, necesitas un método para el manejador de eventos llamado App_CommandRequested o como elijas que puedes llamarlo. Aquí es donde haremos el volumen de nuestra lógica para que SettingsPane se comporte de la manera que queremos. Aquí está como luce el mío.

void App_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
{
SettingsCommand comando = new SettingsCommand("about", "Acerca de esta aplicación", (handler) =>
{
Popup popup = CrearItemConfiguracion(new AcercaDe(), 646);
popup.IsOpen = true;
});

args.Request.ApplicationCommands.Add(comando);
}

Como puedes ver arriba, creamos un nuevo objeto de tipo SettingsCommand y lo completamos con tres valores. A menos de que planees cambiar tu SettingsPane en tiempo de ejecución, el primero no importará mucho. Es un simple ID que puedes usar para hacer referencia al SettingsCommand después.La etiqueta “Acerca de esta aplicación” puede ser cualquier valor de tipo cadena pero recomendaría mantenerla por debajo de los 40 caracteres porque usar más podría truncarla. Finalmente, tenemos nuestro manejador para este comando. Este es el código que será ejecutado cuando el usuario seleccione la etiqueta. He simplificado este proceso usando una expresión lambda para definir el código y puedes ver que estoy creando un control de tipo Popup y ajustando su propiedad isOpen a true. Cambiar esta propiedad es lo que hace que el control Popup aparezca en la pantalla.

Creando el control Popup

En esta sección vamos a dar un vistazo al método BuildSettingsItem que he creado. Quizá hayas notadoque en el código de ejemplo de arriba que se están pasando dos valores. El primero es un control de usuario personalizado que estaremos creando en poco. Por ahora solo checa que AboutPage.xaml es un control de usuario que deberemos crear y que es usado para llenar al control Popup.

private Popup CrearItemConfiguracion(UserControl control, int ancho)
{
Popup mensaje = new Popup();
mensaje.IsLightDismissEnabled = true;
mensaje.ChildTransitions = new TransitionCollection();
mensaje.ChildTransitions.Add(new PaneThemeTransition()
{
Edge = (SettingsPane.Edge == SettingsEdgeLocation.Right) ? EdgeTransitionLocation.Right : EdgeTransitionLocation.Left
});

control.Width = ancho;
control.Height = Window.Current.Bounds.Height;
mensaje.Child = control;

mensaje.SetValue(Canvas.LeftProperty, SettingsPane.Edge == SettingsEdgeLocation.Right ? (Window.Current.Bounds.Width - ancho) : 0);
mensaje.SetValue(Canvas.TopProperty, 0);

return mensaje;
}

Mucho del código de este método es de “relleno” lo cual es para hacer de la IU un poco más amena y fluida. Las líneas específicas que son importantes son las últimas seis. Definimos el ancho y el alto de nuestro control de usuario, control y después lo asignamos como un hijo de nuestro control Popup mensaje (El ancho es recomendado de 346 o 646, el alto debería ser del tamaño de la pantalla del usuario de acuerdo a la guía de Microsoft). Finalmente ajustamos las propiedades left y top del popup de modo que aparezca en la ubicación adecuada y pasamos el popup de vuelta a nuestro SettingsCommand.

NOTA: Windows 8 puede de hecho transformar un bit basado en los ajustes de localización que han sido aplicados a la máquina. En países donde el lenguaje es leído de derecha a izquierda la barra de accesos está ubicada a la izquierda en lugar de la derecha. Esta es la razón por la que cuando asigne la propiedad LeftProperty de nuestra popup tenemos que verificar para ver en cual límite se encuentra el SettingPane. Deberías ver una lógica similar para el límite de PaneThemeTransition poco antes en este método.

Ciertamente no debes romper todo el código en pedazos como yo lo hice pero creo que eso hace las cosas más simples, especialmente cuando quieres crear múltiples elementos de tipo SettingsCommand.

Creando el control de usuario

Lo prometí antes, volveríamos aquí y aquí estamos. En este punto hemos tomado consideración de todo el andamio que es requerido para hacer funcionar al contrato de ajustes. Ahora todo lo que tenemos que hacer es construir una página para que se muestre. Agrega un nuevo control de usuario (UserControl) a tu proyecto. Yo lo he llamado AcercaDe.xaml para coincidir con el código que escribimos antes pero obviamente tu podrás usar el nombre que gustes.

El código de este archivo esta enteramente en tus manos. Aunque hay algunas recomendaciones en como debería lucir tu panel de ajustes, no hay reglas específicas al respecto. Lo que yo te estoy dando en el siguiente código de ejemplo y una plantilla de orden. Hará a tus aplicaciones lucir como esto.

De cualquier forma puedes usar cualquier XAML que te guste para hacer brillar a tu Popup.

<border BorderBrush="#00b2f0" BorderThickness="1,0,0,0">
<grid Background="White" VerticalAlignment="Stretch">
</grid><grid .RowDefinitions>
<rowdefinition Height="Auto"></rowdefinition>
<rowdefinition Height="*"></rowdefinition>
</grid>

<!-- HEADER -->
<grid Background="#00b2f0" Grid.Row="0">
</grid><grid .ColumnDefinitions>
<columndefinition Width="*"></columndefinition>
</grid>

<stackpanel Orientation="Horizontal" Grid.Column="0" Margin="40, 32, 17, 13">
<button x:Name="btnAtras" Margin="0,3,0,0" Style="{StaticResource BackButtonStyle}" Click="btnAtras_Click"></button>
<textblock Margin="10,10,0,0" FontFamily="Segoe UI" FontWeight="SemiLight" FontSize="24.6667" Text="Acerca de esta app" Foreground="White"></textblock>
</stackpanel>
<image Source="Assets/SmallLogo.png" Width="29" Height="29" Margin="353,46,17,21"></image>


<!-- CONTENT AREA -->
<scrollviewer VerticalScrollBarVisibility="Auto" Grid.Row="1">
<grid Margin="40,33,40,39" VerticalAlignment="Top" Grid.RowSpan="3">
<stackpanel>

</stackpanel>
</grid>
</scrollviewer>

</border>

No hay nada sustancialmente complicado acerca de este diseño. Tenemos tres controles que son importantes para el encabezado.

• Button – El control del botón es la flecha con círculo. Hemos colocado un manejador del evento click llamado btnAtras_Click y te mostraré el código que contiene al final de este artículo.
• Textblock – Contiene el nombre de los ajustes que el usuario estará viendo. En la mayoría de los casos, esto debería coincidir con las palabras que muestras en el SettingsPane.
• Image – Esta imagen ciertamente no es requerida pero contribuye a reforzar tu marca y logo de una manera adicional. Puedo recomendarte el mostrar tu logo tanto como puedas y este es un gran lugar para hacerlo.

Hasta el fondo, tenemos una sección marcada como área de contenido. Dentro del contenedor StackPanel es donde deberías agregar tu contenido. Este puede ser lo que sea. pero trata de mantenerlo simple. CheckBox. ToggleButton, TextBox, RedioButton, etc. Los controles simples con la vista puesta en una tarea simple.

Aquí está el código para el método

private void BackButton_Click(object sender, RoutedEventArgs e)
{
Popup parent = this.Parent as Popup;
if (parent != null)
{
parent.IsOpen = false;
}

// If the app is not snapped, then the back button shows the Settings pane again.
if (Windows.UI.ViewManagement.ApplicationView.Value != Windows.UI.ViewManagement.ApplicationViewState.Snapped)
{
SettingsPane.Show();
}
}

Puedes ver que cerramos nuestro control popup padre y si la aplicacion no está en un estado snapped reabrirá el SettingsPane como lo haría un botón de retroceso. ¡Eso es todo!

Oh. Espera. ¡Querías saber como salvar la información del usuario?

Guardando información

Windows 8 ha cambiado muchas cosas y una de las conductas base que se han ido es el concepto del botón Guardar. Tanto como sea posible quiero que elimines ese concepto de tu cabeza.

Cuando un usuario cambia un valor en sus preferencias.

NO esperes para que ellos presionen un botón de Guardar cambios.

NO les preguntes ¿Está seguro? cuando el cambio es reversible.

Guarda la información en el momento en que ellos la cambien y dale a tu usuario crédito suficiente para hacer solo los cambios que el quiera hacer. Si ellos presionan la opción Borrar toda tu información esa podría ser la razón para confirmar que ellos están seguros pero solo hazlo porque no es reversible. No porque pienses que tu usuario es un idiota.

Y para el COMO, vamos a esperar en este tema para el día 8 y entonces consumiremos nuestro tiempo en guardar la información de ambas formas, tanto local como los valores en todas las máquinas en las que el usuario tenga una cuenta.

Resumen

Cuando toqué por primera vez Windows 8 yo seguía escuchando la frase “Win as 1” (Gana como uno). Gana como 1 es uno de los principales principios de Windows. Al principio esto sonaba como un discurso de marketing pero de hecho esta muy lejos de serlo. Habiendo trabajado con Windows 8 por un tiempo, los contratos son una prueba genial de este principio. Cosas como los ajustes de la aplicación ahora están centralizados en el usuario, nuestras aplicaciones ahora pueden pasar mas tiempo enfocadas en mostrar sus elementos clave en lugar de lidiar con cosas como las configuraciones. Además, ahora que las configuraciones son consistentes en todas las aplicaciones, nunca más tendremos que enseñar a un usuario a usar las configuraciones más que una sola vez.

Yo solo tuve que pensar en como abrir una puerta y después, las pude abrir todas

-Yo lo invente

Hoy, vimos el contrato de configuraciones el cual es solo uno de muchos contratos que encontrarás en Windows 8. Así como una interfaz de programación, los contratos en Windows 8 le ofrecen a tu aplicación una manera única de extender tu aplicación más allá de la definición tradicional de un proceso de aplicación dando mejor una consistencia en el uso de interfaces a nuestros usuarios.

Puedes descargar la solución entera de ejemplo aquí.

Mañana vamos a mirar al contrato de Búsqueda. Buscar el algo que encontrarás muy útil no solo desde una perspectiva de usabilidad sino también porque es una manera rápida de continuar manteniendo tu aplicación en la cima de tus usuarios. ¡Nos vemos!

Hoy volveremos a lo básico, y vamos a ver algunos de los nuevos controles de layout que tenemos disponibles en aplicaciones XAML. Éste artículo cubrirá específicamente ésta lista de controles:

• AppBar
• FlipView
• GridView
• ProgressRing
• ScrollViewer
• SemanticZoom
• WebView

Si quieres ver la lista completa de controles disponibles en XAML para Windows 8, puedes darle un vistazo a MSDN y leer más aquí.

AppBar

La primera vez que me senté a escribir ésta sección, me acorde de cuando estaba trabajando con la ApplicationBar en el desarrollo de Windows Phone. Era bastante claro y conciso, pero tenías que crear imágenes para cada icono, y luego el SO de Windows Phone agregaba el círculo por ti.

Cuando empecé a ver el AppBar para Windows 8, me encanto descubrir que no solo las imágenes eran innecesarias para la mayoría de los iconos que verás, pero también implementarlo es de lo más simple. Aquí tienes un vistazo a la AppBar que vamos a crear:

Como puedes ver en la imagen arriba (clic para agrandar), vamos a implementar ambos una AppBar superior e inferior. Aunque técnicamente puedes poner cualquier cosa en el AppBar, hay un par de “reglas” que se deben destacar:

1. El AppBar inferior está generalmente dividido en dos mitades. La izquierda es para comandos específicos del contexto, basado en el contenido actual en pantalla. La derecha es usado más para comandos universales que pueden ser accedidos desde cualquier lugar en tu aplicación.
2. El AppBar superior supuestamente se usa para navegación y otras opciones necesarias en tu app, similar al listón que puedes encontrar en alguna de las apps de Office.

Mencione antes que no necesitas ningún arte para los iconos con círculos alrededor de ellos, y es totalmente cierto. De hecho, no necesitas hacer casi nada más que crear un botón y aplicar alguno de los 202 estilos de botón de AppBar que Microsoft ha provisto por defecto. Cada uno de ellos usa la fuente “Segoe UI Icons” para su iconografía, y hay muchos de ellos incluidos en tu archivo StandardStyles.xaml:

Haz click en la imagen para verlo en su magnífico tamaño completo. Vas a querer conservarlo. (También, un GRAN agradecimiento a Mike Brown por crear la versión invertida de ésta imagen para impresión. Definitivamente te ahorrar algo de tinta.

OK, tiempo de pasar a la parte de implementación de ésta sección. Para que el AppBar responda a los gestos del usuario, simplemente necesitas crear una nueva Page.TopAppBar o Page.BottomAppBar, de esta forma:

<Page.BottomAppBar>
    <AppBar>
        <!--Pon aquí cualquier contenido que quieras. --> 
    </AppBar> 
</Page.BottomAppBar>

Realmente puedes poner cualquier cosa en donde están los comentarios en el ejemplo anterior, pero si quieres seguir las reglas, preferirás dividir el AppBar en dos secciones. En ese caso, aquí hay un ejemplo que incorpora un Grid para dividir el AppBar a la mitad, y usa dos StackPanels para orientar los iconos apropiadamente. Ésta es la barra inferior del screenshot que use arriba con los bloques de colores del arcoíris arriba.

<Page.BottomAppBar>
    <AppBar>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50*" />
                <ColumnDefinition Width="50*" />
            </Grid.ColumnDefinitions>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                <Button x:Name="EditButton" Style="{StaticResource EditAppBarButtonStyle}" Tag="Edit" />
            </StackPanel>
            <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right">
                <Button Style="{StaticResource AddAppBarButtonStyle}" />
                <Button Style="{StaticResource HelpAppBarButtonStyle}" />
                <Button Style="{StaticResource DiscardAppBarButtonStyle}" />
                <Button Style="{StaticResource DeleteAppBarButtonStyle}" />

            </StackPanel>
        </Grid>
    </AppBar>
</Page.BottomAppBar>

Puedes ver que cada icono en la barra consiste simplemente de un control de Button con un Style aplicado. Como recordatorio, todos estos 202 estilos pueden encontrarse y editarse en el archivo StandardStyles.xaml de tu proyecto. Por defecto, todos estos estilos están comentados, así puedes elegir descomentarlos todos, o solo descomentar lo que vas a usar.

De cualquier forma, para demostrar que podemos poner cualquier cosa en un AppBar, veamos como hice los botones arcoíris arriba de la página.

<Page.TopAppBar>
    <AppBar>
        <StackPanel Orientation="Horizontal" Margin="10,10,10,10" Height="200">
            <Rectangle Width="200" Height="200" Fill="Red" Margin="0,0,20,0" Tapped="Rectangle_Tapped" />
            <Rectangle Width="200" Height="200" Fill="Orange" Margin="0,0,20,0" Tapped="Rectangle_Tapped" />
            <Rectangle Width="200" Height="200" Fill="Yellow" Margin="0,0,20,0" Tapped="Rectangle_Tapped" />
            <Rectangle Width="200" Height="200" Fill="Green" Margin="0,0,20,0" Tapped="Rectangle_Tapped" />
            <Rectangle Width="200" Height="200" Fill="Blue" Margin="0,0,20,0" Tapped="Rectangle_Tapped" />
            <Rectangle Width="200" Height="200" Fill="Purple" Margin="0,0,20,0" Tapped="Rectangle_Tapped" />
        </StackPanel>
    </AppBar>
</Page.TopAppBar>

He agregado algunos controles Rectangle dentro de un StackPanel, y agregue el evento Tapped a cada uno de ellos. En mi archivo code-behind, determino el color de Fill del rectángulo seleccionado, y pongo el fondo de la página de ese color, usando este método:

private void Rectangle_Tapped(object sender, TappedRoutedEventArgs e)
        {
            Rectangle rect = sender as Rectangle;
            LayoutRoot.Background = rect.Fill;
        }

Descarga el código de ejemplo al final de este artículo para obtener una versión funcional que te permitirá verlo en acción, así como otra página que contiene todos los estilos de iconos en código. Al correr el código, nota que los gestos por defecto de Windows 8 ya funcionan. Arrastrando desde la parte superior o inferior de la pantalla mostrara el AppBar, de igual forma cuando se hace click derecho en la aplicación misma. Dale un vistazo!

FlipView

El control FlipView es uno de los que construí varias veces desde cero para Windows Phone, porque no existía. El propósito básico de un control FlipView es permitir al usuario “hojear” un grupo específico de contenido. En este ejemplo, vamos a hacer que hojee un grupo de imágenes, y como el FlipView hereda de ItemsControl, podemos enlazarle cualquier tipo de datos, inclusive usando DataTemplates para diseños complejas. Aquí está una vista rápida a nuestro control FlipView en acción (click para agrandar):

Como puedes ver, se nos provee con flechas de atrás y adelante que son conscientes de tu posición en la lista de datos, y previene moverse más allá del inicio o final de la lista. Implementar este control no podría ser más simple:

<FlipView x:Name="Flipper" Grid.ColumnSpan="2" Margin="0,240,0,-800">
    <Image Source="Assets/meme1.jpg" />
    <Image Source="Assets/meme2.jpg" />
    <Image Source="Assets/meme3.jpg" />
    <Image Source="Assets/meme4.jpg" />
</FlipView>

Todo lo que necesitas es agregar imagines a un FlipView, y así obtendrás un navegador de imágenes simple listo para usarse! Para algo más complejo, podrías querer agregar leyendas a tu navegador de imágenes. Para hacer esto, podemos usar FlipViewItems, y cada Item conteniendo sus propios valores únicos, como sigue:

<FlipView x:Name="Flipper" Grid.ColumnSpan="2" Margin="0,240,0,-800">
    <FlipViewItem>
        <StackPanel>
            <Image Source="Assets/meme1.jpg" Width="500" />
            <TextBlock Text="Estupido Cerebro" TextAlignment="Center" FontSize="40" />
        </StackPanel>
    </FlipViewItem>
    <FlipViewItem>
        <StackPanel>
            <Image Source="Assets/meme2.jpg" Width="500" />
            <TextBlock Text="Bebé Borracho" TextAlignment="Center" FontSize="40" />
        </StackPanel>
    </FlipViewItem>
    <FlipViewItem>
        <StackPanel>
            <Image Source="Assets/meme3.jpg" Width="500" />
            <TextBlock Text="Link Bebé" TextAlignment="Center" FontSize="40" />
        </StackPanel>
    </FlipViewItem>
    <FlipViewItem>
        <StackPanel>
            <Image Source="Assets/meme4.jpg" Width="500" />
            <TextBlock Text="Keanu Mario" TextAlignment="Center" FontSize="40" />
        </StackPanel>
    </FlipViewItem>
</FlipView>

Esto resulta en que cada una de nuestras imágenes tiene una pequeña leyenda debajo de esta, como aquí (click en la imagen!):

Hay muchas formas de extender este control, así que recomiendo checar el ejemplo del control FlipView en MSDN también. Me salte databinding específicamente en este ejemplo porque lo cubriremos extensivamente en el siguiente control de nuestra lista: el GridView.

GridView

El GridView es uno de los controles distintivos que verás en varias aplicaciones Windows 8. Se muestra en casi cualquier demo/ejemplo que verás, y es también central en la plantilla de Grid Application en Visual Studio.

El GridView, como el FlipView y ListView, heredan de ItemsControl, lo que significa que toman casi cualquier tipo de contenido XAML. En este ejemplo, vamos a crear el GridView en XAML, y lo poblamos con una Lista personalizada de datos de ejemplo. Primero, vamos a definir la clase del ejemplo de datos, Player, que será una simple lista de jugadores:

namespace Day4_NewControls
{
    class Player
    {
        public string Name { get; set; }
        public double Weight { get; set; }
        public int Number { get; set; }
        public double Height { get; set; }
        public string TeamName { get; set; }
    }
}

Si no has creado una clase en Visual Studio antes, haz click en tu nombre del proyecto, y elije “Agregar > Clase…” o presiona Shift + Alt + C. Nombra el archivo de clase Player.cs, y usa el código arriba para definir nuestro objeto simple.

A continuación, necesitamos crear nuestro control GridView. Agregar uno a tu página es simple, primero:

<GridView x:Name="mainGridView" Grid.Row="1" Background="#33FFFFFF" >
        </GridView>

Sin embargo, hacer que se vea y actúe de la forma que quieres toma un poco más de trabajo. Si has leído artículos previos que he escrito sobre databinding en XAML (checa este si no lo has hecho), sabes que cualquier control que hereda de ItemsControl puede definir un ItemTemplate el cual va a especificar como cada objeto será presentado en pantalla. En este ejemplo, vamos a tomar cada uno de nuestros objetos Player y dibujarlos como un rectángulo en el GridView, con cada uno de los valores mostrados. Cada caja se verá como así:

¿Entonces cómo hacemos esto? Al definir un diseño XAML que incluye controles por cada uno de los valores de datos que queremos mostrar. Aquí está el GridView completo otra vez, con un ItemTemplate definido esta vez.

<GridView x:Name="mainGridView" Grid.Row="1" Background="#33FFFFFF" SelectionMode="Multiple">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Height="200" Width="200" Background="#33FFFFFF">
                        <TextBlock Text="{Binding Name}" FontSize="24" Foreground="White" Margin="5" />
                        <TextBlock Text="{Binding TeamName}" FontSize="16" Foreground="White" Margin="5"/>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Peso: " FontSize="16" Foreground="White" Margin="5"/>
                            <TextBlock Text="{Binding Weight}" FontSize="16" Foreground="White" Margin="5"/>
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Altura:" FontSize="16" Foreground="White" Margin="5" />
                            <TextBlock Text="{Binding Height}" FontSize="16" Foreground="White" Margin="5" />
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid Orientation="Vertical" MaximumRowsOrColumns="2" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
        </GridView>

Con esto casi terminamos. Puedes ver que tenemos sentencias {Binding} por cada propiedad de nuestro objeto, pero aún no hemos realmente creado ningún objeto enlazado a este control GridView. Vamos a hacer eso vía código, así que abre tu archivo Xaml.cs.

En este ejemplo, he creado un nuevo manejador del evento OnNavigatedTo, y usar este para poblar mis datos. Estoy creando una nueva colección List<Player>, y después estableciendo esa colección como ItemsSource de nuestro control “mainGridView”.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    List<Player> players = new List<Player>();
    players.Add(new Player { Name = "Frank Richard", TeamName = "Albany Old Schoolers", Height=74.2, Weight=245, Number=03});
    players.Add(new Player { Name = "Buddy Hobbs", TeamName = "New York Elves", Height = 76.8, Weight = 227, Number = 04 });
    players.Add(new Player { Name = "Ron Burgundy", TeamName = "San Diego Anchormen", Height = 77.1, Weight = 275, Number = 05 });
    players.Add(new Player { Name = "Ricky Bobby", TeamName = "Talladega Racers", Height = 70.6, Weight = 198, Number = 06 });
    players.Add(new Player { Name = "Chazz Reinhold", TeamName = "Washington Crashers", Height = 70.6, Weight = 198, Number = 06 });

    mainGridView.ItemsSource = players;
}

Si lo haces bien, debes terminar con una interfaz que se ve como esta:

Mientras esto es aceptable, cuando empecé a escribir este ejemplo, estaba esperando algo más parecido a la imagen inicial que mostré, que tenía 3 elementos en la primera fila, y 2 en la segunda, para definir este tipo de diseño, puedes escribir mucho más XAML, o puedes echar un vistazo al GridView.ItemsPanel.

Redefinir el WrapGrid que está ahí por defecto te permitirá definir el número de filas o columnas que se usaran. Dentro de tu control GridView, agrega estas líneas:

<GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid Orientation="Vertical" MaximumRowsOrColumns="2" />
                </ItemsPanelTemplate>
  </GridView.ItemsPanel>

Una vez que has hecho esto, tu GridView se debe ver un poco más familiar:

ProcessRing

Mientras esto es probablemente uno de los controles más simples en este artículo, no es menos importante. El ProgressRing está diseñado para ser una herramienta fácil de usar para distraer a tu usuario por un momento mientras cargas o procesar algo en el fondo. Es una alerta visual de que estás haciendo algo, y que amablemente aprecias la paciencia del usuario por un momento. Puedes ver uno aquí en acción:

Para poner un ProgressRing en tu página, solo necesitas una línea de XAML:

<ProgressRing x:Name="progressRing" IsActive="True" Visibility="Visible" Grid.Row="1" Width="400" Height="400" />

En las aplicaciones más practicas, sin embargo, vas a necesitar controlarlo via codigo como sea necesario. Esto es tan simple como modificar su propiedad de Visibilidad de Collapsed a Visible y de regreso.

Algo interesante que descubrí, sin embargo, es que también puede ser escalado a diferentes tamaños. Por ejemplo, He hecho el ProgressRing en el siguiente screenshot 400×400. Ese es el tipo de mensaje que quiero dar a mis usuarios. “Espera y quédate quieto” J

ScrollViewer

El ScrollViewer es otro control increíblemente simple que es prácticamente invaluable. ¿Cuántas veces has tenido un conjunto grande de datos que no cabría en la pantalla, y tenías que crear un mecanismo de desplazamiento o paginación para hacer el resto de los datos visibles al usuario? El ScrollViewer lo hace simple. Mete tu contenido dentro de un ScrollViewer, define que barras de desplazamiento quieres ver, y estas listo. Aquí hay un ejemplo que tiene dos StackPanel lleno de imágenes, excepto que solo el segundo está dentro de un ScrollViewer.

<StackPanel Orientation="Horizontal">
        <Image Source="Assets/meme1.jpg" Height="300" />
        <Image Source="Assets/meme2.jpg" Height="300" />
        <Image Source="Assets/meme3.jpg" Height="300" />
        <Image Source="Assets/meme4.jpg" Height="300" />
        <Image Source="Assets/meme1.jpg" Height="300" />
        <Image Source="Assets/meme2.jpg" Height="300" />
        <Image Source="Assets/meme3.jpg" Height="300" />
        <Image Source="Assets/meme4.jpg" Height="300" />
    </StackPanel>
    <ScrollViewer VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto">
        <StackPanel Orientation="Horizontal">
            <Image Source="Assets/meme1.jpg" Height="300" />
            <Image Source="Assets/meme2.jpg" Height="300" />
            <Image Source="Assets/meme3.jpg" Height="300" />
            <Image Source="Assets/meme4.jpg" Height="300" />
            <Image Source="Assets/meme1.jpg" Height="300" />
            <Image Source="Assets/meme2.jpg" Height="300" />
            <Image Source="Assets/meme3.jpg" Height="300" />
            <Image Source="Assets/meme4.jpg" Height="300" />
        </StackPanel>
    </ScrollViewer>

SemanticZoom

La primera vez que vi el SemanticZoom en acción, fue en la pantalla de inicio de Windows 8. Pellizcar para alejar te permite ver una meta-versión de las apps y mosaicos. (Si no tienes una pantalla touch, también puedes usar Ctrl + Rueda de desplazamiento. Desde entonces, lo he visto en un gran número de apps, incluyendo la Windows Store, Noticias y Netflix. Aquí hay un vistazo de mi app Netflix. Sin juzgar el contenido, mi familia entera usa esta cuenta:

Acercado (vista por defecto):

Alejado (meta vista):

Lo que está bueno del control SemanticZoom es que se nos dan dos estados, el ZoomedOutView y ZoomedInView, y podemos generalmente poner cualquier cosa que queramos en cada vista. (De hecho hay una guía específica acerca de cómo y cuándo usar el SemanticZoom de Microsoft en MSDN) En este ejemplo, tendremos un grupo de elementos de la Tabla Periódica, y mostraremos ambos la lista de elementos así como una vista agrupada que la muestra agrupada en familias, como los Gases Nobles y los Metales Alcalinos, como la siguiente pantalla muestra:

Entonces, para hacer esto, necesitamos iniciar con el control SemanticZoom. Agrega uno a tu página, así:

<SemanticZoom Grid.Row="1" Margin="120,0,0,0">
            <SemanticZoom.ZoomedInView>
                <GridView>
                </GridView>
            </SemanticZoom.ZoomedInView>
            <SemanticZoom.ZoomedOutView>
                <GridView>
                </GridView>
            </SemanticZoom.ZoomedOutView>
        </SemanticZoom>

Vas a notar que hay varias piezas que necesitan ser agregadas para empezar. Primero, hay un nodo para ZoomedInView y ZoomedOutView. Me gusta ponerlos en este orden, porque el ZoomedInView es la vista por defecto que vera el usuario, y el ZoomedOutView es la vista “acercada”. Lo hace más fácil mantenerlo en mi mente.

Dentro de esos contenedores, necesitas un control que implemente la interfaz ISemanticZoomInformation, que es actualmente solo los controles GridView y ListView. Dado que ya hemos usado el GridView en este artículo, continuaremos con ese.

Antes de que hagamos esto, sin embargo, hablemos de datos. Este ejemplo va a usar elementos de la tabla periódica, así que necesitaremos una clase Element para empezar.

namespace Day4_NewControls
{
    class Element
    {
        public double AtomicWeight { get; set; }
        public int AtomicNumber { get; set; }
        public string Symbol { get; set; }
        public string Name { get; set; }
        public string Category { get; set; }
        public string State { get; set; }
    }
}

Adicionalmente, necesitamos crear y cargar algunos datos en nuestra página. Abre tu archivo Xaml.cs y agrega un nuevo manejador de eventos OnNavigatedTo, como este:

protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            base.OnNavigatedTo(e);

            List<Element> elements = new List<Element>();
            elements.Add(new Element { AtomicNumber = 1, AtomicWeight = 1.01, Category = "Alkali Metals", Name = "Hydrogen", Symbol = "H", State = "Gas" });
            elements.Add(new Element { AtomicNumber = 2, AtomicWeight = 4.003, Category = "Noble Gases", Name = "Helium", Symbol = "He", State = "Gas" });
            elements.Add(new Element { AtomicNumber = 3, AtomicWeight = 6.94, Category = "Alkali Metals", Name = "Lithium", Symbol = "Li", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 4, AtomicWeight = 9.01, Category = "Alkaline Earth Metals", Name = "Beryllium", Symbol = "Be", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 5, AtomicWeight = 10.81, Category = "Non Metals", Name = "Boron", Symbol = "B", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 6, AtomicWeight = 12.01, Category = "Non Metals", Name = "Carbon", Symbol = "C", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 7, AtomicWeight = 14.01, Category = "Non Metals", Name = "Nitrogen", Symbol = "N", State = "Gas" });
            elements.Add(new Element { AtomicNumber = 8, AtomicWeight = 15.999, Category = "Non Metals", Name = "Oxygen", Symbol = "O", State = "Gas" });
            elements.Add(new Element { AtomicNumber = 9, AtomicWeight = 18.998, Category = "Non Metals", Name = "Fluorine", Symbol = "F", State = "Gas" });
            elements.Add(new Element { AtomicNumber = 10, AtomicWeight = 20.18, Category = "Noble Gases", Name = "Neon", Symbol = "Ne", State = "Gas" });
            elements.Add(new Element { AtomicNumber = 11, AtomicWeight = 22.99, Category = "Alkali Metals", Name = "Sodium", Symbol = "Na", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 12, AtomicWeight = 24.31, Category = "Alkaline Earth Metals", Name = "Magnesium", Symbol = "Mg", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 13, AtomicWeight = 26.98, Category = "Other Metals", Name = "Aluminum", Symbol = "Al", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 14, AtomicWeight = 28.09, Category = "Non Metals", Name = "Silicon", Symbol = "Si", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 15, AtomicWeight = 30.97, Category = "Non Metals", Name = "Phosphorus", Symbol = "P", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 16, AtomicWeight = 32.06, Category = "Non Metals", Name = "Sulfur", Symbol = "S", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 17, AtomicWeight = 35.45, Category = "Non Metals", Name = "Chlorine", Symbol = "Cl", State = "Gas" });
            elements.Add(new Element { AtomicNumber = 18, AtomicWeight = 39.95, Category = "Noble Gases", Name = "Argon", Symbol = "Ar", State = "Gas" });
            elements.Add(new Element { AtomicNumber = 19, AtomicWeight = 39.10, Category = "Alkali Metals", Name = "Potassium", Symbol = "K", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 20, AtomicWeight = 40.08, Category = "Alkaline Earth Metals", Name = "Calcium", Symbol = "Ca", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 21, AtomicWeight = 44.96, Category = "Transitional Metals", Name = "Scandium", Symbol = "Sc", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 22, AtomicWeight = 47.90, Category = "Transitional Metals", Name = "Titanium", Symbol = "Ti", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 23, AtomicWeight = 50.94, Category = "Transitional Metals", Name = "Vanadium", Symbol = "V", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 24, AtomicWeight = 51.996, Category = "Transitional Metals", Name = "Chromium", Symbol = "Cr", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 25, AtomicWeight = 54.94, Category = "Transitional Metals", Name = "Manganese", Symbol = "Mn", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 26, AtomicWeight = 55.85, Category = "Transitional Metals", Name = "Iron", Symbol = "Fe", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 27, AtomicWeight = 58.93, Category = "Transitional Metals", Name = "Cobalt", Symbol = "Co", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 28, AtomicWeight = 58.70, Category = "Transitional Metals", Name = "Nickel", Symbol = "Ni", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 29, AtomicWeight = 63.55, Category = "Transitional Metals", Name = "Copper", Symbol = "Cu", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 30, AtomicWeight = 65.37, Category = "Transitional Metals", Name = "Zinc", Symbol = "Zn", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 31, AtomicWeight = 69.72, Category = "Other Metals", Name = "Gallium", Symbol = "Ga", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 32, AtomicWeight = 72.59, Category = "Other Metals", Name = "Germanium", Symbol = "Ge", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 33, AtomicWeight = 74.92, Category = "Non Metals", Name = "Arsenic", Symbol = "As", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 34, AtomicWeight = 78.96, Category = "Non Metals", Name = "Selenium", Symbol = "Se", State = "Solid" });
            elements.Add(new Element { AtomicNumber = 35, AtomicWeight = 79.90, Category = "Non Metals", Name = "Bromine", Symbol = "Br", State = "Liquid" });
            elements.Add(new Element { AtomicNumber = 36, AtomicWeight = 83.80, Category = "Noble Gases", Name = "Krypton", Symbol = "Kr", State = "Gas" });

            ElementData.Source = elements;
            CategoryData.Source = from el in elements group el by el.Category into grp orderby grp.Key select grp;
        }

Para este ejemplo, he incluido los primeros 36 elementos en la tabla periódica, pero puedes expandirlo a más si tienes el tiempo. Ahora mismo, probablemente te preguntaras sobre las ultimas dos líneas que se refieren a ElementData y CategoryData. Estos son elementos CollectionViewSource que he agregado a nuestra sección Resources de la página XAML. Aquí esta como luce nuestra sección Page.Resources:

<Page.Resources>
    <x:String x:Key="AppName">Ejemplo SemanticZoom</x:String>
    <CollectionViewSource x:Name="ElementData" />
    <CollectionViewSource x:Name="CategoryData" IsSourceGrouped="True"/>
</Page.Resources>

Esta es una forma simple para definir algunas colecciones de datos en XAML, y poblarlas como necesitemos desde código. Vamos a revisar esto en un momento, pero por ahora, representan las dos versiones de nuestros datos, agrupados y desagrupados.

Vamos a enfocarnos en el ZoomedInView primero, pero dado que es mucho más similar a nuestro ejemplo anterior de un GridView. En el código de ejemplo siguiente, he incluido el nodo entero ZoomedInView, y nota que estamos declarando el ItemsSource en XAML en vez de código. Estamos tomando el CollectionViewSource para nuestros datos.

<SemanticZoom.ZoomedInView>
                <GridView ItemsSource="{Binding Source={StaticResource ElementData}}" SelectionMode="None">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <Grid Width="150" Height="150" Background="#33FFFFFF">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="10" />
                                    <ColumnDefinition Width="65" />
                                    <ColumnDefinition Width="65" />
                                    <ColumnDefinition Width="10" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="10" />
                                    <RowDefinition Height="35" />
                                    <RowDefinition Height="60" />
                                    <RowDefinition Height="35" />
                                    <RowDefinition Height="10" />
                                </Grid.RowDefinitions>
                                <TextBlock Text="{Binding AtomicNumber}" Grid.Column="1" Grid.Row="1" FontWeight="Bold" />
                                <TextBlock Text="{Binding AtomicWeight}" Grid.Column="2" Grid.Row="1" TextAlignment="Right" FontWeight="Bold" />
                                <TextBlock Text="{Binding Symbol}" FontSize="50" Grid.Row="2" Grid.RowSpan="2" Grid.Column="1" Grid.ColumnSpan="2" TextAlignment="Center" Width="130" />
                                <TextBlock Text="{Binding Name}" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" TextAlignment="Center" VerticalAlignment="Bottom" />
                            </Grid>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapGrid MaximumRowsOrColumns="8" Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                </GridView>
            </SemanticZoom.ZoomedInView>

El resto de nuestro marcado es un diseño de la caja de la tabla periódica. Cuando se muestra, se ve como esto:

Eso es todo para el ZoomedInView. En una nota aparte, use Gallium para este screen shot porque es asombroso. Es un metal que se ve como aluminio en bruto u hojalata, con un peso similar. Lo que esta genial es que tiene un punto de fusión alrededor de los 85F o 30C grados. Esto significa que cuando tomas un pedazo de Gallium, se derrite en un charco en tu mano, y se parece mucho al Mercurio en ese punto. (Gracias a mi amigo Jim Tacco por presentarme al Gallium hace unos años.)

Vamos a ver ahora el ZoomedOutView. Aquí es donde las cosas se ponen un poco más interesantes. El código siguiente debe verse idéntico al ZoomedInView excepto los tamaños son todos más pequeños para nuestras fuentes y Grid, y eso es porque realmente lo es.

<SemanticZoom.ZoomedOutView>
                <GridView x:Name="GridIn" ItemsSource="{Binding Source={StaticResource CategoryData}}" SelectionMode="None">
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <Grid Width="75" Height="75" Background="#33FFFFFF">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="5" />
                                    <ColumnDefinition Width="33" />
                                    <ColumnDefinition Width="32" />
                                    <ColumnDefinition Width="5" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="5" />
                                    <RowDefinition Height="18" />
                                    <RowDefinition Height="30" />
                                    <RowDefinition Height="17" />
                                    <RowDefinition Height="5" />
                                </Grid.RowDefinitions>
                                <TextBlock Text="{Binding AtomicNumber}" Grid.Column="1" Grid.Row="1" FontSize="12" />
                                <TextBlock Text="{Binding AtomicWeight}" Grid.Column="2" Grid.Row="1" FontSize="12" TextAlignment="Right" />
                                <TextBlock Text="{Binding Symbol}" FontSize="25" Grid.Row="2" Grid.Column="1" Grid.RowSpan="2" Grid.ColumnSpan="2" TextAlignment="Center" Width="65" />
                                <TextBlock Text="{Binding Name}" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="2" FontSize="12" TextAlignment="Center" VerticalAlignment="Bottom" />
                            </Grid>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>
            </SemanticZoom.ZoomedOutView>

Del modo que vamos a hacer nuestro ZoomedOutView único es agregando un GroupStyle a nuestro GridView, que agregara encabezados a cada una de nuestras secciones. El GroupStyle define un HeaderTemplate para nuestra sección, y se enlaza a nuestro nombre de categoría.

Aquí está como se ve mi marcado de GridView.GroupStyle. Puedes insertar esto inmediatamente después del nodo GridView.ItemTemplate de nuestro ejemplo anterior.

<GridView.GroupStyle>
                        <GroupStyle HidesIfEmpty="True">
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <StackPanel Background="LightGray" Margin="0,0,20,0">
                                        <TextBlock Text="{Binding Key}" Foreground="Black" Margin="30" FontSize="32" Width="350" />
                                    </StackPanel>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
                                    <VariableSizedWrapGrid/>
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </GridView.GroupStyle>

Este GroupStyle tiene s upropio HeaderTemplate, que define como se ve cada encabezado de sección.

En este punto, si corres tu proyecto (o descargas el ejemplo al final del artículo), vas a ver que puedes fácilmente intercalar entre las dos vistas SemanticView, con solo un poco de XAML para hacerlo.

Recomiendo mucho usar SemanticZoom en tus aplicaciones donde hace sentido. Los usuarios lo esperarán, así que no los decepciones. Dales la experiencia rica y absorbente que merecen.

WebView

El control WebView es similar al WebBrowser en el desarrollo Windows Phone. En otras palabras, está diseñado para permitirte mostrar contenido HTML in tu app desde el web or desde archivos locales en tu proyecto. Esto se vuelve increíblemente útil cuando varias de las páginas de tu app de otra forma se verían idéntica a tu sitio. Puedes meter un control WebView y mostrar contenido sin haber construido paginas adicionales!

Un WebView es también una gran forma de aplicar análisis y códigos de rastreo a tus apps también. Haz el WebView pequeño, ocúltalo en un rincón de tu aplicación, ¡Y listo! Obtendrás un rastreo fácil dentro de la app.

Usar el control WebView es simple. Define una propiedad source, y ya estás.

<WebView Grid.Row="1" Source="http://31DaysOfWindows8.com" />

Es otro control realmente simple, pero uno del que debes tenerlo presente. Nunca sabes cuándo necesitaras incrustar contenido web dentro de tu aplicación, y no hay una forma más sencilla.

Resumen

Este largo y exhaustivo artículo cubrió siete de los nuevos controles que están disponibles para nosotros en el desarrollo XAML de aplicaciones Windows 8. Espero que hayas aprendido uno o dos trucos en el camino.

Si gustas descargar la solución entera y código de ejemplo para este artículo, haz click en el botón de abajo:

Mañana, empezaremos con una serie de artículos referentes a los contratos, y en Día #5 nos enfocaremos específicamente a los Settings en tu app. ¡Hasta entonces!

Hoy vamos a hablar acerca de una pequeña pero muy importante parte del ciclo de vida de la aplicación. La pantalla de inicio. Algunos de ustedes lo verán como un tema simple al principio, pero de hecho es increíblemente importante desde el punto de vista de experiencia de usuario.

Digamos, como ejemplo, que tu aplicación se conecta a internet para obtener cierta información. Quizá es una aplicación del clima. Cada vez que el usuario inicia tu aplicación, ellos van necesitar cierta información secundaria. Sabes que tomará generalmente 2-3 segundos obtener la información, las imágenes adecuadas y colocarlas dentro de la página de tu aplicación.

Lo que vemos que pasa en muchas aplicaciones es que la aplicación se inicia vacía, casi tanto como una página sin interés que se llenará 2 ó 3 segundos después. Al utilizar la pantalla de inicio y sus eventos nosotros podemos “extender” la experiencia de la pantalla de inicio de modo que los usuarios no vean nuestra aplicación hasta que  estemos listos para que eso pase. Un par de segundos extra mirando a la pantalla de inicio es siempre preferible a abrir una aplicación vacía.

Así que lo que estaremos haciendo en este artículo es determinar cunado fue colocada la pantalla de inicio y reemplazarla con nuestra imagen de inicio que sirva como marcador de posición hasta que nuestra aplicación este correctamente lista.

Para comenzar

Si revisas el artículo del día 1, la pantalla de inicio es siempre de 620 x 300 píxeles. Para este ejemplo vamos a darte dos versiones de esta imagen. La primera es la roja original.

Adicionalmente, hemos creado una versión idéntica de la imagen en un color púrpura de modo que podamos ver la diferencia cuando estas imágenes se cambien mientras que aún seremos capaces de notar que la posición del texto no cambie para nada.

Agrega estas dos imágenes  en tu folder de Assets en un proyecto en blanco. Si ejecutas el proyecto después de reemplazar las imágenes, deberás ver la imagen roja por un segundo o dos antes de que tu aplicación cargue una pantalla negra.

Creando una página de pantalla de inicio

Nuestro siguiente paso es crear una página separada para continuar con la ilusión de una pantalla de inicio. Agrega una nueva página blanca a tu proyecto.

He nombrado a la página Splash.xaml, pero tu puedes llamarla de la manera que más sentido tenga para tu aplicación. Después de agregar la imagen púrpura a la página el código debe lucir de la siguiente manera.

<page x:Class="Pantalla_de_inicio.Splash"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Pantalla_de_inicio"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<image Source="Assets/SplashScreen2.png" Stretch="Fill" Width="620" Height="300" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</grid>
</page>

Como puedes ver es muy simple. Solo agrega una imagen a tu página. El siguiente paso es modificar nuestro archivo App.xaml.cs para dirigir al usuario a esta página primero.

Modificar nuestro App.xaml.cs

Los desarrolladores que crean aplicaciones simples quizá nunca hayan abierto este archivo, pero es aquí donde mucha de la magia ocurre. App.xaml.cs contiene nuestros métodos de inicio y otra funcionalidad a nivel de sistema como manejar el estado de la aplicación entre sesiones. En este caso, estamos buscando el método OnLaunched(). He retirado todos los comentarios que están aquí por defecto pero tu estás buscando específicamente por el lugar donde se está tratando de navegar Navigate(typeof(MainPage), args.Arguments).

protected override void OnLaunched(LaunchActivatedEventArgs args)
{
Frame rootFrame = Window.Current.Content as Frame;

if (rootFrame == null)
{
rootFrame = new Frame();

if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)
{
}

Window.Current.Content = rootFrame;
}

if (rootFrame.Content == null)
{
if (!rootFrame.Navigate(typeof(MainPage), args.Arguments))
{
throw new Exception("Failed to create initial page");
}
}
Window.Current.Activate();
}

Por defecto nuestra aplicación esta tratando de navegar a MainPage.xaml y queremos tratar de cambiar esto. Reemplaza la referencia a MainPage con una referencia a Splash, lo he hecho en el ejemplo de arriba. Esto llevará al usuario a nuestra página Splash primero donde podemos hacer la carga que necesitamos completar.

Anda, prueba tu aplicación. Cuando ponemos nuestra imagen púrpura en un contenedor la destinamos en una ubicación centrada. Deberás ver que la caja púrpura reemplaza a la caja roja perfectamente. Aquí hay un video para ilustrar, en el caso de que solo estés leyendo y no escribiendo código en estos momentos (¿Por qué no estás escribiendo código?).

¿Hemos terminado? Ni siquiera un poco. Lo que hemos hecho es lo barato, la forma sencilla de prolongar a la pantalla de inicio. Hay un modelo mucho más complicado para esto si estás interesado.

El más difícil, más involucrado camino

Vamos a decir que estás buscando por algo mas que solo extender la longitud de la vista de la pantalla de inicio. Quizá quieres saber cuando la pantalla de inicio desapareció o la ubicación específica en la que la pantalla de inicio fue desplegada en la pantalla. Puedes hacer esto gracias al objeto SplashScreen que el espacio de nombres Windows.ApplicationModel.Activation nos da.

Primero, vamos a mirar de nuevo nuestro archivo App.xaml.cs. Vamos a cambiar como hacemos la llamada inicial a la página Splash.xaml pasando el objeto SplashScreen al constructor de nuestra página. Para simplificar, hemos eliminado todo el código predeterminado en nuestro método OnLaunched y lo cambiamos por el siguiente. Agregamos comentarios para explicar cada línea de código del código.

protected override void OnLaunched(LaunchActivatedEventArgs args)
{
// Primero queremos verificar si la aplicación ya está corriendo
if (args.PreviousExecutionState != ApplicationExecutionState.Running)
{
//Si no lo estaba, entonces queremos checar si fue terminada la última vez que se ejecutó
//lo cual nos hará pasar por la página de inicio
bool estadoDeCarga = (args.PreviousExecutionState == ApplicationExecutionState.Terminated);

//Crea un nuevo objeto de la página Splash pasando el objeto SplashScreen al constructor
Splash paginaInicio = new Splash(args.SplashScreen, estadoDeCarga);

//Ajusta el contenido actual de la aplicación igual a la página Splash
Window.Current.Content = paginaInicio;

}
Window.Current.Activate();
}

Ahora que hemos pasado esa información, necesitamos modificar como está escrito el constructor de nuestro Splash.xaml.cs para que pueda obtener esos valores cuando lleguen. Abre tu archivo Splash.xaml.cs y reescribe tu método Splash() de la siguiente manera.

public SplashScreen PantallaInicio;
public Rect imagenInicio;

public Splash(SplashScreen pantallaInicio, bool estadoCarga)
{
this.InitializeComponent();
PantallaInicio = pantallaInicio;
imagenInicio = PantallaInicio.ImageLocation;
}

Como puedes ver, dado que cambiamos como llamamos a nuestra página Splash en nuestro archivo App.xaml.cs también necesitamos que el método constructor coincida con la misma forma, recibiendo un objeto SplashScreen y un valor booleano. El valor estadoCarga es pasado a nuestra página para dejarnos saber si estamos cargando desde un estado previo o no. (Recuerda que ajustamos este valor en el archivo App.xaml.cs arriba).

Reconociendo cuando la pantalla de inicio este desaparecida

Nuestro siguiente paso es suscribir el manejador de eventos para cuando la página de inicio haya desaparecido. Hacemos esto como en casi cualquier manejador de eventos. Agrega esta línea de código al final del nuevo método constructor que creamos.

PantallaInicio.Dismissed += new TypedEventHandler<splashscreen ,object> (PantallaInicio_Dismissed);

Dado que ahora hemos definido un nuevo manejador de eventos, también necesitamos crear el método que atrape ese evento el cual es llamado PantallaInicio_Dismissed. En este ejemplo hemos dejado vacío el código pero este es el lugar en donde agregarías el código que debería ser ejecutado cuando la pantalla de inicio haya desaparecido.

void PantallaInicio_Dismissed(SplashScreen sender, object args)
{

}

Determinando la ubicación y tamaño de la imagen de la pantalla de inicio

Finalmente, necesitamos determinar donde fue colocada la pantalla de inicio en la pantalla. En esta parte del ejemplo vamos a usar la ubicación de la pantalla de inicio para determinar donde colocar una imagen publicitaria como la de abajo mientras la aplicación se carga.

Primero, aquí está la imagen que usaremos. (Siéntete libre de usarla en tus aplicaciones)

Agrégala a tu proyecto  y después actualiza tu archivo Splash.xaml para que luzca así.

<grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<canvas Background="#464646">
<image x:Name="SplashScreenImage" Source="Assets/SplashScreen2.png" Width="620" Height="300" Visibility="Collapsed"/>
<image x:Name="AdvertisementImage" Source="Assets/advertisementsample.png" Width="620" Height="100" Visibility="Collapsed"/>
</canvas>
</grid>

Como puedes ver en el XAML de arriba he removido el interior del control Grid y lo reemplace con un Canvas. Esto es realmente solo para mostrar que no estoy usando ninguna propiedad de centrado del Grid y en su lugar voy a tener que ser completamente acertado en la ubicación de mi imagen.

Regresa un poco a tu archivo Splash.xaml.cs y agrega una línea adicional a tu método constructor (la llamada a un método llamado PosicionPublicidad) de modo que al final luzca de la siguiente manera.

public SplashScreen PantallaInicio;
public Rect imagenInicio;

public Splash(SplashScreen pantallaInicio, bool estadoCarga)
{
this.InitializeComponent();
PantallaInicio = pantallaInicio;
imagenInicio = PantallaInicio.ImageLocation;

PantallaInicio.Dismissed += new TypedEventHandler</splashscreen><splashscreen ,object> (PantallaInicio_Dismissed);
PosicionPublicidad();
}

void PantallaInicio_Dismissed(SplashScreen sender, object args)
{

}

Finalmente, necesitamos crear un método con el mismo nombre y mover nuestras imágenes a sus posiciones apropiadas antes de cambiar sus propiedades de Visibility a Visible. Para acceder a las propiedades X, Y, Height y Width del objeto SplashScreen.ImageLocation.

private void PosicionPublicidad()
{
imagenPantallaInicio.SetValue(Canvas.TopProperty, imagenInicio.Y);
imagenPantallaInicio.SetValue(Canvas.LeftProperty, imagenInicio.X);
imagenPantallaInicio.Height = imagenInicio.Height;
imagenPantallaInicio.Width = imagenInicio.Width;
imagenPantallaInicio.Visibility = Windows.UI.Xaml.Visibility.Visible;

imagenPublicidad.SetValue(Canvas.TopProperty, (imagenInicio.Y + imagenInicio.Height + 100));
imagenPublicidad.SetValue(Canvas.LeftProperty, imagenInicio.X);
imagenPublicidad.Visibility = Windows.UI.Xaml.Visibility.Visible;
}

Como puedes ver, estamos posicionando la imagenPantallaInicio a la misma posición que la imagen preestablecida de la página de inicio de la aplicación. Después ajustamos la publicidad para que se muestre 100 píxeles por debajo de la pantalla de inicio. Así que al final, el archivo Splash.xaml deberá lucir de la siguiente manera.

¡Y eso es todo!

Conclusión

En corto, la página de inicio puede ser tu amiga. Se convierte en un velo temporal para esconder tu aplicación mientras esté lista así como un lugar para colocar algo de publicidad en aplicaciones gratuitas. Es una pieza altamente valiosa del estado de tu aplicación y definitivamente pienso que es algo que deberías considerar para aprovechar en cada aplicación.

Para descargar la solución entera de ejemplo de este artículo, puedes descargarla aquí.

Mañana, vamos a enfocarnos en algunos de los nuevos controles comunes que están disponibles para nosotros en el desarrollo de aplicaciones XAML para Windows 8. Miraremos cosas como el GridView, FlipView y más. Pero eso es mañana ¡Nos vemos!

Para poder publicar aplicaciones en la tienda de Windows Phone (anteriormente llamada Windows Phone Marketplace), debes contar con una cuenta de desarrollador Windows Phone. Te anticipo que el costo es de $ 99 USD (lo dejo de manera genérica para que puedas hacer la conversión adecuada a tu moneda). Así que mientras estas leyendo esto te recomiendo que vayas sacando una poderosa tarjeta de crédito para terminar el proceso por completo.

Para comenzar deber unirte al centro de desarrolladores de Windows Phone, puedes hacerlo desde aquí. Antes de continuar te recuerdo que ya debes contar con una cuenta Windows Live ID, así que si no la tienes deberás hacerlo pues de lo contrario no podrás continuar con el proceso.

Al presionar el botón Join Now, verás una pantalla similar a la siguiente.

La opción de Country/region of residence or business  deberá tener marcado el nombre del país en el que radicas.

Para el tipo de cuenta existen dos posiblidades:

Company: Esta opción es para cuando tu cuenta venderá aplicaciones como un negocio de manera formal o a organizaciones gubernamentales.

Individual or student: Esta opción es para cuando quieres vender aplicaciones con solo tu nombre, simplemente si quieres conocer el mercado de manera individual o cuentas con una cuenta con DreamSpark

Después de haber habilitado el tipo de cuenta que utilizarás, solo debes aceptar los términos legales para poder continuar.

Al momento de continuar, en caso de que no te lo hayan pedido antes o no tengas tu sesión abierta. El sitio te pedirá ingresar con tu cuenta de Windows Live.

En la página de registro deberás ingresar toda la información solicitada o al menos la que tenga un asterisco ( * ) al finalizar cada campo pues se trata de información obligatoria. La primera sección son datos de la cuenta.

En la segunda opción, la de Publisher info, escribe el nombre con el que deseas aparecer al momento de publicar tus aplicaciones. Cuando lo hayas definido, solo debes confirmar que esté disponible.

Para darte una mejor referencia de lo importante que es considerar un nombre de publicador, puedes darte una vuelta por la tienda de aplicaciones de Windows Phone y verás que en cualquier aplicación que veas se mostrará el nombre que elegiste.

La mas grande diferencia entre los dos tipos de cuentas radica en el siguiente apartado. En el caso de la cuenta de tipo Company necesitarás indicar la información de quien quede a cargo de esta cuenta. Esto es sencillamente para evitar que se pueda publicar una aplicación sin la aprobación directa del responsable de publicación y en esto hago una mención importante, el administrador de la cuenta no debe ser exactamente el mismo que la administre.

En la siguiente pantalla podrás ingresar los datos de algún código promocional, de lo contrario solo presiona Next, aquí es donde verás el cobro real de tu licencia en moneda local.

En el último paso a seguir hay dos grandes opciones para poder pagar la cuenta de desarrollo de Windows Phone. Por medio de una tarjeta de crédito o PayPal. En cualquiera de los dos casos se te solicitará información relativa al método de pago.

Después de este paso y si todo salió en orden, ya deberás ver solo una pantalla de agradecimiento por haber terminado satisfactoriamente tu proceso de activación. La cuenta tomará cerca de 24 horas en activarse de manera completa y solo bastará que entres a la página inicial y simplemente ingreses con la cuenta que configuraste todo.

Después de haber ingresado, simplemente bastará que des clic sobre tu correo y podrás ver una imagen como la siguiente.

¡Ahí tienes! Ahora ya es momento de que puedas compartir con todos los usuarios Windows Phone esas geniales aplicaciones que has hecho.

Hoy vamos a hablar acerca de tamaños de pantalla y porqué ellos son importantes para el desarrollo en Windows 8. En la primera parte de este artículo discutiremos la orientación y algunas maneras simples en las que podemos hacer nuestra aplicación mas útil basados en la forma en que nuestro usuario sostiene su dispositivo.  En la segunda parte, vamos a mirar a nuestra aplicación en un estado “snapped” y como podríamos cambiar nuestra interfaz para acomodarla en un tamaño de pantalla mucho menor.

La orientación y el snap son importantes porque si tu no los consideras en t aplicación, tu aplicación no será aprobada en la Tienda de Windows.

Si miras en los requerimientos de la certificación de aplicaciones de Windows 8, en la sección 3.6 podrás leer.

Tu aplicación debe soportar un diseño acortado. En una orientación horizontal, las funciones de tu aplicación deben ser completamente accesibles cuando el tamaño de la pantalla es de 1024 x 768. Tu aplicación debe permanecer funcional cuando el cliente acorte o agrande la aplicación.

Lo que esto dice es que nuestra aplicación necesita soportar tres estados visuales por lo menos.

• 1024 x 768 (la resolución mínima y el estado completo)
• 320 x 768 (snapped)
• La resolución por defecto para la que estés planeando será generalmente 1366 x 768.

Aquí hay un ejemplo de una aplicación en pantalla completa moviéndose a un tamaño reducido.

Puedes ver en este caso, hemos re acomodado nuestro contenido para que pueda caber en un tamaño mas reducido. También hay una oportunidad para mover tu aplicación a un estado “completo” el cual es representado por el bloque gris claro a la derecha de nuestra vista acortada.

Afortunadamente, hay algunas maneras simples de reconocer en que estado se encuentra nuestra aplicación y el resto de este artículo será dedicado a mostrar exactamente como poder hacerlo.

Soportar rotación

Para comenzar vamos a crear nuestra casi famosa aplicación desde la plantilla en blanco de Visual Studio 2012. Una vez que la has creado, corre tu aplicación en el simulador o en una máquina remota ( más de esto adelante). Verás tu asombrosa aplicación blanca y si la rotas, la aplicación estará de hecho rotando también. ¿Por qué? ¿Cómo?

Por defecto, todas las plantillas en Visual Studio están configuradas para soportar todas las rotaciones. Recuerdas el archivo package.appmanifest? En la tabla de la UI de la aplicación encontrarás una sección llamada Orientaciones soportadas (Suported orientations). Al checar una o más de las preferencias estás seleccionando que orientaciones podrá soportar tu aplicación. De nuevo, por defecto las soportará todas.

Dependiendo de tu situación, este podría ser un valor agregado para la experiencia general de tu aplicación. Por ejemplo, si estás creando un juego quizá solo quieras un modo horizontal.

Reconocer el cambio de orientación

El primer paso al trabajar con orientaciones es asegurarnos que podemos reconocer cuando un cambio de orientación ha sucedido. Afortunadamente, el SDK de Windows 8 nos ha proveído con el sensor SimpleOrientationSensor que tiene eventos para este propósito exacto. Para este ejemplo, hemos comenzado de nuevo con solo una plantilla en blanco en Visual Studio 2012.

Primero, hemos agregado un control simple de TextBox a nuestro archivo MainPage.xaml. Aquí está el conjunto entero de código para este archivo.

<page x:Class="Dia_2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Dia_2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<textblock Text="No orientation reading." x:Name="AlertBox" FontSize="50" TextAlignment="Center" Margin="0,100,0,0" />
</grid>
</page>

Ahora, abre el archivo MainPage.xaml.cs. Necesitamos agregar algo de código para usar este sensor.

Lo primero que agregaremos es una nueva sentencia using: using Windows.Devices.Sensors;. Lo siguiente que agregaremos es una nueva instancia de la clase SimpleOrientationSensor y agregar algunos manejadores de eventos para ser capaces de reconocer el cambio de orientación. Aquí está el código entero de mi archivo MainPage.xaml.cs. Explicaremos el código después. Hay algunas piezas del código C# que debería explicar.

using System;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
using Windows.Devices.Sensors;

namespace Dia_2
{
public sealed partial class MainPage : Page
{
private SimpleOrientationSensor sensorOrientacion;

public MainPage()
{
this.InitializeComponent();
sensorOrientacion = SimpleOrientationSensor.GetDefault();
}

protected override void OnNavigatedTo(NavigationEventArgs e)
{
if(sensorOrientacion != null)
sensorOrientacion.OrientationChanged += sensorOrientacion_OrientationChanged;
}

protected override void OnNavigatedFrom(NavigationEventArgs e)
{
if(sensorOrientacion != null)
sensorOrientacion.OrientationChanged -= sensorOrientacion_OrientationChanged;
}

async private void sensorOrientacion_OrientationChanged(SimpleOrientationSensor sender, SimpleOrientationSensorOrientationChangedEventArgs args)
{
await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
{
MostrarTextoOrientacion(args.Orientation);
});
}

private void MostrarTextoOrientacion(SimpleOrientation orientacionSimple)
{
switch (orientacionSimple)
{
case SimpleOrientation.Facedown:
txtAlerta.Text = "Hacia abajo";
break;
case SimpleOrientation.Faceup:
txtAlerta.Text = "Hacia arriba";
break;
case SimpleOrientation.NotRotated:
txtAlerta.Text = "Sin rotación";
break;
case SimpleOrientation.Rotated180DegreesCounterclockwise:
txtAlerta.Text = "Rotado 180 grados";
break;
case SimpleOrientation.Rotated270DegreesCounterclockwise:
txtAlerta.Text = "270 grados a la izquierda";
break;
case SimpleOrientation.Rotated90DegreesCounterclockwise:
txtAlerta.Text = "90 grados a la izquierda";
break;
default:
txtAlerta.Text = "Desconocido";
break;
}
}
}
}

Primero, creamos un nuevo objeto SimpleOrientationSensor llamado orientationSensor. En el método constructor, MainPage(), instanciamos el objeto con la orientación preestablecida del sensor del dispositivo.

En el manejador de eventos OnNavigatedTo() y OnNavigatedFrom(), agregamos y retiramos un evento sensorOrientacion_OrientationChanged a nuestro nuevo objeto. Es importante asegurarnos que el objeto no sea nulo porque hay dispositivos que no tienen este sensor obtendrás un error.

Después, tenemos un nuevo manejador de eventos llamado sensorOrientacion_OrientationChanged(). Deberías notar que esta decorado con un descriptor async y utiliza la palabra reservada await cuando ejecuta su acción. Esto es hecho para evitar cuellos de botella en nuestro código que podría de otra manera podría colapsar la aplicación. (Puedes leer un poco más acerca de async/await en MSDN).

Una vez que la información haya sido obtenida, llamamos a un nuevo método, MostrarTextoOrientacion() pasando los datos de la orientación.

Finalmente, MostrarTextoOrientacion() ejecuta un simple ciclo switch con todas las posibiles orientaciones que puedan existir: NotRotated, Rotated90DegreesCounterclockwise, Rotated180DegreesCounterclockwise, Rotated270DegreesCounterclockwise, Facedown, Faceup, ó Unknown. Yo creo que es chistoso que uno haya sido nombrado Rotated180DegreesCounterclockwise dado que a los 180° no importaría desde que dirección haya llegado.

Aquí hay un vistazo rápido de la aplicación en su estado actual.

Depuración remota

Ahora, si no eres como Clark y yo, te gusta entonces escribir tu código en una máquina de escritorio con un procesador de cuatro núcleos, quizá 8-12 GB de RAM, monitor dual de 27’’, mouse y teclado, seleccionar tu monitos para cambiar la orientación simplemente no funcionará. Además del SimpleOrientationSensor, lo que nosotros estamos usando no es una aplicación emulada sino que necesitaremos un dispositivo real para hacerlo.

Otra lección importante que aprendimos: Es un simulador, no un emulador como en Windows Phone. Esto es porque solo simulará la máquina en donde estará corriendo, no como un dispositivo completamente diferente y capaz.

Afortunadamente, Microsoft a dado una forma para que nosotros la podamos utilizar y ver nuestra aplicación en un dispositivo secundario, tal y como lo hacemos al crear aplicaciones Windows Phone. Aquí hay una pequeña historia de como funciona (MSDN tiene la mas larga y completa historia):

Instala las herramientas de depuración remota en el dispositivo secundario. Yo estoy usando una Samsung Series 7 Slate, pero cualquier dispositivo Windows 8 colocado de fábrica en una tableta podría funcionar. Puedes descargar las herramientas de depuración remota desde aquí. Asegúrate de escoger el sabor adecuado entre, x86, x64 o ARM dependiendo de tu dispositivo.

Corre las herramientas remotas en el dispositivo secundario. Verás un ícono se se asemeja a esto:

Una vez que el depurador remoto esta corriendo en tu dispositivo secundario, regresa a tu máquina primaria y selecciona “Remote Machine” como el objeto para desplegar tu aplicación.

Cuando eligas “Remote Machine” por primera vez, te aparecerá un diálogo que se parece al de la imagen de abajo. Recuerda, los dispositivos en una subred solo aparecerán si las herramientas de depuración remota han sido instaladas y estén ejecutándose.

Después, cuando quieras cambiar dispositivos, vas a molestarte cuando quieras saber donde esta esta opción guardada. Estoy aquí mis queridos lectores para evitarles esa molestia. Abre las propiedades de tu proyecto ( Alt + Enter ) y escoge la tabla de Depuración. Desde aquí, podrás cambiar o remover tu selección previa. Si tu retiras la elección, la próxima vez que escojas la depuración remota, obtendrás el cuadro de diálogo anterior.

De vuelta al código…

Ok, hasta este punto, tenemos una aplicación que reconoce que la orientación del dispositivo ha cambiado. Todo esto esta bien cuando queremos hacer algo específico “en código” con orientación, pero ¿Qué pasa si nosotros queremos que nuestra aplicación se re oriente a si misma para ser utilizable para nuestro usuario? Hay una manera mucho mas sencilla gracias al VisualStateManager.

Ve de vuelta a tu proyecto y da un clic derecho para abrir el cuadro de diálogo de un nuevo elemento.

Agrega una nueva página básica, nosotros la nombramos PaginaOrientacion. Si le das un vistazo al XAML para esta página, descubrirás que estamos trabajando con una objeto de página justo afuera de la caja. Esta es una LayoutAwarePage y por defecto ya tiene la suficiente estructura para orientarse a si misma apropiadamente e incluso te da un VisualState para la vista acortada también.

Además, al usar este tipo de página el simulador también respeta los cambios de orientación.

Esto quiere decir que solo por utilizar este tipo de página, automáticamente obtenemos una página lista para la orientación y vista acordada que tiene un conjunto estático de estados visuales que podemos manipular para hacer que nuestra página haga lo que nos gustaría. Para hacer esto mas obvio, voy a modificar mis estados visuales para que cada una tenga un fondo diferente de color.

Aquí hay un vistazo de los valores modificadoes de nuestra PaginaOrientacion.xaml:

<visualstatemanager .VisualStateGroups>
<visualstategroup x:Name="ApplicationViewStates">
<visualstate x:Name="FullScreenLandscape">
<storyboard>
<objectanimationusingkeyframes Storyboard.TargetName="layoutRoot" Storyboard.TargetProperty="Background">
<discreteobjectkeyframe KeyTime="0" Value="Purple"/>
</objectanimationusingkeyframes>
</storyboard>
</visualstate>
<visualstate x:Name="Filled">
<storyboard>
<objectanimationusingkeyframes Storyboard.TargetName="layoutRoot" Storyboard.TargetProperty="Background">
<discreteobjectkeyframe KeyTime="0" Value="Orange"/>
</objectanimationusingkeyframes>
</storyboard>
</visualstate>
<visualstate x:Name="FullScreenPortrait">
<storyboard>
<objectanimationusingkeyframes Storyboard.TargetName="layoutRoot" Storyboard.TargetProperty="Background">
<discreteobjectkeyframe KeyTime="0" Value="DarkGreen"/>
</objectanimationusingkeyframes>
<objectanimationusingkeyframes Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
<discreteobjectkeyframe KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
</objectanimationusingkeyframes>
</storyboard>
</visualstate>
<visualstate x:Name="Snapped">
<storyboard>
<objectanimationusingkeyframes Storyboard.TargetName="layoutRoot" Storyboard.TargetProperty="Background">
<discreteobjectkeyframe KeyTime="0" Value="Blue"/>
</objectanimationusingkeyframes>
<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>

Como puedes ver, simplemente hemos agregado un nuevo nodo para cada sección que modifique la propiedad Background de mi Grid LayoutRoot. Lo que esta nueva LayoutAwarePage nos permite hacer, en lugar de escribir toneladas de código para administrar nuestra orientación, nos  preocupamos por lo que realmente interesa: Nuestra personalización. Al escribir estilos separados para los elementos de nuestra página basados en estados visuales de nuestra página, simplificamos nuestro proceso entero.

En conclusión

Hoy, dimos una vista a como podemos determinar la orientación del dispositivo de un usuario asó como poder utilizar el item LayoutAwarePage para manejar los diferentes estados visuales que nuestra aplicación puede encontrar. Hay toneladas de grandes ejemplos en la web relacionados a orientación y snap, pero hay UNA lección que puedes tomar de este artículo, es:

Tu aplicación DEBE cubrir el estado snapped. Asegúrate de acomodarla.

Para descargar la solución de ejemplo completa de este artículo, puedes descargarla aquí.

Mañana, vamos a ver el uso de las pantallas de inicio. Es una herramienta valiosa para cargar tu aplicación así como monetizarla. Veremos a fondo esto mañana. ¡Nos vemos!

En el primer artículo de esta serie, pensamos que era importante cubrir las bases de una plantilla de tipo Windows Store Blank App para Visual Studio 2012. Cubriremos cada uno de los archivos y la razón por la que es importante así como muchas de las configuraciones que podrían estar ocultas en cada una. Esto debería darte una base sólida para el resto de la serie donde estaremos utilizando cada uno de estos archivos bastante.

Hay muchas otras plantillas de proyectos en Visual Studio 2012 pero somos de la opinión de que esas son excelentes plantillas de referencia en lugar de puntos de inicio para una aplicación real. Estas plantillas fueron hechas con un tipo específico de aplicación en mente y es complicado que tu idea encaje en esta arquitectura perfectamente. Casi siempre recomendamos iniciar con una plantilla en blanco cuando estás comenzando una aplicación real.

Aquí esta una vista del Explorador de Soluciones para una aplicación en blanco en una solución XAML.

Las imágenes

Comencemos con las sencillas, las imágenes en el folder “Assets”. Hay cuatro imágenes dentro de cada nuevo proyecto y cada una de ellas sirve a un propósito específico. Hemos creado cuatro versiones de esas imágenes (así como una adicional) de modo que es muy obvio de saber que imagen es cual cuando corras tu aplicación. Nosotros recomendamos ampliamente descargar estas imágenes y reemplazar las que se encuentran por defecto. Puedes descargar las 5 desde aquí. Una vez que hayas reemplazado las imágenes pre establecidas, corre tu proyecto para ver estas nuevas imágenes en sus ubicaciones como se describe abajo.

Logo.png

Esta es quizá la imagen más común que tu aplicación utilizará. Es una imagen pre establecida para el mosaico de tu aplicación en la pantalla de inicio del usuario. Es de 150 x 150 píxeles en tamaño.

SmallLogo.png

Esta imagen es usada cuando una lista de aplicaciones se muestra. Por ejemplo, cuando buscas por una aplicación en Windows 8 o en tu menú de Compartir. La imagen pequeña es de 30 x 30 píxeles. Con ese tamaño de imagen querrás asegurarte de que ti ícono realmente representa algo familiar para tu usuario. Yo recomiendo altamente solo un logo o cualquier imagen obvia.

SplashScreen.png

Esta es la imagen principal que carga cuando tu aplicación es iniciada. Hay algunos buenos trucos que puedes hacer con esto y los cubriremos más adelante en la serie. Por ahora, recuerda que esta imagen será siempre de 620 x 300 píxeles y estará vertical y horizontalmente centrada en la pantalla de tu usuario, sin importar el tamaño.

StoreLogo.png

Para ahorrar espacio en la tienda, tenemos un ícono mas pequeño a mostrar. Esta imagen es de 50 x 50 píxeles pero podrían ser los 2500 píxeles mas importantes en tu aplicación entera. Este es el ícono que los usuarios verán cuando se estén decidiendo acerca de que nuevas aplicaciones agregar a su dispositivo. Un ícono pobre indica una aplicación pobre para la mayoría de los usuario. Invierte un poco de tiempo en esta imagen.

WideLogo.png

Este es un ícono adicional que yo incluí en mi proyecto inicial. Necesitarás agregarlo en tu proyecto al dar un clic derecho en el folder Assets y escoger Agregar elemento existente. Esta imagen es de 310 x 150 píxeles y es usada para permitir que tu aplicación tenga un mosaico más amplio que únicamente un mosaico mas grande que el del tamaño predefinido de Logo.png

AssemblyInfo.cs

Este archivo contiene toda la, espera un poco, información de ensamblados para tu aplicación. Cosas como el número de las versiones, títulos, descripciones, etc. Pero recuerda… estos son los valores para tu ensamblado. Todos los nombres oficiales que son usados públicamente para tu aplicación en la tienda se encuentran en el App Manifest, nuestro siguiente archivo.

Package.appmanifest

Este archivo contiene toda la configuración, ajustes y declaraciones para tu aplicación. Es donde irás para casi cada cosa que esté relacionada a tu aplicación corriendo en una máquina con Windows 8. Por ejemplo, es aquí donde tu defines que el contrato de búsqueda sea habilitado o que ícono usar en cada situación. También define los colores por defecto del fondo, orientaciones y capacidades específicas que tu aplicación requerirá como el acceso a ubicación.

StandardStyles.xaml

Esas 1830 líneas amontonadas no son nada mas que una pila gigante de estilos predefinidos en XAML para que puedas utilizar. Estilos para cajas de texto, botones de radio, íconos de la barra de aplicación y mas. Realmente te recomiendo familiarizarte con estos estilos pero también es importante que recuerdes que cualquiera de estos estilos puede ser cambiado para encajar en tus necesidades. ¿No quieres un borde en todos tus botones? ¡Retíralo!

Quizá también consideres tus propios estilos para este archivo, solo recuerda que estos estilos estarán disponibles para cada página de tu aplicación gracias a nuestro siguiente archivo: App.xaml.

App.xaml

Este archivo es donde todo comienza. Es el primer archivo en ser cargado cuando tu aplicación inicia y contiene todos los recursos y ajustes de tu aplicación. Por defecto, este archivo solo contiene una línea valiosa de marcado.

 
<resourcedictionary Source="Common/StandardStyles.xaml"/>
Esto carga nuestro archivo de StandarStyles.xaml como un diccionario de recursos, marcando aquellos estilos disponibles en cada página de nuestra aplicación. La magia real de App.xaml se encuentra en su archivo de código C#: App.xaml.cs. Démosle un vistazo al que sigue.
App.xaml.cs
Este archivo, tal como lo hizo en Windows Phone, es donde la acción comienza. Es aquí donde se encuentran todos los métodos de inicio de tu aplicación como OnLaunched(), OnSuspending() y más. También es quí el lugar donde la página de inicio de tu aplicación será referenciada. Verás unas cuantas líneas en el método OnLaunched() que se verán como lo siguiente.
if (!rootFrame.Navigate(typeof(MainPage), args.Arguments))
{
throw new Exception("Failed to create initial page");
}
El parámetro MainPage se refiere a nuestro siguiente archivo, MainPage.xaml.
MainPage.xaml
Este archivo es la “página de inicio” por defecto de tu aplicación. Es la primera que el usuario verá después de que la pantalla de carga se haya retirado. En tu proyecto básicamente se encontrará vacía salvo por un control de tipo Grid con un estilo aplicado. Vas a querer agregar mas a esta página casi inmediatamente y hay muchos controles geniales para utilizar. Te recomiendo ver los controles de GridView o FlipView para principiantes, pero utiliza lo que tenga más sentido para tu aplicación.
MainPage.xaml.cs
De neuvo, así como MainPage.xaml, este archivo estará prácticamente vacío. Tenemos un método constructor para la página así como un manejador de eventos para el método OnNavigatedTo(). En Windows Phone, este estaba siempre disponible para su uso (y era altamente recomendado), pero ahora esta ahí por defecto significando que muchos desarrolladores comenzarán a utilizarlo en lugar del método constructor de la página.
Dia1_TemporaryKey.pfx
Cada aplicación para la tienda de Windows esta firmada por un certificado. Cuando tu creas un proyecto por primera vez en Visual Studio este creará un nuevo certificado de prueba automáticamente. En nuestro cado este certificado de prueba es llamado Dia1_TemporaryKey.pfx donde Dia_1 es nuestro proyecto. De nuevo puedes encontrar este conjunto en el archivo package.appxmanifest debajo de la tabla Packaging. Puedes incluso crear nuevos certificados de ser necesario.
Una vez que estés listo para ingresar a la tienda, necesitarás asociar tu aplicación con la cuenta de desarrollador de la tienda Microsoft. Puedes hacer esto yendo a Proyectos, Tienda, Asociar App con la tienda.

Puedes encontrar mas información acerca de firmar el paquete de una aplicación aquí.
Conclusión
Así que ¡Eso es todo! Estamos solo empezando en esta serie, pero ahora ya tienes un entendimiento más sólido de cada uno de los archivos de una plantilla en blanco para XAML. En el caso de que no hayas instalado aún Visual Studio 2012, pero aún quieras dar una revisada a los archivos de código para este tipo de proyecto puedes descargarlo aquí.

Mañana, vamos a enfocarnos en la orientación y snapping, dos aspectos importantes de tu aplicación que comúnmente son omitidos. Si aún no descargas las herramientas gratuitas para construir aplicaciones para WIndows 8, puedes hacerlo desde el enlace de abajo. ¡Nos vemos mañana!

]]>
			http://blogs.ligasilverlight.com/2012/11/31-das-de-windows-8-da-1-la-aplicacin-en-blanco/feed/
		0
		
		
		
		http://blogs.ligasilverlight.com/2012/11/31-das-con-windows-8/
		http://blogs.ligasilverlight.com/2012/11/31-das-con-windows-8/#comments
		Thu, 15 Nov 2012 16:32:16 +0000
		Amin Espinoza
				

		http://blogs.ligasilverlight.com/?p=3752
		
				Una nueva serie cortesía de Jeff Blakenburg ha comenzado y así como el año pasado, te traemos la traducción para que puedas aprender de una manera más cómoda. En esta ocasión se trata de 31 días con Windows 8. Como muchos deben saber es que en el caso del desarrollo de aplicaciones para Windows 8 existe la posibilidad de desarrollar aplicaciones por medio de HTML y Javascript o utilizando XAML y C#. Esta última forma será en la que nos basaremos en esta serie. El índice original de estos artículos es el siguiente.


]]>
			http://blogs.ligasilverlight.com/2012/11/31-das-con-windows-8/feed/
		1
		
		
		
		http://blogs.ligasilverlight.com/2012/05/wcf-ria-services-v1-0-para-silverlight-4-eliminar-un-registro-de-la-base-de-datos-parte-9/
		http://blogs.ligasilverlight.com/2012/05/wcf-ria-services-v1-0-para-silverlight-4-eliminar-un-registro-de-la-base-de-datos-parte-9/#comments
		Sat, 19 May 2012 00:44:17 +0000
		Jorge Levy
				

		http://blogs.ligasilverlight.com/?p=3744
		
				Para terminar con el tema de acciones CRUD con datos por medio de WCF Ria Services en Silverlight, en este post hablaremos del último tema pendiente, eliminar un registro.

Nuevamente la recomendación es leer al menos los dos post previos en el tema para comprender de mejor manera las acciones de editar un registro y de agrear uno nuevo; ya que estaremos reutilizando los conceptos expuestos.
Eliminando el registro
Bajo la misma dinámica que hacer las cosas de la manera más facil, para eliminar un registro necesitaremos de solo dos lineas de código; o tres, en el caso de pedir la confirmación de la acción.
Agregamos un nuevo botón que nos permita eliminar el registro que actualmente se tiene seleccionado en el grid.

<Button x:Name="btnRemove"
        Content="Eliminar"
        Height="23"
        Width="115"
        HorizontalAlignment="Left"
        Click="btnRemove_Click" />

Y en la acción del click, escribiremos el código donde indicaremos que al DataView del Domain Data Source le removeremos el registro actual que podemos obtener desde el mismo DataView utilizando la propiedad CurrentItem y haciendo el cast al tipo de objeto que contiene. Y, como ya lo sabemos, tendremos que enviar los cambios a nuestro servicio wcf para que estos sean replicado a la base de datos. Adicionalmente agregaremos una ventana de confirmación de la acción que permitirá al usuario pensar dos veces sobre la acción a realizar.

private void btnRemove_Click(object sender, RoutedEventArgs e)
{
    if (System.Windows.Browser.HtmlPage.Window.Confirm("Estas seguro de querer eliminar el producto"))
    {
        productDomainDataSource.DataView.Remove(
            productDomainDataSource.DataView.CurrentItem as Product);
        productDomainDataSource.SubmitChanges();
    }
}

Cerrando el tema
Si bien, el tema de WCF Ria Services da para mucho más, con temas como validaciones desde el modelo o desde la misma vista, el indicador de actividad, entre muchos otros; con este post podremos decir que hemos cerrado los temas básicos sobre WCF Ria Services para Silverlight.
Gracias y saludos…
]]>
			http://blogs.ligasilverlight.com/2012/05/wcf-ria-services-v1-0-para-silverlight-4-eliminar-un-registro-de-la-base-de-datos-parte-9/feed/
		0
		
		
		
		http://blogs.ligasilverlight.com/2012/05/wcf-ria-services-v1-0-para-silverlight-4-agregar-un-nuevo-registro-hacia-la-base-de-datos-parte-8/
		http://blogs.ligasilverlight.com/2012/05/wcf-ria-services-v1-0-para-silverlight-4-agregar-un-nuevo-registro-hacia-la-base-de-datos-parte-8/#comments
		Fri, 18 May 2012 22:53:48 +0000
		Jorge Levy
				
		

		http://blogs.ligasilverlight.com/?p=3740
		
				En nuesto post pasado, pudimos ver cómo editar los datos que se presentan en nuestra aplicación silverlight (lado del cliente), pero aún más importante cómo es que se hace la actualización de estos cambio en la base de datos. Si no has leido este post, te recomiendo lo leas, ya que utilizaremos la información mostrada en este siguiente post.

Nuestro siguiente tema abordará el conceto de agregar un nuevo registro, pero además se mostraran un par de puntos a considerar cuando se está agregando un registro.
Agregando un nuevo registro al cliente
Para agregar un nuevo registro solo basta escribir un par de lineas de código, en donde básicamente lo que se hace es crear un nuevo objecto del tipo de datos que vamos a insertar y este se agrega al DomainDataSource que contiene los datos.
Para insertar el código del que hablabamos, en nuestra vista incluiremos un botón que nos permita indicar a la aplicación que queremos agregar un nuevo registro.

<Button x:Name="btnAddNew"
        Content="Agregar nuevo"
        Height="23"
        Width="115"
        HorizontalAlignment="Left"
        Click="btnAddNew_Click" />

Y será en el evento del click donde escribiremos las lineas de creación del objecto del nuevo producto, añadiendolo a los elementos del DataView de nuestro Domain Data Source.

private void btnAddNew_Click(object sender, System.Windows.RoutedEventArgs e)
{
    WcfRiaServices.Web.Models.Product newProduct = new Web.Models.Product();
    productDomainDataSource.DataView.Add(newProduct);
}


Con esto lo que estamos haciendo es agregar un nuevo elemento al Domain Data Source, quién es el encargado de contener los datos de lado del cliente. Y, al igual que cuando queremos editar un elemento, necesitamos replicar este cambio a nuestro servicio que será el que haga la actualización en la base de datos. Como a estas alturas ya tenemos nuestro botón de ‘Guardar Cambios’ esta parte ya la tenemos cubierta.
Algunas consideraciones extras
Debido a que la tabla de Productos tiene algunos campos que no pueden ser nulos, además de que a estas alturas no tenemos ningun tipo de validación ni en nuestro modelo ni al momento de guardar los cambios. Sugiero al momento de crear el nuevo objeto, inicializar las propiedades que así lo requieran

private void btnAddNew_Click(object sender, System.Windows.RoutedEventArgs e)
{
    WcfRiaServices.Web.Models.Product newProduct = new Web.Models.Product();
    newProduct.rowguid = System.Guid.NewGuid();
    newProduct.SafetyStockLevel = 1000;
    newProduct.ReorderPoint = 500;
    newProduct.DiscontinuedDate = System.DateTime.Now;
    newProduct.ModifiedDate = System.DateTime.Now;
    newProduct.SellEndDate = System.DateTime.Now;
    newProduct.SellStartDate = System.DateTime.Now;
    productDomainDataSource.DataView.Add(newProduct);
}


Siguientes post…
Ya solo nos falta revizar como eliminar un registro para poder terminar con el tema de CRUD, permitiendonos así continuar con temas como validaciones o el indicator de acción (Busy Indicator)
Gracias y saludos
]]>
			http://blogs.ligasilverlight.com/2012/05/wcf-ria-services-v1-0-para-silverlight-4-agregar-un-nuevo-registro-hacia-la-base-de-datos-parte-8/feed/
		2