Home > Tutoriales, WP7 > Día 15: La barra de progreso

Día 15: La barra de progreso

December 11th, 2011 Leave a comment Go to comments

Este artículo es una traducción de Day 15: ProgressBar, puedes encontrarlo aquí en la versión original en inglés.

dia15

En cualquier momento que tengas una operación que tomará mas de un par de segundos para ser completada, es una buena idea dejar que tus usuarios sepan que sus aplicaciones están aún progresando y no solo se detuvieron en un ciclo para siempre.

¿Cómo podrías dejar a tus usuarios saber que es lo que esta pasando? Bueno, puedes mostrarles un mensaje de texto con el número de bytes descargados o segundos que restan para una operación. Pero comúnmente el usuario no se preocupa por tal nivel de detalle. La barra de progreso es una gran forma de mostrar a tus usuarios que una operación esta en progreso, sin molestarlos con tantos detalles. Una barra de progreso pude mostrar esta información en dos formas diferentes: Modo determinado e indeterminado.

Modo indeterminado

El modo indeterminado es cuando no puedes determinar cuanto tomará la operación para ser completada. Por ejemplo, si te estás conectando a un servidor, no necesitas saber cuando será completada la operación. El modo indeterminado de la barra de progreso muestra su estado mostrando puntos moviéndose de izquierda a derecha en una animación. Esto es genial para mostrar que algo esta sucediendo, pero no le da al usuario una indicación del monto del progreso. Para hacer que una barra de progreso se muestre de manera indeterminada, selecciona el CheckBox de la propiedad IsIndeterminate de la barra de progreso.

image_thumb5

Modo determinado

Si puedes determinar de manera aproximada cuanto tardará la operación  en ser completada, usar el modo determinado para hacer a tu usuario saber el porcentaje que queda en la operación. Por ejemplo, si tu estás descargando un archivo, conoces el tamaño total del archivo, mientras la descarga continúe, obtienes actualizaciones que te digan el número de bytes descargados al momento.

Puedes entonces dividir el tamaño del archivo total por los bytes descargados para obtener el porcentaje de avance. Este código muestra un ejemplo de como podría ser hecho esto.

progressBar1.Value = (float)bytesRead / TotalFileSize;

Si quieres mostrarle a tu usuario el porcentaje de progreso que está tomando una operación, despliegas la información en una barra de progreso. Para mostrar el modo Determinado, elimina la selección IsIndeterminate  y ajusta el valor para que se correlacione en el avance del porcentaje.

image_thumb4

Con Windows Phone 7.5 Mango, tienes dos opciones para la barra de progreso:

1) Progress Bar – Un control que puedes poner en donde quieras en tu página Silverlight.

2) Progress indicator – Un control que reside en la bandeja del sistema.

Vamos a comenzar hablando acerca de la ProgressBar.

ProgressBar

La barra de progreso no está en la caja de herramientas de manera preestablecida, así que tendrás que agregarla a la pestaña en Visual Studio. Para hacer esto, da clic derecho en la caja de herramientas y selecciona “Escoger elementos…”. Busca entonces “ProgressBar” y seleccionala.

clip_image002_thumb2

clip_image004_thumb3

Después de una pequeña espera, verás una “Barra de progreso” en la caja de herramientas.

image_thumb8

Ahora puedes arrastrar la barra de progreso en  las páginas del XAML de tu Windows Phone. Esto agregará código como el siguiente en tu archivo XAML.

<ProgressBar Name=”progressBar1″ Value=”0″></ProgressBar>

Puedes ver el conjunto de propiedades del control como lo desees:

clip_image006_thumb1

Puedes usar esta nueva ProgressBar en el modo determinado, asegúrate de que IsIndeterminate no esté seleccionada. Después puedes ajustar las propiedades Minimum, Maximum y Value del control.

En el código C# cuando tu operación este progresando, cambias la propiedad Value al valor deseado entre Minimum y Maximum. La barra de progreso se asegurará que que Value este siempre entre Minimum y Maximum. Puedes llenar la barra de progreso simplemente incrementando el valor basado en el progreso de tu operación.

Indicador de progreso

Otra forma para mostrar progreso es usando un Progress Indicator. Este control aparece en la bandeja del sistema como se muestra abajo. Aquí hay un par de imágenes de la bandeja del sistema y el indicador de progreso en la bandeja del sistema.

clip_image008_thumb2

clip_image010_thumb4

Para usar el Progress Indicator debes agregar la sentencia using en tu código C#.

using Microsoft.Phone.Shell;

Puedes crear un Progress Indicator y agregarlo a la bandeja del sistema como esto.

 

ProgressIndicator progressIndicator = new ProgressIndicator() {

IsVisible = true, IsIndeterminate = false,

Text = “Descargando archivos …” };

SystemTray.SetProgressIndicator(this, progressIndicator);

Nota que la propiedad Value del Progress Indicator debe siempre estar entre 0 y 1. Donde al igual que la ProgressBar, la propiedad Value debe estar entre Minimum y Maximum.

Aplicación de ejemplo

Dia_15_BarraDeProgreso es una aplicación que prueba ambos controles:

clip_image012_thumb2

Aquí esta una vista general del código:

El código XAML muestra abajo todos los controles que usaremos en nuestra aplicación. Hay un ProgressBar para mostrar el progreso, un para de botones para iniciar o detener un temporizador para la simulación y un Slider el cual será utilizado para cambiar el valor del ProgressIndicator.

<phone:PhoneApplicationPage
    x:Class=”Dia_15_BaraDeProgreso.MainPage”
    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
    xmlns:phone=”clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone”
    xmlns:shell=”clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone”
    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″
    xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
    mc:Ignorable=”d” d:DesignWidth=”480″ d:DesignHeight=”768″
    FontFamily=”{StaticResource PhoneFontFamilyNormal}”
    FontSize=”{StaticResource PhoneFontSizeNormal}”
    Foreground=”{StaticResource PhoneForegroundBrush}”
    SupportedOrientations=”Portrait” Orientation=”Portrait”
    shell:SystemTray.IsVisible=”True”>

    <Grid x:Name=”LayoutRoot” Background=”Transparent”>
        <Grid.RowDefinitions>
            <RowDefinition Height=”Auto”/>
            <RowDefinition Height=”*”/>
        </Grid.RowDefinitions>

        <StackPanel x:Name=”TitlePanel” Grid.Row=”0″ Margin=”12,17,0,28″>
            <TextBlock x:Name=”ApplicationTitle” Text=”LA LIGA SILVERLIGHT” Style=”{StaticResource PhoneTextNormalStyle}”/>
            <TextBlock x:Name=”PageTitle” Text=”barra” Margin=”9,-7,0,0″ Style=”{StaticResource PhoneTextTitle1Style}”/>
        </StackPanel>

        <Grid x:Name=”ContentPanel” Grid.Row=”1″ Margin=”12,0,12,0″>
            <StackPanel>
                <TextBlock FontSize=”36″ Foreground=”#FFDBE6FF” x:Name=”txtProgreso” Text=”Progress Indicator” TextWrapping=”Wrap” FontWeight=”Bold” />
                <TextBlock Text=”Arrastra el slider para ver el progreso en la bandeja del sistema.” FontSize=”20″ TextWrapping=”Wrap” Foreground=”#FFDBE6FF” />
                <Slider x:Name=”sldProgreso” Width=”Auto” Maximum=”1″ LargeChange=”0.1″ SmallChange=”0.01″ ValueChanged=”sldProgreso_ValueChanged” Margin=”50,0″ />
                <TextBlock FontSize=”36″ Text=”Progress Bar” TextWrapping=”Wrap” Foreground=”#FFDBE6FF” Margin=”0,50,0,0″ FontWeight=”Bold” />
                <Button x:Name=”btnIniciar” Content=”Iniciar temporizador” Click=”btnIniciar_Click”/>
                <Button x:Name =”btnDetener” Content=”Reiniciar el temporizador” Click=”btnDetener_Click”></Button>
                <ProgressBar x:Name=”barraProgreso” Value=”0″ IsIndeterminate=”False” Height=”50″ SmallChange=”.5″ LargeChange=”10″></ProgressBar>
            </StackPanel>
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

Aquí está el código C#. Vamos a ir viendo lo que el código va haciendo.

Para comenzar, ajustamos las sentencias using para los controles que vamos a usar. Para el ProgressIndicator, debemos usar Microsoft.Windows.Shell. Después dentro de la clase que fue creada para la página, declaramos nuestras variables globales. Un ProgressIndicator es creado cuando después lo pongamos dentro de la bandeja del sistema. Creamos un DispatcherTimer llamado temporizador el cual será utilizado para simular una operación determinada. En el constructor ponemos el recién creado ProgressIndicator dentro de la bandeja de sistema y ajustamos el temporizador para que utilice el método temporizador_Tick cada 5000 ticks.

using System;
using System.Windows;
using System.Windows.Threading;
using Microsoft.Phone.Shell;
using Microsoft.Phone.Controls;

namespace Dia_15_BaraDeProgreso
{
    public partial class MainPage : PhoneApplicationPage
    {
        ProgressIndicator indicadorProgreso = new ProgressIndicator() { IsVisible = true, IsIndeterminate = false, Text = “Descargando archivo …” };
        DispatcherTimer temporizador = new DispatcherTimer();

        public MainPage()
        {
            InitializeComponent();

            SystemTray.SetProgressIndicator(this, indicadorProgreso);

            temporizador = new DispatcherTimer { Interval = new TimeSpan(5000) };
            temporizador.Tick += temporizador_Tick;
            temporizador.Stop();
        }
    }
}

Cuando el temporizador arranque y el método temporizador_Tick sea llamado, agregamos un valor a la propiedad Value de la ProgressBar para hacer parecer que la operación esta haciendo un progreso.

Abajo ese método estan los manejadores de eventos para los eventos de los botones. Ellos comienzan e inicializan el temporizador de modo que podemos simular una larga operación indeterminada. Al presionar el botón de inicio reinicia la propiedad Value de barraProgreso a 0, pero en esta ocasión detenemos igualmente el temporizador de avanzar.

El último método en  la clase es el manejador de eventos sldProgreso_ValueChanged que es llamado cuando el slider es movido. Usaremos el valor del slider para posicionar el indicadorProgreso.

using System;
using System.Windows;
using System.Windows.Threading;
using Microsoft.Phone.Shell;
using Microsoft.Phone.Controls;

namespace Dia_15_BaraDeProgreso
{
    public partial class MainPage : PhoneApplicationPage
    {
        ProgressIndicator indicadorProgreso = new ProgressIndicator() { IsVisible = true, IsIndeterminate = false, Text = “Descargando archivo …” };
        DispatcherTimer temporizador = new DispatcherTimer();

        public MainPage()
        {
            InitializeComponent();

            SystemTray.SetProgressIndicator(this, indicadorProgreso);

            temporizador = new DispatcherTimer { Interval = new TimeSpan(5000) };
            temporizador.Tick += temporizador_Tick;
            temporizador.Stop();
        }

        void temporizador_Tick(object sender, EventArgs e)
        {
            barraProgreso.Value += barraProgreso.SmallChange;
        }

        private void btnIniciar_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            barraProgreso.Value = 0;
            temporizador.Start();
        }

        private void btnDetener_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            barraProgreso.Value = 0;
            temporizador.Stop();
        }

        private void sldProgreso_ValueChanged(object sender, System.Windows.RoutedPropertyChangedEventArgs<double> e)
        {
            indicadorProgreso.Value = e.NewValue;
        }
    }
}

En resumen

Así es como puedes usar una barra de progreso en una aplicación Windows Phone Mango. En unas pocas líneas de código puedes rápidamente agregar una barra de progres bien elaborada a cualquier control de una aplicación Silverlight for Windows Phone. Puedes crear un ProgressIndicator al cual puedes poner en la bandeja del sistema, o puedes crear una ProgressBar la cual puedes desplegar en cualquier lado de la página de la aplicación.

Las barras de progreso son esenciales para aplicaciones con operaciones prolongadas. Dan al usuario una sensación de que la aplicación esta trabajando para ellos y los regresará al lugar original cuando la operación se complete. Tus usuarios se sentirán mejor al esperar si son informados del progreso de la aplicación.

Para descargar la versión de la aplicación que fue creada en este artículo, puedes hacerlo en el siguiente enlace.

Puedes descargar el código aquí.

Mañana, vamos a ver el Explorador del almacenamiento aislado, el cual te permite ver e inspeccionar la información que has almacenado en el Isolated Storage en tu emulador. Samidip Basu te mostrará el como y porque de este nuevo elemento. Nos vemos.

Categories: Tutoriales, WP7 Tags:
  1. No comments yet.