Discussion :

[anthyme]

Bonsoir,

Comme mon post précédant je vais parler d un manque vis a vis de WPF

Je cherche a compenser ce manque.
Le but est plus ou moins de créer un google map like (avec zoom et drag a la souris).
C'est clair qu'un viewport aurait été super mais je vais devoir faire sans...
Mon contenu est un canvas avec plein d éléments dessus.

Pour le zoom j'ai réussi avec un slider (au regret de ne pouvoir utiliser la roulette de la souris) qui fait du ScaleTransform sur le canvas ce dernier étant enfermé dans un ScrollViewer.
Première surprise les ascenseurs du ScrollViewer ne diminues pas alors que le canvas grandi c'est étrange ... et je n'ai pas trouver de solution pour faire glisser ce canvas ...

Si vous pouvez me donner un coup de pouce

merci

[anthyme]

Bon j'ai bidouiller la nuit, c'était finalement assez facile de faire sans viewport...

Je vais partager mon code ça pourra servir :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
[...]
                <Canvas x:Name="Can" Background="Beige" Width="4000" Height="3000" MouseLeftButtonDown="Can_MouseLeftButtonDown" MouseLeftButtonUp="Can_MouseLeftButtonUp"  MouseMove="Can_MouseMove">
                    <Canvas.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform x:Name="ZoomTransform"  />
                            <TranslateTransform x:Name="MoveTransform"/>
                        </TransformGroup>
                    </Canvas.RenderTransform>
                    [...]
                </Canvas>
[...]

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
public partial class Page : UserControl
    {
        private bool isDragging = false;
        private Point mouseOffset;
 
        public Page()
        {
            InitializeComponent();
        }
 
        private void Can_MouseMove(object sender, MouseEventArgs e)
        {
            if (isDragging)
            {
                Point point = e.GetPosition(this);
                Can.SetValue(Canvas.TopProperty, point.Y - mouseOffset.Y);
                Can.SetValue(Canvas.LeftProperty, point.X - mouseOffset.X);
            }
        }
 
        private void Can_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            Can.ReleaseMouseCapture();
            isDragging = false;
        }
 
        private void Can_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            isDragging = true;
            mouseOffset = e.GetPosition(Can);
            Can.CaptureMouse();
        }
    }

il me reste plus qu'a faire ne sorte qu'on ne puisse pas sortir le canvas de son viewer.

[anthyme]

j'ajouterai une petite correction car cela ne marche plus lorsque l'on zoom ...

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
        private void Can_MouseMove(object sender, MouseEventArgs e)
        {
            if (isDragging)
            {
                Point point = e.GetPosition(this);
                Can.SetValue(Canvas.TopProperty, (double)Can.GetValue(Canvas.TopProperty) + (point.Y - mouseOffset.Y));
                Can.SetValue(Canvas.LeftProperty, (double)Can.GetValue(Canvas.LeftProperty) + (point.X - mouseOffset.X));
                mouseOffset = point;
            }
        }
 
        private void Can_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            Can.ReleaseMouseCapture();
            isDragging = false;
        }
 
        private void Can_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            isDragging = true;
            mouseOffset = e.GetPosition(this);
            Can.CaptureMouse();
        }

Bon jv aller revisser mes exam au lieu de faire mumuse moi

[anthyme]

Bon y a un truc que j arrive pas a faire ...

Je veux faire du zoom dans mon canvas a l'aide de transformation Scale mais le problème c'est que cela ne se centre pas (le canvas s'augmente ou diminue en bas a droite).
Il y a les scaleimage qui semblent répondre a ce probleme mais comment gérer ca manulement sur un canvas ?

mci

[Skyounet]

Bon y a un truc que j arrive pas a faire ...

Je veux faire du zoom dans mon canvas a l'aide de transformation Scale mais le problème c'est que cela ne se centre pas (le canvas s'augmente ou diminue en bas a droite).
Il y a les scaleimage qui semblent répondre a ce probleme mais comment gérer ca manulement sur un canvas ?

mci

Est-ce que tu as essayé de spécifier le CenterX et CenterY dans ta ScaleTransform ?

[anthyme]

J'ai tester quelques valeurs (je ne sais pas a quoi corresponde ce X et ce Y) mais cela ne change pas le zoom.

Juste pour donner le code behind (non present plus haut) :

Code :

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

1
2
3
4
5
        private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            ZoomTransform.ScaleX += e.NewValue - e.OldValue;
            ZoomTransform.ScaleY += e.NewValue - e.OldValue;
        }