使用 BottomAppBar 显示弹出按钮 [英] Show flyout using 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

A flyout attached to a button opens automatically when the user clicks the button. You don't need to handle any events to open the flyout. (This includes controls derived from Button, like 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.

You can attach a Flyout control to any FrameworkElement object by using the FlyoutBase.AttachedFlyout attached property. If you do so, you must respond to an interaction on the FrameworkElement, such as the Tapped event, and open the Flyout in your code.

在 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 显示弹出按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！