How to select an item in the Windows 8 Metro app to pop up the AppBar

Recently written programs want to simulate a menu setting function by right-clicking a tile in Win8, and An appbar will pop up, which is similar to the following:

I haven't figured it out for a long time, and finally let me try it out. I just need to change the attributes.

The following is the initial XAML code of my AppBar:

<Page. bottomappbar> <AppBar background = "# ff00b7ef" borderbrush = "# ff00b7ef" name = "myappbar"> <AppBar. content> <grid> <stackpanel orientation = "horizontal" horizontalalignment = "Left"> <button visibility = "Collapsed" name = "Remove" automationproperties. name = "delete this project" style = "{staticresource removeappbarbuttonstyle}" Click = "remove_click"/> <button visibility = "Collapsed" name = "removeall" automationproperties. name = "delete all projects" style = "{staticresource removeappbarbuttonstyle}" Click = "removeall_click"/> </stackpanel> <stackpanel orientation = "horizontal" horizontalalignment = "right"> <button name = "about" automationproperties. name = "about" style = "{staticresource homeappbarbuttonstyle}" Click = "about_click"> </button> <button name = "setting" automationproperties. name = "set" style = "{staticresource settingsappbarbuttonstyle}" Click = "setting_click"> </button> <button name = "Export" automationproperties. name = "exported as a text file" style = "{staticresource downloadappbarbuttonstyle}" Click = "export_click"> </button> </stackpanel> </GRID> </AppBar. content> </AppBar> </page. bottomappbar>

The Code contains five buttons, two of which are temporarily invisible. The function I want to implement is to right-click an item of a grid (triggering the selectionchanged event, the AppBar will pop up immediately to perform corresponding operations.

When the selectionchanged event is triggered

Indexnum = indexview. selectedindex;

You will get an index value. If you cancel the selection, you will get-1. So when you get a non-1 value, make the remove and removeall buttons visible, and make the entire AppBar visible (isopen = true); make it invisible in-1. To sum up, just add the following lines of code:

if (indexNum != -1)           {               remove.Visibility = Windows.UI.Xaml.Visibility.Visible;               removeAll.Visibility = Windows.UI.Xaml.Visibility.Visible;               myAppBar.IsOpen = true;           }           else {               remove.Visibility = Windows.UI.Xaml.Visibility.Collapsed;               removeAll.Visibility = Windows.UI.Xaml.Visibility.Collapsed;           }

The related C # code is as follows:

Int indexnum = 0; private void remove_click (Object sender, routedeventargs e) {myindex. removeat (indexnum); remove. visibility = windows. UI. XAML. visibility. visible; removeall. visibility = windows. UI. XAML. visibility. visible;} private void select (Object sender, selectionchangedeventargs e) {indexnum = indexview. selectedindex; If (indexnum! =-1) {remove. visibility = windows. UI. XAML. visibility. visible; removeall. visibility = windows. UI. XAML. visibility. visible; myappbar. isopen = true;} else {remove. visibility = windows. UI. XAML. visibility. collapsed; removeall. visibility = windows. UI. XAML. visibility. collapsed ;}} private async void removeall_click (Object sender, routedeventargs e) {messagedialog MD = new messagedialog ("are you sure you want to delete all diaries? "); Md. commands. add (New uicommand ("OK", command => {myindex. clear () ;})); Md. commands. add (New uicommand ("cancel", command =>{// do nothing}); await Md. showasync ();}

Final effect:

Before unselected:

After the item in the grid is selected: