Binding de RelayCommand sur Polygon dans un IntemsControl

Version imprimable

Bonjour à tous,

Je souhaite pouvoir lier une propriété de type RelayCommand aux Polygon générés par mon ItemsControl, ce que je ne parviens pas à faire.:aie:

Voici le xaml:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<ItemsControl DataContext="{Binding Source={StaticResource LocatorVM}, Path=Wm1 }" ItemsSource="{Binding ListPolygon}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas/>
                    </ItemsPanelTemplate>               
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
 
                            <Polygon Points="{Binding Coordinates}" Fill="Red" >
                                <i:Interaction.Triggers>
                                    <i:EventTrigger EventName="MouseLeftButtonDown">
                                        <cmd:EventToCommand Command="{Binding AddDefaultCmd}" />
                                    </i:EventTrigger>
                                </i:Interaction.Triggers>
                            </Polygon>
 
                    </DataTemplate>              
                </ItemsControl.ItemTemplate>
            </ItemsControl>

Quand je le fais sur un Button cela fonctionne parfaitement, il appel bien ma méthode!

Code:

1
2
 
<Button DataContext="{Binding Source={StaticResource LocatorVM}, Path=Wm1 }" Content="Add default" Command="{Binding AddDefaultCmd}"/>

Je crois que je ne m'y prend pas de la bonne façon.

Merci par avance pour vos éclaircissements.:ccool:

16/03/2011, 18h48
Invité

Salut,

Que veux-tu faire plus exactement ?
Tu veux lier un évènement ou une donnée de ton Polygon ?

Je souhaite lié une méthode à l'événement MouseLeftButtonDown et cela pour tous les Polygon générés par l'ItemsControle.

Voici ma propriété de type relayCommand et ma méthode

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
 
        private RelayCommand addDefaultCmd;
 
        public RelayCommand AddDefaultCmd
        {
            get
            {
                if (addDefaultCmd == null)
                {
                    addDefaultCmd = new RelayCommand(AddDefault);
                }
                return addDefaultCmd;
            }
            //set { addDefaultCmd = value; }
        }
 
 
        private void AddDefault()
        {
 
            this.listDefault.Add(new Default()
            {
                X = 50,
                Y = 50
            });
         }

Merci pour ton aide.:ccool:

16/03/2011, 18h58
Invité

Ta commande se trouve dans quelle classe ? dans le ViewModel de l'Item ou autre part (à la racine du ViewModel principal par exemple) ?
16/03/2011, 20h13
nasimpat7

Dans le ViewModel Wm1 instancié dans mon LocatorVM.
D'ailleurs au même niveau que la propriété ListPolygon liée à mon ItemsSource.
16/03/2011, 20h21
Invité

Utilises ceci en remplaçant par les valeurs adéquates pour AncestorType et AncestorLevel :

Code:

Command="{Binding DataContext.AddDefaultCmd, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type tu mets ici le type de l'élément qui contient le DataContext où est défini AddDefaultCmd}, AncestorLevel="tu mets ici le niveau en partant du bas"}"
17/03/2011, 10h18
chrisdot

Citation:

Envoyé par h2s84

Utilises ceci en remplaçant par les valeurs adéquates pour AncestorType et AncestorLevel

Je crois que cette syntaxe n'est dispo qu'en WPF... Me trompe-je ?
17/03/2011, 10h39
Invité

Tu as totalement raison.
J'ai pas fait attention à cela.

Silverlight 4 supporte que les modes Self et TemplatedParent mais pas FindAncestor donc impossible d'utiliser AncestorType et AncestorLevel.

Espérons qu'en Silverlight 5 cela soit possible :ccool:

Pour une solution de remplacement voir ici.

Sinon le plus simple ne serait-il pas de définir ta commande AddDefaultCmd dans le type de la classe définissant ton Wm1 ?

Merci pour ton aide.

Citation:

Envoyé par h2s84

Sinon le plus simple ne serait-il pas de définir ta commande AddDefaultCmd dans le type de la classe définissant ton Wm1 ?

C'est déjà le cas mais le problème est que le Binding de AddDefaultCmd ne se fait pas! (Il ne rentre pas dans le getter)

Alors que quand je fais le binding de cette command sur un button en dehors d'un ItemsControl, cela fonctionne parfaitement!

Je pense que le problème doit venir de ma synthaxe xaml!

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<ItemsControl DataContext="{Binding Source={StaticResource LocatorVM}, Path=Wm1 }" ItemsSource="{Binding ListPolygon}">
     <ItemsControl.ItemsPanel>
             <ItemsPanelTemplate>
                    <Canvas/>
              </ItemsPanelTemplate>               
      </ItemsControl.ItemsPanel>
      <ItemsControl.ItemTemplate>
               <DataTemplate>
 
                      <Polygon Points="{Binding Coordinates}" Fill="Red" >
                            <i:Interaction.Triggers>
                                 <i:EventTrigger EventName="MouseLeftButtonDown">
                                        <cmd:EventToCommand Command="{Binding AddDefaultCmd}" />
                                  </i:EventTrigger>
                             </i:Interaction.Triggers>
                       </Polygon>
 
               </DataTemplate>              
         </ItemsControl.ItemTemplate>
</ItemsControl>

17/03/2011, 11h43
Invité

Puis-je voir le code du type des éléments contenu dans la collection ListPolygon ?

je me suis trompé alors sur mon précédent post, la commande doit être définie dans la classe qui représente le type des éléments de ListPolygon.

Voici mon ViewModel

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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 
    public class ViewModel1 : INotifyPropertyChanged
    {
 
        private ObservableCollection<SilhouetteZone> listPolygon;
 
        public ObservableCollection<SilhouetteZone> ListPolygon
        {
            get 
            {
                listPolygon = new ObservableCollection<SilhouetteZone>();
 
                listPolygon.Add(new SilhouetteZone()
                {
                    CodePiece = "1",
                    RefSilhouette = "refsil1",
                    NameZone = "Manche gauche",
                    Coordinates = "30 50 30 100 70 110 70 50"
                });
 
                listPolygon.Add(new SilhouetteZone()
                {
                    CodePiece = "2",
                    RefSilhouette = "refsil1",
                    NameZone = "Zone Milieu",
                    Coordinates = "70 50 200 50 200 200 70 200"
                });
 
                listPolygon.Add(new SilhouetteZone()
                {
                    CodePiece = "3",
                    RefSilhouette = "refsil1",
                    NameZone = "Manche Droite",
                    Coordinates = "200 50 200 110 240 100 240 50"
                });
 
                return listPolygon; 
            }
            set { listPolygon = value; }
        }
 
 
        private ObservableCollection<Default> listDefault;
 
        public ObservableCollection<Default> ListDefault
        {
            get 
            {
                listDefault = new ObservableCollection<Default>();
 
                listDefault.Add(new Default()
                {
                    NameDefault = "Défaut 1",
                    X = 200,
                    Y = 50
                });
 
                listDefault.Add(new Default()
                {
                    NameDefault = "Défaut 2",
                    X = 200,
                    Y = 100
                });
 
                listDefault.Add(new Default()
                {
                    NameDefault = "Défaut 3",
                    X = 200,
                    Y = 150
                });
 
                return listDefault; 
            }
            set { listDefault = value; }
        }
 
        private RelayCommand<MouseButtonEventArgs> addDefaultCmd;
 
        public RelayCommand<MouseButtonEventArgs> AddDefaultCmd
        {
            get
            {
                if (addDefaultCmd == null)
                {
                    addDefaultCmd = new RelayCommand<MouseButtonEventArgs>((e) => AddDefault(e));
                }
                return addDefaultCmd;
            }
            //set { addDefaultCmd = value; }
        }
 
 
        private void AddDefault(MouseButtonEventArgs e)
        {
            Shape root = (Polygon)e.OriginalSource;
 
            this.listDefault.Add(new Default()
            {
                X = e.GetPosition(relativeTo: (Polygon)e.OriginalSource).X,
                Y = e.GetPosition(relativeTo: (Polygon)e.OriginalSource).Y
 
            });
 
 
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
    }

Voici mon type SilhouetteZone:

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
 
    public class SilhouetteZone : INotifyPropertyChanged
    {
        private string refSilhouette;
 
        public string RefSilhouette
        {
            get { return refSilhouette; }
            set 
            { 
                refSilhouette = value;
                if(PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs("RefSilhouette"));
            }
        }
        private string codePiece;
 
        public string CodePiece
        {
            get { return codePiece; }
            set 
            { 
                codePiece = value;
                if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs("CodePiece"));
            }
        }
        private string nameZone;
 
        public string NameZone
        {
            get { return nameZone; }
            set 
            { 
                nameZone = value;
                if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs("NameZone"));
            }
        }
        private string coordinates;
 
        public string Coordinates
        {
            get { return coordinates; }
            set 
            { 
                coordinates = value;
                if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs("Coordinates"));
            }
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
    }

Voici mon Locator:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
public class Locator 
{
        private static ViewModel1 wm1;
 
        public static ViewModel1 Wm1
        {
	get
	{
		if (wm1 == null)
			wm1 = new ViewModel1();
		return wm1;			
	}
        }
}

Voici ma ressource (LocatorVM) dans le App.xaml

Code:

1
2
3
4
5
6
7
8
9
10
 
<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             xmlns:viewModel="clr-namespace:SilverlightTestLocator.ViewModel"
             x:Class="SilverlightTestLocator.App"
             >
    <Application.Resources>
        <viewModel:Locator x:Key="LocatorVM"/>
    </Application.Resources>
</Application>

Voici le xaml

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<ItemsControl DataContext="{Binding Source={StaticResource LocatorVM}, Path=Wm1 }" ItemsSource="{Binding ListPolygon}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas/>
                    </ItemsPanelTemplate>               
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>    
 
                        <Polygon Points="{Binding Coordinates}" Fill="Red" >
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="MouseLeftButtonDown">
                                    <cmd:EventToCommand PassEventArgsToCommand="True" Command="{Binding AddDefaultCmd}" />
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </Polygon>
 
                    </DataTemplate>              
                </ItemsControl.ItemTemplate>
            </ItemsControl>

Encore une fois, la command se déclenche bien en dehors d'un ItemsControl.
Y a t-il une synthaxe particulière à adopter pour les Triggers dans ItemsControl?

17/03/2011, 13h29
Invité
Ce sera un peu plus difficile que je ne le pensais :?

ce que tu peux faire c'est de nommer ton ItemsControl par exemple myItemsControls et ensuite tu modifies ton binding en faisant :
Code:

1 2 Command="{Binding DataContext.AddDefaultCmd, ElementName=myItemsControls}"
J'ai pas testé ;)
17/03/2011, 21h04
nasimpat7

Yes!!! Ça fonctionne!
Merci à toi pour ta précieuse aide.

Du coup je souhaiterais te poser une autre question:
Est-il possible de renvoyer dans un CommandParameter un objet du DataContext?
Pour être plus précis, je souhaite récupérer l'objet Defaut de ma ListDefaut au Click (MouseLeftButtonDown) associé au image générées par l'ItemsControl.

Je voudrais faire quelque chose de ce genre:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<ItemsControl DataContext="{Binding Source={StaticResource LocatorVM}, Path=Wm1 }" ItemsSource="{Binding ListDefault}" x:Name="zoneDefault">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <Canvas/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Canvas>
                                <Image Canvas.Left="{Binding X}" Canvas.Top="{Binding Y}"  Source="Image/viseur.png" >
                                    <i:Interaction.Triggers>
                                        <i:EventTrigger EventName="MouseLeftButtonDown">
                                            <cmd:EventToCommand 
                                                Command="{Binding DataContext.SelectedDefault_ChangedCmd, ElementName=zoneDefault}" 
                                                CommandParameter="{Binding DataContext.Default, ElementName=zoneDefault}"/>
                                        </i:EventTrigger>
                                    </i:Interaction.Triggers>
                                </Image>
                            </Canvas>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>

Merci en pour ton aide!:ccool:

Essaies ça pour voir ce que ça donne :
Code:

1 2 CommandParameter="{Binding DataContext, RelativeSource={RelativeSource Mode=Self}}"

19/03/2011, 16h14
nasimpat7
Ce n'était pas exactement ça mais presque:
Code:

1 2 CommandParameter="{Binding DataContext, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Merci encore pour ta précieuse aide!!:ccool: