Gérer une Lisbox sous MVVM et C#

**lguez** · 24/05/2019, 08h15

bonjour

J'ai un soucis avec la mis à jour de contrôles Textbox suite à un appuie sur un élément d'une listeBox.
J'ai donc créer un test listeBox mais lorsque je clique sur un élément de ma listbox, je n'arrive pas à mettre à jour les textbox qui se trouve dans la seconde partie de ma fenêtre.
(pour info: je connais le C++, le VB, ... et j'essaie de me former au C# et à l'architecture MVVM avec Visual Studio (dur dur

)

ci dessous mes codes:

fichier MainWindow.xaml

Code XAML :

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
<Window x:Class="TestListBoxWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:TestListBoxWPF"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.DataContext>
        <local:FicheClientsViewModel></local:FicheClientsViewModel>
    </Window.DataContext>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>  
     <!-- Définition de la Listbox dans la 1ere colonne-->
        <ListBox x:Name="listeDeFichesClients"  SelectionMode="Single" SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                     Grid.Column="0" 
                     BorderBrush="Black" BorderThickness="2"                      
                 ItemsSource = "{Binding Fiches}"
                     >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" >
                        <Label Content="- "></Label>
                        <Label Content="{Binding Nom}"></Label>
                        <Label Content="{Binding Prenom}"></Label>
                    </StackPanel>
 
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
 
        <Grid Grid.Column="1">
            <Grid.Resources>
                <Style TargetType="Label">
                    <Setter Property="HorizontalAlignment" Value="Left">
                    </Setter>
                    <Setter Property="VerticalAlignment" Value="Center">
                    </Setter>
                </Style>
                <Style TargetType="TextBox">
                    <Setter Property="HorizontalAlignment" Value="Stretch">
                    </Setter>
                    <Setter Property="VerticalAlignment" Value="Center">
                    </Setter>
                    <Setter Property="TextAlignment" Value="Center">
                    </Setter>
                </Style>
            </Grid.Resources>
 
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <!-- Définition des Labels de la 2eme colonne -->
            <Label Grid.Column="0" Grid.Row="0">Nom:</Label>
            <Label Grid.Column="0" Grid.Row="1">Prénom:</Label>
            <Label Grid.Column="0" Grid.Row="2">Genre:</Label>
            <Label Grid.Column="0" Grid.Row="3">Age:</Label>
            <Label Grid.Column="0" Grid.Row="4">Profession:</Label>
 
            <!-- Définition des TextBox de la 2eme colonne -->
            <TextBox Name="UserName" Grid.Row="0" Grid.Column="1" Text="{Binding FicheSelectionnee.Nom, Mode=TwoWay}"></TextBox>
            <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding FicheSelectionnee.Prenom, Mode=TwoWay}"></TextBox>
            <TextBox Grid.Row="2" Grid.Column="1" Text="{Binding FicheSelectionnee.Age, Mode=TwoWay}"></TextBox>
            <TextBox Grid.Row="3" Grid.Column="1" Text="{Binding FicheSelectionnee.Genre, Mode=TwoWay}"></TextBox>
            <TextBox Grid.Row="4" Grid.Column="1" Text="{Binding FicheSelectionnee.Profession, Mode=TwoWay}"></TextBox>
        </Grid>
    </Grid>
</Window>

fichier FicheClientViewModel.cs

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
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
 
namespace TestListBoxWPF
{
    class FicheClientsViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public void NotifyPropertyChanged([CallerMemberName] string str = "")
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(str));
            }
        }
 
        private ObservableCollection<Utilisateur> fiches;
 
        public ObservableCollection<Utilisateur> Fiches
        {
            get => fiches;
            set
            {
                if (value != fiches)
                {
                    fiches = value;
                    NotifyPropertyChanged();
                }
            }
        }
        private Utilisateur ficheSelectionnee;
        public Utilisateur FicheSelectionnee
        {
            get => ficheSelectionnee;
            set
            {
                if (value != ficheSelectionnee)
                {
                    ficheSelectionnee = value;
                    NotifyPropertyChanged();
                }
            }
        }
        public FicheClientsViewModel()
        {
            Fiches = new ObservableCollection<Utilisateur>();
 
            FicheSelectionnee = new Utilisateur()
            {
                Nom = "Lepuis",
                Prenom = "Pierre",
                Age = 32,
                Genre = "Masculin",
                Profession = "Acteur",
            };
            fiches.Add(FicheSelectionnee);
            FicheSelectionnee = new Utilisateur()
            {
                Nom = "Golum",
                Prenom = "Isabelle",
                Age = 67,
                Genre = "Féminin",
                Profession = "Serveuse",
            };
            fiches.Add(FicheSelectionnee);
        }
        private Utilisateur selectedItem;
        public Utilisateur SelectedItem
        {
            get
            {
                return selectedItem;
            }
            set
            {
                selectedItem = value;
                NotifyPropertyChanged();
                // implementation for all the other list items...
            }
        }
     }
}

Fichier Utilisateur.cs

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
using System.ComponentModel;
 
namespace TestListBoxWPF
{
    internal class Utilisateur : INotifyPropertyChanged
    {
        private string nom;
        private string prenom;
        private int age;
        private string genre;
        private string profession;
 
        public event PropertyChangedEventHandler PropertyChanged;
 
        public string Nom
        {
            get => nom;
            set
            {
                if (value != nom)
                {
                    nom = value;
                    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Nom"));
                }
            }
        }
        public string Prenom
        {
            get => prenom;
            set
            {
                if (value != prenom)
                {
                    prenom = value;
                    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Prenom"));
                }
            }
        }
        public int Age
        {
            get => age;
            set
            {
                if (value != age)
                {
                    age = value;
                    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Age"));
                }
            }
        }
        public string Genre
        {
            get => genre;
            set
            {
                if (value != genre)
                {
                    genre = value;
                    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Genre"));
                }
            }
        }
        public string Profession
        {
            get => profession;
            set
            {
                if (value != profession)
                {
                    profession = value;
                    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Profession"));
                }
            }
        }
    }
}

Si quelqu'un pouvait m'aider
En pièce joint j'ai mis la solution visual studio que j'ai créée

Cordialement

Laurent

**WDKyle** · 24/05/2019, 13h54

Bonjour,

Essai de spécifier l'UpdateSourceTrigger dans ton Binding :

Code XAML :

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

<ListBox x:Name="listeDeFichesClients"  SelectionMode="Single" SelectedItem="{Binding SelectedItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"

**lguez** · 24/05/2019, 18h41

J'ai modifié la ligne mais cela n'a rien changé, dois faire quelquechose dans le fichier FicheClientViewModel.cs ?

comme je l'ai dis je suis vraiment débutant dans ce type de programmation et j'ai encore beaucoup de mal à comprendre les liens qu'il y a entre le fichier xaml et les fichier cs

**Noxen** · 25/05/2019, 16h04

Je pense que pour activer le [CallMemberName] il faut mettre le paramètre par défaut à null et non pas à une chaine vide, qui est une valeur en soit, même si elle n'a pas de sens dans ce contexte :

Code :

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

public void NotifyPropertyChanged([CallerMemberName] string str = "")

à remplacer par

Code :

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

public void NotifyPropertyChanged([CallerMemberName] string str = null)

Par ailleurs, tu ne respecte pas l'idiome d'appel des événements dans ton méthode NotifyPropertyChanged (à savoir passer par un objet intermédiaire ou utiliser la nouvelle version avec ?.Invoke()).

Je remarque aussi que tu as une propriété FicheSelectionnee et une autre propriété SelectedItem qui semble avoir ma même fonction, est-ce un artefact de construction résiduel ?

**lguez** · 25/05/2019, 16h53

J'ai fait les modifs que tu m'as mis :

modification de la procédure NotifyPropertyChanged par:

Code :

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

1
2
3
4
5
 
        public void NotifyPropertyChanged([CallerMemberName] string str = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(str));
        }

par contre le selectItem a été ajouté car je cherche sur internet comment je pourrais gérer cette listBox, donc je teste certains codes que je trouve et celui -ci je l'avais rajouté mais cela n'avais rien changé

en fait ce qui me pose problème est :

ma fenêtre est découpée en 2 à gauche j'ai une listebox avec les informations nom et prenom d'une liste et la partie droite contient des textbox correspondant aux informations de de la personne sélectionnée dans la listebox

le problème: quand je sélectionne une autre personne de la listbox les informations des textbox ne changent pas ....

je n’arrive toujours pas à comprendre ce qui est mal fait

et surtout comment faire pour que cela fonctionne.

**Noxen** · 25/05/2019, 19h06

Tu as bindé le SelectedItem de la ListBox sur le SelectedItem du viewmodel et test TextBox sur les propriétés de la FicheSelectionnee du viewmodel. Il faut que tu n'utilises que l'une des deux propriétés.

**lguez** · 25/05/2019, 19h15

Ok un grand merci

j'ai remplacé le binding de la listbox par ficheselectionné et tout est maintenant ok

Code :

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

1
2
        <ListBox x:Name="listeDeFichesClients"  SelectionMode="Single" SelectedItem="{Binding FicheSelectionnee, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"

**Noxen** · 25/05/2019, 21h45

Tant mieux si ça marche. Je te conseille de voir aussi avec la bibliothèque MVVMLight de Laurent Bugnon, elle facilite bien la mise en place de MVVM avec WPF. J'avais également pris le temps de faire un petit exemple fonctionnel, je le mets quand même au cas où:

Windows.xaml

Code xaml :

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
<Window x:Class="CatalogExpress.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:CatalogExpress"
        xmlns:viewmodel="clr-namespace:CatalogExpress.ViewModel"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <DockPanel>
        <Border DockPanel.Dock="Top">
            <TextBlock TextAlignment="Center" FontSize="24" FontWeight="Bold">Catalogue</TextBlock>
        </Border>
        <Border DockPanel.Dock="Bottom"/>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
 
            <TextBlock TextAlignment="Center" FontSize="18" FontWeight="Bold">Liste des produits</TextBlock>
            <ListBox Grid.Row="1" ItemsSource="{Binding Products}" SelectedItem="{Binding SelectedProduct}">
                <ListBox.ItemTemplate>
                    <DataTemplate DataType="viewmodel:Product">
                        <Border>
                            <TextBlock Text="{Binding Name}"/>
                        </Border>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
            <TextBlock Grid.Column="2" TextAlignment="Center" FontSize="18" FontWeight="Bold">Détails du produit</TextBlock>
            <StackPanel Grid.Column="2"  Grid.Row="1">
                <TextBlock FontWeight="Bold">Name</TextBlock>
                <TextBox Text="{Binding SelectedProduct.Name, UpdateSourceTrigger=PropertyChanged}"/>
                <TextBlock FontWeight="Bold">Description</TextBlock>
                <TextBox Text="{Binding SelectedProduct.Description, UpdateSourceTrigger=PropertyChanged}"/>
            </StackPanel>
        </Grid>
    </DockPanel>
</Window>

Windows.xaml.cs

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
using System.Windows;
 
namespace CatalogExpress
{
    /// <summary>
    /// Logique d'interaction pour MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
 
            DataContext = new ViewModel.MainViewModel();
        }
    }
}

ViewModel/MainViewModel.cs

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
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
 
namespace CatalogExpress.ViewModel
{
    public class MainViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        private void RaisePropertyChanged([CallerMemberName]string propertyName = null) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
 
        public ICollection<ProductViewModel> Products => _products;
        private ObservableCollection<ProductViewModel> _products = new ObservableCollection<ProductViewModel>();
 
        public ProductViewModel SelectedProduct
        {
            get => _selectedProduct;
            set
            {
                if (value == _selectedProduct) return;
                _selectedProduct = value;
                RaisePropertyChanged();
            }
        }
        private ProductViewModel _selectedProduct = null;
 
        public MainViewModel()
        {
            var rand = new Random(DateTime.Now.Millisecond);
            for (int i = 1; i < 11; ++i)
            {
                var product = new ProductViewModel
                {
                    Id = i,
                    Name = $"Product{i}",
                    Description = $"Description of product {i}",
                    Price = rand.Next(100, 30000) / 100.0
                };
                _products.Add(product);
            }
        }
    }
}

ViewModel/ProductViewModel.cs

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
using System.ComponentModel;
using System.Runtime.CompilerServices;
 
namespace CatalogExpress.ViewModel
{
    public class ProductViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        private void RaisePropertyChanged([CallerMemberName]string propertyName = null) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
 
        public int Id { get => _id; set { if (value == _id) return; _id = value; RaisePropertyChanged(); } }
        private int _id;
        public string Name { get => _name; set { if (value == _name) return; _name = value; RaisePropertyChanged(); } }
        private string _name;
        public string Description { get => _description; set { if (value == _description) return; _description = value; RaisePropertyChanged(); } }
        private string _description;
        public double Price { get => _price; set { if (value == _price) return; _price = value; RaisePropertyChanged(); } }
        private double _price;
    }
}

**lguez** · 27/05/2019, 19h52

merci pour la réponse, je vais étudier ce que tu m'as envoyé.

y-a-t-il une bonne documentation ou un bon livre qui explique bien pas à pas avec de nombreux exemple le MVVM, car j'ai encore du mal avec toutes ces notions

**Noxen** · 28/05/2019, 08h47

Rien que sur ce site tu as plusieurs tutoriels sur le sujet ; "google => tutoriel mvvm developpez.com" et tu auras déjà une bonne introduction. N'hésite pas ensuite à revenir sur le forum poser des questions si tu as besoin de précisions.

Gérer une Lisbox sous MVVM et C#

C#

Discussions similaires

Partager

Partager