Silverlight / WPF - Right Click on Silverlight grid

Asked By Toral on 29-Jul-11 12:34 AM

Hello Everybody,

How to put mouse right click event in silverlight 3 grid? Plz guide me.

thanks & Regards
Toral Shah

Jitendra Faye replied to Toral on 29-Jul-11 12:39 AM

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;

Source Tip3_RightMouseClick.zip

Demo:

[silverlight: Tip3_RightMouseClick.xap]

Ravi S replied to Toral on 29-Jul-11 12:47 AM

HI

try this

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 "/>

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas,"Courier New",courier,monospace; background-color: rgb(255, 255, 255); }.csharpcode pre { margin: 0em; }.csharpcode .rem { color: rgb(0, 128, 0); }.csharpcode .kwrd { color: rgb(0, 0, 255); }.csharpcode .str { color: rgb(0, 96, 128); }.csharpcode .op { color: rgb(0, 0, 192); }.csharpcode .preproc { color: rgb(204, 102, 51); }.csharpcode .asp { background-color: rgb(255, 255, 0); }.csharpcode .html { color: rgb(128, 0, 0); }.csharpcode .attr { color: rgb(255, 0, 0); }.csharpcode .alt { background-color: rgb(244, 244, 244); width: 100%; margin: 0em; }.csharpcode .lnum { color: rgb(96, 96, 96); }

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>

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas,"Courier New",courier,monospace; background-color: rgb(255, 255, 255); }.csharpcode pre { margin: 0em; }.csharpcode .rem { color: rgb(0, 128, 0); }.csharpcode .kwrd { color: rgb(0, 0, 255); }.csharpcode .str { color: rgb(0, 96, 128); }.csharpcode .op { color: rgb(0, 0, 192); }.csharpcode .preproc { color: rgb(204, 102, 51); }.csharpcode .asp { background-color: rgb(255, 255, 0); }.csharpcode .html { color: rgb(128, 0, 0); }.csharpcode .attr { color: rgb(255, 0, 0); }.csharpcode .alt { background-color: rgb(244, 244, 244); width: 100%; margin: 0em; }.csharpcode .lnum { color: rgb(96, 96, 96); }

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;

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas,"Courier New",courier,monospace; background-color: rgb(255, 255, 255); }.csharpcode pre { margin: 0em; }.csharpcode .rem { color: rgb(0, 128, 0); }.csharpcode .kwrd { color: rgb(0, 0, 255); }.csharpcode .str { color: rgb(0, 96, 128); }.csharpcode .op { color: rgb(0, 0, 192); }.csharpcode .preproc { color: rgb(204, 102, 51); }.csharpcode .asp { background-color: rgb(255, 255, 0); }.csharpcode .html { color: rgb(128, 0, 0); }.csharpcode .attr { color: rgb(255, 0, 0); }.csharpcode .alt { background-color: rgb(244, 244, 244); width: 100%; margin: 0em; }.csharpcode .lnum { color: rgb(96, 96, 96); }

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);

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas,"Courier New",courier,monospace; background-color: rgb(255, 255, 255); }.csharpcode pre { margin: 0em; }.csharpcode .rem { color: rgb(0, 128, 0); }.csharpcode .kwrd { color: rgb(0, 0, 255); }.csharpcode .str { color: rgb(0, 96, 128); }.csharpcode .op { color: rgb(0, 0, 192); }.csharpcode .preproc { color: rgb(204, 102, 51); }.csharpcode .asp { background-color: rgb(255, 255, 0); }.csharpcode .html { color: rgb(128, 0, 0); }.csharpcode .attr { color: rgb(255, 0, 0); }.csharpcode .alt { background-color: rgb(244, 244, 244); width: 100%; margin: 0em; }.csharpcode .lnum { color: rgb(96, 96, 96); }

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;

Riley K replied to Toral on 29-Jul-11 12:47 AM

right click will not change the selection of it defaultly.

But you can handle the right click event of a datagrid alike below

Use these events

private void dg_LoadingRow(object sender, DataGridRowEventArgs e)

{

e.Row.MouseRightButtonDown += new MouseButtonEventHandler(Row_MouseRightButtonDown);

}

void Row_MouseRightButtonDown(object sender, MouseButtonEventArgs e)

{

dg.SelectedItem = ((sender) as DataGridRow).DataContext;

}

Best Regards

TSN ... replied to Toral on 29-Jul-11 12:48 AM

hi..

Silverlight DataGrid: Make Right-click Select a Row

A slightly irking characteristic of many data grid libraries is that there seems to be a disconnect between expected usability in a grid, and the default behaviour of those same grids. I've found this to be a problem in all .NET grids that I've used including Infragistics and Microsoft's WPF/Silverlight implementations.

For example, one thing I expect to be able to do is right-click on a grid's row, and have it pull up a context menu with a list of actions to perform on it. Now that context menus have been added to Silverlight 4, half the battle is won, but you still can't get the "correct" right-click behavior out of the box.

Here's how to coax the grid to behave a bit more properly with VisualTreeHelper.

<!-- XAML -->
<UserControl x:Class="MyControl" 
    xmlns:grid="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">

    <grid:DataGrid MouseRightButtonDown="_grid_MouseRightButtonDown">
        <!-- Define a context menu for our grid here -->
        <toolkit:ContextMenuService.ContextMenu>
            <toolkit:ContextMenu>
                <toolkit:MenuItem Header="Action!" />
            </toolkit:ContextMenu>
        </toolkit:ContextMenuService.ContextMenu>
    </grid:DataGrid>
</UserControl>

// Code-behind
private void _grid_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
{
    IEnumerable<UIElement> elementsUnderMouse = 
        VisualTreeHelper
            .FindElementsInHostCoordinates(e.GetPosition(null), this);
    DataGridRow row = 
        elementsUnderMouse
            .Where(uie => uie is DataGridRow)
            .Cast<DataGridRow>()
            .FirstOrDefault();
    if (row != null)
        _grid.SelectedItem = row.DataContext;
}

The code above uses VisualTreeHelper to find any UIElements under the mouse when the user performs a right-click. A set of UIElements is returned including grid rows and cells as well as a good number of other elements. We filter this set for an instance of DataGridRow, get is bound data item, then tell the grid to select that object.

Radhika roy replied to Toral on 29-Jul-11 10:08 AM

You can use MouseRightButtonUp() event of GridView.

Use this code-

private void Grid_MouseRightButtonUp(object sender, MouseButtonEventArgs e)

{

Point mousePosition = e.GetPosition(popupContainer);

Canvas.SetLeft(menuPopup, mousePosition.X);

Canvas.SetTop(menuPopup, mousePosition.Y);

FrameworkElement itemTemplateInstance = (FrameworkElement) sender;

menuPopup.DataContext = itemTemplateInstance.DataContext;

menuPopup.IsOpen = true;

}

Follow this link-

http://www.google.com/url?sa=t&source=web&cd=4&ved=0CDIQFjAD&url=http%3A%2F%2Faz12722.vo.msecnd.net%2Fsilverlight4trainingcourse1-3%2Flabs%2Fsl4lob-05-schedule-planner1-2%2F05%2520Schedule%2520Planner.docx&rct=j&q=put%20mouse%20right%20click%20event%20in%20silverlight%203%20grid&ei=bTkyTr_zFLS40AGag7z6Cw&usg=AFQjCNEQRHASAxqa6MaqtxIv8EyzH6IURA&sig2=0t2CT25HPtIXQFreqCh2Lw&cad=rja

Hope this will help you.