Introduction of using Windows Phone Toolkit vol.4 : ContextMenu

Introduction of using Windows Phone Toolkit vol.1 : Download and prepare to use toolkit
Introduction of using Windows Phone Toolkit vol.2 : Tilt effect
Introduction of using Windows Phone Toolkit vol.3 : Transitions
Introduction of using Windows Phone Toolkit vol.4 : ContextMenu
Introduction of using Windows Phone Toolkit vol.5 : List Picker



Today, I'd like to introduce ContextMenu. For instance, in buildin Outlook app in Windows Phone, you can find ContextMenu when you click down for a while. Please check it bellow movie.

• How coding

First, you need to write content menu code in some control in xaml code. You can add content menu not only Button control also other controls. I introduce about Button in this part.

<Button Margin="0,0"   
     VerticalAlignment="Center"  
     Padding="12"  
     Content="ContextMenu"  
     FontSize="18">  
   <toolkit:ContextMenuService.ContextMenu>  
     <toolkit:ContextMenu>  
       <!-- You can suppress tilt on indivudal menu items with TiltEffect.SuppressTilt="True" -->  
       <toolkit:MenuItem Header="this is a menu item" Click="MenuItem_Click"/>  
       <toolkit:MenuItem Header="this is another menu item" Click="MenuItem_Click"/>  
       <toolkit:MenuItem Header="this is a yet another menu item" Click="MenuItem_Click"/>  
     </toolkit:ContextMenu>  
   </toolkit:ContextMenuService.ContextMenu>  
 </Button>  

Second, write click event code in code behind. In bellow code, adding a text which is selected in context menu to TextBlock(lastSelection).

private void MenuItem_Click(object sender, RoutedEventArgs e)
{
    lastSelection.Text = (string)((MenuItem)sender).Header;
}

Also you can use Command to bind action and use MVVM patern. I'll show you next blog post.

• Use context menu in Listbox

I think almost of people use context menu in Listbox. I introduce how to use context menu in Listbox through my memo app. Please see bellow movie. The movie indicates you can delete selected item using context menu.

The xaml code is bellow.

 <ListBox x:Name="listBox1" ItemsSource="{Binding}" Margin="0,-20,0,0" SelectionChanged="listBox1_SelectionChanged">  
   <ListBox.ItemTemplate>  
     <DataTemplate>  
       <StackPanel HorizontalAlignment="Stretch" Orientation="Horizontal">  
         <TextBlock FontSize="35" x:Name="Title" Text="{Binding Title}" />  
         <TextBlock FontSize="25" x:Name="Date" Text="{Binding Date}" />  
         <TextBlock x:Name="Id" Text="{Binding Id}" Visibility="Collapsed" />  
         <toolkit:ContextMenuService.ContextMenu>  
           <toolkit:ContextMenu BorderThickness="0" BorderBrush="White">  
             <toolkit:MenuItem Header="delete" Click="Delete_Click"/>  
           </toolkit:ContextMenu>  
         </toolkit:ContextMenuService.ContextMenu>  
       </StackPanel>  
     </DataTemplate>  
   </ListBox.ItemTemplate>  
 </ListBox>  

The code behind is also here.

private void Delete_Click(object sender, RoutedEventArgs e)
{
    MessageBoxResult result = MessageBox.Show("do you want to delete the memo?", "Delete memo?", MessageBoxButton.OKCancel);
    if (result == MessageBoxResult.OK)
    {
        string header = (sender as MenuItem).Header.ToString();
        ListBoxItem selectedListBoxItem = this.listBox1.ItemContainerGenerator.ContainerFromItem((sender as MenuItem).DataContext) as ListBoxItem;
        if (selectedListBoxItem != null && header == "delete")
        {
            ItemsList list = (ItemsList)selectedListBoxItem.Content;
            items = new ItemInfo();
            items.DeleteItemFromStorage(list.Id); // delete memo from database

            NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
        }

    }
}

//binding to textblok in Listbox
public class ItemsList
{
    public string Id { get; set; }
    public string Title { get; set; }
    public string Date { get; set; }
}