使用 BottomAppBar 显示弹出按钮

问题描述

当按下BottomAppBar 中的AppBarToggleButton 时，我试图显示一个简单的Flyout(带有信息内容)，但我的解决方案不起作用.:(

I'm trying to show a simple Flyout (with informational content) when a AppBarToggleButton within BottomAppBar is pressed, but my solution doesn't work. :(

这是我的代码:

<Page.BottomAppBar>
        <CommandBar>
            <AppBarToggleButton x:Uid="MapPageAppBarLegend" Label="" Icon="List">
                <FlyoutBase.AttachedFlyout>
                    <Flyout>
                        <TextBlock Text="Informations here..."/>
                    </Flyout>
                </FlyoutBase.AttachedFlyout>
            </AppBarToggleButton>
        </CommandBar>
</Page.BottomAppBar>

什么都没有出现.. 谁能帮我展示一下这个布局?非常感谢你，为我的英语感到抱歉.:)

Nothing appears.. Can anyone help me to showing this flayout?Thank you very much and sorry for my english language. :)

帕姆

推荐答案

一切都描述得很清楚 在 MSDN(那里也有一个很好的例子):

Everything is quite clearly described at MSDN (there is also a very good example there):

什么都没有出现，因为 Flyouts 只为按钮自动打开(和 AppBarToggleButton 不是从 Button 类派生的):

Nothing appears, because Flyouts open automatically only for buttons (and AppBarToggleButton doesn't derive from Button class):

当用户单击按钮时，附加到按钮的弹出按钮会自动打开.您无需处理任何事件即可打开浮出控件.(这包括从 Button 派生的控件，如 AppBarButton

当然，您可以将 Flyout 添加到任何 FrameworkElement，但您必须手动打开它:

Of course you can add a Flyout to any FrameworkElement but you will have to open it manually:

您可以使用 FlyoutBase.AttachedFlyout 附加属性将 Flyout 控件附加到任何 FrameworkElement 对象.如果这样做，您必须响应 FrameworkElement 上的交互，例如 Tapped 事件，并在代码中打开 Flyout.

在 XAML 中 - 在资源中定义您的 Flyout 并将其附加到按钮:

In XAML - define your Flyout in Resources and attach it to button:

<Page.Resources>
    <Flyout x:Key="myFlyout" Placement="Top">
        <TextBlock Text="Informations here..."/>
    </Flyout>
</Page.Resources>
<Page.BottomAppBar>
    <CommandBar>
        <AppBarToggleButton x:Uid="MapPageAppBarLegend" Label="First" Icon="List"
                            FlyoutBase.AttachedFlyout="{StaticResource myFlyout}"
                            Click="AppBarToggleButton_Click"/>
    </CommandBar>
</Page.BottomAppBar>

和后面代码中的事件:

private void AppBarToggleButton_Click(object sender, RoutedEventArgs e)
{
    FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
}

这篇关于使用 BottomAppBar 显示弹出按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！