Jérôme Lambert

Un article de Jérôme Lambert    2 Commentaires

Tout a commencé bêtement en regardant la liste des curseurs disponibles pour une application Silverlight… Quelle surprise en découvrant ce qu’il m’était proposé :

Une simple énumération ! Quelle déception quand même… Impossible donc de créer son propre curseur à partir d’un objet Image. Enfin quoique car si on regarde les évènements d’un Canvas ou de tout autre contrôles Silverlight, il est possible d’être notifié lorsque la souris entre dans la zone, se déplace et quitte cette zone. Alors pourquoi ne pas créer son propre curseur et réagir correctement aux évènements ? On retrousse ses manches et c’est parti !

Dans un premier temps, il nous faut un nouveau curseur et on va faire simple avec une simple petite bulle mais rien n’empêche les plus courageux à utiliser une image, ça revient au même. On crée donc une simple méthode qui va nous retourner une instance du contrôle Ellipse :

private Ellipse CreateCursor()
{
    Ellipse objEllipse = new Ellipse();
 
    objEllipse.Height = 24;
    objEllipse.Width = 24;
    objEllipse.Opacity = 0.7;
    RadialGradientBrush objRadialGradientBrush = new RadialGradientBrush();
    GradientStop objGradientStop1 = new GradientStop();
    GradientStop objGradientStop2 = new GradientStop();
    objGradientStop1.Color = Color.FromArgb(244, 255, 214, 227);
    objGradientStop1.Offset = 0;
    objGradientStop2.Color = Color.FromArgb(255, 193, 62, 150);
    objGradientStop2.Offset = 1;
    objRadialGradientBrush.GradientStops.Add(objGradientStop1);
    objRadialGradientBrush.GradientStops.Add(objGradientStop2);
    objEllipse.Fill = objRadialGradientBrush;
 
    return objEllipse;
}

A chaque fois qu’on aura besoin d’une nouvelle instance de notre curseur personnalisé, il nous suffira d’appeler la méthode CreateCursor.

A présent, prenons notre Canvas dans notre code Xaml et insérons le code nécessaire pour qu’il appelle les bonnes méthodes lors des évènements MouseMove, MouseMove et MouseLeave :

Pour le code qui va intervenir lors du déclenchement de ces évènements, ce n’est pas sorcier :

• MouseEnter : On désactive le curseur pour placer notre curseur personnalisé.
• MouseMove : A chaque déplacement de la souris, on replace notre curseur personnalisé.
• MouseLeave : On retire notre curseur personnalisé et on réactive le curseur par défaut.

private Ellipse m_Cursor2 = null;
private void canvasCase2_MouseEnter(object sender, MouseEventArgs e)
{
    // Le rectangle ayant le curseur au dessus de lui
    // On désactive le curseur qui sera remplacé par après par un curseur personnalisé
    Cursor = Cursors.None;
 
    // Création du curseur personnalisé
    if (m_Cursor2 == null)
    {
        m_Cursor2 = CreateCursor();
        // Ajout du curseur personnalisé à la liste des contrôles enfants de la fenêtre
        canvasCase2.Children.Add(m_Cursor2);
    }
 
    canvasCase2_MouseMove(sender, e);
}
private void canvasCase2_MouseMove(object sender, MouseEventArgs e)
{
    // On place le curseur personnalisé
    m_Cursor2.SetValue<double>(Canvas.LeftProperty, e.GetPosition(canvasCase2).X - m_Cursor2.Width / 2);
    m_Cursor2.SetValue<double>(Canvas.TopProperty, e.GetPosition(canvasCase2).Y - m_Cursor2.Height / 2);
}
private void canvasCase2_MouseLeave(object sender, EventArgs e)
{
    // On remet le curseur par defaut
    Cursor = Cursors.Default;
 
    // On retire le curseur personnalisé
    canvasCase2.Children.Remove(m_Cursor2);
 
    m_Cursor2 = null;
}

En fait, rien de bien méchant pour le résultat suivant :

Après ce petit essai, je suis parti sur quelques petites variantes plutôt amusantes qu’utiles, comme par exemple un curseur qui laisse des traces par où il passe :

Ou encore un système de tampon, c’est-à-dire qu’à chaque clique de souris, on laisse une empreinte du curseur. Pour cela, il suffit d’intercepter l’évènement MouseLeftButtonDown :

Comme je l’ai dit précédemment, les possibilités sont nombreuses et rien ne vous empêche d’utiliser vos propres images qui donneront une meilleure impression d’icône qui se déplace. Par contre, ne me jetez pas la pierre si il y a une technique plus évidente pour personnaliser son curseur, je vous avoue que tout ceci a été fait à l’intuition sans trop savoir si plus évident il y a.

Je vous laisse suivre votre imagination pour la suite…

Le projet complet avec les sources en C# est disponible ici : Version Zip – Version Rar