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

  • Article

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 - https://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

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

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

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