Discussion :

[zeratec]

Bonjour à tous,

Je travaille sur une application WPF, en respectant le design pattern MVVM.

En temps normal, j'arrive sans problème à récupérer les "Content" des boutons (valeur inscrite dans le bouton) grâce au binding twoWay.

Seulement dans mon projet j'ai créé une grille de bouton au travers d'un datatemplate.
J'arrive à lancer des commandes à partir de cette grille de bouton, cependant il y a une donnée que je n'arrive pas a récupérer c'est la valeur du "Content" du bouton dans ce cas.
(Le content du bouton correspond à la propriété "Text" du TextBlock encapsulé)

Auriez-vous une idée sur laquelle m'aiguiller ?

Voici le code XAML de la Vue(contenant la grille) :

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
<Grid Background="{StaticResource ResourceKey=BackgroundColor}">
        <ItemsControl Grid.Row="0" Grid.Column="0" ItemsSource="{Binding ReworkQuantityListSource}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="{Binding NumberColumn}"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
 
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
 
                        <Button Margin="10,10,10,10" Command="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=DataContext.WriteCommand}">
                            <TextBlock x:Name="TextButton" Grid.Row="1" Text="{Binding ReworkName, Mode=TwoWay}"/>
                        </Button>
 
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>

Voici le code du Vue-Model :

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
public class SaisieViewModel : ObservableObject
    {
        public ICommand WriteCommand { get; set; }
 
        public ObservableCollection<ReworkQuantityModel> ReworkQuantityListSource { get; set; }
 
        public string NumberColumn { get; set; }
 
        public SaisieViewModel()
        {
            WriteCommand = new RelayCommand(Do_WriteData);
 
            ReworkQuantityListSource = new ObservableCollection<ReworkQuantityModel>();
 
            ReworkQuantityModel _typeRework = new ReworkQuantityModel();
            foreach (ReworkQuantityModel data in _typeRework.ListTypeRework())
            {
                ReworkQuantityListSource.Add(data);
            }
 
            NumberColumn = Math.Ceiling(Math.Sqrt(ReworkQuantityListSource.Count())).ToString();
        }
 
        public void Do_WriteData(object obj)
        {
            MessageBox.Show("test");
        }
    }

Si dessous également le code du modèle de données :

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
public class ReworkQuantityModel : ObservableObject
    {
        List<ReworkQuantityModel> _reworkList;
 
        public string ReworkName {get; set;}
 
        public ReworkQuantityModel()
        {
        }
 
        public List<ReworkQuantityModel> ListTypeRework()
        {
            _reworkList = new List<ReworkQuantityModel>();
 
            //TODO : Création fichier .xml/.txt (à voir) pour stocker les données
            _reworkList.Add(new ReworkQuantityModel() { ReworkName = "Retouche 1" });
            _reworkList.Add(new ReworkQuantityModel() { ReworkName = "Retouche 2" });
            _reworkList.Add(new ReworkQuantityModel() { ReworkName = "Retouche 3" });
            _reworkList.Add(new ReworkQuantityModel() { ReworkName = "Retouche 4" });
            _reworkList.Add(new ReworkQuantityModel() { ReworkName = "Retouche 5" });
 
            return _reworkList;
        }
    }

Concernant la commande, j'utilise la classe RelayCommand qui n'est plus à présenter.

[Noxen]

Je trouve ton view model un peu farfelu : un ReworkQuantityModel avec une liste de ReworkQuantityModel ?

Ensuite je pense que tu te complique un peu la tâche en allant chercher une commande à un autre endroit de la vue, alors que tu pourrais avoir directement une commande dédiée dans les items de ta liste. Et puis je ne vois pas trop l'intérêt de ta Grid dans l'item template si tu ne met qu'un bouton dedans.

[zeratec]

Je trouve ton view model un peu farfelu : un ReworkQuantityModel avec une liste de ReworkQuantityModel

Vous avez totalement raison. Je souhaitais récupérer via la class ReworkQuantityModel.cs mes données stockées dans un fichier .xml.
Je pourrai toujours le faire à l'aide de fonction retournant les données récupérées.

Et puis je ne vois pas trop l'intérêt de ta Grid dans l'item template si tu ne met qu'un bouton dedans

C'est sûr qu'un seul bouton n'a pas d'intérêt
Il s'agit d'une grille sur laquelle on vient saisir (en appuyant que le bouton) la retouche effectuée.
Un screen vaut mille mots :

Si 5 boutons :


Si 18 boutons :


Suite à vos indications, j'ai modifié mes classes de la manière suivante :

Code :

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

1
2
3
4
public class ReworkQuantityModel : ObservableObject
    {
        public string ReworkName {get; set;}
    }

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
public class SaisieViewModel : ObservableObject
    {
        public ICommand WriteCommand { get; set; }
 
        public ObservableCollection<ReworkQuantityModel> ReworkQuantityListSource { get; set; }
 
        public string NumberColumn { get; set; }
 
        public SaisieViewModel()
        {
            WriteCommand = new RelayCommand(Do_WriteData);
 
            ReworkQuantityListSource = new ObservableCollection<ReworkQuantityModel>();
 
            for (int i = 0; i < 5; i++)
            {
                ReworkQuantityListSource.Add(new ReworkQuantityModel() { ReworkName = "Retouche " + i });
            }
 
            NumberColumn = Math.Ceiling(Math.Sqrt(ReworkQuantityListSource.Count())).ToString();
        }
 
        public void Do_WriteData(object obj)
        {
            MessageBox.Show("Nom : ");
        }
    }

tu pourrais avoir directement une commande dédiée dans les items de ta liste

Cependant, je ne comprends pas bien votre idée. Pourriez-vous m'expliquer plus l'implémentation de cette idée ?

PS : Le code XAML n'a pas changé

[MABROUKI]

bonjour
En tenant compte de la remarque de Noxen sur la mise en conformité avec le pattern MVVM de tes 2 class Data et VM ,ton code revu devraient ressembler à ceci:

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
//dossier Model pour les data
namespace WpfItemGrid.Model
{
    class QuantityModel
    {
 
        public string Name {get; set;}
 
        public QuantityModel()
        {
        }
 
 
    }
}
 
//dossier ViewModel
namespace WpfItemGrid.ViewModel
{
    class ModelBase:INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public void Notify(string propName)
        {
            PropertyChangedEventHandler h= PropertyChanged;
            if (h != null)
                h(this, new PropertyChangedEventArgs(propName));
        }
    }
}
 
class SaisieVM:ModelBase
    { 
        public ICommand WriteCommand { get; set; }
        private ObservableCollection<QuantityModel> reworkQuantityListSource;
        public ObservableCollection<QuantityModel> ReworkQuantityListSource 
        {
            get { return reworkQuantityListSource; }
            set {
                reworkQuantityListSource = value;
                Notify("ReworkQuantityListSource");
            }
 
        }
        private string numberColumn;
        public string NumberColumn
        {
            get { { return numberColumn; } }
            set
            {
                numberColumn = value;
                Notify("NumberColumn");
            }
        }
 
        public SaisieVM()
        {
            WriteCommand = new MyICommand<object >(Do_WriteData);
 
            reworkQuantityListSource = new ObservableCollection<QuantityModel>(GetData());
 
            NumberColumn = Math.Ceiling(Math.Sqrt(reworkQuantityListSource.Count)).ToString();
        }
 
        public void Do_WriteData(object obj)
        {
            Console.WriteLine("test");
        }
 
        public List<QuantityModel> GetData()
        {
            List<QuantityModel>  l = new List<QuantityModel>();
 
            //TODO : Création fichier .xml/.txt (à voir) pour stocker les données
            l.Add(new QuantityModel() { Name = "Retouche 1" });
            l.Add(new QuantityModel() { Name = "Retouche 2" });
            l.Add(new QuantityModel() { Name = "Retouche 3" });
            l.Add(new QuantityModel() { Name = "Retouche 4" });
            l.Add(new QuantityModel() { Name = "Retouche 5" });
 
            return l;
        }
 
    }

code du class RelayCommand :

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
namespace WpfItemGrid.ViewModel
{
    public class MyICommand<T> : ICommand 
    { 
 
      Action<T> _TargetExecuteMethod; 
      Func<T, bool> _TargetCanExecuteMethod;
 
      public MyICommand(Action<T> executeMethod) {
         _TargetExecuteMethod = executeMethod; 
      }
 
      public MyICommand(Action<T> executeMethod, Func<T, bool> canExecuteMethod) {
         _TargetExecuteMethod = executeMethod;
         _TargetCanExecuteMethod = canExecuteMethod; 
      }
 
      public void RaiseCanExecuteChanged() {
         CanExecuteChanged(this, EventArgs.Empty); 
      } 
 
      #region ICommand Members
 
      bool ICommand.CanExecute(object parameter) { 
 
         if (_TargetCanExecuteMethod != null) { 
            T tparm = (T)parameter; 
            return _TargetCanExecuteMethod(tparm); 
         } 
 
         if (_TargetExecuteMethod != null) { 
            return true; 
         } 
 
         return false; 
      }
 
      // Beware - should use weak references if command instance lifetime is
      //longer than lifetime of UI objects that get hooked up to command 
 
      // Prism commands solve this in their implementation 
 
      public event EventHandler CanExecuteChanged = delegate { };
 
      void ICommand.Execute(object parameter) 
      { 
         if (_TargetExecuteMethod != null) 
         {
            _TargetExecuteMethod((T)parameter); 
         } 
      } 
 
      #endregion 
   }

Moyennant ces corrections le code xaml ci-apres fourni par tes soins m'affiche perfectcly le content des buttons :

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
<Window x:Class="WpfItemGrid.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfItemGrid"
        xmlns:vm="clr-namespace:WpfItemGrid.ViewModel"
        Title="MainWindow" Height="350" Width="525"
        >
   <!--tester qvec ceci-->
    <Window.DataContext>
        <vm:SaisieVM/>
 
    </Window.DataContext>
            <Grid Background="LightGray">
        <ItemsControl Grid.Row="0" Grid.Column="0" 
                      ItemsSource="{Binding ReworkQuantityListSource}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="{Binding NumberColumn}"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
 
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
 
                        <Button Margin="10,10,10,10" Command="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=DataContext.WriteCommand}">
                            <!--virer le grid.row=1-->
                            <TextBlock x:Name="TextButton"  Text="{Binding Name, Mode=TwoWay}"/>
                        </Button>
 
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Window>

Tu doit donc avoir autre chose ailleurs qui cloche ,peut être aussi la frappe "rageuse" au clavier .
bon code...

[zeratec]

Merci MABROUKI pour tes explications
Je comprends mieux l'utilisation du pattern.

J'arrive effectivement à afficher des données dans le content des boutons.

La fonction suivante est celle qui est lancée lors du clic sur un bouton.

Code :

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

1
2
3
4
5
//Ceci fonctionne
public void Do_WriteData(object obj)
        {
            Console.WriteLine("test");
        }

Comment peut-on récupérer la donnée "Text" du textblock, ou "Content" du bouton du XAML vers le ViewModel ?
"ReworkName" n'étant pas défini dans la Vue-Modèle, il n'est pas possible de directement y avoir accès.

Code :

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

1
2
3
4
5
 
public void Do_WriteData(object obj)
        {
            Console.WriteLine(_textTextBlock);
        }

A cette heure, je n'ai pas encore trouvé de solution pour atteindre cette variable.

Sauriez-vous m'aiguiller ?



Cela n'a rien à voir avec le sujet, mais en suivant ce pattern, avec la méthode "GetData" qui récupèrera les infos à travers un fichier .xml, ce développement respecte-t-il toujours le pattern MVVM ? Car dans ce cas la VueModèle communiquera directement avec les données (bdd, fichier de stockage...).

[zeratec]

J'avance dans mes recherches et compréhension !

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
<Grid Background="{StaticResource ResourceKey=BackgroundColor}">
 
        <ItemsControl Grid.Row="0" Grid.Column="0" ItemsSource="{Binding ReworkQuantityListSource}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="{Binding NumberColumn}"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
 
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
 
                        <Button Margin="10,10,10,10" Command="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=DataContext.WriteCommand}"> <!--{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=DataContext.WriteCommand}-->
                            <TextBlock x:Name="TextButton" Text="{Binding ReworkName, Mode=TwoWay}"/>
                        </Button>
 
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>

Le "button" se situe dans un DataTemplate. Le contexte du "button" est donc un "ReworkQuantityListSource" et non la vue-modèle.
C'est pour ça que l'on bind un RelativeSource sur la Command du bouton afin d'aller chercher la commande à un endroit précis de la vue-modèle (RelativeSource AncestorType permettant de sortir du contexte actuel). (Corrigez moi si je me trompe )

En suivant cette logique, le "Text" du TextBlock (qui correspond au Content du bouton dans la manière ou il est codé dans le xaml) est lui bindé sur une propriété du Modèle et non de la vue-modèle. C'est pour cela qu'on y a accès (ItemsSource="{Binding ReworkQuantityListSource}").

La difficulté est de récupérer ce "Text" du TextBlock dans la Vue-Modèle... Je continue à chercher