Path vs PathGeometry dans DataTemplate

**rdh123** · 20/09/2017, 14h11

bonjour

je template ma ListBox alors plusieurs possibilités :

faire la différence entre mes Items par leur Type et là j'utilise un TargetType
utiliser un TemplateSelector..inconvénient il est appelé un seule fois au chargement, donc pas trop dynamique.
comme la différence est dans la géométrie a dessiner j'utilise cette dernière méthode avec un seule DataTemplate mais en faisant un Binding sur Path qui est normalement un type Shape

mais j'ai utilisé dans ma geometrie en code behind un PathGeometry

ma question est : pourquoi un PathGeometry puise être accepté dans mon XAML au niveau du binding suivant :

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
<DataTemplate   x:Key="viewpath"   >
 
            <Canvas Name="itemcanvas" Background="Transparent" 
                    PreviewMouseMove="itemcanvas_PreviewMouseMove"
                    PreviewMouseLeftButtonDown="itemcanvas_PreviewMouseLeftButtonDown"
                    PreviewMouseLeftButtonUp="itemcanvas_PreviewMouseLeftButtonUp"     >
                <Path x:Name="pathnode" Stroke="Green" Fill="Black" Data="{Binding Path=geoview1.geometryform, Mode=TwoWay}"></Path>
 
            </Canvas>
 
            <DataTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="pathnode" Property="Fill" Value="red"/>
                </Trigger>
            </DataTemplate.Triggers>
 
        </DataTemplate>

sa me dessine deux triangles comme il faut, il y a même mon Trigger qui fonctionne normalement.

ma classe :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
 public class GeomView : INotifyPropertyChanged
    { 
 
//......
 
 public PathGeometry geometryform
        {
            get { return this._geometryform; }
 
            set
            {
                if (value != this._geometryform)
                {
                    this._geometryform = value;
                    OnPropertyChanged(nameof(this.geometryform));
                }
            }
 
 
 
        }
 
 
 
}

**Noxen** · 20/09/2017, 17h24

Qu'est-ce-qui t'intrigue ? Un objet Path peut recevoir dans sa propriété Data un Binding sur (entre autres) un objet PathGeometry à partir duquel il va réaliser son dessin, c'est tout simplement dans la conception de la classe :
https://msdn.microsoft.com/en-us/lib...(v=vs.90).aspx

**rdh123** · 21/09/2017, 12h09

ce qui ma intrigué est que Path est un System.Windows.Shapes alors que PathGeometry est un System.Windows.Media, car pour faire du drag and drop je doit caster le sender de Path à PathGeometry et mon objet ne bouge pas je me dit que mon problème vient d'un problème de Type ?!:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
        private Path selPath = null;
        private PathGeometry pg1 = null;
        private bool dragmod = false; //not yet used
        Point p0, p1;
        double dx, dy;
 
        private void itemcanvas_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            Canvas cn;
            cn = (sender as Canvas);
            selPath = new Path();
            selPath = EnumVisual(cn) as Path;
            pg1 = selPath.Data as PathGeometry;
            p0 = e.GetPosition(cn);
        }
 
        private void itemcanvas_PreviewMouseMove(object sender, MouseEventArgs e)
        {
            if (selPath!=null)
            {
                Canvas cn;
                cn = (sender as Canvas);
                p1 = e.GetPosition(cn);
                dx = p1.X - p0.X;
                dy = p1.Y - p0.Y;
                TransletPath(pg1, dx, dy);
                p0 = p1;
 
               //this.txb1.Text = "dx: "+dx.ToString()+"dy:  "+dy.ToString();
            }
        }
 
        private void itemcanvas_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (selPath == null) return;
 
            //liberer la capture souris par un click droit 
            //selPath.ReleaseMouseCapture();
 
            selPath = null;
 
        }
 
 
 
 
        public void TransletPath(PathGeometry mypt,double dltx , double dlty)
        {
 
            TranslateTransform Tr = new TranslateTransform(dltx, dlty);
            pg1.Transform = Tr;
 
            //mypt.Transform= new TranslateTransform(dltx, dlty);
            //Canvas ss = mypt.Parent as Canvas;
            //double xx = Canvas.GetLeft(mypt);
            //double yy = Canvas.GetTop(mypt);
            //Canvas.SetLeft(mypt, Canvas.GetLeft(mypt) + dltx)
            //Canvas.SetTop(mypt, Canvas.GetTop(mypt) + dlty);
 
        }
 
 
 
        static public Visual EnumVisual(Visual myVisual)
        {
            for (int i = 0; i < VisualTreeHelper.GetChildrenCount(myVisual); i++)
            {
                // Retrieve child visual at specified index value.
                Visual childVisual = (Visual)VisualTreeHelper.GetChild(myVisual, i);
 
                if (childVisual.GetType()== typeof(Path))
                {
                    return childVisual;
                }
 
                // Enumerate children of the child visual object.
                EnumVisual(childVisual);
            }
            return myVisual;
        }

**MABROUKI** · 21/09/2017, 20h17

bonjour

Non ,ton probleme vient de la comprehension de l'API WPF...

Path est un UIElement donc il reagit aux events clavier et souris ...
PathGeometry et autres geometries sont des elements graphiques insensibles aux events.
Ils sont simplement dessinés dans Path qui leur sert de conteneur comme le Canvas sert de conteneur au Path)...

1/ Pour déplacer un Path y compris son PathGeometry (qui est unique,faut-il le rappeler) relativement à son "conteneur" Canvas ,tu disposes de Canvas.SetLeft,Canvas.SetTop...

2/ Pour déplacer le PathGeometry relativement à son "conteneur" Path ,tu disposes :
- de Transformation....
- la propriété Stretch du Path doit être mise à None (voir exemple ci-après)...

3/Pour changer la Géométrie (points) du PathGeometry il faut parcourir dans une double boucle "foreach" sa collection PathGeometry.Figures et ensuite la collection Figure.Segments de chaque Figure ,déterminer le type (arcsegment, linesegment etc...) et caster dans une variable approprie ...

code exemple 1 qui déplace le Path relativement à Canvas:
code XAML du Form:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<Window x:Class="WpfPath.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="350" Width="525">
    <Grid>
        <Canvas x:Name="ItemCanvas" ClipToBounds="True" Background="LightGray" 
                Loaded="ItemCanvas_Loaded"
                PreviewMouseLeftButtonDown="ItemCanvas_PreviewMouseLeftButtonDown"
                PreviewMouseMove="ItemCanvas_PreviewMouseMove" 
                PreviewMouseRightButtonDown="ItemCanvas_PreviewMouseRightButtonDown"
                >
            <Path  Stroke="BlueViolet" StrokeThickness="3"
                  Canvas.Left="75" Canvas.Top="85"
                  >
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="100,100">
                            <LineSegment Point="150,50" IsStroked="True" />
                            <ArcSegment Point="200,100" Size="50,50" IsLargeArc="False"  RotationAngle="0" SweepDirection="Clockwise" IsStroked="True" IsSmoothJoin="True"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
 
            </Path>
        </Canvas>
    </Grid>
</Window>

et son code behind.cs :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
namespace WpfPath
{
    /// <summary>
    /// Logique d'interaction pour Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        private Rectangle limitRect = new Rectangle();//rectangle de limites du Path
        public Window1()
        {
            InitializeComponent();
        }
        private void ItemCanvas_Loaded(object sender, RoutedEventArgs e)
        {
            limitRect.Stroke = Brushes.Yellow ;
            ItemCanvas.Children.Add(limitRect);
        }
        private Path selPath = null;
        Point startPoint;
        double dx, dy;
        private void ItemCanvas_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            FrameworkElement elem = e.OriginalSource as FrameworkElement;//uielement cliqué
            if (elem == null) return;
 
            if (elem.GetType() != typeof(Path)) return;// pas de type Path ?
            selPath = elem as Path;
            limitRect.Width = selPath.ActualWidth; //display du limitRect superposé au path
            limitRect.Height = selPath.ActualHeight;
            Canvas.SetLeft(limitRect, Canvas.GetLeft(selPath));
            Canvas.SetTop(limitRect, Canvas.GetTop(selPath));
 
            selPath.CaptureMouse();
            startPoint = e.GetPosition(selPath);
 
        }
 
        private void ItemCanvas_PreviewMouseMove(object sender, MouseEventArgs e)
        {
            if (selPath  != null)
            {
 
 
                Point p = e.GetPosition(selPath);
                dx = p.X - startPoint.X;
                dy = p.Y - startPoint.Y;
                Canvas.SetLeft(selPath, Canvas.GetLeft(selPath) + dx);
                Canvas.SetTop(selPath, Canvas.GetTop(selPath) + dy);
 
                Canvas.SetLeft(limitRect, Canvas.GetLeft(selPath));
                Canvas.SetTop(limitRect, Canvas.GetTop(selPath));
 
 
 
            }
        }
 
        private void ItemCanvas_PreviewMouseRightButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (selPath != null)
 
            //liberer la capture souris par un click droit 
            selPath.ReleaseMouseCapture();
            selPath = null;
            limitRect.Width = 0.0;
            limitRect.Height = 0.0;
 
        }
 
 
    }
}

code exemple 2 qui déplace le PathGeometry relativement à Path:
code XAML du Form:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<Window x:Class="WpfPath.Window2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window2" Height="350" Width="525">
    <Grid>
        <Canvas x:Name="ItemCanvas" ClipToBounds="True" Background="LightGray" 
                Loaded="ItemCanvas_Loaded"
                PreviewMouseLeftButtonDown="ItemCanvas_PreviewMouseLeftButtonDown"
                PreviewMouseMove="ItemCanvas_PreviewMouseMove" 
                PreviewMouseRightButtonDown="ItemCanvas_PreviewMouseRightButtonDown"
                >
            <Path  Stroke="BlueViolet" StrokeThickness="3"
                  Canvas.Left="75" Canvas.Top="85"
                  Stretch="None">
                <Path.Data>
 
                    <PathGeometry>
                        <PathFigure StartPoint="100,100">
                            <LineSegment Point="150,50" IsStroked="True"  />
                            <ArcSegment Point="200,100" Size="50,50" IsLargeArc="False"  RotationAngle="0" SweepDirection="Clockwise" IsStroked="True" IsSmoothJoin="True"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
 
            </Path>
        </Canvas>
    </Grid>
</Window>

et son code behind.cs :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
namespace WpfPath
{
    /// <summary>
    /// Logique d'interaction pour Window2.xaml
    /// </summary>
    public partial class Window2 : Window
    {
        private Rectangle limitRect = new Rectangle();//rectangle de limites du Path
        public Window2()
        {
            InitializeComponent();
        }
        private void ItemCanvas_Loaded(object sender, RoutedEventArgs e)
        {
            limitRect.Stroke = Brushes.Yellow;
            ItemCanvas.Children.Add(limitRect);
        }
        private Path selPath = null;
        private PathGeometry selGeom = null;
        Point startPoint;
        double dx, dy;
 
        private void ItemCanvas_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            FrameworkElement elem = e.OriginalSource as FrameworkElement;//uielement cliqué
            if(elem == null )return ;
 
            if (elem.GetType() != typeof(Path))return ;// pas de type Path
            selPath = elem as Path;
 
            limitRect.Width = selPath.ActualWidth;//display du limitRect superposé au path
            limitRect.Height=selPath.ActualHeight ;
            Canvas.SetLeft(limitRect, Canvas.GetLeft(selPath));
            Canvas.SetTop(limitRect, Canvas.GetTop(selPath));
 
            Geometry elemGeom = selPath.Data as Geometry;//elem geometry
            if (elemGeom == null) return ;
 
            if (elemGeom.GetType() == typeof(PathGeometry))  // de type PathGeometry ? (il existe aussi EllipseGeometry,StreamGeometry etc...)
            {
                selGeom = elemGeom as PathGeometry;
                selPath.CaptureMouse();
                startPoint = e.GetPosition( selPath);
 
            }
 
 
        }
 
        private void ItemCanvas_PreviewMouseMove(object sender, MouseEventArgs e)
        {
            if (selGeom != null)
            {
 
 
                Point p = e.GetPosition(selPath );
                dx = p.X - startPoint.X;
                dy = p.Y - startPoint.Y;
 
                selGeom.Transform = new TranslateTransform(dx, dy);
 
 
                Canvas.SetLeft(limitRect, Canvas.GetLeft(selPath));
                Canvas.SetTop(limitRect, Canvas.GetTop(selPath));
 
            }
 
        }
 
        private void ItemCanvas_PreviewMouseRightButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (selGeom != null)
 
            //liberer la capture souris par un click droit 
            selPath.ReleaseMouseCapture();
            selGeom = null;
            selPath = null;
            limitRect.Width = 0.0;
            limitRect.Height = 0.0;
        }
 
 
    }
}

bon code...

**rdh123** · 21/09/2017, 23h35

merci pour ta réponse :

Envoyé par MABROUKI

2/ Pour déplacer le PathGeometry relativement à son "conteneur" Path ,tu disposes :
- de Transformation....
- la propriété Stretch du Path doit être mise à None (voir exemple ci-après)...

c'est ça puisque je fait un binding (mon Data = "ma prop PathGeometry ") et donc je modifie par le code le PathGeometry pour cela j'utilise "Transformation"

je vais corriger mon code

**rdh123** · 22/09/2017, 15h32

bonjour

en utilisant :

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
private void ItemCanvas_PreviewMouseMove(object sender, MouseEventArgs e)
        {
            if (selGeom != null)
            {
 
 
                Point p = e.GetPosition(selPath );
                dx = p.X - startPoint.X;
                dy = p.Y - startPoint.Y;
 
                selGeom.Transform = new TranslateTransform(dx, dy);
 
            }
 
        }

sa marche la première fois pas la deuxième!! sa donne des sauts de mouvement et vers les mauvaises directions , je crois que Transform sauvegarde la dernière transformation, alors j'ai fais ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
private void itemcanvas_PreviewMouseMove(object sender, MouseEventArgs e)
        {
            if (selPath!=null)
            {
                
                p1 = e.GetPosition(selPath);
                dx  =p1.X - p0.X;
                dy  = p1.Y - p0.Y;
                pg1.Transform = new TranslateTransform(dx+ pg1.Transform.Value.OffsetX, dy+ pg1.Transform.Value.OffsetY);
                p0 = p1;
               
               
            }
        }

j'ai "découvert" en faisant un test sur un autre canvas :

en cliquant sur un bouton je déplace un rectangle

Code :

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

1
2
3
4
5
6
7
8
9
10
int delt = 0;
        private void but1_Click(object sender, RoutedEventArgs e)
        {
            delt = delt + 1;
            Path mylocalpt = this.mycanvas.Children[0] as Path;
            mylocalpt.Data.Transform= new TranslateTransform(100 , 100);               //mouvement une seule fois meme si je continu à cliquer
           // mylocalpt.Data.Transform= new TranslateTransform(10+delt , 10+delt);  // mouvement en continu pour chaque clique 
            
        }

**MABROUKI** · 22/09/2017, 17h33

rebonjour

C'est bon ,mais le code classique le plus simple :
1/c'est en plus de la ligne de code qui met à jour le point cliqué- startPoint - pour qu'il "traque" le point - p -:

Code :

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

1
2
 
  startPoint =p;

2/ c'est declarer un TranslateTransform comme variable ,de l'assigner à PathGeometry et de le mettre à jour dans les mvts de souris (ceci permet meme de déclarer un TransformGroup en XAML ,nommé ,de recuperer les différentes transformations translation,rotation et mise à l'echelle et les mettre à jpur)....

code XAML revu :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<Window x:Class="WpfPath.Window2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window2" Height="350" Width="525">
    <Grid>
        <Canvas x:Name="ItemCanvas" ClipToBounds="True" Background="LightGray" 
                Loaded="ItemCanvas_Loaded"
                PreviewMouseLeftButtonDown="ItemCanvas_PreviewMouseLeftButtonDown"
                PreviewMouseMove="ItemCanvas_PreviewMouseMove" 
                PreviewMouseRightButtonDown="ItemCanvas_PreviewMouseRightButtonDown"
                >
            <Path  Stroke="BlueViolet" StrokeThickness="3"
                  Canvas.Left="75" Canvas.Top="85"
                  Stretch="None">
                <Path.Data>
 
                    <PathGeometry>
                        <PathGeometry.Transform >
                            <TranslateTransform x:Name="tr"/>
                        </PathGeometry.Transform>
                        <PathFigure StartPoint="100,100">
                            <LineSegment Point="150,50" IsStroked="True"  />
                            <ArcSegment Point="200,100" Size="50,50" IsLargeArc="False"  RotationAngle="0" SweepDirection="Clockwise" IsStroked="True" IsSmoothJoin="True"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
 
            </Path>
        </Canvas>
    </Grid>
</Window>

code behind .cs revu

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
namespace WpfPath
{
    /// <summary>
    /// Logique d'interaction pour Window2.xaml
    /// </summary>
    public partial class Window2 : Window
    {
        private Rectangle limitRect = new Rectangle();//rectangle de limites du Path
        public Window2()
        {
            InitializeComponent();
        }
        private void ItemCanvas_Loaded(object sender, RoutedEventArgs e)
        {
            limitRect.Stroke = Brushes.Yellow;
            ItemCanvas.Children.Add(limitRect);
        }
        private Path selPath = null;
        private PathGeometry selGeom = null;
        Point startPoint;
        double dx, dy;
 
        private void ItemCanvas_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            FrameworkElement elem = e.OriginalSource as FrameworkElement;//uielement cliqué
            if(elem == null )return ;
 
            if (elem.GetType() != typeof(Path))return ;// pas de type Path
            selPath = elem as Path;
 
            limitRect.Width = selPath.ActualWidth;//display du limitRect superposé au path
            limitRect.Height=selPath.ActualHeight ;
            Canvas.SetLeft(limitRect, Canvas.GetLeft(selPath));
            Canvas.SetTop(limitRect, Canvas.GetTop(selPath));
 
            Geometry elemGeom = selPath.Data as Geometry;//elem geometry
            if (elemGeom == null) return ;
 
            if (elemGeom.GetType() == typeof(PathGeometry))  // de type PathGeometry ? (il existe aussi EllipseGeometry,StreamGeometry etc...)
            {
                selGeom = elemGeom as PathGeometry;
                selPath.CaptureMouse();
                startPoint = e.GetPosition( selPath);
            }
 
 
        }
 
 
        private void ItemCanvas_PreviewMouseMove(object sender, MouseEventArgs e)
        {
            if (selGeom != null)
            {
                Point p = e.GetPosition(selPath);
                dx = p.X - startPoint.X;
                dy = p.Y - startPoint.Y;
 
                tr.X +=dx;
                tr.Y +=dy;
                Canvas.SetLeft(limitRect, Canvas.GetLeft(selPath));
                Canvas.SetTop(limitRect, Canvas.GetTop(selPath));
 
 
                startPoint =p;
 
            }
 
        }
        private void ItemCanvas_PreviewMouseRightButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (selGeom != null)
 
            //liberer la capture souris par un click droit 
            selPath.ReleaseMouseCapture();
            selGeom = null;
            selPath = null;
            limitRect.Width = 0.0;
            limitRect.Height = 0.0;
        }
 
 
    }
}

excuse-moi pour le contretemps et bon code....

**rdh123** · 22/09/2017, 19h09

merci
donc on déclare une seule foi le TranslateTransform

Code :

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

1
2
 
  <TranslateTransform x:Name="tr"/>

et l'utilisé :

Code :

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

1
2
3
 
 tr.X +=dx;
 tr.Y +=dy;

sauf que dans mon code le tr n'est pas reconnu.
en plus j'ai un message d’erreur "Error Cannot set properties on property elements. Line 21 Position 22." ici :

Code :

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

1
2
3
4
5
6
7
8
9
10
 <Path x:Name="pathnode" >
                    <Path.Data  Stroke="Green" Fill="Black" Stretch="None" Data="{Binding Path=geoview1.geometryform, Mode=TwoWay}">
                        <PathGeometry>
                        <PathGeometry.Transform >
                            <TranslateTransform x:Name="tr"/>
                        </PathGeometry.Transform>
                    </PathGeometry>
                </Path.Data>
                </Path>

**MABROUKI** · 22/09/2017, 21h15

bonjour

sauf que dans mon code le tr n'est pas reconnu.

s'il est dans un DataTemplate oui .Un x:Name est limite à la portée du DataTemplate en XAML, les 2 balises englobantes
du DataTemplate (idem pour un style) !!!
Mon x:Name est reconnu dans le code du Form car il est déclaré (et initialisé à la fois) dans la portée du XAML du Form c.à.d les 2 balises <Window....> blah blah </Window>

Tu aurais pu déclarer et initialiser la prop Transform de PathGeometry dans ton class GeomView ce qui rends sa valeur disponible dans le MouseDown .
Dans ton class GeomView

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
public class GeomView : INotifyPropertyChanged
    {
        private PathGeometry _geometryForm = null;
 
        public  GeomView()
        {
            this._geometryForm = new PathGeometry();
            this._geometryForm.Transform = new TranslateTransform();
        }
        public PathGeometry GeometryForm
        {
            get { return this._geometryForm; }
 
            set
            {
                if (value != this._geometryForm)
                {
                    this._geometryForm = value;
                    OnPropertyChanged("GeometryForm");
                }
            }
 
 
 
        }
 
 
 
        public event PropertyChangedEventHandler  PropertyChanged;
        private void OnPropertyChanged(string n)
        {
            PropertyChangedEventHandler h = PropertyChanged;
            if( h != null)
                h(this,new PropertyChangedEventArgs(n));
        }
    }

dans le code du Form utilisateur :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
private Path selPath = null;
        private PathGeometry selGeom = null;
        Point startPoint;
        double dx, dy;
        TranslateTransform tr = null;// c'est par ICI
        private void ItemCanvas_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            FrameworkElement elem = e.OriginalSource as FrameworkElement;//uielement cliqué
            if(elem == null )return ;
 
            if (elem.GetType() != typeof(Path))return ;// pas de type Path
            selPath = elem as Path;
 
            limitRect.Width = selPath.ActualWidth;//display du limitRect superposé au path
            limitRect.Height=selPath.ActualHeight ;
            Canvas.SetLeft(limitRect, Canvas.GetLeft(selPath));
            Canvas.SetTop(limitRect, Canvas.GetTop(selPath));
 
            Geometry elemGeom = selPath.Data as Geometry;//elem geometry
            if (elemGeom == null) return ;
 
            if (elemGeom.GetType() == typeof(PathGeometry))  // de type PathGeometry ? (il existe aussi EllipseGeometry,StreamGeometry etc...)
            {
                selGeom = elemGeom as PathGeometry;
                tr = selGeom.Transform as TranslateTransform ;
                selPath.CaptureMouse();
                startPoint = e.GetPosition( selPath);
            }
 
 
        }

code XAML est modifie ainsi ;

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
 
 <Path  Stroke="BlueViolet" StrokeThickness="3"
                  Canvas.Left="75" Canvas.Top="85"
                  Stretch="None"
                   >
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="100,100">
                            <LineSegment Point="150,50" IsStroked="True"  />
                            <ArcSegment Point="200,100" Size="50,50" IsLargeArc="False"  RotationAngle="0" SweepDirection="Clockwise" IsStroked="True" IsSmoothJoin="True"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
 
            </Path>

la déclaration XAML et l'initialisation sont ainsi reportées dans ton class GeomView....
bon, code...

**rdh123** · 22/09/2017, 22h50

sa fonctionne merci.
maintenant je passe au menu contextuel pour chaque item.

**rdh123** · 24/09/2017, 15h02

Envoyé par rdh123

sa fonctionne merci.
maintenant je passe au menu contextuel pour chaque item.

bon j'ai pris un code qui ne me paret pas trop complexe :

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
 
 #region ICommands
        private ICommand _Run = null;
        public ICommand Run
        {
            get
            {
                return _Run ?? (new RDHCommand(this));
            }
        }
        #endregion
 
        #region CommandMethods
        public void RunMethod() //this method will be run
        {
            var v = _id;  // juste pour faire un point d’arrêt et voir si discrimination entre Item et exécution de la bonne Action
        }
        #endregion

que j'ai rajouté dans ma classe métier "RDHNode" (celle qui composera ma collection liée à ma ListBox)

j'ai aussi crée une commande (première fois) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
public class RDHCommand : ICommand
    {
        event EventHandler ICommand.CanExecuteChanged
        {
            add
            {
                //throw new NotImplementedException();
            }
 
            remove
            {
                //throw new NotImplementedException();
            }
        }
 
        bool ICommand.CanExecute(object parameter)
        {
            return true;
        }
 
        void ICommand.Execute(object parameter)
        {
           //vide !!
        }
        public RDHCommand(object parameter)
        {
            (parameter as RDHNode).RunMethod();
        }
    }

et puis mon XAML :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<DataTemplate   x:Key="viewpath"   >
 
            <Canvas Name="itemcanvas" Background="Transparent" 
                    PreviewMouseMove="itemcanvas_PreviewMouseMove"
                    PreviewMouseLeftButtonDown="itemcanvas_PreviewMouseLeftButtonDown"
                    PreviewMouseLeftButtonUp="itemcanvas_PreviewMouseLeftButtonUp"     >
                <Path x:Name="pathnode" Stroke="Green" Fill="Black" Stretch="None" Data="{Binding Path=geoview1.geometryform, Mode=TwoWay}" >                   
                </Path>
                <Canvas.ContextMenu>
                    <ContextMenu>
                        <MenuItem Header="Menu item 1" Command="{Binding Path=Run}"  CommandParameter="{Binding Path=SelectedItem}"/>
                        <MenuItem Header="Menu item 2" />
                        <Separator />
                        <MenuItem Header="Menu item 3" />
                    </ContextMenu>
 
                </Canvas.ContextMenu>
            </Canvas>
 
            <DataTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="pathnode" Property="Fill" Value="red"/>
                </Trigger>
            </DataTemplate.Triggers>
 
        </DataTemplate>

ce qui fonctionne : le bon Item est bien identifié (j'en ai créer uniquement deux , deux triangles)
ce qui ne fonctionne pas : le clique droit pour faire apparettre le menu contextuel fait passer l’exécution directement à :

Code :

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

1
2
3
4
5
6
7
 
        #region CommandMethods
        public void RunMethod() //this method will be run
        {
            var v = _id;  // juste pour faire un point d’arrêt et voir si discrimination entre Item et exécution de la bonne Action
        }
        #endregion

et ceci sans même avoir le temps de cliquer sur "Menu item 1" (j'en ai trois comme l'indique mon XAML)

**Noxen** · 25/09/2017, 15h27

Tu lances ta méthode Run dans le constructeur de la commande au lieu de la lancer dans la méthode Execute. Et tu n'as probablement pas besoin d'une implémentation non-standard du CanExecuteChanged.

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
public class RDHCommand : ICommand
    {
        public event EventHandler CanExecuteChanged;      
 
        bool ICommand.CanExecute(object parameter)
        {
            return true;
        }
 
        void ICommand.Execute(object parameter)
        {
            _node?.RunMethod();
        }
 
        public RDHCommand(object parameter)
        {
            _node = parameter as RDHNode;
        }
 
        private RDHNode _node = null;
    }

**rdh123** · 25/09/2017, 15h47

Envoyé par Noxen

Tu lances ta méthode Run dans le constructeur de la commande au lieu de la lancer dans la méthode Execute. Et tu n'as probablement pas besoin d'une implémentation non-standard du CanExecuteChanged.

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
public class RDHCommand : ICommand
    {
        public event EventHandler CanExecuteChanged;      
 
        bool ICommand.CanExecute(object parameter)
        {
            return true;
        }
 
        void ICommand.Execute(object parameter)
        {
            _node?.RunMethod();
        }
 
        public RDHCommand(object parameter)
        {
            _node = parameter as RDHNode;
        }
 
        private RDHNode _node = null;
    }

merci , effectivement ,
...mais je me pose une question : faut il autant de commande que d' "MenuItem", et donc dois je créer RDHCommand 1, RDHCommand 2...?

**Noxen** · 25/09/2017, 16h06

Je suis allé un peu vite. Puisque tu passer l'objet à exécuter en paramètre de la commande tu n'as pas besoin de le mettre dans le constructeur et une seule commande suffit :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
public class RDHCommand : ICommand
    {
        public event EventHandler CanExecuteChanged;      
 
        bool CanExecute(object parameter)
        {
            return true;
        }
 
        void Execute(object parameter)
        {
            (parameter as RDHNode)?.RunMethod();
        }     
    }

Par contre je n'ai aucune idée de l'architecture exacte de ton projet donc tu auras peut-être quelques ajustements à faire par rapport au code que je t'ai donné.

**rdh123** · 25/09/2017, 18h04

bon je suis largué , j'ai ceci

Code :

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

1
2
3
4
5
6
7
8
 
  <ContextMenu>
                        <MenuItem Header="Menu item 1" Command="{Binding Path=Run1}"  CommandParameter="{Binding Path=SelectedItem}"/>
                        <Separator />
                        <MenuItem Header="Menu item 2" Command="{Binding Path=Run2}"  CommandParameter="{Binding Path=SelectedItem}" />
                        <Separator />
                        <MenuItem Header="Menu item 3" />
                    </ContextMenu>

et ceci dans ma classe (viewmodel) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
  #region ICommands
        private ICommand _Run1 = null;
        public ICommand Run1
        {
            get
            {
                return _Run1 ?? (new RDHCommand(this,1));//command parameter "1"  !!
            }
        }
 
        private ICommand _Run2 = null;
        public ICommand Run2
        {
            get
            {
                return _Run2 ?? (new RDHCommand(this, 2));//command parameter "2"  !!
            }
        }
 
 
 
 
        #endregion
 
        #region ContextMenu CommandMethods
        public void RunMethod1() 
        {
            var v = _id;  
        }
 
        public void RunMethod2() 
        {
            var v = _id;  
        }
        #endregion

consommé dans ma classe RDHCommand ici :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 void ICommand.Execute(object parameter)
        {
            if (_c == 1)
            { _node?.RunMethod1(); }
 
            if (_c == 2)
             { _node?.RunMethod2(); } 
        }
        public RDHCommand(object parameter,int c)//here we pass the command parameter
        {
            _node = parameter as RDHNode;
            _c = c;
        }

dans mon XAML il y CommandParameter , et dans ma propriété Run1 ou Run2 il y a aussi une assignation de Command parameter , il sert à quoi celui du XAML?

**rdh123** · 29/09/2017, 16h36

je n'ai pas besoin de passer quelconque paramètre via le XAML :

Code :

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

CommandParameter="{Binding Path=SelectedItem}"

puisque c'est dans le code behind qu'il est fait :

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
 
 #region ICommands
        private ICommand _Run1 = null;
        public ICommand Run1
        {
            get
            {
                return _Run1 ?? (new RDHCommand(this,1));//here we pass the command parameter "1"
            }
        }
 
        private ICommand _Run2 = null;
        public ICommand Run2
        {
            get
            {
                return _Run2 ?? (new RDHCommand(this, 2));//here we pass the command parameter "2"
            }
        }
 
 
        #endregion

**rdh123** · 29/09/2017, 22h36

une question :

quelle différence entre :

Code :

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

1
2
 
            this.listBox1.DataContext = mysource;

et :

Code :

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

1
2
 
           this.listBox1.ItemsSource = mysource;

**Noxen** · 02/10/2017, 02h52

Envoyé par rdh123

Code :

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

1
2
 
            this.listBox1.DataContext = mysource;

Les éléments du framework ont une propriété DataContext qui leur donne une source de données qu'il pourront exploiter au cas par cas ; par exemple, si sa propriété ItemsSource n'est pas affectée, une ListBox va regarder si l'objet fourni en DataContext est une liste d'objets qu'elle va pouvoir afficher.

Envoyé par rdh123

Code :

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

1
2
 
           this.listBox1.ItemsSource = mysource;

Les objets à présenter sont directement fournis en ItemsSource, en ignorant le DataContext.

**rdh123** · 02/10/2017, 15h49

je me pose la question du binding dans le template suivant :

Code :

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

1
2
3
4
5
 
<ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/  Background =?     >
        </ItemsPanelTemplate>

puisque mes Item sont :

Code :

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

this.listBox1.ItemsSource = mysource;

mes Items sont bien représentés par le code XAML suivant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<DataTemplate   x:Key="viewpath"   >
 
            <Canvas Name="itemcanvas" Background="Transparent" 
                    PreviewMouseMove="itemcanvas_PreviewMouseMove"
                    PreviewMouseLeftButtonDown="itemcanvas_PreviewMouseLeftButtonDown"
                    PreviewMouseLeftButtonUp="itemcanvas_PreviewMouseLeftButtonUp"     >
                <Path x:Name="pathnode" Stroke="Green" Fill="Black" Stretch="None" Data="{Binding Path=geoview1.geometryform, Mode=TwoWay}" >                   
                </Path>
                <Canvas.ContextMenu>
                    <ContextMenu>
                        <MenuItem Header="Menu item 1" Command="{Binding Path=Run}"  CommandParameter="{Binding Path=SelectedItem}"/>
                        <MenuItem Header="Menu item 2" />
                        <Separator />
                        <MenuItem Header="Menu item 3" />
                    </ContextMenu>
 
                </Canvas.ContextMenu>
            </Canvas>
 
            <DataTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="pathnode" Property="Fill" Value="red"/>
                </Trigger>
            </DataTemplate.Triggers>
 
        </DataTemplate>

**Noxen** · 03/10/2017, 12h25

Un Binding a besoin d'une Source (qui va fournir des données) et d'un Path (chemin vers la donnée à récupérer, généralement le nom d'une propriété). Si le Path n'est pas précisé, c'est la source elle-même qui devient la donnée. Si la Source n'est pas précisé, c'est le DataContext actuel qui devient la source (celui-ci pouvant d'ailleurs être "hérité" d'un contrôleur parent). Dans le cas d'un DataTemplate, c'est que doit présenter ce DataTemplate qui est le DataContext.

Quel est le type d'objet que contient la liste source (est qui sera transmis au DataTemplate) ? Note qu'un DataTemplate a une propriété DataType qui correspond au type d'objet qu'il doit présenter et qui va entre autre permettre à Visual Studio de fournir l'Intellisense sur les propriétés. Le XAML que tu as fourni suppose que l'objet à présenter possède une propriété Run (une ICommand) et une propriété SelectedItem. Est-ce-bien le cas ? ou peut-être que ce SelectedItem doit venir d'autre part, par exemple la liste qui contient les objets à présenter (dans ce cas, il faudra spécifier la source : void RelativeSource, FindAncestor, Type = ListBox).

Path vs PathGeometry dans DataTemplate

Windows Presentation Foundation

Discussions similaires

Partager

Partager