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.
<param name="windowless" value="true" />
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.
<Canvas x:Name="LayoutRoot" MouseLeftButtonDown="Canvas_MouseLeftButtonDown"
Background="White">
<StackPanel Visibility="Collapsed" x:Name="myLstMenu"
HorizontalAlignment="Left" VerticalAlignment="Top" Width="Auto">
<StackPanel.Effect>
<DropShadowEffect Opacity="200"/>
</StackPanel.Effect>
<Button x:Name="btRed" Style="{StaticResource MenuStyleButton}"
Content="Background : Rouge" Click="btRed_Click" />
<Button x:Name="btBlue" Style="{StaticResource MenuStyleButton}"
Content="Background : Bleu" Click="btBlue_Click" />
</StackPanel>
</Canvas>
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 :
Télécharger le code source de l’application : SilverlightContextMenu.zip (59,82 kb)
Souscrire