[MVVM] TabControl et ViewModel

Version imprimable

Bonjour à tous,

Voici la suite de mon précédent post (gestion des usercontrols).
J'utilise désormais la MVVM Light Toolkit de Galasoft.

Mon application est décomposée ainsi
- 1 View principale reliée
- 2 Views sous format de UserControl

Ma View principale possède un menu (Action 1, Action 2). et un grid :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <Grid x:Name="LayoutRoot"> <Grid> <Menu Name="Choix" HorizontalAlignment="Left" VerticalAlignment="Top" BorderThickness="2"> <MenuItem Header="Choix"> <MenuItem Header="View1" Command="{Binding ChangeToView1}" /> <MenuItem Header="View2" Command="{Binding ChangeToView2}"/> </MenuItem> </Menu> </Grid> <Grid Margin="0,30,0,0"> <ContentControl Content="{Binding MaVmSelect}" Margin="0,20" /> </Grid>
En gros, lors du choix, la propriété MaVmSelect sur la ViewModel principale est changée et donc, j'affiche la bonne View correctement bindée...

Aujourd'hui, mon objectif est d'ouvrir ce UserControl dans un TabControlItem.
Et c'est là que je sèche... Je pense pouvoir réutiliser mes DataTemplates afin de respecter au max le pattern
Code:

1 2 3 4 5 6 7 <DataTemplate DataType="{x:Type vm:ViewModel1}"> <v:View1/> </DataTemplate> <DataTemplate DataType="{x:Type vm:ViewModel2}"> <v:View2/> </DataTemplate>
Si quelqu'un avait une idée pour la suite...

Merci d'avance ;)

03/03/2011, 11h39
koyot3
Bon j'avance sur le sujet...
J'ai créé une collection sur ma ViewModel principal contenant des ViewModels tel que
Code:

1 2 VmCollect.Add(new ViewModel1()); VmCollect.Add(new ViewModel2());
En définissant un DataTemplate sur le <TabControl.ItemTemplate> j'arrive à afficher mes deux onglets.

Seulement voilà, je voudrais que le client puisse ajouter des onglets à la volée.
Par exemple, s'il clic sur un bouton, un nouveau onglet apparaît avec la ViewModel1 comme template par exemple...

Comment faire pour chaque view ait une instance indépendante des autres ?

Par avance, merci de votre aide !!
03/03/2011, 15h11
Lordinaire

Tu peux essayer d'utiliser un ContentControlSelector qui choisira quel DataTemplate utiliser.
http://msdn.microsoft.com/fr-ca/libr...eselector.aspx
03/03/2011, 15h23
koyot3

merci pour ton lien...:ccool:
en fait en réutilisant mon ancien bout de code, moyennant quelques modifications j'ai réussi à obtenir un truc convenable...
seul hic, lorsque j'ouvre un onglet de type ViewModel1 (la View1 est chargée dans un nouveau tabitem), le client a la possibilité de de refaire la même opération....

On se retrouver alors avec 2 onglets avec deux View1 à l'intérieur.. seul hic, on utilise qu'une seule instance de la ViewModel1 alors que j'aimerais en avoir deux par exemple .....
C'est ça que je n'arrive pas à gérer !!
03/03/2011, 16h19
Invité

Citation:

Envoyé par koyot3

merci pour ton lien...:ccool:
en fait en réutilisant mon ancien bout de code, moyennant quelques modifications j'ai réussi à obtenir un truc convenable...
seul hic, lorsque j'ouvre un onglet de type ViewModel1 (la View1 est chargée dans un nouveau tabitem), le client a la possibilité de de refaire la même opération....

On se retrouver alors avec 2 onglets avec deux View1 à l'intérieur.. seul hic, on utilise qu'une seule instance de la ViewModel1 alors que j'aimerais en avoir deux par exemple .....
C'est ça que je n'arrive pas à gérer !!

Je pense que le problème n'est bien expliqué là.

Est ce que tu veux dire :

Comment faire pour ne pas créer un TabItem correpondant à un ViewModel si au moins un TabItem lui est déjà associé dans le TabControl ?
04/03/2011, 09h55
koyot3

En fait, oui je pense que je me suis mal expliqué...

Si j'ai bien compris le principe, 1 ViewModel = 1 View...
Dans mon cas, j'ai 2 ViewModels qui correspondent à 2 UserControls

Quand je clique sur un bouton, j'ai le UserControl1 qui s'insère dans un TabItem de mon TabControl. Jusqu'à là tout marche nickel ! :mrgreen:

Le hic, c'est que si je reclique sur le même bouton, un deuxième TabItem se rajoute avec le même UserControl. Ca c'est le comportement attendu.

Mais mes deux UserControls pointent vers le même ViewModel : ce qui fait que quand je modifie une valeur sur le 1er, elle est répercutée sur le 2ème...

Exemple :
Model1 :
une propriété Nom

ViewModel1 :
une propriété qui retourne un objet Model1

View1 :
une textblock bindée sur le nom de l'objet Model1 renvoyé par ViewModel1

View1 n°2 :
même composant que la précédante. Or si je change le nom ici, ça le change dans l'autre, ce qui parait normal.

J'imaginerais donc une solution pour créer une collection d'objet dans ma ViewModel mais comment faire pour dire que lors du binding on pointe vers tel ou tel objet ?
Stocker le nombre d'onglet en cours et créer une propriété qui renvoie l'objet à l'index suivant dans la collection ?

Merci d'avance !!
04/03/2011, 10h02
Invité

L'ajout d'un item dans le TabControl se fait-il via une collection telle que ObservableCollection ?

Comment construis-tu tes ViewModels ?
Est-tu sûr d'utiliser le constructeur de chaque ViewModel pour envoyer une instance différente ?
04/03/2011, 10h16
koyot3

Oui c'est ça. J'ai une collection de ViewModel sur ma Viewmodel principale. Chaque item de la collection correspond à un onglet.

Mes ViewModels sont construites par le biais du ViewModelLocator (singleton).

Mais je pense que mon erreur vient de vouloir dupliquer des ViewModels dynamiquement alors que je pense que c'est les objets d'une VIewModels qui doivent se dupliquer ...

Mais j'essaie de voir si j'ai la meilleure approche...

Merci en tout cas pour ton intérêt...
04/03/2011, 10h37
Invité

Citation:

Envoyé par koyot3

Mes ViewModels sont construites par le biais du ViewModelLocator (singleton).

Si tes ViewModels autre le ViewModel principal sont construits avec la logique du ViewModelLocator alors c'est normal que tu ais la même instance du ViewModel.

Donc le mieux de n'avoir que le ViewModel principal qui soit créé par le ViewModelLocator. Pour le ViewModel dont tu es susceptibles d'avoir plusieurs instances différentes tu passes par une commande qui t'instancies une nouvelle instance en utilisant le constructeur par défaut. :ccool:
04/03/2011, 11h25
koyot3

:mur: oula ça commence à devenir complexe mais j'aime bien ton idée...

par contre , je ne vois pas trop comment la mettre en place, sachant que la View1 est bindée en automatique sur la classe ViewModel1.

Crée une nouvelle instance depuis la ViewModel principale, ok, mais ensuite dire d'ajouter une View bindée dessus, j'ai l'impression que ça casse mon système pour ajouter dynamiquement des onglets

Et quelque chose de simple comme ça, ne pourrait pas faire l'affaire ?

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
 
public class MainViewModel : ViewModelBase
    {
        public ObservableCollection<ItemViewModel> MyList { get; set; }
 
        RelayCommand addTabCommand;
        public ICommand AddTabCommand
        {
            get
            {
                if (addTabCommand == null)
                {
                    addTabCommand = new RelayCommand(param => this.AddTab(),
                        param => true);
                }
                return addTabCommand;
            }
        }
 
        private void AddTab()
        {
            ItemViewModel newTab = new ItemViewModel();
            MyList.Add(newTab);
            RaisePropertyChanged("MyList");
        }
 
        public MainViewModel()
        {
            MyList = new ObservableCollection<ItemViewModel>();
            MyList.Add(new ItemViewModel());
            MyList.Add(new Item2ViewModel());
            RaisePropertyChanged("MyList");
        }
    }

En rajoutant les DataTemplate qui vont bien pour lier tes ViewModels à tes Views.

Code:

1
2
3
4
5
6
7
 
<DataTemplate DataType="{x:Type vm:ItemViewModel}">
      <local:ItemView />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:Item2ViewModel}">
      <local:Item2View />
</DataTemplate>

La view :

Code:

1
2
3
4
5
 
<StackPanel DataContext="{Binding}">
        <Button Command="{Binding AddTabCommand}" Content="+" />
        <TabControl ItemsSource="{Binding MyList}" />
</StackPanel>

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
 
public class MainViewModel : ViewModelBase
    {
        public ObservableCollection<ItemViewModel> MyList { get; set; }
 
        RelayCommand addTabCommand;
        public ICommand AddTabCommand
        {
            get
            {
                if (addTabCommand == null)
                {
                    addTabCommand = new RelayCommand(param => this.AddTab(),
                        param => true);
                }
                return addTabCommand;
            }
        }
 
        private void AddTab()
        {
            ItemViewModel newTab = new ItemViewModel();
            MyList.Add(newTab);
            RaisePropertyChanged("MyList");
        }
 
        public MainViewModel()
        {
            MyList = new ObservableCollection<ItemViewModel>();
            MyList.Add(new ItemViewModel());
            MyList.Add(new Item2ViewModel());
            RaisePropertyChanged("MyList");
        }
    }

Le code ci-dessus pourrait marcher mais pas la peine de déclencher l'évènement PropertyChanged sur la proprieté MyList vu que t'utilises une ObservableCollection.

Code:

1
2
3
4
5
6
7
 
<DataTemplate DataType="{x:Type vm:ItemViewModel}">
      <local:ItemView />
</DataTemplate>
<DataTemplate DataType="{x:Type vm:Item2ViewModel}">
      <local:Item2View />
</DataTemplate>

Avec les DataTemplate définis comme ça tu risques d'avoir des problèmes au niveau des visuels des items et leur contenus. J'ai l'impression que c'est pas comme ça que ça devrait être pour que ça marche avec un TabControl. Bon si ça marche avec une routine que t'aurais déjà mis en place tant mieux. Moi je passerai par des DataTemplateSelector. :ccool:

04/03/2011, 12h32
Lordinaire

Citation:

Envoyé par h2s84

Avec les DataTemplate définis comme ça tu risques d'avoir des problèmes au niveau des visuels des items et leur contenus. J'ai l'impression que c'est pas comme ça que ça devrait être pour que ça marche avec un TabControl. Bon si ça marche avec une routine que t'aurais déjà mis en place tant mieux. Moi je passerai par des DataTemplateSelector. :ccool:

Ce n'est certainement pas la solution la plus "dynamique" mais elle peut convenir. J'utiliserai moi aussi un DataTemplateSelector (comme proposé plus haut) mais il n'a pas l'air d'en vouloir :calim2:

Un exemple extrait d'un de mes TP :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<Window x:Class="WpfApplicationTabContol.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplicationTabContol"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:TabControlItemTemplateSelector x:Key="TabControlItemTemplateSelector" />
        <local:TabControlItemContentTemplateSelector x:Key="TabControlItemContentTemplateSelector" />
    </Window.Resources>
    <Grid>
        <TabControl x:Name="tabControl" 
                    HorizontalAlignment="Stretch" 
                    ItemTemplateSelector="{StaticResource TabControlItemTemplateSelector}">
            <TabControl.Resources>
                <Style TargetType="TabItem">
                    <Setter Property="ContentTemplateSelector" Value="{StaticResource TabControlItemContentTemplateSelector}" />
                </Style>
            </TabControl.Resources>
        </TabControl>
    </Grid>
</Window>

Un DataTemplateSelctor pour les pour les headers des TabItems :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
public class TabControlItemTemplateSelector : DataTemplateSelector
    {
        public override System.Windows.DataTemplate SelectTemplate(object item, System.Windows.DependencyObject container)
        {
            DataTemplate selectedDataTemplate = null;
            if (item is View1Model) selectedDataTemplate = Application.Current.FindResource("View1DataTemplate") as DataTemplate;
            else if (item is View2Model) selectedDataTemplate = Application.Current.TryFindResource("View2DataTemplate") as DataTemplate;
 
            return selectedDataTemplate;
        }
    }

Un DataTemplateSelector pour les contenus des TabItems :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
public class TabControlItemContentTemplateSelector : DataTemplateSelector
    {
        public override DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            DataTemplate selectedDataTemplate = null;
            if (item is View1Model) selectedDataTemplate = Application.Current.FindResource("View1ContentDataTemplate") as DataTemplate;
            else if (item is View2Model) selectedDataTemplate = Application.Current.TryFindResource("View2ContentDataTemplate") as DataTemplate;
 
            return selectedDataTemplate;
        }
    }