Binding de RelayCommand sur Polygon dans un IntemsControl

**nasimpat7** · 16/03/2011, 18h01

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.

Voici le xaml:

Code xml :

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

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

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.

Invité · 16/03/2011, 18h48

Salut,

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

**nasimpat7** · 16/03/2011, 18h55

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 c# :

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

Invité · 16/03/2011, 18h58

Ta commande se trouve dans quelle classe ? dans le ViewModel de l'Item ou autre part (à la racine du ViewModel principal par exemple) ?

**nasimpat7** · 16/03/2011, 20h13

Dans le ViewModel Wm1 instancié dans mon LocatorVM.
D'ailleurs au même niveau que la propriété ListPolygon liée à mon ItemsSource.

Invité · 16/03/2011, 20h21

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

Code xml :

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

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"}"

**chrisdot** · 17/03/2011, 10h18

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 ?

Invité · 17/03/2011, 10h39

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

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 ?

**nasimpat7** · 17/03/2011, 11h06

Merci pour ton aide.

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 xml :

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

Invité · 17/03/2011, 11h43

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.

**nasimpat7** · 17/03/2011, 12h07

Voici mon ViewModel

Code c# :

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
 
    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 c# :

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
 
    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 c# :

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

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 xml :

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

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 xml :

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

Invité · 17/03/2011, 13h29

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 C# :

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

1
2
 
Command="{Binding DataContext.AddDefaultCmd, ElementName=myItemsControls}"

J'ai pas testé

**nasimpat7** · 17/03/2011, 21h04

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

**nasimpat7** · 18/03/2011, 02h20

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 :

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

Invité · 18/03/2011, 12h03

Essaies ça pour voir ce que ça donne :

Code xml :

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

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

**nasimpat7** · 19/03/2011, 16h14

Ce n'était pas exactement ça mais presque:

Code :

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

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

Merci encore pour ta précieuse aide!!

Binding de RelayCommand sur Polygon dans un IntemsControl

Silverlight

Discussions similaires

Partager

Partager