Récupération "Content" button dans ViewModel à travers DataTemplate

Version imprimable

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:

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:

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:

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.

24/03/2020, 11h44
Noxen

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

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.

2 pièce(s) jointe(s)

Citation:

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.

Citation:

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 :
Pièce jointe 548794

Si 18 boutons :
Pièce jointe 548795

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

1 2 3 4 public class ReworkQuantityModel : ObservableObject { public string ReworkName {get; set;} }
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 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 : "); } }
Citation:

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é

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:

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:

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:

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...

24/03/2020, 17h04
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:

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:

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...).

J'avance dans mes recherches et compréhension !

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
<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 ;)

Citation:

Envoyé par zeratec

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 ;)

La 1 ère difficulté est due au fait que tu as choisi un ItemsControl qui ne dispose pas de la DP SelectedItem contrairement à un ListBox ,autrement dit avec un ListBox le click sur un bouton équivaut à un SelectedItem auquel il suffit d associer un SelectedQuantityModel(de type QuantityModel ) dans le VM.
Et hop ,l’accès a la prop CLR SelectedQuantityModel.Name dans ta commande WriteCommand via WriteData est facile.

Si on garde un ItemsControl il faut binder directement la prop CLR Name du QuantityModel au Content du Bouton (virer le textblock )
Le paramètre de ta commande sera le Content du Button.
A des fins de démonstration uniquement j ai rajoute une prop CLR dans le ViewModel
désignée par PrecieuxContent qui est M.A.J par le paramètre transmis de commande.

code revu du VM:

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
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
using System;
using System.Windows.Input;
using System.Collections.ObjectModel;
using System.Collections.Generic;
using WpfItemGrid.Model;
 
 
namespace WpfItemGrid.ViewModel
{
    class SaisieVM:ModelBase
    {
 
        public SaisieVM()
        {
            WriteCommand = new MyICommand<string>(WriteData);
 
            reworkQuantityListSource = new ObservableCollection<QuantityModel>(GetData());
 
            NumberColumn = Math.Ceiling(Math.Sqrt(reworkQuantityListSource.Count)).ToString();
        }
 
 
        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");
            }
        }
        //le precieux contenu (demonstration)
        private string precieuxContent=null ;
        public string PrecieuxContent
        {
            get { { return precieuxContent; } }
            set
            {
                precieuxContent = value;
                Notify("PrecieuxContent");
            }
        }
 
 
        // implentation command
        // parametre de type string bien entendu vu
        // la prop CLR Name est de type string
        public MyICommand<string> WriteCommand { get; set; }
 
        public void WriteData(string parameter)
        {
            Console.WriteLine("test");
            PrecieuxContent =parameter;
 
        }
 
        // code situe dans class Repositry  ou class qui a acces au data model
        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;
        }
 
    }
}

Un petit changement pour se conformer à tes voeux(dossier Views)
code du UserControl contenant ton ItemsControl:

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
<UserControl x:Class="WpfItemGrid.Views.ViewListQantityModel"
             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">
    <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" 
                                Content="{Binding Name}"
                                Command="{Binding RelativeSource={RelativeSource AncestorType=UserControl}, Path=DataContext.WriteCommand}"
                                CommandParameter="{Binding  RelativeSource={RelativeSource Mode=Self},Path=Content}">
                           <!--a virer sinon c est le TextBlock element UI qui sera transmis comme parametre ,ce qui est desastreux-->
                            <!--<TextBlock x:Name="TextButton" Grid.Row="1" Text="{Binding Name, Mode=TwoWay}"/>-->
                        </Button>
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</UserControl>

code behind du UserControl ,rien.

code xaml du form User :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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"
        xmlns:views="clr-namespace:WpfItemGrid.Views"
        Title="MainWindow" Height="350" Width="525"
        >
   <!--tester avec ceci-->
    <Window.DataContext>
        <vm:SaisieVM/>
 
    </Window.DataContext>
    <StackPanel >
        <TextBlock Text="{Binding PrecieuxContent}"/>
        <views:ViewListQantityModel/>
 
    </StackPanel>
</Window>

Quant au code d accès au DataModel il doit être déporté dans un class dit Repositry ou ''dépôt" qui lui peut lire un fichier xml ou une BD et remplir une prop List<QuantityModel>, sauvegarder cette List<QuantityModel> dans le fichier xml ou la BD....
bon code...
A doter d'une
bon code....

25/03/2020, 11h31
zeratec

Bonjour MABROUKI,

Merci pour ces réponses et explications.

;)
25/03/2020, 17h09
Noxen

J'y ai pensé après-coup, mais il est également possible préciser sur un bouton, en plus de la commande, un CommandParameter à passer à la méthode Execute. On aurait alors pu indiquer comme CommandParamter l'objet "templaté" par le DataTemplate.