Freigeben über

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

  • Artikel

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

Comments

  • Anonymous
    May 26, 2013
    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.

  • Anonymous
    September 18, 2013
    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.

  • Anonymous
    October 16, 2013
    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?

  • Anonymous
    January 19, 2014
    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?

  • Anonymous
    January 19, 2014
    Hey Neha, Thanks its done.. I did nothing, just another try. But dont know how. Sorry, if wasted anybody's time.

  • Anonymous
    May 09, 2014
    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.

  • Anonymous
    August 12, 2014
    Hi, I am stuck at step 3. How and where to create longlistselector ? Thanks for help !

  • Anonymous
    November 02, 2014
    the selected is not I want, do you kown what happend?

  • Anonymous
    November 02, 2014
    private void XJPC_Click(object sender, RoutedEventArgs e)        {            var xjpc = (sender as MenuItem).DataContext as RetChiC;            _vm.ItemXJPCComand.Execute(xjpc.OpenTradeNo);        } the selected (xjpc) is not i click MenuItem, do you know what happend? thanks

  • Anonymous
    May 25, 2015
    How do we change the width of the context menu ?