Debutant en MVVM, questionnement combobox

**Geff's** · 16/04/2019, 10h25

Bonjour,

je me tourne vers vous car je suis actuellement sur un projet en WPF utilisant le design patter MVVMLight, ce qui est totalement nouveau pour moi. J'y suis plongé depuis une bonne semaine et demi, j'avance à petit pas, mais j'ai quand même quelques points bloquants, qui me paraissent idiot dans l'idée mais...

Ce que j'aimerais faire :

Je travaille actuellement dans le ViewModel, afin de remplir des combobox dans le WPF. Je chercher à récupérer plusieurs listes dans ma base de donnée (liste des établissements, liste des services, par exemple), ce que j'ai réussi à faire via :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
 
            Etablissement = new ObservableCollection<Etablissement>((await _dataService.GetEtablissements().ConfigureAwait(false)));
            Services = await _dataService.GetServicesAsync(true).ConfigureAwait(false);
            Sections = await _dataService.GetSectionsAsync(_dataService.ParamGlobaux.IDEtablissement).ConfigureAwait(false);

Avec ça, si je bind une combobox sur établissement, je récupère la liste des établissement, et idem pour les services et les sections. (Du moins ça fonctionne, mais si jamais vous pensez que la procédure n'est pas bonne n'hésitez pas, je decouvre vraiment alors je fais "au test")

Maintenant, un de mes problèmes actuels, c'est que j'aimerais faire une combobox qui me permetterait de choisir "etablissement", "service", "section", et une fois que j'en ai choisi un, la seconde combobox m'affiche la liste de ce choix.

Mais je suppose qu'en MVVM la manière de procéder est différente, quelqu'un aurait une idée, une explication, un cookie ?

Merci d'avance

Edit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
 
        private ObservableCollection<string> _SelectedChoice;
        public ObservableCollection<string> SelectedChoice
        {
            get
            {
                return _SelectedChoice;
            }
            set
            {
                if (value != _SelectedChoice)
                {
                    _SelectedChoice = value;
                    RaisePropertyChanged(nameof(SelectedChoice));
                    UpdateSelectedChoice(); //rempli les champs
                }
            }
        }

La première Combobox avec les trois choix rempli. Maintenant, comment faire pour bind 3 sources différentes, si quelqu'un à une idée ?

**MABROUKI** · 19/04/2019, 00h57

bonjour

Bah ,d'abord ta prop CLR SelectedChoice est mal fichue ..
Car c'est un string qui vaut un choix(etablissement ou service ou section au choix ) si ta liste de choix est un list<string>...
Il nous faut donc dans le MainVM 2 props CLR :
- ObservableCollection<string> ListChoix
- string SelectedChoice

Le 1er Combo (cboChoix voir ci-apres l'exemple)doit avoir ses DP :
- SelectedItem bindé à SelectedChoice
- ItemsSource bindé à ListChoix
Rien de bien nouveau jusqu'à là...

Le 2eme Combo(cboListe voir ci-apres) est un vrai diable aux aguets grace à son style qui met à contribution ses datatriggers :
- ceux -ci scrutent la DP SelectedChoice et adaptent l'
ItemsSource en consequence ...et son bagage habituel l'ItemTemplate

Eh oui ,c'est une complication imprevue il faut basculer aussi l' itemTemplate du Combo2 ...

Dans l'exemple MVVM ci-apres (epais à la frappe) ,j'ai rajouté egalement un ListBox pour suivre les événements de "bascule" en Live:
code behind.cs Model des 3 Class:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
46
47
48
49
50
51
 
namespace WpfComboChoix.Model
{
    public class Etablissement
    {
        public string EtbName { get; set; }
        public int EtbID { get; set; }
        public Etablissement()
        {}
        public Etablissement(string pname,int pid):this()
        {
            EtbName = pname;
            EtbID = pid;
        }
    }
 
}
 
namespace WpfComboChoix.Model
{
    public class Service
    {
        public string SvcName { get; set; }
        public int SvcID { get; set; }
        public Service()
        {}
        public Service(string pname, int pid)
            : this()
        {
            SvcName = pname;
            SvcID = pid;
        }
    }
}
 
namespace WpfComboChoix.Model
{
    public class Section
    {
        public string SctName { get; set; }
        public int SctID { get; set; }
        public Section()
        {}
        public Section(string pname, int pid)
            : this()
        {
            SctName = pname;
            SctID = pid;
        }
    }
}

code behind.cs du class DataService (dossier Locator):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
namespace WpfComboChoix.Locator
{
    public class DataService
    {
        public List<Etablissement> GetEtablissements()
        {
            List<Etablissement> maListe = 
                new List<Etablissement>();
            for (int i = 1; i < 11; i++)
            {
                Etablissement etb = new Etablissement("etb" + i.ToString(), i);
                maListe.Add(etb);
 
            }
            return maListe;
        }
        public List<Service > GetServices()
        {
            List<Service> maListe =
                new List<Service>();
            for (int i = 1; i < 11; i++)
            {
                Service  svc = new Service("svc" + i.ToString(), i);
                maListe.Add(svc);
 
            }
            return maListe;
        }
        public List<Section> GetSections()
        {
            List<Section> maListe =
                new List<Section>();
            for (int i = 1; i < 11; i++)
            {
                Section sct = new Section("sct" + i.ToString(), i);
                maListe.Add(sct);
 
            }
            return maListe;
        }
    }
}

code behind.cs VM des Class VM(dossier ViewModel):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
 
namespace WpfComboChoix.ViewModel
{
    public class BaseVM:INotifyPropertyChanged 
    {
 
        public event PropertyChangedEventHandler PropertyChanged;
        public void Notify(string nameProp)
        {
            PropertyChangedEventHandler h= PropertyChanged;
            if (h != null)
                h(this, new PropertyChangedEventArgs(nameProp));
 
        }
 
    }
}
namespace WpfComboChoix.ViewModel
{
    public class EtablissementVM:BaseVM 
    {
        public EtablissementVM()
        { }
        public EtablissementVM(Etablissement petb)
            : this()
        {
            _etablissement = petb;
        }
        private Etablissement _etablissement;
        public Etablissement Etablissement
        {
            get { return _etablissement; }
            set 
            {
                _etablissement = value;
                Notify("Etablissement");
            }
        }
 
        public string EtbName
        {
            get { return Etablissement.EtbName; }
            set
            {
                Etablissement.EtbName = value;
                Notify("EtbName");
            }
        }
        public int EtbID
        {
            get { return Etablissement.EtbID; }
            set
            {
                Etablissement.EtbID = value;
                Notify("EtbID");
            }
        }
    }
}
namespace WpfComboChoix.ViewModel
{
    public class ServiceVM:BaseVM 
    {
        public ServiceVM()
        { }
        public ServiceVM(Service psvc)
            : this()
        {
            _service = psvc;
        }
        private Service _service;
        public Service Service
        {
            get { return _service; }
            set 
            { 
               _service = value;
               Notify("Service");
            }
        }
 
        public string SvcName
        {
            get { return Service.SvcName; }
            set
            {
                Service.SvcName = value;
                Notify("SvcName");
            }
        }
        public int SvcID
        {
            get { return Service.SvcID; }
            set
            {
                Service.SvcID = value;
                Notify("SvcID");
            }
        }
    }
}
 
 
namespace WpfComboChoix.ViewModel
{
    public class SectionVM:BaseVM 
    {
        public SectionVM()
        { }
        public SectionVM(Section psct)
            : this()
        {
            _section = psct;
        }
        private Section _section;
        public Section Section
        {
            get { return _section; }
            set 
            { 
               _section = value;
               Notify("Section");
            }
        }
 
        public string SctName
        {
            get { return Section.SctName; }
            set
            {
                Section.SctName = value;
                Notify("SctName");
            }
        }
        public int SctID
        {
            get { return Section.SctID; }
            set
            {
                Section.SctID = value;
                Notify("SctID");
            }
        }
    }
}
 
//LE MORCEAU CHOIX MainVM 
namespace WpfComboChoix.ViewModel
{
    public class MainVM:BaseVM
    {
        private DataService _dataService =new DataService();
        public MainVM()
        {
            _etablissements =
                new ObservableCollection<EtablissementVM>();
            _services =
                new ObservableCollection<ServiceVM>();
            _sections = 
                new ObservableCollection<SectionVM>();
 
                _listChoix = new ObservableCollection<string>();
            LoadAlls();
        }
        private ObservableCollection<EtablissementVM> _etablissements;
        public ObservableCollection<EtablissementVM> Etablissements
        {
            get { return _etablissements; }
            set
            {
                _etablissements = value;
                Notify("Etablissements");
            }
        }
        private ObservableCollection<ServiceVM> _services;
        public ObservableCollection<ServiceVM> Services
        {
            get { return _services; }
            set
            {
                _services = value;
                Notify("Services");
            }
        }
        private ObservableCollection<SectionVM> _sections;
        public ObservableCollection<SectionVM> Sections
        {
            get { return _sections; }
            set
            {
                _sections = value;
                Notify("Sections");
            }
        }
        private ObservableCollection<string> _listChoix;
        public ObservableCollection<string> ListChoix
        {
            get
            {
                return _listChoix;
            }
            set
            {
                if (value != _listChoix)
                {
                    _listChoix = value;
                    Notify("ListChoix");
                }
            }
        }
        private string _selectedChoice =string.Empty ;
        public string SelectedChoice
        {
            get
            {
                return _selectedChoice;
            }
            set
            {
                if (value != _selectedChoice)
                {
                    _selectedChoice = value;
                    Notify("SelectedChoice");
                }
            }
        }
        private void LoadAlls()
        {
            foreach (var item in _dataService.GetEtablissements())
            {
                EtablissementVM etbVM = new EtablissementVM(item);
                _etablissements.Add(etbVM);
            }
            foreach (var item in _dataService.GetServices())
            {
                ServiceVM svcVM = new ServiceVM(item);
                _services.Add(svcVM);
            }
            foreach (var item in _dataService.GetSections())
            {
                SectionVM sctVM = new SectionVM(item);
                _sections.Add(sctVM);
            } 
            _listChoix.Add("TypeEtablissement");
            _listChoix.Add("TypeService");
            _listChoix.Add("TypeSection");
 
        }
 
 
    }
}

& le code xaml "epais lui aussi" du Form User :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
<Window x:Class="WpfComboChoix.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:vm="clr-namespace:WpfComboChoix.ViewModel"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <vm:MainVM></vm:MainVM>
    </Window.DataContext>
    <Window.Resources>
        <DataTemplate x:Key="EtbTemplate1" 
                      DataType="{x:Type vm:EtablissementVM}">
            <StackPanel Orientation="Horizontal" >
                <TextBlock Text="{Binding EtbName}"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="EtbTemplate2" DataType="{x:Type vm:EtablissementVM}">
            <StackPanel Orientation="Horizontal" >
                <TextBlock Text="{Binding EtbName}"/>
                <TextBlock Text="{Binding EtbID}"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="SvcTemplate1" DataType="{x:Type vm:ServiceVM}">
            <StackPanel Orientation="Horizontal" >
                <TextBlock Text="{Binding SvcName}"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="SvcTemplate2" DataType="{x:Type vm:ServiceVM}">
            <StackPanel Orientation="Horizontal" >
                <TextBlock Text="{Binding SvcName}"/>
                <TextBlock Text="{Binding SvcID}"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="SctTemplate1" DataType="{x:Type vm:SectionVM}">
            <StackPanel Orientation="Horizontal" >
                <TextBlock Text="{Binding SctName}"/>
            </StackPanel>
        </DataTemplate>
        <DataTemplate x:Key="SctTemplate2" DataType="{x:Type vm:SectionVM}">
            <StackPanel Orientation="Horizontal" >
                <TextBlock Text="{Binding SctName}"/>
                <TextBlock Text="{Binding SctID}"/>
            </StackPanel>
        </DataTemplate>
    </Window.Resources><Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
 
        <ComboBox 
            Grid.Column="0"
            x:Name="cboChoix"
                  SelectedIndex="0"
                  SelectedItem="{Binding SelectedChoice}"
                  ItemsSource="{Binding ListChoix}">
 
        </ComboBox>
        <ComboBox 
            Grid.Column="1"
            x:Name="cboListe">
            <ComboBox.Style>
                <Style  TargetType="ComboBox">
                <Style.Triggers>
                        <DataTrigger Binding="{Binding SelectedChoice}" Value="TypeEtablissement">
                            <Setter Property="ItemsSource" Value="{Binding Etablissements}" />
                            <Setter Property="ItemTemplate"  Value="{StaticResource  EtbTemplate1}" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding SelectedChoice}" Value="TypeService">
                            <Setter Property="ItemsSource" Value="{Binding Services}" />
                            <Setter Property="ItemTemplate"  Value="{StaticResource SvcTemplate1}" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding SelectedChoice}" Value="TypeSection">
                            <Setter Property="ItemsSource" Value="{Binding Sections}" />
                            <Setter Property="ItemTemplate"  Value="{StaticResource SctTemplate1}" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ComboBox.Style>
 
        </ComboBox>
        <ListBox
            Grid.Column="2"
            x:Name="lbChoix">
            <ListBox.Style>
                <Style  TargetType="ListBox">
                    <Setter Property="ItemsSource" Value="{Binding TypeEtablissements}" />
                    <Setter Property="ItemTemplate"  Value="{Binding EtbTemplate2}" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding SelectedChoice}" Value="TypeEtablissement">
                            <Setter Property="ItemsSource" Value="{Binding Etablissements}" />
                            <Setter Property="ItemTemplate"  Value="{StaticResource EtbTemplate2}" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding SelectedChoice}" Value="TypeService">
                            <Setter Property="ItemsSource" Value="{Binding Services}" />
                            <Setter Property="ItemTemplate"  Value="{StaticResource SvcTemplate2}" />
                        </DataTrigger>
                        <DataTrigger Binding="{Binding SelectedChoice}" Value="TypeSection">
                            <Setter Property="ItemsSource" Value="{Binding Sections}" />
                            <Setter Property="ItemTemplate"  Value="{StaticResource SctTemplate2}" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ListBox.Style>
        </ListBox>
    </Grid>
</Window>

Pas de code behind...
bon code...

**Geff's** · 25/04/2019, 15h59

Wow.

Je n'avais pas vu votre reponse car c'était arrivé dans les indésirables, je m'excuse du délai.

Pendant ce temps j'ai continué à chercher, j'étais arrivé à ce résultat :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
 
<ComboBox Name="cmbListeChoix" Width="165" Height="25" Margin="25,5,10,10"
          ItemsSource="{Binding ChoicesList}"
          SelectedValue="{Binding SelectedChoiceList}">
</ComboBox>
<ComboBox Name="cmbResultatChoix" Width="165" Height="25" Margin="10,5,25,10" ItemsSource="{Binding ResultList}">

Pour le ViewModel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
 
 
private string _SelectedChoiceList;
public string SelectedChoiceList
{
    get
    {
        return _SelectedChoiceList;
    }
    set
    {
        if (value != _SelectedChoiceList)
        {
            _SelectedChoiceList = value;
 
            RaisePropertyChanged(nameof(SelectedChoiceList));
 
            ResultList = new ObservableCollection<string>();
 
            if (value == "Etablissement")
            {
                _ResultList.Add("Etablissement1");
                _ResultList.Add("Etablissement2");
 
            }
            else if (value == "Service")
            {
                _ResultList.Add("Service1");
                _ResultList.Add("Service2");
 
            }
            else
            {
                _ResultList.Add("Section1");
                _ResultList.Add("Section2");
            }
 
        }
    }
}
 
private ObservableCollection<string> _ResultList;
public ObservableCollection<string> ResultList
{
    get
    {
        return _ResultList;
    }
    set
    {
        if (value != _ResultList)
        {
            _ResultList = value;
            RaisePropertyChanged(nameof(ResultList));
 
        }
    }
}

Je travaillais avec une liste de string, ce qui fonctionne, mais maintenant je dois l'adapter avec des obervables collections, et en effet adapter datatriggers et templates...
Votre code à l'air parfait, je dois essayer de l'adapter pour le projet sur lequel je travaille mais ce n'est pas gagné, je vais tout de même essayer;

Merci beaucoup de votre réponse

Debutant en MVVM, questionnement combobox [MVVM]

Windows Presentation Foundation

Discussions similaires

Partager

Partager