Archivo de la etiqueta: xaml

Preparando el examen 70-484

El pasado 30 de mayo aprobé el examen 70-484 de desarrollo de aplicaciones para Windows 8 con C#, lo que me acerca un paso más al MCPD en desarrollo de apps para la plataforma, y es a su vez una excusa y un reto para aprender más de la misma.

Al comentarlo por Twitter, algunos desarrolladores me preguntaron qué recursos había usado, y aquí va un pequeño resumen.

Sigue leyendo

Anuncios

Transferir información entre dos ventanas en Windows Phone

Al desarrollar una aplicación de consola o usando Windows Forms, existen varias maneras de que dos formularios diferentes accedan a la misma información. Se pueden emplear pasando los datos mediante el constructor (consiguiendo una inyección de dependencias de la que ya se ha hablado en este post) o usando variables locales. Para Windows Phone existe además una tercera posibilidad.

En este artículo se verá cómo utilizar las ventajas de la clase NavigationService para poder transferir valores entre dos páginas XAML.

Introducción

La navegación en Windows Phone se basa en la llamada a la clase NavigationService, que es la encargada de ocultar, mostrar pantallas, así como el historial (el botón Back situado en la esquina inferior del dispositivo permite ir a la pantalla anterior de manera automática, aunque este comportamiento se puede sustituir El objetivo es que para movernos por las diferentes páginas XAML no hagamos uso de los constructores. Esto representa un inconveniente, ya que no tenemos una referencia al objeto que se ha creado, con lo cual no podríamos hacer solicitudes a las funciones o propiedades del mismo.

Paso de parámetros

Los parámetros se pasan entre dos páginas XAML de la misma manera que se hace en páginas web, usando la variable query string. Una cadena de consulta se sitúa al final de la ruta del fichero precedido por el simbolo ?, el nombre del campo, el símbolo = y el valor de este. Si se quisieran concatenar, se usaría el símbolo & . Un ejemplo de este uso sería index.html?clave=valor donde index.html es la página a cargar, clave es el nombre del campo, y valor es lo que se quiere transferir.

Para permitir que al hacer click en un botón o cualquier otra acción en Windows Phone, el código C# a usar se muestra en el siguiente ejemplo, donde desde cualquier página se quiere ir a la página PlayerWon.xaml con el parámetro Winner y el valor que se encuentra en la variable Ganador:

int Ganador = 0
NavigationService.Navigate(new Uri("/PlayerWon.xaml?Winner=" + Ganador, UriKind.Relative));

Recepción de parámetros

Para que la página de destino pueda acceder a los datos es necesario primeramente solicitar a la clase si existe la clave, y en caso afirmativo, acceder al valor. Este procesamiento se suele realizar en el método OnNavigatedTo que es el que se ejecuta al navegar hacia la página en la que se encuentre y mostrarla por pantalla. Existe también un método llamado OnNavigatedFrom que se ejecuta en el momento anterior al cambio de página, útil si queremos animar la salida de los elementos de pantalla.

El siguiente código obtiene el valor de la variable Query String para la clave Winner, y si está definida, lo procesa:

        protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
			string newText = string.Empty;
			if (NavigationContext.QueryString.TryGetValue("Winner", out newText ))
			{
				if (newText.Equals("0"))
				{
					PageTitle.Text = "¡Enhorabuena, has ganado!";
				}
				else
				{
					PageTitle.Text = "Lo siento, has perdido";
		        }

			}
            base.OnNavigatedTo(e);
        }

Conclusiones

La navegación entre pestañas en Windows Phone no se diferencia demasiado al paso por parámetros de páginas web. El único inconveniente es que solamente permite pasar cadenas de caracteres, me queda pendiente seguir investigando para pasar valores más complejos. Es una manera más elegante de pasar parámetros que usar un valor estático de una clase.

Más información:

En MSDN: Navigation Service

Interacción en Metro: Application Bar

En el artículo anterior se ha visto cómo agregar un menú contextual a una aplicación Metro. La otra interacción disponible es la Application Bar, que sustituye la barra de menús y las diferentes barras de herramientas. En este artículo se verán las caracteristicas que hacen diferente la Application Bar y cómo implementar una.

Características

La Application Bar se puede situar encima o debajo de la pantalla, ya que los laterales están reservados para el cambio de aplicaciones y las diferentes charms, de las que se ha hablado en este artículo.

Otra característica, es que es deseable, y así se muestra en las aplicaciones de ejemplo, que los controles se sitúen a los lados de la pantalla, ya que, al estar enfocado a tablets, los laterales hacen el acceso táctil más fácil al sostener el ordenador con ambas manos.

Además, usando este control se podrán mostrar notificaciones, como la que aparece al terminar de descargar un fichero en Internet Explorer.

Implementación

Para poder implementar esta funcionalidad se agrega un control de tipo ApplicationBar a la página, dentro del contenedor principal (Un grid o un StackPanel). En este control se especifican las propiedades como la alineación, el color de fondo, su persistencia y el estado que tendrá al cargar la página.

<ApplicationBar x:Name="AppBar" Grid.ColumnSpan="2" Grid.Row="2" VerticalAlignment="Bottom" IsPersistent="False" IsOpen="True"
                Height="Auto" DismissMode="EdgeSwipe" HorizontalAlignment="Stretch" Background="#548D8D8D">

El resto del comportamiento es similar a cualquier otro contenedor de XAML como se aprecia en el código completo:

     <ApplicationBar x:Name="AppBar" Grid.ColumnSpan="2" Grid.Row="2" VerticalAlignment="Bottom" IsPersistent="False" IsOpen="True"
                Height="Auto" DismissMode="EdgeSwipe" HorizontalAlignment="Stretch" Background="#548D8D8D">
            <ApplicationBar.Resources>
                <Style TargetType="TextBlock">
                    <Setter Property="FontFamily" Value="SegoeUI" />
                    <Setter Property="FontSize" Value="12" />
                    <Setter Property="Foreground" Value="White" />
                    <Setter Property="HorizontalAlignment" Value="Center" />
                </Style>
            </ApplicationBar.Resources>
            <Grid Margin="15,0,15,0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="90" />
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="70" />
                    <ColumnDefinition Width="90" />
                </Grid.ColumnDefinitions>
                <StackPanel Orientation="Vertical" Margin="0,14,0,5" Grid.Column="0">
                    <Button Margin="0,0,0,10"/>
                    <TextBlock Text="Back" />
                </StackPanel>
                <StackPanel Orientation="Vertical" Margin="0,14,0,5" Grid.Column="4">
                    <Button Margin="0,0,0,10"/>
                    <TextBlock Text="View Full" />
                </StackPanel>
            </Grid>
        </ApplicationBar>

El resultado será una barra como la que se muestra en la siguiente pantalla:

Mas información en MSDN: