[WP 8.1 Development] context menu

In a desktop system, it is not a developer. I believe that anyone eligible for the computer level knows what a text menu is or right-click a menu.

In order to make operations more convenient, such menus should also be available in mobile apps. The context menu has a "context" because it is usually associated with the object being operated by the user. For example, you can select a text in the text input box, then, the context menu is used to set the format of the selected text. The objects operated by the menu are the selected text.

In the new rt api, there is a menuflyout class (derived from flyoutbase, dedicated to some pop-up floating controls, menus are also a pop-up control) that can be used to create context menus.

Each item in the menu is represented by the menuflyoutitem class, which is the most common menu and used more. There is also a togglemenuflyoutitem menu item, which can be switched between multiple clicks, similar to the checked menu item we use in the desktop program, when the status is selected, a check box is displayed in front of it. If it is not selected, it is not checked in front.

You can add up or down menus to the application UI in either of the following ways.

First, let's look at the button class and see if it has a flyout attribute? The type is flyoutbase, which indicates that any control derived from the flyoutbase class can be used. The menuflyout class is a subclass of flyoutbase. Therefore, a very easy way to add context menus is to assign the button. flyout attribute directly.

Example:

<Button content = "click"> <button. flyout> <menuflyout> <menuflyoutitem text = "option 1" Click = "onitemclick"/> <menuflyoutitem text = "option 2" Click = "onitemclick"/> <menuflyoutitem text =" option 3 "Click =" onitemclick "/> </menuflyout> </button. flyout> </button>

The menu contains three items. The text attribute indicates the text displayed in the menu, and responds to user operations by processing the Click Event of the menu item.
Below we will write some processing code:

Private async void onitemclick (Object sender, routedeventargs e) {menuflyoutitem item = sender as menuflyoutitem; If (item! = NULL) {string MSG = string. Format ("You selected" {0 }". ", Item. text); windows. UI. popups. messagedialog DLG = new windows. UI. popups. messagedialog (MSG, "prompt"); await DLG. showasync ();}}

I am not so complicated. I will use a method to process the click events of three menuflyoutitem at the same time and use sender to determine which item is clicked, then, the text of the clicked menu item is displayed in a pop-up dialog box.
Run it and click the cute button to see the following results.

After running, you will find that the pop-up control of button. flyout is set. It will be automatically displayed as soon as you click the button. We do not need to do any work.

 

Another way to add up and down menus is to add attributes.

The flyoutbase class defines the following additional attributes:

public static Windows.UI.Xaml.DependencyProperty AttachedFlyoutProperty { get; }public static void SetAttachedFlyout(Windows.UI.Xaml.FrameworkElement element, Windows.UI.Xaml.Controls.Primitives.FlyoutBase value)public static Windows.UI.Xaml.Controls.Primitives.FlyoutBase GetAttachedFlyout(Windows.UI.Xaml.FrameworkElement element)

With this additional attribute, you can attach the context menu to all frameworkelement objects.

 

Note: In this case, menuflyout does not automatically pop up and needs to be handled by ourselves. In general, open the menu when we long press a UI object. The better way is to handle the holding event. on the mobile phone, long-clicking is equivalent to right-clicking the mouse on the computer. Why not use the righttapped event, because the righttapped event occurs only after the entire long-pressed operation is completed, while the holding event can occur during the long-pressed operation, if the user keeps pressing the UI object without releasing his/her hand, the righttapped event will be delayed. If the user does not see the menu, he will mistakenly think that the program is faulty. Otherwise, the holding event occurs after the user's long-pressed operation is identified. The user can see the menu before releasing his finger, so that the program does not respond.

Example:

<Ellipse width = "200" Height = "200" holding = "onelpholding"> <ellipse. fill> <solidcolorbrush color = "green" X: Name = "elbrush"/> </ellipse. fill> <flyoutbase. attachedflyout> <menuflyout placement = "TOP"> <menuflyoutitem text = "blue" Click = "onmenuclick" tag = "blue"/> <menuflyoutitem text = "red" Click = "onmenuclick "tag =" red "/> <menuflyoutitem text =" green "Click =" onmenuclick "tag =" green "/> <menuflyoutitem text =" Purple "Click =" onmenuclick "tag = "Purple"/> </menuflyout> </flyoutbase. attachedflyout> </ellipse>

The placement attribute specifies the menu pop-up direction, which is set to up here. Note that in WP, menus all occupy horizontal space. That is to say, when the screen is portrait, only the top and bottom directions are meaningful, and the left and right directions are ignored, because the Left and Right spaces are full, it doesn't matter. Similarly, when the screen direction is horizontal, only the left and right are available, because the upper and lower menus are full. It doesn't matter if you think it's hard to understand, and this location is not absolute. The system will automatically adjust the location based on the available space. Generally, you don't need to point to the menu pop-up direction, I just set it for demonstration.

First, process the holding event of ellipse and open the menu.

Private void onelpholding (Object sender, holdingroutedeventargs e) {ellipse ellp = sender as ellipse; If (ellp! = NULL) {// display the context menu flyoutbase. showattachedflyout (ellp );}}

Use the static showattachedflyout method of the flyoutbase class to open the menu. The parameter is the UI element with flyoutbase. attachedflyout appended. In this example, it is an ellipse object.
Next, process the click event of menuflyoutitem and change the ellipse color.

Private void onmenuclick (Object sender, routedeventargs e) {menuflyoutitem item = sender as menuflyoutitem; If (item! = NULL) {string tag = item. tag. tostring (); // switch (TAG) {Case "blue": elbrush. color = colors. blue; break; Case "red": elbrush. color = colors. red; break; Case "green": elbrush. color = colors. green; break; Case "Purple": elbrush. color = colors. purple; break; default: elbrush. color = colors. green; break ;}}}

Run the example and press on the circle to open the context menu to change the circle color.

 

Sample source code download: http://files.cnblogs.com/tcjiaan/MenuFlyoutExamples.zip

Well, today's cowhide is blowing here and you can collect it.

========================================================== ==================================

One thing must be said seriously. It is hoped that the author of the blog post can indicate the original source. Blog is a free-sharing platform, but we should respect originality. Recently, we have found that some reposts have removed the original author and original links. Although my blog posts are poorly written, we need to respect originality. -- Lao Zhou

[WP 8.1 Development] context menu