Highlight popup menu item

Question

Since no check menu item in Metro, what is the method to implement this kind of function? How to highlight a popup menu item?

Answer 1

Hi,

You can use MenuFlyout control instead of check menu in windows 8.1. Menus are a special kind of flyout that contains a list of options that the user can select:

<Button Content="Show" x:Name="ShowButton">
   
 <Button.Flyout>
        <MenuFlyout>
            <MenuFlyoutItem Text="Menu option 1" />
            <MenuFlyoutItem Text="Second command" />
            <MenuFlyoutSeparator />
            <ToggleMenuFlyoutItem Text="Last option" />
        </MenuFlyout>
    </Button.Flyout>
</Button>

With this code, we obtain the following result:

To handle the selection of a menu item, we use the Click event of MenuFlyoutItem and ToggleMenuFlyoutItem.

You can refer to the link below to get more information:

http://msdn.microsoft.com/en-us/library/windows/apps/bg182878.aspx#MenuFlyout

Best Wishes!

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 2

That is what I want. In my special case I need a radio check menu item. So only one item can be selected anytime. my old app applied Append to add menu items below

menu->Commands->Append(ref new UICommand("Next", ref new UICommandInvokedHandler([this, pBook](IUICommand^ command)
{
   OnGoForward();
})));

how to do this by ToggleMenuFlyoutItem ?

Answer 3

Hi,

If you want to get the radio check button style in menu item,you can edit ToggleMenuFlyoutItem style:

Try to find the following code within the Style:

<Path x:Name="CheckGlyph" Data="F1 M 0,58 L 2,56 L 6,60 L 13,51 L 15,53 L 6,64 z" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Height="14" Margin="0,0,10,0" Opacity="0" Stretch="Fill" Width="16"/>

And replace it with:

<Ellipse x:Name="BackgroundEllipse"
                                     Width="23"
                                     Height="23"
                                     UseLayoutRounding="False"
                                     Fill="{ThemeResource RadioButtonBackgroundThemeBrush}"
                                     Stroke="{ThemeResource RadioButtonBorderThemeBrush}"
                                     StrokeThickness="{ThemeResource RadioButtonBorderThemeThickness}" />
                                    <Ellipse x:Name="CheckGlyph"
                                     Width="13"
                                     Height="13"
                                     UseLayoutRounding="False"
                                     Opacity="0"
                                     Fill="{ThemeResource RadioButtonForegroundThemeBrush}" />

And how to add ToggleMenuFlyoutItem to menu item you can refer to the link below:

http://msdn.microsoft.com/en-us/library/windows/apps/dn308516.aspx

To learn more about the MenuFlyout control, download the XAML Flyout and MenuFlyout sample.

About only one item can be selected anytime, there is no a property in ToggleMenuFlyoutItem can control it, you should control by code yourself.

Best Wishes!

---

We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 4

Follow the example it worked. Now the problem is the binding.

In following XAML

            <ToggleMenuFlyoutItem Text="Shuffle"
                IsChecked="{Binding IsShuffleEnabled, Mode=TwoWay}"/>

I set the bool IsShuffleEnabled as

           
IsShuffleEnabled = (nTag == 0);           
IsRepeatEnabled = (nTag == 1);	

MenuFlyoutItem^ selectedItem = (MenuFlyoutItem^)sender;	
if (selectedItem != nullptr)	
{		
   if (selectedItem->Tag->ToString() == "Shuffle")
   {		
      Shuffle();
   } 
   else if (selectedItem->Tag->ToString() == "none")
   {
      Repeat();
   }
}

Since Binding is twoway, I guess change IsShuffleEnabled will be reflected on Flyout Menu Item. But there is no reaction. Multiple checks are still there. What is wrong in the usage?