Windows 8 : Utiliser la Navigation avec MVVM

[アーティクル]
05/17/2012

Lorsque l’on a l’habitude de créer des projets avec le pattern MVVM, la première chose que l’on souhaite faire sur tout nouveau projet , c’est de mettre en place les concepts que l’on a déjà mis en œuvre lors des différents projets auxquels nous aurions pu participé.

Dans le cadre d’un nouveau projet Windows 8, nous nous posons la question qui est “Comment utiliser la navigation à partir de nos ViewModels?” Nous allons vous montrer comment intégrer un service de navigation qui pourra être utilisé au travers de nos ViewModels.

Définition de l’interface INavigationService

Avant de pouvoir naviguer au travers de nos ViewModels, nous avons besoin d’en définir le squelette :

Code Snippet

public interface INavigationService
{
object Parameter { get; }
event NavigatingCancelEventHandler Navigating;
void NavigateTo(Type page, object parameter = null);
void GoBack();
void Initialized(Frame frame);
}

L’interface étant créée, nous allons détailler l’utilité de chacune des signatures de méthodes :

void NavigateTo(Type page, object parameter=null)
Cette méthode va nous permettre naviguer vers une autre page avec ou sans paramètre.
void GoBack()
Cette méthode appellera la méthode native GoBack de l’objet Frame pour revenir à la page précédemment vue
void Initialized(Frame frame)
Point d’entrée de la navigation qui va définir les vues que vous voulez enregistrer.
L’object Frame est celui qui est définit dans le fichier App.xaml.cs. Cet objet est le point d’entrée de votre application
object Parameter { get; }
Cet attribut jouera un rôle particulier car c’est au travers de celui-ci que nous pourrons récupérer le paramètre passer d’un ViewModel à un autre.

Une fois l’interface créée nous pouvons donc l’implémenter comme suit:

Code Snippet

public class NavigationService : INavigationService
{
public event NavigatingCancelEventHandler Navigating;
private Frame frame;
public object Parameter
{
get;
private set;
}
public void NavigateTo(Type page, object parameter = null)
{
if (null != parameter)
{
Parameter = parameter;
frame.Navigate(page, parameter);
}
else
{
Parameter = null;
frame.Navigate(page);
}
}
public void GoBack()
{
if (EnsureMainFrame() && frame.CanGoBack)
{
frame.GoBack();
}
}
public void Initialized(Frame frame)
{
if (null == frame)
{
throw new ArgumentNullException();
}
if (null != frame)
{
frame.Navigating -= FrameNavigating;
}
this.frame = frame;
this.frame.Navigating += FrameNavigating;
}
private bool EnsureMainFrame()
{
return null != frame;
}
private void FrameNavigating(object sender, NavigatingCancelEventArgs e)
{
if (null != Navigating)
Navigating(this, e);
}
}

Comment utiliser cette nouvelle classe

La mise en œuvre de cette classe se fait en trois étapes qui sont les suivantes :

1- Créer une classe intermédiaire n’autorisant l’accès qu’à une seule instance de la navigation et lui permettant par la même occasion d’enregistrer les vues créées dans votre application

Code Snippet

public class ViewService
{
private IDictionary<string, Type> _viewRegistered;
private static ViewService _instance;
public static ViewService Service
{
get
{
return _instance ?? (_instance = new ViewService());
}
}
private ViewService()
{
_viewRegistered = new Dictionary<string, Type>();
}
private INavigationService _navigationService;
public INavigationService NavigationService
{
get
{
return _navigationService ?? (_navigationService = new NavigationService());
}
}
public void RegisterView(string navigationStringValue, Type typeOfView)
{
if( !_viewRegistered.ContainsKey(navigationStringValue))
_viewRegistered.Add(new KeyValuePair<string,Type>(navigationStringValue, typeOfView));
}
public Type GetView(string navigationStringValue)
{
if (string.IsNullOrWhiteSpace(navigationStringValue))
{
throw new ArgumentNullException();
}
if (!_viewRegistered.Any())
{
return null;
}
if (!_viewRegistered.ContainsKey(navigationStringValue))
{
throw new ArgumentOutOfRangeException();
}
return _viewRegistered[navigationStringValue];
}
}

2- Renseigner les vues de votre application au travers de la précédente classe créée

Cette initialisation s’effectue pour le cadre de cette démo dans le le fichier du App.xaml.cs

Code Snippet

private void InitializeViewService(Frame rootFrame)
{
ViewService.Service.NavigationService.Initialized(rootFrame);
ViewService.Service.RegisterView("BlankPage1", typeof(BlankPage1));
ViewService.Service.RegisterView("BlankPage2", typeof(BlankPage2));
}

3- La navigation à partir des ViewModels

A partir de cette étape, il ne vous reste plus qu’à utiliser la méthode NavigateTo de la classe NavigationService pour naviguer d’une page à une autre. Comme vous pouvez le voir ci-dessous, une seule ligne de code nous permet de gérer la navigation d’une vue courante à une autre.

Code Snippet

public ICommand GoToMyPage1Command { get; private set; }
private void InitializeCommands()
{
this.GoToMyPage1Command = CommandFactory.CreateCommand(GoToMyPage1, () => { return true; });
}
private void GoToMyPage1()
{
ViewService.Service.NavigationService.NavigateTo(
ViewService.Service.GetView("Page1"));
}

L’exemple ci-dessus montre l’utilisation du service sans passer de paramètre. Dans le cas où nous avons besoin de passer une quelconque information à un autre ViewModel grâce à un paramètre, il nous faut alors utiliser la navigation de la manière suivante :

Code Snippet

public ICommand GoToMyPage1Command { get; private set; }
private void InitializeCommands()
{
this.GoToMyPage1Command = CommandFactory.CreateCommand<MyClass>(GoToMyPage1, (o) => { return true; });
}
private void GoToMyPage1(MyClass parameter)
{
ViewService.Service.NavigationService.NavigateTo(
ViewService.Service.GetView("Page1"), parameter);
}

Code source

Le code source de la démo se trouve ICI.

- Patrick Payet -

次の方法で共有

Windows 8 : Utiliser la Navigation avec MVVM

Définition de l’interface INavigationService

Création de la classe de Navigation

Comment utiliser cette nouvelle classe

Code source

その他のリソース