Как прикрепить Flyout к MenuFlyoutItem? - PullRequest
Новая
       73

Как прикрепить Flyout к MenuFlyoutItem?

1 голос
/ 11 февраля 2020

XAML-код: 

<Page.TopAppBar>
    <CommandBar x:Name="bottomAppBar" Padding="10,0,10,0">
        <AppBarButton AutomationProperties.Name="Sample Button"
                  AutomationProperties.AutomationId="SampleAppBarButton"
                  Click="AppBarButton_Click">
            <AppBarButton.Flyout>
                <MenuFlyout>
                    <MenuFlyoutItem x:Name="MuteMenu" Icon="Mute" Text="Mute" Click="MuteMenu_Click">
                        <FlyoutBase.AttachedFlyout>
                            <Flyout>
                                <TextBlock Text="Some text..."/>
                            </Flyout>
                        </FlyoutBase.AttachedFlyout>
                    </MenuFlyoutItem>
                </MenuFlyout>
            </AppBarButton.Flyout>
        </AppBarButton>
    </CommandBar>
</Page.TopAppBar>

C ++ / CX: 

void App2::DirectXPage::MuteMenu_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
    FlyoutBase::ShowAttachedFlyout((FrameworkElement^)sender);
}

Но ShowAttachedFlyout не работает - всплывающее окно не появляется, когда я нажимаю на элемент меню. Об ошибках не сообщается.

Создание и присоединение всплывающего окна программным способом также не работает.

Целевая версия 10.0.18362.0. Visual Studio 2019 (v142).

1 Ответ

0 голосов
/ 13 февраля 2020

всплывающее окно не появляется, когда я щелкаю элемент меню

При тестировании вашего кода всплывающее окно не появляется, потому что после нажатия кнопки MenuFlyoutItem Весь MenuFlyout будет скрыт, всплывающая подсказка внутри него не появится.

Вы можете попробовать использовать MenuFlyoutSubItem, который содержит каскадный список пунктов меню. 

<Page.TopAppBar>
    <CommandBar x:Name="bottomAppBar" Padding="10,0,10,0">
        <AppBarButton AutomationProperties.Name="Sample Button"
                      AutomationProperties.AutomationId="SampleAppBarButton"
                      x:Name="MyAppButton" >
            <AppBarButton.Flyout>
                <MenuFlyout>
                    <MenuFlyoutSubItem x:Name="MuteMenu" Icon="Mute" Text="Mute">
                        <MenuFlyoutItem Text="Some Text..."></MenuFlyoutItem>
                        <MenuFlyoutItem Text="123"></MenuFlyoutItem>
                    </MenuFlyoutSubItem>
                </MenuFlyout>
            </AppBarButton.Flyout>
         </AppBarButton>
    </CommandBar>
</Page.TopAppBar>

Или вы можете добавить Button.Flyout и включите menuFlyout в Button.Flyout. 

<Page.TopAppBar>
    <CommandBar x:Name="bottomAppBar" Padding="10,0,10,0">
        <AppBarButton x:Name="button" >
            <AppBarButton.Flyout>
                <Flyout>
                    <StackPanel>
                        <Button>
                            <StackPanel Orientation="Horizontal">
                                <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE74F;"></FontIcon>
                                 <TextBlock>Mute</TextBlock>
                            </StackPanel>
                            <Button.Flyout>
                                <MenuFlyout>
                                    <MenuFlyoutItem Text="Some text..."></MenuFlyoutItem>
                                </MenuFlyout>
                            </Button.Flyout>
                        </Button>
                    </StackPanel>
                </Flyout>
            </AppBarButton.Flyout>
    </CommandBar>
</Page.TopAppBar>
...