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

[Skyounet]

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

Et t'as quoi dans ton Canvas parce que normalement tout ce qui se trouve dedans est agrandit en meme temps.

[anthyme]

j'ai pas dis que cela ne s'agrandissait pas que que cela ne restait pas centré


j'ai mis en ligne pour que tu puisse voir :

http://pythonaddict.free.fr/Omega.UI...aTestPage.html

[Thomas Lebrun]

j'ai pas dis que cela ne s'agrandissait pas que que cela ne restait pas centré


j'ai mis en ligne pour que tu puisse voir :

http://pythonaddict.free.fr/Omega.UI...aTestPage.html

Il y a bien un zoom mais il n'est pas centré

Essaye de modifier aussi les propriétés CenterX et CenterY de ton scaletransform

[Skyounet]

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

Par rapport à CenterX et CenterY les valeurs sont de 0 à 1 en type double.

0 1
0 1

Essaye et si ça change pas bah j'essaierai sur mon PC pour trouver une solution.

[anthyme]

j'ai essayé 0, 0.5, 1 cela ne change rien du tout.

je vous donne le code complet ça sera plus lisible que les bout que j ai mis plus haut :

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
<UserControl x:Class="Omega.UI.Silverlight.Univers"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="800" Height="480"
    xmlns:Omega_UI_Silverlight="clr-namespace:Omega.UI.Silverlight"
    >
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid Height="480" Width="800">
            <Canvas x:Name="UniversContainer" Height="480" Width="800">
                <Canvas x:Name="UniversPlanets" Background="Beige" Width="2000" Height="1000" MouseLeftButtonDown="Univers_MouseLeftButtonDown"  MouseLeftButtonUp="Univers_MouseLeftButtonUp"  MouseMove="Univers_MouseMove" Margin="-1000,-10,0,0">
                    <Canvas.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform x:Name="ZoomTransform" CenterX="1" CenterY="1"/>
                            <TranslateTransform x:Name="MoveTransform"/>
                        </TransformGroup>
                    </Canvas.RenderTransform>
                	<Omega_UI_Silverlight:Face Height="200" Width="200" Canvas.Left="1020" Canvas.Top="20"/>
 
                    <TextBlock x:Name="Text" Canvas.Top="250"/>
                </Canvas>
            </Canvas>
            <Slider HorizontalAlignment="Left" Margin="12.221,9.999,0,0" x:Name="ZoomSlider" Width="100" Height="21" VerticalAlignment="Top" ValueChanged="Slider_ValueChanged"/>
        </Grid>
    </Grid>
</UserControl>

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
namespace Omega.UI.Silverlight
{
    public partial class Univers : UserControl
    {
 
        private bool isDragging;
        private Point mouseOffset;
 
        public Univers()
        {
            InitializeComponent();
        }
 
        private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            ZoomTransform.ScaleX += e.NewValue - e.OldValue;
            ZoomTransform.ScaleY += e.NewValue - e.OldValue;
        }
 
 
        private void Univers_MouseMove(object sender, MouseEventArgs e)
        {
            if (isDragging)
            {
                Point point = e.GetPosition(this);
                UniversPlanets.SetValue(Canvas.TopProperty, (double)UniversPlanets.GetValue(Canvas.TopProperty) + (point.Y - mouseOffset.Y));
                UniversPlanets.SetValue(Canvas.LeftProperty, (double)UniversPlanets.GetValue(Canvas.LeftProperty) + (point.X - mouseOffset.X));
                mouseOffset = point;
            }
        }
 
        private void Univers_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            UniversPlanets.ReleaseMouseCapture();
            isDragging = false;
        }
 
        private void Univers_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            isDragging = true;
            mouseOffset = e.GetPosition(this);
            UniversPlanets.CaptureMouse();
        }
    }
}

merci de votre aide en tout cas

[Thomas Lebrun]

Bon, voila de quoi te faire gagner du temps

Une implémentation du ViewBox en Silverlight: http://blois.us/Silverlight/Minesweeper/Viewbox.cs


Pas tester encore mais cela semble prometteur à voir la démo: http://blois.us/Silverlight/Minesweeper/

[anthyme]

je comprend absolument pas comment l'utiliser :s

bon je vais essayer de creuser

[Thomas Lebrun]

Dans le XAML, tu mets le Viewbox et tu mets ton contrôle (Grid, etc...) dedans....

[anthyme]

nan mais ca je savais quand même arf
mais comme cela ne changeais rien je suppose qu'il y a surement d autre manip a faire ...

[junix]

pourquoi pour le zoom tu n'as pas réussi à utiliser la roulette?