Discussion :

[Truelle]

Salut à tous,

j'ai créé un User Control en WPF, composé principalement d'un control Grid avec d'autres controls à l'intérieur, peu importe. Ce user control je l'utilise dans un Canvas.
Pendant l'éxécution de mon application je veux pouvoir déplacer ce user control comme si c'était une fenêtre MDI, en gros clic sur le composant, déplacer la souris donc déplacer le composant, classique.
J'ai essayé via l'event "MouseMove" en attribuant les nouvelles coordonnées en fonction de la position de ma souris par rapport au canvas - la position de ma souris par rapport au composant (sinon le composant se déplace directement à l'endroit où l'on clique), sans succés, il se passe absolument rien, j'ai même vérifier le calcul via une MessageBox, tout semble être correct :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
        private void userControl21_MouseMove(object sender, MouseEventArgs e)
        {
            if (e.LeftButton == MouseButtonState.Pressed)
            {
                //Canvas.SetTop(userControl21, e.GetPosition(null).Y);
                //Canvas.SetLeft(userControl21, e.GetPosition(null).X);
                //MessageBox.Show(e.GetPosition(userControl21).X + " " + e.GetPosition(userControl21).Y + " " + e.GetPosition(null).X + " " + e.GetPosition(null).Y);
                Canvas.SetTop(userControl21, e.GetPosition(null).Y - e.GetPosition(userControl21).Y);
                Canvas.SetLeft(userControl21, e.GetPosition(null).X - e.GetPosition(userControl21).X);
            }
        }

Note : si j'utilise les deux premières lignes, certes le composant se déplace direct sur mon pointeur de la souris (impossible donc de déplacer vers le haut et la gauche) mais au moins il se déplace.


Et en second point, surement plus difficile, j'aimerai pouvoir resizer mon composant pendant l'éxécution de la même façon que l'on ferait avec une fenêtre où lorsque l'on est en mode conception. Pas resizer via les valeurs directement, mais bel et bien en agrandissant via les bords du composant.
J'ai absolument aucune idée de comment faire ça.

Merci de votre aide par avance

[juliensmarties]

Bonjour,

As tu essayé de regarder avec le drag & drop ?

cdt

[Truelle]

Oui j'ai regardé, mais ça n'a pas trop de rapport. Le drag&drop permet déplacer des informations d'un endroit à l'autre, c'est pas ce que je veux.

Moi je trouve que l'évenement MouseMove est l'idéal, mais je n'arrive pas à l'exploiter comme il faut. J'ai réussi à faire des trucs pas trop mal mais ça reste très très bizarre comme comportement.

[alucia]

J'ai rencontré la même problématique, alors si quelqu'un retombe sur ce sujet, cela pourra peut-être l'aider

Alors, j'utilise également un UserControl contenant un Grid contenant plusieurs Thumbs (pour gérer le redimensionnement, voir détails sur ce fil de discussion. Je met ce UserControl dans un Canvas pour le déplacer facilement (ce qui correspond bien au sujet ).

J'ai eu aussi des problèmes lors du déplacement de mon controle (tantot cela fonctionnait bien, tantot le rectangle de décalait par rapport à la souris, et tantot cela ne fonctionnait pas du tout ).

La solution que j'ai trouvée et qui fonctionne est d'implémenter les méthodes suivantes pour gérer le déplacement du Canvas :
NB: le déplacement se fait dans un "Canvas principal", qui est le Content de ma principale Window

1) Déclarer 2 points (type Point) en variables privées dans la classe Window, je les ai nommées m_Point et m_OriginPoint.

2) Dans la méthode PreviewMouseLeftButtonDown, enregistrer la position initiale de la souris par rapport au canvas principal et sa position par rapport au controle (sera utilisée pour replacer le controle correctement "autour" de la souris)

Code :

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

1
2
3
4
5
6
 
m_Point.X = e.GetPosition((Canvas)sender)).X;
m_Point.Y = e.GetPosition((Canvas)sender).Y;
Vector offset = VisualTreeHelper.GetOffset((Canvas)sender);
m_OriginPoint.X = offset.X;
m_OriginPoint.Y = offset.Y;

3) Tout se passe ensuite dans PreviewMouseMove :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
if (e.LeftButton == MouseButtonState.Pressed)
{
   Point p = e.GetPosition(mainCanvas);
   double x = p.X - m_Point.X - m_OriginPoint.X;
   double y = p.Y - m_Point.Y - m_OriginPoint.Y;
 
   if (x > 0 && y > 0)
   {
      ((Canvas)sender).SetValue(Canvas.LeftProperty, x);
      ((Canvas)sender).SetValue(Canvas.TopProperty, y);
   }
}

mainCanvas est le canvas principal que j'ai évoqué plus haut.

Si le bouton gauche de la souris est enfoncé, alors je calcule la position de mon Canvas en fonction des points que j'ai enregistrés au départ, et je met à jour la position actuelle du Canvas

[MABROUKI]

bonjour Truelle
"The the most simplest way" c'est RenderTransform .....Translate....

voici un UserControl :
- ou l'on insere "un border factice myToolbar " (tout autre controle interne au usercontrol peut servir)
- dote d'un RenderTransform incluant TranslateForm
- qu'on deplace et qui lui deplace le "border principal LayoutRoot" entrainant la tribu entiere dans son deplacement.......
code behind .cs du 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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
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.Navigation;
using System.Windows.Shapes;
 
namespace WpfMovingUserControl
{
    /// <summary>
    /// Logique d'interaction pour UserControl1.xaml
    /// </summary>
    public partial class UserControl1 : UserControl
    {
        public UserControl1()
        {
            InitializeComponent();
        }
 
        private bool mouseDownInToolbar = false;
        private Point DragOffset;
        private void myToolbar_MouseDown(object sender, MouseButtonEventArgs e)
        {
            this.mouseDownInToolbar = true;
            this.DragOffset = e.GetPosition(LayoutRoot);
            this.toolbarBorder.CaptureMouse(); 
 
        }
 
        private void myToolbar_MouseMove(object sender, MouseEventArgs e)
        {
            if (mouseDownInToolbar)   
            {         
                // we want to move it based on the position of the mouse 
                moveUserControl(e);     } 
        }
        private void moveUserControl(MouseEventArgs e) 
        { 
            Point mousePos = e.GetPosition(LayoutRoot); 
            Double newX = LocalTranslateTransform.X + (mousePos.X - DragOffset.X); 
            Double newY = LocalTranslateTransform.Y + (mousePos.Y - DragOffset.Y);
            this.LocalTranslateTransform.X = newX;
            this.LocalTranslateTransform.Y = newY; 
        }
        private void myToolbar_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            this.mouseDownInToolbar = false;
            this.toolbarBorder.ReleaseMouseCapture(); 
        }
    }
}

code xaml du 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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
<UserControl x:Class="WpfMovingUserControl.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Border  
        x:Name="LayoutRoot"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        BorderBrush="LightCoral"
        BorderThickness="1"
        CornerRadius="10">
        <Border.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform x:Name="LocalTranslateTransform"/>
            </TransformGroup>
        </Border.RenderTransform>
        <StackPanel  
            Margin="10"
            Orientation="Vertical">
            <Border 
                x:Name="toolbarBorder"
                Height="30"
                HorizontalAlignment="Left"
                VerticalAlignment="Center"
                BorderBrush="LightBlue"
                BorderThickness="4"
                CornerRadius="20"
                MouseLeftButtonDown="myToolbar_MouseDown"
                MouseLeftButtonUp="myToolbar_MouseLeftButtonUp"
                MouseMove="myToolbar_MouseMove">
                <TextBlock 
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Padding="10"    
                    FontSize="18"
                    Foreground="Brown"
                    Text="Press And Drag Me">
                </TextBlock>
            </Border>
            <TextBlock 
                    FontSize="16"
                    TextAlignment="Center"
                    Text="Content"
                    Background="BlanchedAlmond">
            </TextBlock>
            <Button
                FontSize="16"
                Content="The Button">
            </Button>
        </StackPanel>
    </Border>
</UserControl>

code xaml du winform qui l'utilise:

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
 
<Window x:Class="WpfMovingUserControl.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfMovingUserControl"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel > 
        <local:UserControl1
            Height="200"
            Width="200">
        </local:UserControl1>
        <local:UserControl1
            Height="200"
            Width="200">
        </local:UserControl1>
    </StackPanel>
</Window>

bon code.............