Affichage et relation en binding entre des points et des arcs sur un canvas en WPF

Version imprimable

30/04/2015, 15h16
GauloiZ-77

Affichage et relation en binding entre des points et des arcs sur un canvas en WPF

Bonjour a tous,

Alors dans le cadre d'un projet de travail, j'ai besoin de placer des points sur un canvas et de tracer des arecs et ces points.
Un arc étant composé d'un point de départ et d'arrivée, ses coordonnées seront des pointeurs sur les points en question.
Le stockage se ferait en collections de points et d'arcs.

Je pense à faire deux classe : une point et une arc :
La classe point étant composée des coordonnées X et Y, un numéro d'ID et un type.
La classe arc d'un numéro d'ID et de deux pointeurs (point de départ et point d’arrivée )

Lorsque je déplace un point à l'aide de la souris (ou en changeant les valeurs des coordonnées, l'arc doit suivre et l’affichage aussi.

J'ai du mal avec la syntaxe du binding et aurait bien besoin de quelques conseils de votre part pour l’organisation de mon code ^^

Voila merci de vos réponses les copains :D
30/04/2015, 22h36
MABROUKI

bonjour

Montre ton code des classes Points et ton xaml ...
Et explique la finalite recherché dans ton projet .....
Expose de cette facon ,je te renvoie en premier pour lire l'API wpf du class Path et PathGeometry pour voir ce qu'il necessite comme information pour dessiner un arc,la primitive WPF ArcSegment ayant ses propres exigences...

bon code...

Alors la finalité du projet est de pouvoir placer des points et des arcs en calque par dessus un image chargée dans le canvas(comme le plan d'un étage) afin de modeliser le plan sous forme filaire et d'enregistrer les coordonnées des différents points et arcs dans un fichier .txt ou .xml.

Mon but est (lors d'un placement d'arc par exemple) : le premier clique crée un point à l'endroit du clic et le second en place un deuxième puis trace l'arc entre ces deux points.

L'arc possède donc deux pointeurs (PointDebut et PointFin) qui pointent vers les coordonnées stockées dans les propriétés de la classe Point mais je n'arrive pas à faire le lien entre les deux .. cad entre le pointeur de l'arc et les coordonnées du point précédemment créé.

Je dois afficher avoir une liste des Points et Arcs créés sur le canvas et les différentes propriétés des points et arcs affichées dans des textBox grâce au Binding.

J' aimerais que lorsque je déplace un des points ou que je change ses coordonnées via une TextBox, l'affichage change et les valeurs des coordonnées aussi. Je sais que l'on peut le faire avec du Binding mais niveau syntaxe et déclaration du Binding je patauge un peu :/

Mon code des classes Points et Arcs où il manque pas mal de choses ..
Le Z est pour la hauteur du point

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
public partial class Etages
    {
        public Etages()
        {
            int No_Etage;
            double Z_Etage;
 
            //Collection de points
            List<Noeuds> propNoeuds = new List<Noeuds>();
            propNoeuds.Add(new Noeuds() { Coord_X = 0, Coord_Y = 0, Coord_Z = 0, No_ID = 0, No_Etage = 0, Type "Normal" });
 
            //Collection d'arcs
            List<Arcs> propArcs = new List<Arcs>();
            propArcs.Add(new Arcs() { PointD_Coord_X = Noeuds.Coord_X, PointD_Coord_Y = Noeuds.Coord_Y, 
                PointF_Coord_X = Noeuds.Coord_X, PointF_Coord_Y = Noeuds.Coord_Y, No_ID = 0, Type Normal });
 
 
        }
    }
 
 
    class Noeuds
    {
        //Declaration des differents parametres de la classe Noeuds
        public int No_ID { get; set; }
        public int No_Etage { get; set; }
        public int Coord_X { get; set; }
        public int Coord_Y { get; set; }
        public double Coord_Z { get; set; }
        enum Type {Normal, Escaliers, Ascenseur, Hall}
 
        public void Change_Z(double New_Z)
        {
            this.Coord_Z = New_Z;
        }
 
        public void AjoutPoint()
        {
 
        }
 
        public void SupprimePoint()
        {
 
        }
 
    }
 
    class Arcs
    {
        //Declaration des differents parametres de la classe Arcs
        public int No_ID { get; set; }
        public int No_Etage { get; set; }
        public int* PointD_Coord_X, PointD_Coord_Y, PointF_Coord_X, PointF_Coord_Y;
        public enum Type {Normal, Escaliers, Murs}
 
        public void AjoutArc()
        { 
 
        }
 
        public void SupprimeArc()
        { 
 
        }
 
    }

Le code XAML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GogoTera" Height="495" Width="879" Name="GogoTera" Loaded="GogoTera_Loaded">
    <Grid>
        <Canvas Height="156" HorizontalAlignment="Left" Margin="405,50,0,0" Name="canvas1" VerticalAlignment="Top" Width="303" Background="LightYellow" PreviewMouseLeftButtonDown="canvas1_PreviewMouseLeftButtonDown" PreviewMouseMove="canvas1_PreviewMouseMove" PreviewMouseRightButtonDown="canvas1_PreviewMouseRightButtonDown" />
        <ListBox Height="100" HorizontalAlignment="Left" Margin="725,50,0,0" VerticalAlignment="Top" Width="120" Background="#FFE2C2C2" Name="lb_ListeNoeuds" />
        <ListBox Height="100" HorizontalAlignment="Left" Margin="725,181,0,0" VerticalAlignment="Top" Width="120" Name="lb_Liste_Arcs" Background="#FFE2C2C2" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="474,218,0,0" VerticalAlignment="Top" Width="120" Background="#FFE2D3D3" Name="tb_Coord_X" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="474,246,0,0" VerticalAlignment="Top" Width="120" Background="#FFE2D3D3" Name="tb_Coord_Y" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="474,275,0,0" VerticalAlignment="Top" Width="120" Background="#FFE2D3D3" Name="tb_Coord_Z" />
        <Label Content="X :" Height="28" HorizontalAlignment="Left" Margin="430,216,0,0" VerticalAlignment="Top" Name="Pos_X" />
        <Label Content="Y :" Height="28" HorizontalAlignment="Left" Margin="430,244,0,0" VerticalAlignment="Top" Name="Pos_Y" />
        <Label Content="Z :" Height="28" HorizontalAlignment="Left" Margin="430,273,0,0" VerticalAlignment="Top" Name="Pos_Z" />
        <Label Content="Liste Noeuds" Height="28" HorizontalAlignment="Left" Margin="743,26,0,0" VerticalAlignment="Top" />
        <Label Content="Liste Arcs" Height="28" HorizontalAlignment="Left" Margin="751,156,0,0" VerticalAlignment="Top" />
    </Grid>
</Window>

05/05/2015, 07h29
MABROUKI

bonjour

Je vois ,tu veux gerer un Graph avec ses 2 DataNodes (ton class Point<=> DataNode) et ses DataArcs (ton class Arc=DataArc)...
C'est faisable ,superpose sur un Image plan....
Mais tu n'as pas repondu toujours à ma question sur la primitive graphique de l'Api ....

Alors plus clairement tu dois fournir 2 petite precisions ...
Comment veux-tu representer graphiquement
1/ DataNode : carre(RectangleGeometry), cercle(ellipseGeometry),polygone (pathgeometry) ...

2/DataArc :ligne droite(line), arc courbe(ArcSegment) ...

Il est possible de faire un tel Graph-Chart avec binding sur un List<DataArc> ,modifiable sur saise dans des TextBox "biindes" à chaque DataArc et par dragging à la souris....

Comme tu vois ,la balle est de ton cote ....
Bon code...

Et bien merci de ton aide pour commencer ;)

Et sinon oui, j'ai regardé l'API du class Path sur l'aide de microsoft qui explique comment tracer une ligne entre deux points.

Tu parles bien de cela ?
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 <Canvas Height="300" Width="300">  <Line X1="10" Y1="10" X2="50" Y2="50" Stroke="Black" StrokeThickness="4" />  <Line X1="10" Y1="10" X2="50" Y2="50" StrokeThickness="4" Canvas.Left="100"> <Line.Stroke> <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> <RadialGradientBrush.GradientStops> <GradientStop Color="Red" Offset="0" /> <GradientStop Color="Blue" Offset="0.25" /> </RadialGradientBrush.GradientStops> </RadialGradientBrush> </Line.Stroke> </Line>  <Line X1="10" Y1="60" X2="150" Y2="60" Stroke="Black" StrokeThickness="4"/> </Canvas>
Code:

1 2 3 4 5 6 7 8 9 10 11 // Add a Line Element myLine = new Line(); myLine.Stroke = System.Windows.Media.Brushes.LightSteelBlue; myLine.X1 = 1; myLine.X2 = 50; myLine.Y1 = 1; myLine.Y2 = 50; myLine.HorizontalAlignment = HorizontalAlignment.Left; myLine.VerticalAlignment = VerticalAlignment.Center; myLine.StrokeThickness = 2; myGrid.Children.Add(myLine);
Mais à part pour la ligne droite entre deux points le reste ne me servira pas je pense ..

Alors au niveau de ma représentation graphique, j'ai juste besoin des points et des arcs(ligne droite uniquement), chacun stockées dès leurs création via la souris dans leur collection respective.

Egalement en cliquant sur leur nom dans la listbox ou en les sélectionnant, d'afficher leur coordonnées dans les textbox.

J'ai du mal a voir comment déclarer mes collections Noeuds et Arcs qui doivent faire partie d'un étage(pour les référence au Z) et en même temps que l'arcs point ses coordonnées sur celles de ses points ..

bonjour
Ce type de structure signifie : q'un DataArc est defini par la donne de ses 2 DataNodes .
Ceci entraine qu'une instance ArcData doit encapsule 2 DataNodes et c'est elle qu'il faut "binder"...

Ta structure comportant 2 entites Data (Node et Arc) il faut les mapper à 2 primitives graphiques...
Le DataNode a beau etre un point il faut l'afficher soit avec un rectangle ou un circle si on veut le voir ...d'ou :
-Un EllipseGeometry pour le Node,car dote d'une prop Centre(Point).
-LineGeometry pour l'Arc,car dote des props StartPoint et EndPoint(Point).
Ces 2 objets sont encapsules chacun dans un Path qui leur fournit Stroke et le Fill ...

le "mecanique" du Binding est illustre dans le premier exemple avec le Class Arc pour bien comprendre:
1/Binding
-du Linegeometry à un ArcData
-de ses 2 EllipseGeometries aux 2 DataNodes
-2 Labels aux No_Etage des 2 DataNodes
2/Affichage des coords Point des 2 DataNodes dans des Textbox "Input User" bindes qui permettent d'entrer les X,Y directement .Comme ils sont "bindes" l'effet est immediat au changement de focus
2/Manipulation des DataNodes à la souris
-un CheckBox permet de passer du mode Drawing au Mode Selection...
Dans le Mode Selection(Dragging) la souris est "capture" par le canvas et il faut terminer par click droit pour quitter ce mode...
Dans le mode Drawing ,on voit "l'enfer" du code pour generer le LineGeometry et ses 2 EllipseGeometry....correspondant à l'ajout d'un Arc...

Dans le 2eme Exemple plus corse :
1/Utilisation d'un Observablecollection<Arc> Arcs qui supporte le changemeent de notification
2/Un ListBox (qui est un itemsControl) :
- son Items est binde à l' Observablecollection Arcs....
- son ItemsPanel est un Canvas "hote" dont le background recevra ton Image Plan...
- son ItemTemplate (comment doit s'afficher chaque ListBoxItem) est defini dans un DataTemplate etrangement semblable à celui du 1er Exemple
- son ItemContainerStyle definit comme se positionne chaque ListBoxItem dans le Canvas hote...
Ce style precise que ses props attaches Canvas.Left et Canvas.Top sont bindes aux Coords des 2 Nodes de l'Arc...

3/DataTemplate de chaque ListBoxItem:
-ressemble au DataTemplate du 1er Exemple mais le tout est wrappe dans un Panel de type Canvas car il faut un panel pour un DataTemplate qui comprend de nbreux elements ...
Un Grid ,Stackpanel ne conviennent pas à cause des 2 TextBlocks qui servent au labeling des 2 Nodes ...
Grace à ce DataTemplate ,on echappe à l' "l'enfer" du code utilise dans le 1er exemple pour les LineGeometry et autres EllipseGeometry....et on gere l'ajout d'un arc correspondant à la collection Arcs qui s'occupe de la "corvee"...

Nota.Bene 1: pour ne pas introduire de "decalage" entre les cords saisies et le Image Plan les dimensions du "gridChart" (qui contient le Canvas "chart") doivent rester fixes ...A choisir d'une maniere approprie suivant les types d'image et l'affichage desiree...Si on veut zoomer ou dezoomer ,Emballer le "gridChart" dans un ViewBox....
code behind .cs des class Node et Arc:

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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.ComponentModel;
 
namespace WpfDataArcLine
{
    public class Node:INotifyPropertyChanged
    {
        public Node()
        {
            No_Etage = 100;
            CoordP = new Point(150.0, 150.0);
            ID ="00";
        }
        public Node(int ONo_Etage, Point OCoordPoint,string OId)
            : this()
        {
            No_Etage = ONo_Etage;
            CoordP = OCoordPoint;
            ID = OId;
        }
        private int no_Etage ;
        public int No_Etage
        {
            get { return no_Etage; }
            set { no_Etage = value; RaisePropertyChanged("No_Etage"); }
        }
 
        private Point coordP;
        public Point CoordP
        {
            get { return coordP; }
            set { coordP = value; RaisePropertyChanged("CoordP"); }
        }
        private string id;
        public string ID
        {
            get { return id; }
            set { id = value; RaisePropertyChanged("ID"); }
        }
        public event PropertyChangedEventHandler PropertyChanged;
        private void RaisePropertyChanged(string propName)
        {
            PropertyChangedEventHandler h = PropertyChanged;
            if (h != null)
                h(this, new PropertyChangedEventArgs(propName));
        }
    }
 
}
public class Arc : INotifyPropertyChanged
    {
        public Arc()
        {
            Node1 = new Node ();
            Node2 = new Node();
 
        }
        public Arc(Node ONode1,Node ONode2):this()
        {
            Node1 = ONode1;
            Node2 = ONode2;
 
        }
        private Node node1;
        public Node Node1
        {
            get { return node1; }
            set { node1 = value; RaisePropertyChanged("Node1"); }
        }
        private Node node2;
        public Node Node2
        {
            get { return node2; }
            set { node2 = value; RaisePropertyChanged("Node2"); }
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
        private void RaisePropertyChanged(string propName)
        {
            PropertyChangedEventHandler h = PropertyChanged;
            if (h != null)
                h(this, new PropertyChangedEventArgs(propName));
        }
    }
 
    public class Arcs : ObservableCollection<Arc>
    {
        Random rnd = new Random();
        Node nd1, nd2;
        Arc larc;
        double x,y;
        int etage,id;
        public Arcs()
        {
            for (int i = 1; i < 3; i++)
            {
                x = rnd.Next(50,400);
                y = rnd.Next(50,400);
                Point p1 = new Point(x, y);
 
                etage = rnd.Next(50, 100);
                id = rnd.Next(100, 150); 
                nd1 = new Node(etage, p1, id.ToString());
 
                x = rnd.Next(100, 400);
                y = rnd.Next(200, 400);
                Point p2 = new Point(x, y);
                etage = rnd.Next(80, 200);
                id = rnd.Next(200, 300); 
                nd2 = new Node(etage, p2,id.ToString());
 
 
                larc = new Arc(nd1,nd2);
 
                this.Add(larc);
            }
 
 
        }
    }

code xaml du form (1er exemple):

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
 
<Window x:Class="WpfDataArcLine.WinSampleArc"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfDataArcLine"
        Title="WinSampleArc" Height="350" Width="525">
    <Window.Resources>
        <local:Arc x:Key="arc">
            <local:Arc.Node1 >
                <local:Node CoordP="50,100"   No_Etage="40"/>
            </local:Arc.Node1>
            <local:Arc.Node2 >
                <local:Node CoordP="150,200"   No_Etage="25"/>
            </local:Arc.Node2>
        </local:Arc>
    </Window.Resources>
    <Grid x:Name="mainGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <DockPanel x:Name="inputPanel" Grid.Row="0">
            <Label Content="Titre Chart Etages "  HorizontalContentAlignment="Center" Grid.Row="0" 
               FontSize="16"
               Background="Beige" />
            <Label Background="Azure" Content="Input Coord ND1 : "/>
            <TextBox x:Name="txtInputNode1" Text="{Binding Source={StaticResource arc},Path=Node1.CoordP,Mode=TwoWay}" ></TextBox>
            <Label Background="Azure" Content="Input Coord ND2 : "/>
            <TextBox x:Name="txtInputNode2" Text="{Binding Source={StaticResource arc},Path=Node2.CoordP,Mode=TwoWay}" ></TextBox>
            <CheckBox DockPanel.Dock="Bottom"  x:Name="chkDrawing" Content="CheckedDrawing/UnchekedSelecion" IsChecked="False" />
        </DockPanel>
 
        <Grid x:Name="gridChart"  Grid.Row="1" Height="700" Width="700">
            <Canvas 
                x:Name="chart"
                Background="LightBlue" 
                ClipToBounds="True"
                MouseLeftButtonDown="chart_MouseLeftButtonDown" 
                MouseMove="chart_MouseMove" 
                MouseRightButtonDown="chart_MouseRightButtonDown" >
                <Path Stroke="Black" Fill="Yellow">
                    <Path.Data>
                        <EllipseGeometry 
                            x:Name="ellipseNode1" RadiusX="5" RadiusY="5" 
                            Center="{Binding Source={StaticResource arc},Path=Node1.CoordP,Mode=TwoWay}">
                        </EllipseGeometry>
                    </Path.Data>
                </Path>
                <Path Stroke="Black" Fill="Yellow">
                    <Path.Data>
                        <EllipseGeometry
                            x:Name="ellipseNode2" RadiusX="5" RadiusY="5" 
                            Center="{Binding Source={StaticResource arc}, Path=Node2.CoordP,Mode=TwoWay}">
                        </EllipseGeometry>
                    </Path.Data>
                </Path>
                <Path Stroke="blue" StrokeThickness="2">
                    <Path.Data >
                        <LineGeometry x:Name="arc"
                            StartPoint="{Binding Source={StaticResource arc}, Path=Node1.CoordP,Mode=TwoWay}"
                            EndPoint="{Binding Source={StaticResource arc}, Path=Node2.CoordP,Mode=TwoWay}">
                        </LineGeometry>
                    </Path.Data>
                </Path>
                <TextBlock  
                    x:Name="tbNode1"
                    Text="{Binding Source={StaticResource arc},Path=Node1.No_Etage,Mode=TwoWay}" 
                    Canvas.Left="{Binding Source={StaticResource arc},Path=Node1.CoordP.X}"
                    Canvas.Top ="{Binding Source={StaticResource arc},Path=Node1.CoordP.Y}"/>
 
                <TextBlock 
                    x:Name="tbNode2"
                    Text="{Binding Source={StaticResource arc},Path=Node2.CoordP,Mode=TwoWay}" 
                    Canvas.Left="{Binding Source={StaticResource arc},Path=Node2.CoordP.X}"
                    Canvas.Top ="{Binding Source={StaticResource arc},Path=Node2.CoordP.Y}"/>
 
 
                <!--LineGeometry de l'API avec l'infrastructure necessaire à gerer-->
                <Path Stroke="Red" StrokeThickness="2">
                    <Path.Data>
                        <LineGeometry  StartPoint="50,200" EndPoint="140,100"/>
                    </Path.Data>
                </Path>
            </Canvas>
        </Grid >
 
 
    </Grid>
</Window>

code behind .cs du form(1er exemple):

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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
 
namespace WpfDataArcLine
{
    /// <summary>
    /// Logique d'interaction pour WinSampleArc.xaml
    /// </summary>
    public partial class WinSampleArc : Window
    {
        public WinSampleArc()
        {
            InitializeComponent();
        }
        //variables drawing
        private bool ModeDrawing = false;
        private bool ModeDragging = false;
        private Path pathNode1 = null;
        private Path pathNode2 = null;
        private Path pathArc = null;
        private Arc larc = null;
        //variables dragging
        private Path selectedPath = null;
        private EllipseGeometry selectedEllipseNode = null;
        private Brush prevFill = null;
        private void chart_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Canvas cnv = sender as Canvas;
            Point ptDown = Mouse.GetPosition(cnv);
            bool b = (bool)chkDrawing.IsChecked;
            ModeDrawing = b;
            ModeDragging = !b;
            if (ModeDrawing && e.LeftButton == MouseButtonState.Pressed)
            {
                larc = new Arc();
                larc.Node1 = new Node(25, ptDown,"0101");
                larc.Node2 = new Node(45, ptDown,"0105");
 
                pathNode1 = GetPathNode1(larc);
                pathNode2 = GetPathNode2(larc);
                pathArc = GetPathArc(larc);
                this.chart.Children.Add(pathNode1);
                this.chart.Children.Add(pathNode2);
                this.chart.Children.Add(pathArc);
 
 
            }
            else if (ModeDragging)
            {
                UIElement elem = e.Source as UIElement;
                if (elem.GetType() == typeof(Path))
                {
                    ptDown = Mouse.GetPosition(cnv);
                    selectedPath = (Path)elem;
                    prevFill = selectedPath.Fill;
                    selectedEllipseNode = selectedPath.Data as EllipseGeometry;
                    if (selectedEllipseNode == null) return;
 
                    cnv.CaptureMouse();
                    selectedPath.Fill = Brushes.Magenta;
                    cnv.CaptureMouse();
                }
            }
        }
 
        private void chart_MouseMove(object sender, MouseEventArgs e)
        {
            Canvas cnv = sender as Canvas;
            Point ptMove = Mouse.GetPosition(cnv);
            if (ModeDrawing && e.LeftButton == MouseButtonState.Pressed)
            {
                if (larc != null) larc.Node2.CoordP = ptMove;
 
            }
            else if (ModeDragging && e.LeftButton == MouseButtonState.Pressed)
            {
                if (selectedEllipseNode != null)
                {
                    selectedEllipseNode.Center = ptMove;
 
                }
            }
 
        }
 
        private void chart_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
        {
            Canvas cnv = sender as Canvas;
            Point pt = Mouse.GetPosition(cnv);
            if (ModeDrawing)
            {
                larc.Node2.CoordP = pt;
 
                larc = null;
                pathNode1 = null;
                pathNode2 = null;
                pathArc = null;
            }
            else if (ModeDragging)
            {
                if (selectedEllipseNode != null)
                {
                    selectedEllipseNode.Center = pt;
                    selectedPath.Fill = prevFill;
                    selectedPath = null;
                    selectedEllipseNode = null;
                    cnv.ReleaseMouseCapture();
                }
            }
        }
        private Path GetPathNode1(Arc narc)
        {
 
            EllipseGeometry ellip = new EllipseGeometry();
            ellip.RadiusX = 5; ellip.RadiusY = 5;
            Binding bd = new Binding("Node1.CoordP");
            bd.Source = narc;
            bd.Mode = BindingMode.TwoWay;
            BindingOperations.SetBinding(ellip, EllipseGeometry.CenterProperty, bd);
 
            Path pathNode = new Path();
            pathNode.Stroke = Brushes.Black;
            pathNode.StrokeThickness = 2.0;
            pathNode.Fill = Brushes.Aquamarine;
            pathNode.Data = ellip;
 
            return pathNode;
        }
        private Path GetPathNode2(Arc narc)
        {
 
            EllipseGeometry ellip = new EllipseGeometry();
            ellip.RadiusX = 5; ellip.RadiusY = 5;
            Binding bd = new Binding("Node2.CoordP");
            bd.Source = narc;
            bd.Mode = BindingMode.TwoWay;
            BindingOperations.SetBinding(ellip, EllipseGeometry.CenterProperty, bd);
 
 
            Path pathNode = new Path();
            pathNode.Stroke = Brushes.Black;
            pathNode.StrokeThickness = 2.0;
            pathNode.Fill = Brushes.Pink;
            pathNode.StrokeThickness = 2.0; pathNode.Data = ellip;
 
 
 
            return pathNode;
        }
        private Path GetPathArc(Arc narc)
        {
            Binding bd;
            LineGeometry arcGeom = new LineGeometry();
            bd = new Binding("Node1.CoordP");
            bd.Source = narc;
            bd.Mode = BindingMode.TwoWay;
            BindingOperations.SetBinding(arcGeom, LineGeometry.StartPointProperty, bd);
            bd = new Binding("Node2.CoordP");
            bd.Source = narc;
            bd.Mode = BindingMode.TwoWay;
            BindingOperations.SetBinding(arcGeom, LineGeometry.EndPointProperty , bd);
 
 
 
            Path pathArc = new Path();
            pathArc.Stroke = Brushes.Black;
            pathArc.StrokeThickness = 2.0;
            pathArc.Data = arcGeom ;
 
 
 
            return pathArc;
        }
    }
}

code xaml du form (2e exemple):

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
 
<Window x:Class="WpfDataArcLine.WinMoreArcs"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfDataArcLine"
        Title="WinMoreArcs" Height="350" Width="525">
    <Window.Resources>
        <local:Arcs x:Key="arcs"></local:Arcs>
        <DataTemplate
            x:Key="dt"
            DataType="{x:Type local:Arc}">
            <Canvas>
                <Path Stroke="Black" Fill="Yellow" >
                    <Path.Data>
                        <EllipseGeometry 
                            x:Name="ellipseNode1" RadiusX="5" RadiusY="5" 
                            Center="{Binding Path=Node1.CoordP,Mode=TwoWay}">
                        </EllipseGeometry>
                    </Path.Data>
                </Path>
                <Path Stroke="Black" Fill="Yellow" >
                    <Path.Data>
                        <EllipseGeometry
                            x:Name="ellipseNode2" RadiusX="5" RadiusY="5" 
                            Center="{Binding  Path=Node2.CoordP,Mode=TwoWay}">
                        </EllipseGeometry>
                    </Path.Data>
                </Path>
                <Path Stroke="Blue" StrokeThickness="2">
                    <Path.Data>
                        <LineGeometry x:Name="arc" 
                            StartPoint="{Binding Path=Node1.CoordP,Mode=TwoWay}"
                            EndPoint="{Binding  Path=Node2.CoordP,Mode=TwoWay}">
                        </LineGeometry>
                    </Path.Data>
                </Path>
                <TextBlock 
                    x:Name="tbNode1"
                    Background="Red" Foreground="White" 
                    Text="{Binding Path=Node1.No_Etage,Mode=TwoWay}" 
                    Canvas.Left="{Binding Path=Node1.CoordP.X,Mode=TwoWay }"
                    Canvas.Top ="{Binding Path=Node1.CoordP.Y,Mode=TwoWay }"/>
 
                <!--on affiche Node2.CoordP (au lieu du Numero Etage) pour "voir" le fonctionnemt du binding-->
                <TextBlock 
                    x:Name="tbNode2"
                    Background="Red" Foreground="White" 
                    Text="{Binding Path=Node2.CoordP,Mode=TwoWay}" 
                    Canvas.Left="{Binding Path=Node2.CoordP.X,Mode=TwoWay }"  
                    Canvas.Top ="{Binding Path=Node2.CoordP.Y,Mode=TwoWay }"/>
            </Canvas>
        </DataTemplate>
    </Window.Resources>
    <Grid x:Name="mainGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition ></RowDefinition>
        </Grid.RowDefinitions>
        <DockPanel x:Name="inputPanel" Grid.Row="0">
            <Label Content="Titre Chart Etages "  HorizontalContentAlignment="Center" Grid.Row="0" 
               FontSize="16"
               Background="Beige" />
            <Label Background="Azure" Content="Input Coord ND1 : "/>
            <TextBox x:Name="txtInputNode1" Text="{Binding Source={StaticResource arcs}, Path=Node1.CoordP, Mode=TwoWay}" ></TextBox>
            <Label Background="Azure" Content="Input Coord ND2 : "/>
            <TextBox x:Name="txtInputNode2" Text="{Binding Source={StaticResource arcs},Path=Node2.CoordP, Mode=TwoWay}" ></TextBox>
            <CheckBox x:Name="chkDrawing" Content="CheckedDrawing/UnchekedSelecion" IsChecked="False" />
        </DockPanel>
        <!--IsSynchronizedWithCurrentItem="true":synchronisation avec l'item courant-->
        <!--image etage dans background du canvas "calque d'arriere plan"-->
        <!--utilise le PreviewMouseLeftButtonDown etc ...-->
        <!--veuillez à fixer un Height & Width appropries du Grid chart  ...-->
        <!--l'image plan garde un size constant =>les coord canvas sont relatives à ce size...-->
 
        <Grid x:Name="gridChart"  Grid.Row="1" Height="700" Width="700">
                <ListBox 
                    x:Name="ListBox1"
                    IsSynchronizedWithCurrentItem="true"
                    ItemTemplate="{StaticResource dt}"
                    ItemsSource="{Binding Source={StaticResource arcs}}" >
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <Canvas
                                IsItemsHost="true" 
                                ClipToBounds="True"
                                PreviewMouseLeftButtonDown="Canvas_PreviewMouseLeftButtonDown"
                                MouseMove="Canvas_MouseMove" 
                                PreviewMouseRightButtonDown="Canvas_PreviewMouseRightButtonDown">
                                <Canvas.Background>
                                    <ImageBrush 
                                        Stretch="UniformToFill" 
                                        ImageSource="Resources/Plan.jpg"/>
                                </Canvas.Background>
                            </Canvas>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemContainerStyle>
                        <Style TargetType="ListBoxItem">
                            <Setter Property="Canvas.Left" Value="{Binding Path=Arc.Node1.CoordP.X}"/>
                            <Setter Property="Canvas.Top" Value="{Binding Path=Arc.Node1.CoordP.Y}"/>
                        </Style>
                    </ItemsControl.ItemContainerStyle>
            </ListBox>
        </Grid>
 
 
    </Grid>
</Window>

code behind .cs du form(2e exemple):

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
109
110
111
112
113
114
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
 
namespace WpfDataArcLine
{
    /// <summary>
    /// Logique d'interaction pour WinMoreArcs.xaml
    /// </summary>
    public partial class WinMoreArcs : Window
    {
        public WinMoreArcs()
        {
            InitializeComponent();
        }
        //variables drawing
        private bool ModeDrawing = false;
        private bool ModeDragging = false;
        private Arc larc = null;
 
        //variables dragging
        private Path selectedPath = null;
        private EllipseGeometry selectedEllipseNode = null;
        private Brush prevFill = null;
        private void Canvas_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Canvas cnv = sender as Canvas;
            UIElement elem = e.OriginalSource as UIElement; //note la difference avec SampleArc
            Point   ptDown = Mouse.GetPosition(cnv);
 
            bool b = (bool)chkDrawing.IsChecked;
            ModeDrawing = b;
            ModeDragging = !b;
            if (ModeDrawing && e.LeftButton == MouseButtonState.Pressed)
            {
                larc = new Arc();
                larc.Node1 = new Node(25, ptDown,"0101");
                larc.Node2 = new Node(45, ptDown,"0102");
                Arcs list = (Arcs)ListBox1.ItemsSource;
                list.Add(larc);
 
            }
            else if (ModeDragging)
            {
 
                if (elem.GetType() == typeof(Path))
                {
 
                    selectedPath = (Path)elem;
                    prevFill = selectedPath.Fill;
                    selectedEllipseNode = selectedPath.Data as EllipseGeometry;
                    if (selectedEllipseNode == null) return;
 
                    selectedPath.Fill = Brushes.Magenta;
                    cnv.CaptureMouse();
                }
            }
        }
 
        private void Canvas_MouseMove(object sender, MouseEventArgs e)
        {
            Canvas cnv = sender as Canvas;
            Point ptMove = Mouse.GetPosition(cnv);
            if (ModeDrawing && e.LeftButton == MouseButtonState.Pressed)
            {
                if (larc != null) larc.Node2.CoordP = ptMove;
 
            }
            else if (ModeDragging && e.LeftButton == MouseButtonState.Pressed)
            {
                if (selectedEllipseNode != null)
                {
                    selectedEllipseNode.Center = ptMove;
 
                }
            }
 
        }
 
        private void Canvas_PreviewMouseRightButtonDown(object sender, MouseButtonEventArgs e)
        {
            Canvas cnv = sender as Canvas;
            Point pt = Mouse.GetPosition(cnv);
            if (ModeDrawing && larc !=null )
            {
                larc.Node2.CoordP = pt;
                larc = null;
 
            }
            else if (ModeDragging)
            {
                if (selectedEllipseNode != null)
                {
                    selectedEllipseNode.Center = pt;
                    selectedPath.Fill = prevFill;
                    selectedPath = null;
                    selectedEllipseNode = null;
                    cnv.ReleaseMouseCapture();
 
                }
            }
        }
    }
}

bon code...

06/05/2015, 17h05
GauloiZ-77

Et bah didonc tu n'as pas blagué, deux exemples !!

Je te remercie, cela m'a beaucoup aidé, surtout pour le principe du binding et la déclaration des classes et collections :)

J'ai quelques petits soucis de compilation et d'exceptions bizarre mais je pense que je vais régler cela demain ^^

Merci encore je tiens au courant de l'avancement du projet :D

Re bonjour,

Alors j'ai compilé les deux versions afin de voir le fonctionnement et m'en servir pour mon projet, mais y a quelque petites choses que je ne comprend pas.

Déjà lorsque je compile le second exemple (qui m'interresse le plus) j'ai une exception qui est levée du type : XamlParseException avec le message "La valeur fournie sur 'System.Windows.Baml2006.TypeConverterMarkupExtension' a levé une exception." mais aucuen explciation sur le code qui bloque.

Je vois bien comment sont crées les arcs aléatoirement avec les ellipses représentant les points mais je comprend mal ou tout cela est dessiné vu que dans le fichier XAML le canvas est dans la listBox .. (ou je comprend mal le truc ?)

J'ai adapté ton code et intégré ce que j'avais besoin dans mon projet, je te montre pour que tu puisse me dire ce qu'il ne va pas et ce que je n'ai pas compris ou mal codé ^^

J'ai changé quelques noms pour m'y retrouvé et adapter à mon projet existant, et certaines choses comme le Z ou l'ID sont placés mais ne fonctionnent pas c'est normal.

(D'ailleurs j’aimerais voir comment nommer chaque arcs(ou point), créés et intégrés dans sa collection, avec un ID qui s’incrémente à chaque ajout dans la collec et appeler un arc (ou point) via son ID tu vois ce que je veux dire ? )

Le code de mes classes et collections :

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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.ComponentModel;
using System.Data;
using System.Diagnostics;
using System.Net.NetworkInformation;
using System.Net;
using System.Runtime.InteropServices; //import de dll 
using System.IO;
using System.Collections.ObjectModel; //ObservableCollection
 
namespace WpfApplicationBinding
{
    public class Etages : INotifyPropertyChanged
    {
        private int propNo_Etage;
        public int No_Etage
        {
            get { return (this.propNo_Etage); }
            set { this.propNo_Etage = value; RaisePropertyChanged("No_Etage"); }
        }
 
        private double propZ_Etage;
        public double Z_Etage
        {
            get { return (this.propZ_Etage); }
            set { this.propZ_Etage = value; RaisePropertyChanged("Z_Etage"); }
        }
 
        //Evenement  de changement de propriétés 
        public event PropertyChangedEventHandler PropertyChanged;
        private void RaisePropertyChanged(string propName)
        {
            PropertyChangedEventHandler h = PropertyChanged;
            if (h != null)
                h(this, new PropertyChangedEventArgs(propName));
        }
 
        //Constructeur
        public Etages()
        {
            No_Etage = 0;
            Z_Etage = 0;
        }
 
        //Constructeur Surchargé 
        public Etages(int ONo_Etage, double OZ_Etage) : this()
        {
            No_Etage = ONo_Etage;
            Z_Etage = OZ_Etage;
        }
        //Collection de points
        //List<Noeuds> propNoeuds = new List<Noeuds>();
        //propNoeuds.Add(new Noeuds() { Coord_X = Mouse.GetPosition.X, Coord_Y = Mouse.GetPosition.Y, Coord_Z = 0, No_ID = 0, No_Etage = 0, string type = Type.Normal });
 
        //Collection d'arcs
        //List<Arcs> propArcs = new List<Arcs>();
        //propArcs.Add(new Arcs() { PointD_Coord_X = Noeuds.Coord_X, PointD_Coord_Y = Noeuds.Coord_Y, 
        //PointF_Coord_X = Noeuds.Coord_X, PointF_Coord_Y = Noeuds.Coord_Y, No_ID = 0, string type = Type.Normal });
 
        //Reference a une ListBox declarée dans le code XAML --> 
        //lb_ListeNoeuds.ItemsSource = propNoeuds;//<ListBox Name = "lb_ListeNoeuds">
        //lb_ListeArcs.ItemsSource = propArcs;//<ListBox Name = "lb_ListeArcs">
    }
 
    public class Noeuds : INotifyPropertyChanged
    {
        //Constructeur
        public Noeuds()
        {
            No_Etage = 0;
            Coord_P = new Point(0.0, 0.0);
            No_ID_Noeud = 00;
            Coord_Z = 1;
        }
 
        //Constructeur Surchargé
        public Noeuds(int ONo_Etage, int OID_Noeud, Point OCoordPoint, double OCoord_Z) : this()
        {
            No_Etage = ONo_Etage;
            Coord_P = OCoordPoint;
            No_ID_Noeud = OID_Noeud;
            Coord_Z = OCoord_Z;
        }
 
        //Declaration des differents parametres de la classe Noeuds
        private int propNo_ID_Noeud;
        public int No_ID_Noeud 
        {
            get { return (this.propNo_ID_Noeud); }
            set { this.propNo_ID_Noeud = value; RaisePropertyChanged("No_ID_Noeud"); }
        }
 
        private int propNo_Etage;
        public int No_Etage
        {
            get { return (this.propNo_Etage); }
            set { this.propNo_Etage = value; RaisePropertyChanged("No_Etage"); }
        }
 
        Point propCoord_P;
        public Point Coord_P
        {
            get { return propCoord_P; }
            set { propCoord_P = value; RaisePropertyChanged("Coord_P"); }
        }
 
        private double propCoord_Z;
        public double Coord_Z
        {
            get { return (this.propCoord_Z); }
            set { this.propCoord_Z = value; RaisePropertyChanged("Coord_Z"); }
        }
 
        enum TypeNoeud { Normal, Escaliers, Ascenseur, Hall }
 
        //Evenement  de changement de propriétés 
        public event PropertyChangedEventHandler PropertyChanged;
        private void RaisePropertyChanged(string propName)
        {
            PropertyChangedEventHandler h = PropertyChanged;
            if (h != null)
                h(this, new PropertyChangedEventArgs(propName));
        }
 
 
        //Fonctions d'ajout, de suppression et de changement de Z 
 
 
        public void Change_Z(double New_Z)
        {
            this.Coord_Z = New_Z;
        }
 
        /*
        public void AjoutPointSurArc()
        {
            //Le principe est de supprimer l'ancien arc et d'en créer deux nouveaux.
            //Le premier (arc A) possède comme PointD celui de l'ancien arc et comme PointF le NewPoint,
            //Le seconde (arc B) possède comme PointD le NewPoint et comme PointF celui de l'ancien arc.
            //            PD          PF        PD  newPF-newPD   PF
            //             X----------X   -->   X--------X--------X
            //             ARC Origine             ARC A    ARC B 
            //En vrai on créer les deux nouveaux arcs avant de supprimer l'arc d'origine,
            //Sinon les PointD et PointF dont on aura besoin auront disparus
            
            //Coordonnées des nouveaux arcs
            int NewArc_A_PointD_Coord_X, NewArc_A_PointD_Coord_Y, NewArc_A_PointF_Coord_X, NewArc_A_PointF_Coord_Y;
            int NewArc_B_PointD_Coord_X, NewArc_B_PointD_Coord_Y, NewArc_B_PointF_Coord_X, NewArc_B_PointF_Coord_Y;
 
            //Assignation des coordonnées à l'arc A
            NewArc_A_PointD_Coord_X = this.&PointD_Coord_X;
            NewArc_A_PointD_Coord_Y = this.&PointD_Coord_Y;
            NewArc_A_PointF_Coord_X = NewPoint.Coord_X;
            NewArc_A_PointF_Coord_Y = NewPoint.Coord_Y;
            
            //Assignation des coordonnées à l'arc B
            NewArc_B_PointD_Coord_X = NewPoint.Coord_X;
            NewArc_B_PointD_Coord_Y = NewPoint.Coord_Y;
            NewArc_B_PointF_Coord_X = this.&PointF_Coord_X;
            NewArc_B_PointF_Coord_Y = this.&PointF_Coord_Y;
 
            //Suppression de l'ancien arc
 
        }*/
    }
 
    public class Arcs : INotifyPropertyChanged
    {
        //Constructeur
        public Arcs()
        {
            Node_D = new Noeuds();
            Node_F = new Noeuds();
            No_ID_Arc = 0;
        }
 
        //Constructeur Surchargé 
        public Arcs(Noeuds ONode_D, Noeuds ONode_F, int ONo_ID_Arc) : this()
        {
            Node_D = ONode_D;
            Node_F = ONode_F;
            No_ID_Arc = ONo_ID_Arc;
        }
 
        //Declaration des differents parametres de la classe Arcs
        private Noeuds node_D;
        public Noeuds Node_D
        {
            get { return node_D; }
            set { node_D = value; RaisePropertyChanged("Node_D"); }
        }
 
        private Noeuds node_F;
        public Noeuds Node_F
        {
            get { return node_F; }
            set { node_F = value; RaisePropertyChanged("Node_F"); }
        }
 
        private int propNo_ID_Arc;
        public int No_ID_Arc 
        {
            get { return (this.propNo_ID_Arc); }
            set { this.propNo_ID_Arc = value; RaisePropertyChanged("No_ID_Arc"); }
        }
 
        public enum TypeArc { Normal, Escaliers, Murs }
 
        //Evenement de changement de propriétés 
        public event PropertyChangedEventHandler PropertyChanged;
        private void RaisePropertyChanged(string propName)
        {
            PropertyChangedEventHandler h = PropertyChanged;
            if (h != null)
                h(this, new PropertyChangedEventArgs(propName));
        }
 
        //Fonctions d'ajout et de suppression 
 
    }
 
    public class CollecArcs : ObservableCollection<Arcs> //INotifyCollectionChanged
    {
        Noeuds nd1, nd2;
        Arcs larc;
        Point P1, P2;
        double z1,z2;
        int Etage1, Etage2, ID1, ID2, ID;
        //int NombreArcs = CollecArcs.Count;
        /*
        public int CountArcs()
        {
            foreach(Arcs Arcs in CollecArcs)
                {
                    NombreArcs += 1;
                }
        }*/
 
        public void AjoutArc()
        {
            //Creation Noeud de Départ 
            nd1 = new Noeuds(Etage1, ID1, P1, z1);
            P1 = new Point();
            Etage1 = nd1.No_Etage;
            z1 = nd1.Coord_Z;
            //ID1 = ;
 
            //Creation Noeud d'arrivée 
            nd2 = new Noeuds(Etage2, ID2, P2, z2);
            P2 = new Point();
            Etage2 = nd2.No_Etage;
            z2 = nd2.Coord_Z;
            //ID2 = ;
 
            larc = new Arcs(nd1, nd2, ID);
 
            this.Add(larc);
        }
 
        public void SupprimeArc()
        {
            this.Remove(larc);
        }
 
        /*public virtual event NotifyCollectionChangedEventHandler CollectionChanged;
        private void RaiseCollectionChanged(string propName)
        {
            NotifyCollectionChangedEventHandler h = CollectionChanged;
            if (h != null)
                h(this, new NotifyCollectionChangedEventHandler(propName));
        }*/
 
        /*
 public void CollecArcs()
 {
     for (int i = 1; i < 3; i++)
     {
         x = rnd.Next(50, 400);
         y = rnd.Next(50, 400);
         Point p1 = new Point(x, y);
         Etage = rnd.Next(50, 100);
         ID = rnd.Next(100, 150);
         double z1 = rnd.Next(1, 20);
         nd1 = new Noeuds(Etage, ID, p1, z1);
 
         x = rnd.Next(100, 400);
         y = rnd.Next(200, 400);
         Point p2 = new Point(x, y);
         Etage = rnd.Next(80, 200);
         ID = rnd.Next(200, 300);
         double z2 = rnd.Next(1, 20);
         nd2 = new Noeuds(Etage, ID, p2, z2);
 
         larc = new Arcs(nd1, nd2, ID);
 
         this.Add(larc);
     }
 }*/
    }
 
    public class CollecNoeuds : ObservableCollection<Noeuds>
    {
        Noeuds lnoeud;
        Point P1;
        double z;
        int Etage, ID;
        int NombreNoeuds = 0;
 
        public override int GetHashCode()
        {
            return base.GetHashCode();
        }
 
        /*
        public int CountNoeuds()
        {
            foreach(Noeuds in CollecNoeuds)
               {
                    NombreNoeuds += 1;
               }
        }*/
 
        public void AjoutPoint()
        {
            //P1 = Mouse.GetPosition(this.canvas1);
            //z = Etages.Z_Etage;
            //Etage = Etages.No_Etage;
            //ID = ;
 
            lnoeud = new Noeuds(Etage, ID, P1, z);
 
            this.Add(lnoeud);
        }
 
        public void SupprimePoint()
        {
            this.Remove(lnoeud);
        }
 
        /*
        public CollecNoeuds()
        {
            ptx = Mouse.GetPosition(canvas1);
            pty = Mouse.GetPosition(canvas1);
 
            Point P1 = new Point(ptx, pty);
            z = Etages.Z_Etage;
             
            lnoeud = new Noeuds(Etage, ID, P1, z);
 
            this.Add(lnoeud);
        }*/
    }
}

Le code XAML :

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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
<Window x:Class="WpfApplicationBinding.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplicationBinding"
        Title="MainWindow" Height="496" Width="809">
 
    <Window.Resources>
        <local:Arcs x:Key="arcs"></local:Arcs>
        <DataTemplate
            x:Key="dt"
            DataType="{x:Type local:Arcs}">
 
            <!--=======Dessin du Point Depart par une ellipse============-->
            <Canvas>
                <Path Stroke="Black" Fill="Yellow" >
                    <Path.Data>
                        <EllipseGeometry 
                            x:Name="ellipseNode_D" RadiusX="5" RadiusY="5" 
                            Center="{Binding Path=Node_D.Coord_P,Mode=TwoWay}">
                        </EllipseGeometry>
                    </Path.Data>
                </Path>
 
                <!--=======Dessin du Point Arrivée par une ellipse============-->
                <Path Stroke="Black" Fill="Yellow" >
                    <Path.Data>
                        <EllipseGeometry
                            x:Name="ellipseNode_F" RadiusX="5" RadiusY="5" 
                            Center="{Binding  Path=Node_F.Coord_P,Mode=TwoWay}">
                        </EllipseGeometry>
                    </Path.Data>
                </Path>
 
                <!--=======Dessin de l'arc par un trait============-->
                <Path Stroke="Blue" StrokeThickness="2">
                    <Path.Data>
                        <LineGeometry x:Name="arc" 
                            StartPoint="{Binding Path=Node_D.Coord_P,Mode=TwoWay}"
                            EndPoint="{Binding  Path=Node_F.Coord_P,Mode=TwoWay}">
                        </LineGeometry>
                    </Path.Data>
                </Path>
 
                <!--=====Affichage Coordonnées du Point Départ=====-->
                <TextBlock 
                    x:Name="tbNode_D"
                    Background="Red" Foreground="White" 
                    Text="{Binding Path=Node_D.No_Etage,Mode=TwoWay}" 
                    Canvas.Left="{Binding Path=Node_D.Coord_P.X,Mode=TwoWay }"
                    Canvas.Top ="{Binding Path=Node_D.Coord_P.Y,Mode=TwoWay }"/>
 
                <!--on affiche Node2.CoordP (au lieu du Numero Etage) pour "voir" le fonctionnemt du binding-->
 
                <!--=====Affichage Coordonnées du Point d'arrivée=====-->
                <TextBlock 
                    x:Name="tbNode_F"
                    Background="Red" Foreground="White" 
                    Text="{Binding Path=Node_F.Coord_P,Mode=TwoWay}" 
                    Canvas.Left="{Binding Path=Node_F.Coord_P.X,Mode=TwoWay }"  
                    Canvas.Top ="{Binding Path=Node_F.Coord_P.Y,Mode=TwoWay }"/>
 
            </Canvas>
        </DataTemplate>
    </Window.Resources>
 
    <Grid Opacity="1">
 
        <Canvas Height="341" HorizontalAlignment="Left" Margin="12,59,0,0" VerticalAlignment="Top" Width="320" Background="#FF92B129" 
                Name="canvas1"
                PreviewMouseLeftButtonDown="Canvas_PreviewMouseLeftButtonDown"
                MouseMove="Canvas_MouseMove" 
                PreviewMouseRightButtonDown="Canvas_PreviewMouseRightButtonDown">
        </Canvas>
 
        <!--========================Label's des ListBox's======================-->
        <Label Content="Liste Points" Height="28" HorizontalAlignment="Left" Margin="428,59,0,0" Name="label7" VerticalAlignment="Top" />
        <Label Content="Liste Arcs" Height="28" HorizontalAlignment="Left" Margin="655,59,0,0" Name="label8" VerticalAlignment="Top" />
 
        <!--========================Label's des Points======================-->
        <Label Content="X" Height="28" HorizontalAlignment="Left" Margin="383,183,0,0" Name="label1" VerticalAlignment="Top" />
        <Label Content="Y" Height="28" HorizontalAlignment="Left" Margin="383,214,0,0" Name="label2" VerticalAlignment="Top" />
        <Label Content="Z" Height="28" HorizontalAlignment="Left" Margin="383,243,0,0" Name="label3" VerticalAlignment="Top" />
        <Label Content="ID" Height="28" HorizontalAlignment="Left" Margin="383,271,0,0" Name="label4" VerticalAlignment="Top" />
        <Label Content="Etage" Height="28" HorizontalAlignment="Left" Margin="365,299,0,0" Name="label5" VerticalAlignment="Top" />
        <Label Content="Type" Height="28" HorizontalAlignment="Left" Margin="365,330,0,0" Name="label6" VerticalAlignment="Top" />
 
        <!--========================Label's des Arcs======================-->
        <Label Content="DX" Height="28" HorizontalAlignment="Left" Margin="598,185,0,0" Name="label9" VerticalAlignment="Top" />
        <Label Content="FX" Height="28" HorizontalAlignment="Left" Margin="598,214,0,0" Name="label10" VerticalAlignment="Top" />
        <Label Content="DY" Height="28" HorizontalAlignment="Left" Margin="598,243,0,0" Name="label11" VerticalAlignment="Top" />
        <Label Content="FY" Height="28" HorizontalAlignment="Left" Margin="596,272,0,0" Name="label12" VerticalAlignment="Top" />
        <Label Content="ID" Height="28" HorizontalAlignment="Left" Margin="596,299,0,0" Name="label13" VerticalAlignment="Top" />
        <Label Content="Type" Height="28" HorizontalAlignment="Left" Margin="580,330,0,0" Name="label14" VerticalAlignment="Top" />
 
 
        <!--==========================TextBox's des Points==================================-->
        <TextBox Height="23" HorizontalAlignment="Left" Margin="406,185,0,0" VerticalAlignment="Top" Width="120" Name="tb_Points_Coord_X">
            <TextBox.Text>
                    <Binding Source="{StaticResource CollecNoeuds}" Path="Coord_P.X" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged"/>
            </TextBox.Text>
        </TextBox>
        <TextBox Height="23" HorizontalAlignment="Left" Margin="406,214,0,0" VerticalAlignment="Top" Width="120" Name="tb_Points_Coord_Y">
            <TextBox.Text>
                <Binding Source="{StaticResource CollecNoeuds}" Path="Coord_P.Y" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged"/>
            </TextBox.Text>
        </TextBox>
        <TextBox Height="23" HorizontalAlignment="Left" Margin="406,243,0,0" VerticalAlignment="Top" Width="120" Name="tb_Points_Coord_Z">
            <TextBox.Text>
                <Binding Source="{StaticResource CollecNoeuds}" Path="Coord_Z" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged"/>
            </TextBox.Text>
        </TextBox>
        <TextBox Height="23" HorizontalAlignment="Left" Margin="406,272,0,0" VerticalAlignment="Top" Width="120" Name="tb_Points_ID"> 
            <TextBox.Text>
                <Binding Source="{StaticResource CollecNoeuds}" Path="No_ID_Noeud" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged"/>
            </TextBox.Text>
        </TextBox>
        <TextBox Height="23" HorizontalAlignment="Left" Margin="406,301,0,0" VerticalAlignment="Top" Width="120" Name="tb_Points_Etage"> 
            <TextBox.Text>
                <Binding Source="{StaticResource CollecNoeuds}" Path="No_Etage" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged"/>
            </TextBox.Text>
        </TextBox>
        <TextBox Height="23" HorizontalAlignment="Left" Margin="406,330,0,0" VerticalAlignment="Top" Width="120" Name="tb_Points_Type"> 
            <TextBox.Text>
                <Binding Source="{StaticResource CollecNoeuds}" Path="TypeNoeud" Mode="TwoWay" UpdateSourceTrigger="PropertyChanged"/>
            </TextBox.Text>
        </TextBox>
 
        <!--==========================TextBox's des Arcs==================================-->
        <TextBox Height="23" HorizontalAlignment="Left" Margin="621,185,0,0" VerticalAlignment="Top" Width="120" Name="tb_Arcs_Coord_DX">
            <TextBox.Text>
                <Binding Source="{StaticResource CollecArcs}" Path="Node_D.Coord_P.X" Mode="TwoWay"/>
            </TextBox.Text>
        </TextBox>
        <TextBox Height="23" HorizontalAlignment="Left" Margin="621,214,0,0" VerticalAlignment="Top" Width="120" Name="tb_Arcs_Coord_FX">
            <TextBox.Text>
                <Binding Source="{StaticResource CollecArcs}" Path="Node_F.Coord_P.X" Mode="TwoWay"/>
            </TextBox.Text>
        </TextBox>
        <TextBox Height="23" HorizontalAlignment="Left" Margin="621,243,0,0" VerticalAlignment="Top" Width="120" Name="tb_Arcs_Coord_DY">
            <TextBox.Text>
                <Binding Source="{StaticResource CollecArcs}" Path="Node_D.Coord_P.Y" Mode="TwoWay"/>
            </TextBox.Text>
        </TextBox>
        <TextBox Height="23" HorizontalAlignment="Left" Margin="621,273,0,0" VerticalAlignment="Top" Width="120" Name="tb_Arcs_Coord_FY">
            <TextBox.Text>
                <Binding Source="{StaticResource CollecArcs}" Path="Node_F.Coord_P.Y" Mode="TwoWay"/>
            </TextBox.Text>
        </TextBox>
        <TextBox Height="23" HorizontalAlignment="Left" Margin="621,301,0,0" VerticalAlignment="Top" Width="120" Name="tb_Arcs_ID">
            <TextBox.Text>
                <Binding Source="{StaticResource CollecArcs}" Path="No_ID_Arc" Mode="TwoWay"/>
            </TextBox.Text>
        </TextBox>
        <TextBox Height="23" HorizontalAlignment="Left" Margin="621,330,0,0" VerticalAlignment="Top" Width="120" Name="tb_Arcs_Type">
            <TextBox.Text>
                <Binding Source="{StaticResource CollecArcs}" Path="TypeArc" Mode="TwoWay"/>
            </TextBox.Text>
        </TextBox>
 
        <!--=======================================ListeBox des Points==================================-->
        <ListBox Height="100" HorizontalAlignment="Left" Margin="406,79,0,0" VerticalAlignment="Top" Width="120" Background="#FFB6C9E5"  
                 Name="lb_ListePoints"
                 IsSynchronizedWithCurrentItem="true"
                 ItemTemplate="{StaticResource dt}" 
                 ItemsSource ="{Binding CollecNoeuds}"><!--"{Binding Source = {StaticRessource CollecNoeuds}}"-->
 
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas
                        IsItemsHost="true" 
                        ClipToBounds="True"
                        PreviewMouseLeftButtonDown="Canvas_PreviewMouseLeftButtonDown"
                        MouseMove="Canvas_MouseMove" 
                        PreviewMouseRightButtonDown="Canvas_PreviewMouseRightButtonDown">
                        <Canvas.Background>
                            <ImageBrush 
                                        Stretch="UniformToFill" 
                                        ImageSource="Resources/Plan.jpg"/>
                        </Canvas.Background> 
                    </Canvas>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
 
            <!--============Affichge coordonnées du point à coté de ce denrier================-->
            <ItemsControl.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="Canvas.Left" Value="{Binding Path=Arcs.Node_D.Coord_P.X}"/>
                    <Setter Property="Canvas.Top" Value="{Binding Path=Arcs.Node_D.Coord_P.Y}"/>
                </Style>
            </ItemsControl.ItemContainerStyle> 
        </ListBox>
 
        <!--=======================================ListeBox des Arcs==================================-->
        <ListBox Height="100" HorizontalAlignment="Left" Margin="621,79,0,0" VerticalAlignment="Top" Width="120" Background="#FFB6C9E5"
            Name="lb_ListeArcs"
            IsSynchronizedWithCurrentItem="true"
            ItemTemplate="{StaticResource dt}" 
            ItemsSource ="{Binding CollecArcs}"><!--"{Binding Source={StaticResource CollecArcs}}"-->
 
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas
                        IsItemsHost="true" 
                        ClipToBounds="True"
                        PreviewMouseLeftButtonDown="Canvas_PreviewMouseLeftButtonDown"
                        MouseMove="Canvas_MouseMove" 
                        PreviewMouseRightButtonDown="Canvas_PreviewMouseRightButtonDown">
                        <Canvas.Background>
                            <ImageBrush 
                                        Stretch="UniformToFill" 
                                        ImageSource="Resources/Plan.jpg"/>
                        </Canvas.Background>
                    </Canvas>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
 
            <!--============Affichge coordonnées du point à coté de ce denrier================-->
            <ItemsControl.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="Canvas.Left" Value="{Binding Path=Arcs.Node_D.Coord_P.X}"/>
                    <Setter Property="Canvas.Top" Value="{Binding Path=Arcs.Node_D.Coord_P.Y}"/>
                </Style>
            </ItemsControl.ItemContainerStyle>
        </ListBox>
 
        <CheckBox Content="Mode Dessin / Mode Drag " Height="16" HorizontalAlignment="Left" Margin="514,34,0,0" Name="cb_Drawing" VerticalAlignment="Top" />
    </Grid>
</Window>

Le code Behind :

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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
//using System.Windows.Shapes.Path;
using System.ComponentModel;
using System.Data;
using System.Diagnostics;
using System.Net.NetworkInformation;
using System.Net;
using System.Runtime.InteropServices; //import de dll 
using System.IO;
//using System.IO.Path;
 
namespace WpfApplicationBinding
{
    /// <summary>
    /// Logique d'interaction pour MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
 
        //variables drawing
        private bool ModeDrawing = false;
        private bool ModeDragging = false;
        private Arcs larc = null;
 
        //variables dragging
        private System.Windows.Shapes.Path selectedPath = null;
        private EllipseGeometry selectedEllipseNode = null;
        private Brush prevFill = null;
 
        private void Canvas1_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Canvas cnv = sender as Canvas;
            UIElement elem = e.OriginalSource as UIElement; //Note la difference avec SampleArc
            //Position de la souris sur le canvas  
            Point ptDown = Mouse.GetPosition(cnv);
 
            //Mode Dessin ou Mode Deplacement 
            bool b = (bool)cb_Drawing.IsChecked;
            ModeDrawing = b;
            ModeDragging = !b;
 
            //Creation d'un arc
            if (ModeDrawing && e.LeftButton == MouseButtonState.Pressed)
            {
                larc = new Arcs();
                larc.Node_D = new Noeuds(1, 01, ptDown, 1);
                larc.Node_F = new Noeuds(1, 02, ptDown, 1);
                CollecArcs list = (CollecArcs)lb_ListeArcs.ItemsSource;
                list.Add(larc);
            }
 
            //Deplacement d'un arc
            else if (ModeDragging)
            {
                if (elem.GetType() == typeof(System.Windows.Shapes.Path))
                {
                    selectedPath = (System.Windows.Shapes.Path)elem;
                    prevFill = selectedPath.Fill;
                    selectedEllipseNode = selectedPath.Data as EllipseGeometry;
 
                    if (selectedEllipseNode == null) return;
 
                    selectedPath.Fill = Brushes.Magenta;
                    cnv.CaptureMouse();
                }
            }
        }
 
        private void Canvas1_MouseMove(object sender, MouseEventArgs e)
        {
            Canvas cnv = sender as Canvas;
            Point ptMove = Mouse.GetPosition(cnv);
 
            if (ModeDrawing && e.LeftButton == MouseButtonState.Pressed)
            {
                if (larc != null) larc.Node_F.Coord_P = ptMove;
            }
 
            else if (ModeDragging && e.LeftButton == MouseButtonState.Pressed)
            {
                if (selectedEllipseNode != null)
                {
                    selectedEllipseNode.Center = ptMove;
                }
            }
 
        }
 
        private void Canvas1_PreviewMouseRightButtonDown(object sender, MouseButtonEventArgs e)
        {
            Canvas cnv = sender as Canvas;
            Point pt = Mouse.GetPosition(cnv);
 
            if (ModeDrawing && larc != null)
            {
                larc.Node_F.Coord_P = pt;
                larc = null;
            }
 
            else if (ModeDragging)
            {
                if (selectedEllipseNode != null)
                {
                    selectedEllipseNode.Center = pt;
                    selectedPath.Fill = prevFill;
                    selectedPath = null;
                    selectedEllipseNode = null;
                    cnv.ReleaseMouseCapture();
                }
            }
        }
    }
 
}