Show flyouts from hamburger button

Question

I would like to show a flyout from an hamburger button... like it happens into Windows 10 logout (see the picture).

It's possibile?!?

Jessica thanks for your reply but in my code where I can put yours!?!

<Controls:HamburgerButtonInfo x:Name="LogoutButton" PageParameter="0" ButtonType="Command" Tapped="LogoutButton_Tapped">  
    <Controls:HamburgerButtonInfo.NavigationTransitionInfo>  
        <SuppressNavigationTransitionInfo />  
    </Controls:HamburgerButtonInfo.NavigationTransitionInfo>  
    <StackPanel Orientation="Horizontal">  
        <ToolTipService.ToolTip>  
            <TextBlock Text="Logout" x:Uid="logout_ToolTipService" TextWrapping="Wrap" />  
        </ToolTipService.ToolTip>  
        <SymbolIcon Width="48" Height="48" Symbol="Contact" />  
        <TextBlock Margin="12,0,0,0" Name="textBlock_LogoutButton"  x:Uid="textBlock_LogoutButton" VerticalAlignment="Center" Text="Logout" />  
    </StackPanel>  
</Controls:HamburgerButtonInfo>

You can put `MenuFlyout` on any button let alone Hamburger button. — AVK, Jun 14 '17 at 15:28

score 0 · Answer 1 · edited Jun 15 '17 at 00:23

0

<Button>  
    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE700;" />  
    <Button.Flyout>  
        <MenuFlyout>  
            <MenuFlyoutItem Text="Some text"/>  
            <ToggleMenuFlyoutItem Text="Some text 2"/>  
            <ToggleMenuFlyoutItem Text="Some text 3"/>  
        </MenuFlyout>  
    </Button.Flyout>  
</Button>

edited Jun 15 '17 at 00:23

AVK

3,893
1
22
31

answered Jun 14 '17 at 22:32

Jessica

2,057
1
15
24

Show flyouts from hamburger button

1 Answers1