Microsoft Gulf Technical Community

The communication portal for the Gulf technical audience

Windows Phone Toolkit: Context Menu getting selected item within a long list selector

Windows Phone Toolkit: Context Menu getting selected item within a long list selector

Rate This
  • Comments 6

Windows Phone Toolkit: Context Menu getting selected item within a long list selector

Now you can add touch-sensitive menus to your Windows Phone 8 apps by using Context menus. One of the new components in the Windows Phone Toolkit is Context Menu. Basically when the user taps and holds on any item the context menu appears. It is used in areas like for example the application list, where if you tap and hold an application you get the option to pin it to the start menu, uninstall, etc. Similarly, You can easily display a context menu over a long list selector and make the context menu do a set of actions over each item without having to specify that every time.

For Example:

clip_image001

To begin using the Context Menus (like in the image above) over a long list selector in your app:-

1. Add nugget Windows Phone Toolkit - http://nuget.org/packages/WPToolkit/

To add nuget

- Right click on References

- Manage Nuget Packages

- With the online option chosen on the left panel, search for the nuget

- Install

2. Add the "toolkit" prefix declaration. Make sure that your page declaration includes the "toolkit" namespace:

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

3. Add the Context Menu to the data template of your long list selector

<toolkit:ContextMenuService.ContextMenu>

<toolkit:ContextMenu IsZoomEnabled="True"x:Name="ContextMenu" >

<toolkit:MenuItem x:Name=”Watch" Header=”Watch Trailer" Click="Watch_Click"/>

<toolkit:MenuItem x:Name="Buy" Header="Buy" Click="Buy_Click"/>

<toolkit:MenuItem x:Name="Share" Header="Share" Click="Share_Click"/>

</toolkit:ContextMenu>

</toolkit:ContextMenuService.ContextMenu>

4. Finally, write click event code in code behind. Also you can use Command to bind action and use MVVM patern:

private void Watch_Click(object sender, RoutedEventArgs e)

{

var selected =(sender as MenuItem).DataContext as MainPageViewModel;

//Do something

}

And now you have a very cool way to add commands in your app!

References

http://social.msdn.microsoft.com/Forums/en-US/wpdevelop/thread/9ef36d6c-09c6-47dc-a479-cbbedeacd2e1

http://myprogrammingdial.blogspot.com/2011/12/introduction-of-using-windows-phone_666.html

http://www.geekchamp.com/articles/wp7-contextmenu-in-depth--part1-key-concepts-and-api

  • What if I try to set the menu item Header according to the selected item? How can I solve this?

    I tried using the SelectedItem property of the LongListSelector, but its not up to date with the "touch&holded" item.

  • Andrei, you can get the SelectedItem in the LongListSelector like this :

    In the SelectionChanged event of the LongListSelector, get the longlistselector and then the selected item :

    var item = ((LongListSelector) sender ).SelectedItem as ModelType;

    where ModelType is the type of the items you LongListSelector handles.

  • The context menu is not displayed sometimes when i try using win 8 device.But no problem when trying in emulator.

    Any idea why this occurs?

  • Hi Neha,

    I am trying to install this using PM> Install-Package -WPtoolkit command but I have no luck, Even when I tried looking under Online section in Manage NuGet section, I dont know bt something is blocking me so I get

    Could Not Connect to Feed specified at 'https://www.nuget.org/api/v2/ message.

    The one what you have shown in images, I want to implement the same, I want Add to My Calendar option there, kindly answer ,1) Will I be able to do so? Open calendar from context? 2) Isnt that WPtoolkit available in zip kinda of download links?

  • Hey Neha,

    Thanks its done.. I did nothing, just another try. But dont know how.

    Sorry, if wasted anybody's time.

  • If anyone can help out with something related to this, im willing to pay $25 or so via Paypal.  Link is here

    developer.nokia.com/.../247141-Confused-on-how-to-code-a-Task-in-Viewmodel

    Im trying to code a task in a Viewmodel but its not working right.

Page 1 of 1 (6 items)
Leave a Comment
  • Please add 1 and 8 and type the answer here:
  • Post