Right click event in Silverlight 4

In the previous versions of Silverlight, we were not able to code for mouse right click event.

When we right click on the silverlight page we are provided with the silverlight dialogbox like this:





But now in the latest version of Silverlight 4, we are able to code for right click events. Let's see a simple example to demonstrate the right click event in silverlight 4.

Here I am going to display a contextmenu in right click of a silverlight control.

The page design includes one stack panel with three buttons.

<Canvas x:Name="LayoutRoot" Background="#FFF90202">
          <StackPanel x:Name="sp1" Height="93" Canvas.Left="268" Canvas.Top="164" Width="159" Visibility="Collapsed">
                   <Button x:Name="button1" Content="Button" Height="31" Width="159" Template="{StaticResource ButtonControlTemplate1}" HorizontalAlignment="Right" Margin="0" Click="button1_MouseLeftButtonDown" Cursor="Hand" MouseEnter="button1_mouseenter"/>
                   <Button x:Name="button2" Content="Button" Height="31" Width="159" Template="{StaticResource ButtonControlTemplate2}" HorizontalAlignment="Right" Margin="0" Cursor="Hand" Click="button2_MouseLeftButtonDown"/>
                   <Button x:Name="button3" Content="Button" Height="31" Width="159" Template="{StaticResource ButtonControlTemplate3}" HorizontalAlignment="Right" Margin="0"
Cursor="Hand" Click="b3_click"/>
          </StackPanel>
</Canvas>

I have updated the button control with custom styling. Here is the XAML code of first button:

<ControlTemplate x:Key="ButtonControlTemplate1" TargetType="Button">
          <Grid>
                   <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="CommonStates">
                                      <VisualState x:Name="Disabled"/>
                                      <VisualState x:Name="Normal"/>
                                      <VisualState x:Name="MouseOver">
                                                <Storyboard>
                                                          <ColorAnimation Duration="0" To="#FF51E8EB" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                                          <ColorAnimation Duration="0" To="#FF0C04FB" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="textBlock" d:IsOptimized="True"/>
                                                </Storyboard>
                                      </VisualState>
                                      <VisualState x:Name="Pressed"/>
                             </VisualStateGroup>
                   </VisualStateManager.VisualStateGroups>
                   <Rectangle x:Name="rectangle" Fill="#FF8E8E97" Stroke="Black"/>
                   <TextBlock x:Name="textBlock" Margin="8,8,19,8" TextWrapping="Wrap" FontWeight="Bold"><Run Text="New TextBox"/><LineBreak/><Run/></TextBlock>
          </Grid>
</ControlTemplate>

Now we will move to the code behind for the real action.

We are tracking both the MouseRightButtonDown and MouseLeftButtonDown event.

The right click event will look like this:

private void LayoutRoot_MouseRightButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    e.Handled = true;
    sp1.Visibility = Visibility.Visible;
    Canvas.SetLeft(sp1,e.GetPosition(null).X);
    Canvas.SetTop(sp1,e.GetPosition(null).Y);
}

In the first line of code we are forcing to handle the right click event. In the next few lines I am setting the stackpanel visible property to be visible and its position to be the mouse right click position.

The output will be as follows:

In the first two options in the menu, I am adding one textbox and a button to the page. In the third option, I am randomly changing the background of the page.
The code for changing the background color is as follows:



private void b3_click(object sender, System.Windows.RoutedEventArgs e)
{
    Random rnd=new Random((int)DateTime.Now.Millisecond);
    SolidColorBrush sb=new SolidColorBrush(Color.FromArgb((byte)rnd.Next(0,255),(byte)rnd.Next(0,255),(byte)rnd.Next(0,255),(byte)rnd.Next(0,255)));
    LayoutRoot.Background=sb;
}

The other two button click events can be viewed from the source code attached with the article.

In the mouse left button click on the page, I am hiding the contextmenu. Here is the code for that:

private void LayoutRoot_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    sp1.Visibility=Visibility.Collapsed;
    LayoutRoot.Children.Remove(t);
    LayoutRoot.Children.Remove(b);
}

That's it.