SL4: DataGrid and contextmenu

There is a nice implementation of contextmenu by Jesse Bishop in SL4. It supports commands as well as click handlers
we could use that control and add context sensitive contextmenu to datagrid

I created a basic application, Here is the xaml for the mainpage. we have a datagrid which is bound to a list of persons

<UserControl xmlns:my=”clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data”  x:Class=”SilverlightApplication1.MainPage”
    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml
    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008
    xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006
             xmlns:menu=”clr-namespace:ContextMenuControls;assembly=ContextMenuControls”   
    mc:Ignorable=”d”
    d:DesignHeight=”300″ d:DesignWidth=”400″>

    <Grid x:Name=”LayoutRoot” Background=”White”>
<my:DataGrid x:Name=”datagrid1″ ItemsSource=”{Binding Persons}”></my:DataGrid>
    </Grid>
</UserControl>

when the rightmouse button is down on the grid. we do a hit test to get the row( the person item that was clicked), create a menuitem with person’s name and add to the Items of the contextmenu
when the item is clicked we remove the person from the list

void datagrid1_MouseRightButtonUp(object sender, MouseButtonEventArgs e)
{
IEnumerable elements = VisualTreeHelper.FindElementsInHostCoordinates(e.GetPosition(LayoutRoot), datagrid1);
DataGridRow row = null;
foreach (UIElement ele in elements)
{
if (ele is DataGridRow)
{
row = ele as DataGridRow;
break;
}
}

ContextMenu cm = new ContextMenu();
Person p = row.DataContext as Person;
MenuItem mi = new MenuItem { Text = “Delete ” + p.FirstName, Tag=p };
mi.Click += new MenuItem.ClickHandler(mi_Click);
cm.Items.Add(mi);

datagrid1.SetValue(ContextMenu.ContextMenuProperty, cm);
cm.IsOpen = true;

}

void mi_Click(object sender, EventArgs e)
{
Persons.Remove((sender as MenuItem).Tag as Person);
}

you can download the sample here

Advertisements

4 thoughts on “SL4: DataGrid and contextmenu

  1. Hi,

    I want to create a context menu in the Code Behind(C#), Can you please suggest me how can i add Icon(just an Image) to a Menu Item in the code behind.

    Please find my code below:

    MenuItem miDelete = new MenuItem { Header = “Delete”};
    miDelete.Click += new RoutedEventHandler(miDelete_Click);
    miDelete.Icon = new BitmapImage(new Uri(“/Images/delete_over.png”, UriKind.Relative));
    cm.Items.Add(miDelete);

    Thanks in advance.

    Thanks,
    Bala.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s