Windows Phone–Tutorial XII–ProgressBar y MVVM Light

En esta ocasión voy ha hablar sobre como implementar una barra de progreso con el framework MVVM light. Es importante notificar al usuario que la aplicación esta esperando a que un servicio responda o que le informemos del porcentaje de bajada/subida de un fichero, siempre debemos de preocuparnos de darle feedback sin ese feedback puede que el usuario sienta que la aplicación se ha colgado y se salga de ella cuando lo único que esta haciendo es esperar la respuesta de un servicio.

Windows Phone nos provee de un control ProgressBar (igual que el de silverlight) que podemos utilizar en nuestros desarrollos, pero a mi me gusta mucho mas (es el que utilizo) el creado por Alex Yakhnin (podéis descargarlo de http://blogs.msdn.com/b/priozersk/archive/2010/09/20/creating-progress-dialog-for-wp7.aspx) me ofrece muchas mas opciones que el estándar. El objetivo del articulo no es hablar del control ProgressBar sino como desde nuestra viewmodel somos capaces de acceder a elementos de la vista.

Imaginaros que en nuestra aplicación a la hora de autenticarse utilizamos un servicio WCF que se nos proporciona con el método Authenticate, como supongo que sabréis, la llamada a servicios se hacen siempre de forma asíncrona al igual que Silverlight. Si ese servicio de autentificación tarda unos segundos debemos de notificar al usuario que la aplicación esta haciendo algo y que no esta colgada

image

La problemática  es que al servicio se llama desde la viewmodel y en ese momento debemos mostrar el control progressbar y cuando nos llega el evento Completed del servicio debemos de esconder el control. Para resolver este problema MVVM Light nos ofrece la clase estática DispatcherHelper junto con el método CheckBeginInvokeOnUI que nos permite acceder a la vista desde la viewmodel, como siempre mejor con un ejemplo

En la viewmodel definiremos una propiedad que es el control de la barra de progreso

1 private ProgressIndicator _progress; 2 public ProgressIndicator Progress 3 { 4 get 5 { 6 return _progress; 7 } 8 set 9 { 10 _progress = value; 11 RaisePropertyChanged("Progress"); 12 } 13 } 14

En el método invocado por el RelayCommand SaveCommand tendremos el siguiente código

1 public MainViewModel() 2 { 3 if (IsInDesignMode) 4 { 5 // Code runs in Blend --> create design time data. 6 } 7 else 8 { 9 _setingsUser = new Settings(); 10 SaveCommand = new RelayCommand(Save); 11 } 12 } 13 14 private void Save() 15 { 16 if (SettingsUser != null) 17 { 18 DispatcherHelper.CheckBeginInvokeOnUI(() => 19 { 20 if (Progress == null) 21 { 22 Progress = new ProgressIndicator(); 23 Progress.ProgressType = ProgressTypes.WaitCursor; 24 Progress.Text = "Loading data..."; 25 } 26 Progress.Show(); 27 }); 28 MyNikePlusProxy.MyNikePlusServiceClient proxy = new MyNikePlusProxy.MyNikePlusServiceClient(); 29 proxy.AuthenticateCompleted += new System.EventHandler<MyNikePlusProxy.AuthenticateCompletedEventArgs>(proxy_AuthenticateCompleted); 30 proxy.AuthenticateAsync(SettingsUser.IdUser, SettingsUser.Password); 31 32 } 33 34 } 35

 

Como podéis observar es muy fácil de utilizar y  no necesita ninguna explicación, solo nos quedaría el completed

 

1 void proxy_AuthenticateCompleted(object sender, MyNikePlusProxy.AuthenticateCompletedEventArgs e) 2 { 3 if (e.Error == null && e.Result != string.Empty) 4 { 5 SettingsUser.AuthenticatedCookie = e.Result; 6 IsolatedStorageHelper ish = new IsolatedStorageHelper(); 7 ish.SaveEntity<Settings>("settings.dat", SettingsUser); 8 DispatcherHelper.CheckBeginInvokeOnUI(() => 9 { 10 Progress.Hide(); 11 }); 12 13 } 14 } 15

No necesita mas explicación, a probarlo!!!

Un comentario en “Windows Phone–Tutorial XII–ProgressBar y MVVM Light”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *