Afficher les bords d'un canvas lorsque la souris passe dessus

**alucia** · 06/09/2012, 17h59

Bonjour

Je voudrais savoir comment faire pour que, lorsque je passe ma souris sur les bords d'un canvas (qui contient des User Control), une bordure apparaisse et l'encadre et disparaisse quand la souris s'éloigne

L'idée est ensuite de détecter les "côtés" et les "coins" de ce canvas pour changer le curseur de la souris en petites flèches de redimensionnement (devinez pourquoi

)

Je ne sais pas par où commencer

Je n'arrive pas à afficher appliquer une bordure à mon canvas, ni à l'afficher dans le handler de MouseEnter

**koyot3** · 07/09/2012, 14h37

Bonjour Alucia

Regarde ici

Ca peut t'inspirer

**MABROUKI** · 10/09/2012, 01h20

bonjour alucia.

Voici un "more simplistic way" pour ajouter une bordure à ton canvas et le resizer avec des controls thumbs.....
Le canvas n'etant pas un control mais un panel ,il ne dispose pas de bordure...
Pour cela il sera incorpore dans un usercontrol
- equipe de 4 thumbs resizers pour les "corners" toujours visibles...
- "" de 4 thumbs resizers pour les "cotes" & qui serviront egalement de bordures.
(un thumb central qui ne sert à rien mais pourrait servir dans un autre cadre :un winform skinne eventuel avec AllowTransparency=true....) .
- l'usercontrol est pourvu d'un dependency property Children qui gere les childs "controls" du Grid interne ,ce qui permet d'ajouter autant de controls "childs" qu'on veut au usercontrol une fois droppe sur un form...
Nous nous en servons juste pour ajouter un seul "child" notre Canvas...

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
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
 
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;
// ref à ajouter
using System.Windows.Controls.Primitives;
namespace WpfResizingGripCanvasCSharp
{
    /// <summary>
    /// Logique d'interaction pour UserControl3.xaml
    /// </summary>
    public partial class UserControl3 : UserControl
    {
 
        public UserControl3()
        {
            InitializeComponent();
            Children = this.PART_Grid.Children;
        }
 
        // prop children permet d'ajouter autant de controls "childs"  qu'on veut
        // au grid lorsque l'UserControl est droppe sur le form.....
        // utilise ici pour pouvoir ajouter un "child" canvas.....
        public UIElementCollection Children
        {
            get { return (UIElementCollection)GetValue(ChildrenProperty); }
            set { SetValue(ChildrenProperty, value); }
        }
 
        // Using a DependencyProperty as the backing store for Children.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ChildrenProperty =
            DependencyProperty.Register("Children",
            typeof(UIElementCollection),
            typeof(UserControl3),
            new UIPropertyMetadata(null));
 
 
        // handler des thumbs
        private void Thumb_DragDelta(object sender, System.Windows.Controls.Primitives.DragDeltaEventArgs e)
        {
            Thumb myThumb=(Thumb)sender;
            if (myThumb == null) return;
 
            foreach (UIElement itemUI in this.PART_Grid.Children )
            {
 
                if (itemUI is Thumb  )
                {
                    Thumb thb = (Thumb)itemUI;
                    var str1 = (string)thb.Tag;
                    if (str1.Equals("T") || str1.Equals("L") || str1.Equals("B")
                   || str1.Equals("R"))
                    {
                        itemUI.Opacity = 1.0;
                    }
                }
            }
            var str = (string)myThumb.Tag;
            if (str.Contains("T"))
            {
 
                PART_Grid.Height = Math.Min(Math.Max(PART_Grid.MinHeight, PART_Grid.ActualHeight - e.VerticalChange), PART_Grid.MaxHeight);
                Canvas.SetTop(PART_Grid, Canvas.GetTop(PART_Grid) - PART_Grid.Height + PART_Grid.ActualHeight);
 
            }
            if (str.Contains("L"))
            {
 
                PART_Grid.Width = Math.Min(Math.Max(PART_Grid.MinWidth, PART_Grid.ActualWidth - e.HorizontalChange), PART_Grid.MaxWidth);
                Canvas.SetLeft(PART_Grid, Canvas.GetLeft(PART_Grid) - PART_Grid.Width + PART_Grid.ActualWidth);
 
            }
            if (str.Contains("B"))
            {
 
                PART_Grid.Height = Math.Min(Math.Max(PART_Grid.MinHeight, PART_Grid.ActualHeight + e.VerticalChange), PART_Grid.MaxHeight);
 
            }
            if (str.Contains("R"))
            {
                PART_Grid.Width = Math.Min(Math.Max(PART_Grid.MinWidth, PART_Grid.ActualWidth + e.HorizontalChange), PART_Grid.MaxWidth);
 
            }
 
            e.Handled = true;
 
        }
 
        private void Thumb_DragCompleted(object sender, DragCompletedEventArgs e)
        {
            Thumb myThumb = (Thumb)sender;
            if (myThumb == null) return;
 
           foreach (UIElement itemUI in this.PART_Grid.Children )
            {
 
                if (itemUI is Thumb  )
                {
                    Thumb thb = (Thumb)itemUI;
                    var str1 = (string)thb.Tag;
                    if (str1.Equals("T") || str1.Equals("L") || str1.Equals("B")|| str1.Equals("R"))
                    {
                        thb.Opacity = 0.0;
                    }
                }
            }
        }
    }
}

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
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
 
<UserControl x:Class="WpfResizingGripCanvasCSharp.UserControl3"
             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">
 
 
            <!--column 2 et la row 2 ont width & height   "aster" --> 
            <!--servent à recevoir le "canvas child eventuel"-->
 
    <Grid
        Name="PART_Grid" >
 
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="8" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="8" />
        </Grid.ColumnDefinitions>
 
        <Grid.RowDefinitions>
            <RowDefinition Height="8" />
            <RowDefinition Height="*" />
            <RowDefinition Height="8" />
        </Grid.RowDefinitions>
        <!--4 thumbs pour les corners visibles en rouge-->
        <Thumb 
            Background="Red"
            Opacity="1" Grid.Row="0" Grid.Column="0" 
            Cursor="SizeNWSE" Tag="TL" 
            DragDelta="Thumb_DragDelta"
            DragCompleted="Thumb_DragCompleted"/>
        <Thumb 
           Background="Red"
            Opacity="1" Grid.Row="0" Grid.Column="2"
            Cursor="SizeNESW" Tag="TR" 
            DragDelta="Thumb_DragDelta"
            DragCompleted="Thumb_DragCompleted"/>
        <Thumb 
          Background="Red"
            Opacity="1" Grid.Row="3" Grid.Column="0" 
            Cursor="SizeNESW" Tag="BL" 
            DragDelta="Thumb_DragDelta"
            DragCompleted="Thumb_DragCompleted"/>
        <Thumb 
           Background="Red"
            Opacity="1" Grid.Row="3"  Grid.Column="2"
            Cursor="SizeNWSE" Tag="BR" 
            DragDelta="Thumb_DragDelta"
            DragCompleted="Thumb_DragCompleted"/>
        <!--4 thumbs pour les cotes bleue avec opacite=0-->
        <!--opacite =1 lors des drags (voir code-behind)--> 
        <Thumb 
            Background="Blue"
            Opacity="0" Grid.Row="0" Grid.Column="1"
            Cursor="SizeNS" Tag="T"
            DragDelta="Thumb_DragDelta"
            DragCompleted="Thumb_DragCompleted"/>
        <Thumb 
            Background="Blue"
            Opacity="0" Grid.Row="3" Grid.Column="1"
            Cursor="SizeNS" Tag="B" 
            DragDelta="Thumb_DragDelta"
            DragCompleted="Thumb_DragCompleted"/>
        <Thumb 
            Background="Blue"
            Opacity="0" Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" 
            Cursor="SizeWE" Tag="L" 
            DragDelta="Thumb_DragDelta"
            DragCompleted="Thumb_DragCompleted"/>
        <Thumb 
            Background="Blue"
            Opacity="0" Grid.Row="1" Grid.Column="2" Grid.RowSpan="2" 
            Cursor="SizeWE" Tag="R" 
            DragDelta="Thumb_DragDelta"
            DragCompleted="Thumb_DragCompleted"/>
        <!--grand thumb central sizeAll-->
        <Thumb 
            Background="Blue"
            Opacity="0" Grid.Row="1" Grid.Column="1" 
            Cursor="SizeAll" Tag="M" 
            DragDelta="Thumb_DragDelta"
            DragCompleted="Thumb_DragCompleted"/>
 
    </Grid>
 
</UserControl>

code xaml du winform utilisateur avec un 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
 
<Window x:Class="WpfResizingGripCanvasCSharp.WindowTestUserControl3"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfResizingGripCanvasCSharp"
        Title="Test UserControl3" Height="400" Width="540"  >
    <local:UserControl3>
        <local:UserControl3.Children>
            <Canvas
                Grid.Column="1"
                Grid.Row="1"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                Background="Beige"
                ClipToBounds="True" >
                <Ellipse
                    Canvas.Left="100"
                    Canvas.Top="100 "
                    Fill="LightCoral"
                    Stroke="Black" 
                    StrokeThickness="2"
                    StrokeDashArray="0.5 2.0 0.0"
                    Width="100" Height="50">
                </Ellipse>
            </Canvas>
        </local:UserControl3.Children> 
    </local:UserControl3>
 
</Window>

De toutes facons il existe d'autres astuces pour "resizer" un panel avec toujours l'aide d'un usercontrol et par exemple des rectangles transparents de taille convenable poses sur les cotes du usercontrol au lieu de thumbs...............
bon code.....

**alucia** · 10/09/2012, 14h26

Fantastique !

Simple à comprendre et à mettre en place, et cela fonctionne super bien

Merci beaucoup à vous

**alucia** · 10/09/2012, 16h59

Ah je rencontre cependant un petit soucis lorsque j'essaye d'utiliser ce user control au sein d'un canvas, lui même dans un grand canvas (pour gérer le drap n drop) :
Quand j'essaye de redimensionner les contours (avec les Thumbs donc

) pour les côtés droit et bas je n'ai aucun problème, mais les côté gauche et haut ne fonctionnent pas bien : le controle prend bien la nouvelle taille, mais la bordure reste figée et c'est donc l'autre côté qui s'allonge (difficile à expliquer

)

Une idée ?

Par contre si je crée une Window et que je met directement le user control dans son Content, tous les resize fonctionnent bien, j'ai des problèmes dès que je le place dans un canvas

A savoir que lorsque j'affiche le résultat de Canvas.GetTop(PART_Grid) (ou GetLeft), cela indique "Non numérique"

**alucia** · 11/09/2012, 09h02

Après quelques recherches j'ai finalement trouvé la cause et résolu le problème

Alors, il semblerait que tant qu'on n'a pas explicitement initialisée les propriétés du canvas (Top, Left, Right, etc...), elles restent à leur valeur par défaut, à savoir "NaN"

Pour m'en sortir j'ai donc fait ceci :

Code :

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

1
2
3
4
5
6
 
if (double.IsNaN(Canvas.GetTop(PART_Grid)))
                {
                    Vector offset = VisualTreeHelper.GetOffset(PART_Grid);
                    Canvas.SetTop(PART_Grid, offset.Y);
                }

Et idem pour GetLeft(), en lui passant offset.X

Afficher les bords d'un canvas lorsque la souris passe dessus [Débutant]

Windows Presentation Foundation

Discussions similaires

Partager

Partager