With Silverlight 4 comes full support for mouse right clicks. To demonstrate this, I will be creating an application that pops up a context menu when you right click on your Silverlight application.

The new two events your UI elements can monitor for are:

   1. MouseRightButtonDown
   2. MouseRightButtonUp

Note that in order for the MouseRightButtonUp event to be fired you must first handle the MouseRightButtonDown event. Thus, it’s important to monitor for both of these events.

The following code shows a border control with these right click events hooked up:

<Border Height="400" Width="400" Background="Black" 

           MouseRightButtonDown="Border_MouseRightButtonDown"  

           MouseRightButtonUp="Border_MouseRightButtonUp "/> 

Notice a background color must be specified since mouse events are not fired on elements that are transparent or not painted in.

I will also add a Popup control that will act as my context menu. I set the Visibility=”Collapsed” in order to hide the control until the right mouse click event occurs. Also, I have placed the Popup control in a Canvas so that I can easily position it relative to mouse coordinates on click. The only way to position a control contained in a Grid is through column/row definitions or margins.

<Canvas> 

    <Popup x:Name="ContextMenu" Visibility="Collapsed"> 

        <Border CornerRadius="5" BorderBrush="White" BorderThickness="1" Background=”Black”> 

            <StackPanel > 

                <HyperlinkButton IsEnabled="True" Visibility="Visible"  

                       Content="Menu Item #1" Foreground="White"/> 

                <HyperlinkButton Content="Menu Item #2" Foreground="White"/> 

                <HyperlinkButton Content="Menu Item #3" Foreground="White"/> 

                <HyperlinkButton Content="Menu Item #3" Foreground="White"/> 

            </StackPanel> 

        </Border> 

    </Popup> 

</Canvas>

Now that you have a control to click on and a context menu to pop up let’s look at the events that drive opening and closing this context menu.

To start, set e.Handled=true in MouseRightButtonDown so that the MouseRightButtonUp will also be fired.

private void Border_MouseRightButtonDown(object sender, MouseButtonEventArgs e) 

{ 

    e.Handled = true; 

}

In MouseRightButtonUp I am simply get the coordinates of the mouse click relative to my application. This is also where I then set my Popup control to Visible and IsOpen = true.

private void Border_MouseRightButtonUp(object sender, MouseButtonEventArgs e) 

{ 

    Point p = e.GetPosition(null); 

    e.Handled = true; 

    ContextMenu.Visibility = Visibility.Visible; 

    ContextMenu.IsOpen = true; 

    ContextMenu.SetValue(Canvas.LeftProperty, (double)p.X); 

    ContextMenu.SetValue(Canvas.TopProperty, (double)p.Y); 

}

Finally, I also added a MouseLeftButtonDown event to my Border control so that I can close the Popup when mouse left occurs as seen here:

private void BorderCtrl_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 

{ 

    ContextMenu.Visibility = Visibility.Collapsed; 

    ContextMenu.IsOpen = false; 

}

Demo:

[silverlight: Tip3_RightMouseClick.xap]

Thank you,

–Mike