Silverlight – Comment réaliser un ContextMenu

by Fabien Lavocat 10. novembre 2009 16:40

Dans cet article, nous allons voir comment réaliser un ContextMenu en Silverlight. Pourquoi vouloir réaliser un ContextMenu, tout simplement car lorsque vous faites un clic droit sur vos applications Silverlight, vous obtenez un menu qui vous propose de configurer Silverlight.

Commencez par créer votre application Silverlight sous Visual Studio. Une page Web qui héberge l’application Silverlight doit être créée automatiquement. Afficher le code source de cette page et ajouter l’attribut Windowless avec la valeur true à la balise Object du host Silverlight. Pour plus d’informations sur Windowless, consultez la page MSDN dédiée.

Ensuite je créé mon menu (ici la base de mon menu sera un StackPanel pour empiler des boutons. J’applique un style à chaque bouton qui lui donnera une forme plus adaptée au thème du menu. Vous pourrez récupérer le style en téléchargeant le code source à la fin de l’article.

Attention, Vous devez obligatoirement avoir une couleur de fond différente de ‘Transparent’ sous peine que votre clic gauche ne fonctionne pas (l’événement MouseLeftButtonDown ne serait pas déclenché). Merci Julien pour l’astuce. L’événement MouseLeftButtonDown permet de cacher le menu.

Maintenant passons au code qui permettra d’afficher le menu là où l’utilisateur fera un clic droit :

public MainPage()
{
    InitializeComponent();

    // Appelle "OnRightClick" lorsque le DOM déclenche "oncontextmenu"
    HtmlPage.Document.AttachEvent("oncontextmenu", this.OnRightClick);
}

private void OnRightClick(object sender, HtmlEventArgs e)
{
    // Ne pas exécuter l'action par défaut
    e.PreventDefault();

    // Affiche le menu
    myLstMenu.Visibility = Visibility.Visible;
    // Positionne le menu là où est la souris
    myLstMenu.Margin = new Thickness(e.ClientX, e.ClientY, 0, 0);
}

private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    // Lorsque le bouton gauche de la souris est enfoncé
    // en dehors du contextMenu, on le cache.
    if (myLstMenu.Visibility == Visibility.Visible)
        myLstMenu.Visibility = Visibility.Collapsed;
}

Lorsque l’on va cliquer sur les boutons on va changer le fond de couleur grâce aux méthodes :

private void btRed_Click(object sender, RoutedEventArgs e)
{
    // Rouge
    SetBackground(Color.FromArgb(255, 255, 0, 0));
}

private void btBlue_Click(object sender, RoutedEventArgs e)
{
    // Bleu
    SetBackground(Color.FromArgb(255, 0, 0, 255));
}

/// <summary>
/// D?finir la couleur de fond
/// </summary>
/// <param name="color">Couleur ? d?finir</param>
private void SetBackground(Color color)
{
    this.LayoutRoot.Background = new SolidColorBrush(color);
    myLstMenu.Visibility = Visibility.Collapsed;
}

Et voilà le résultat :