MVVM fenêtre unique

Version imprimable

02/06/2014, 12h10
Lionhart

MVVM fenêtre unique

Bonjour,

Je cherche à développer une application avec une seule fenêtre, mais dont le contenu va changer.
Imaginons que j'ai une fenêtre avec plusieurs boutons qui vont avoir pour effet de changer entièrement le contenu de ma fenêtre pour par la suite revenir sur l'accueil via un bouton accueil disponible sur mes différentes vues.

Je voudrais faire cela en respectant le MVVM au maximum.

Je vous demande donc s'il existe un tuto ou quelqu'un qui sait comment faire, car je n'ai aucune idée de comment prendre la chose (voir même de la commencer).

Merci d'avance pour votre aide.
02/06/2014, 12h42
Pragmateek

Le MVVM est utile à un autre niveau : entre chaque vue et ton modèle.
Là tu as une problématique purement visuelle de navigation.

Regarde du côté des API de navigation fournies par WPF : NavigationWindow et Page notamment.

Si tu as seulement 2 vues c'est pê un peu overkill donc là tu peux te contenter d'un simple ContentControl qui contiendra la vue actuelle.
Comme ça tu as en fait une seule vue "globale" qui gère notamment les menus.
02/06/2014, 12h52
Lionhart

Le problème est que si j'ai plus de fenêtre à créer, comment dois-je faire ?

Mais je demande sa car je travail sur une application qui a plus de fenêtres et je n'arrive pas à saisir le fonctionnement de celle-ci.
A l'heure actuelle elle change le view modèle courant mais je n'arrive pas à détecter ou se fait le changement de vue...
02/06/2014, 13h55
Pragmateek

Je ne sais pas comment est conçue cette application mais tu aurais typiquement :
- une HomeView avec son HomeViewModel
- une OtherView avec son OtherViewModel
- une AnotherView avec son AnotherViewModel
- une YetAnotherView avec son YetAnotherViewModel
...

Tout ce qu'il y a à faire c'est changer le Content du ContentControl pour utiliser l'une de ces vues :
- soit tu y vas à la bourrin en exposant globalement celui-ci, via la MainWindow typiquement, et tu le manipule directement depuis les gestionnaires de clic sur les boutons de navigation
- soit tu utilises des évènements routés (voire des commandes) pour notifier de la demande de navigation et tu enregistres un handler au niveau de la MainWindow

Est-il possible de binder le contentcontrol sur un ViewModel qui changerait et donc modifierai la fenêtre ?

Car c'est ce qu'il semble être fait dans ce cas ?

car j'ai trouvé ceci :
Code:

1 2 3 4 Content="{Binding PageCourante, Mode=OneWay}" ContentTemplate="{Binding PageCourante.Template, Mode=OneWay}" />
PageCourante serait donc un ViewModel qui retournerai sa View. (Template)

Est-ce que je me trompe ?

02/06/2014, 15h23
Pragmateek

Oui tu peux faire ça mais pour moi c'est abuser du MVVM et risquer de complexifier.
"Mon approche"© :
- conserve l'état de navigation global dans une classe dédiée, e.g. Navigation, contenant un UserControl CurrentView
- bind ton Content à cette CurrentView
- change l'instance de CurrentView au gré de la navigation initiée par l'utilisateur.

Dans le cas simple tu as une barre de navigation unique au niveau de la MainWindow qui te permet d'accéder aux différentes vues via autant de boutons (templatés comme il faut pour que ça ait un peu de gueule ;)).
Sinon si tu as des patterns de navigation plus complexes avec possibilité de conserver un historique tu peux profiter des composants de navigation de WPF.
02/06/2014, 15h57
Lionhart

Oui, je suis plutôt d'accord avec toi.

Car la je reprends le code d'une appli et je dois avouer que s'est pas évident.

Mais il va falloir que je continue dans la même direction alors je prends mes marques comme je peux.

De plus si tu as un exemple de ce dont tu parles pour que je puisse apprendre à maîtriser le sujet, je te serais très reconnaissant; je suis très intéressé dans apprendre plus.

Merci beaucoup pour tes réponses.

Voilà une petite illustration "quick and dirty" mais qui est une bonne base.

Donc tu as des vues :

Home :

Code:

1
2
3
4
5
6
7
<UserControl x:Class="Navigation.HomeView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <GroupBox Header="Home">
        <TextBlock>ET TELEPHONE MAISON</TextBlock>
    </GroupBox>
</UserControl>

Brandon :

Code:

1
2
3
4
5
6
7
<UserControl x:Class="Navigation.BrandonView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <GroupBox Header="Brandon">
        <TextBlock>MDR PTDR</TextBlock>
    </GroupBox>
</UserControl>

Jason :

Code:

1
2
3
4
5
6
7
8
9
10
11
<UserControl x:Class="Navigation.JasonView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <GroupBox Header="Jason">
        <TextBlock>G PA COMPRITTE LA KESTION</TextBlock>
    </GroupBox>
</UserControl>

Kevin :

Code:

1
2
3
4
5
6
7
<UserControl x:Class="Navigation.KevinView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <GroupBox Header="Kevin">
        <TextBlock>KIKOO LOL</TextBlock>
    </GroupBox>
</UserControl>

Tu as une classe de navigation :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
public class Navigator : INotifyPropertyChanged
{
    public static readonly Navigator Default = new Navigator();
 
    public event PropertyChangedEventHandler PropertyChanged = delegate { };
 
    internal UserControl HomeView { get; set; }
    internal UserControl BrandonView { get; set; }
    internal UserControl JasonView { get; set; }
    internal UserControl KevinView { get; set; }
 
    private UserControl currentView;
    public UserControl CurrentView
    {
        get { return currentView; }
        set
        {
            if (value != currentView)
            {
                currentView = value;
                PropertyChanged(this, new PropertyChangedEventArgs("CurrentView"));
            }
        }
    }
 
    internal void NavigateToHome()
    {
        CurrentView = HomeView;
    }
 
    internal void NavigateToBrandon()
    {
        CurrentView = BrandonView;
    }
 
    internal void NavigateToJason()
    {
        CurrentView = JasonView;
    }
 
    internal void NavigateToKevin()
    {
        CurrentView = KevinView;
    }
}

Une barre de navigation :

Code:

1
2
3
4
5
6
7
8
9
10
<UserControl x:Class="Navigation.NavigationBar"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel Orientation="Horizontal">
        <Button Content="Home" Click="ButtonHome_Click"></Button>
        <Button Content="Kevin" Click="ButtonKevin_Click"></Button>
        <Button Content="Jason" Click="ButtonJason_Click"></Button>
        <Button Content="Brandon" Click="ButtonBrandon_Click"></Button>
    </StackPanel>
</UserControl>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
using System.Windows;
using System.Windows.Controls;
 
namespace Navigation
{
    /// <summary>
    /// Interaction logic for NavigationBar.xaml
    /// </summary>
    public partial class NavigationBar : UserControl
    {
        public NavigationBar()
        {
            InitializeComponent();
        }
 
        private void ButtonHome_Click(object sender, RoutedEventArgs e)
        {
            Navigator.Default.NavigateToHome();
        }
 
        private void ButtonKevin_Click(object sender, RoutedEventArgs e)
        {
            Navigator.Default.NavigateToKevin();
        }
 
        private void ButtonJason_Click(object sender, RoutedEventArgs e)
        {
            Navigator.Default.NavigateToJason();
        }
 
        private void ButtonBrandon_Click(object sender, RoutedEventArgs e)
        {
            Navigator.Default.NavigateToBrandon();
        }
    }
}

Et la fenêtre principale :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<Window x:Class="Navigation.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:Navigation"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel>
        <Menu>
            <MenuItem Header="File">
                <MenuItem Header="Exit" Click="MenuItem_Click"></MenuItem>
            </MenuItem>
        </Menu>
        <local:NavigationBar />
        <ContentControl Content="{Binding CurrentView,Source={x:Static local:Navigator.Default}}" />
    </StackPanel>
</Window>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
using System.Windows;
 
namespace Navigation
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
 
            Navigator.Default.HomeView = new HomeView();
            Navigator.Default.BrandonView = new BrandonView();
            Navigator.Default.JasonView = new JasonView();
            Navigator.Default.KevinView = new KevinView();
 
            Navigator.Default.NavigateToHome();
        }
 
        private void MenuItem_Click(object sender, RoutedEventArgs e)
        {
            Application.Current.Shutdown();
        }
    }
}

Voilà, ni trivial ni compliqué. :)

PS : dans les vues ce sont mes réflexions philosophiques les plus abouties. ;)

02/06/2014, 17h51
Lionhart

Merci beaucoup pour cet exemple.

J'essayerai de tester de trouver les diverses façon de réaliser ce système de fenêtre unique.

ps : Si tu connais le nom des patterns que je peu trouver, je dit pas non.
02/06/2014, 18h28
Pragmateek

Pas vraiment de nom de pattern pour ça, le mot clé c'est vraiment "navigation".
02/06/2014, 18h35
Lionhart

ok, merci beaucoup pour ton aide :).

Il est difficile de passer après quelqu'un d'expérimenté quand on est jeune diplômé.