locked
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?
    Saturday, March 22, 2014 11:14 PM

Answers

  • 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.

    • Marked as answer by Charlie C. Li Tuesday, March 25, 2014 3:43 PM
    Tuesday, March 25, 2014 2:11 AM

All replies

  • 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.



    Monday, March 24, 2014 1:52 AM
  • 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 ?


    Monday, March 24, 2014 1:33 PM
  • 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.

    • Marked as answer by Charlie C. Li Tuesday, March 25, 2014 3:43 PM
    Tuesday, March 25, 2014 2:11 AM
  • 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? 






    Tuesday, March 25, 2014 3:56 PM