Silverlight currently has full mouse support for single click. However, double click is a another story. In this tip I will show you how to implement double click. You can apply this technique for an individual control or even your entire page.

The key to accomplishing this is to check for two things:

1. Measure the TimeSpan between two mouse clicks. Verify it is less than around 300 milliseconds.
2. Make certain the mouse has not moved more than a few pixels.

To demonstrate this I have a DateTime member that tracks the time the first mouse left click occurred. I also keep track of whether this is the first click or not.

public DateTime _lastClick = DateTime.Now; 

private bool _firstClickDone = false; 

Next, I add an event to monitor for left mouse clicks:

this.MouseLeftButtonDown += new 

      MouseButtonEventHandler(MainPage_MouseLeftButtonDown); 

Finally, in the event to monitor for mouse left clicks I do the following:

• If more than 300 milliseconds has passed or a first click has not occurred yet get a snapshot of the time for the first click.
• If we have clicked already and less than 300 milliseconds has passed verify the mouse has not moved more than a few pixels. If not, we have a double click.

The following code demonstrates this technique:

private void MainPage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 

{ 

    UIElement element = sender as UIElement; 

    DateTime clickTime = DateTime.Now; 

    TimeSpan span = clickTime - _lastClick; 

    FirstClickTB.Text = "MS between clicks = " + span.TotalMilliseconds; 

    if (span.TotalMilliseconds > 300 || _firstClickDone == false) 

    { 

        DoubleClickTB.Text = "First click..."; 

        _clickPosition = e.GetPosition(element); 

        _firstClickDone = true; 

        _lastClick = DateTime.Now; 

    } 

    else 

    { 

        Point position = e.GetPosition(element); 

        if (Math.Abs(_clickPosition.X - position.X) < 4 && 

            Math.Abs(_clickPosition.Y - position.Y) < 4) 

            DoubleClickTB.Text = "Double Click!"; 

        else 

            DoubleClickTB.Text = "Double Click failed due to mouse move!"; 

        _firstClickDone = false; 

    }            

} 

[silverlight: Tip16_DoubleClick.xap]

Thank you, --Mike

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