使用BottomAppBar显示弹出框

本文关键字:显示 BottomAppBar 使用 | 更新日期: 2023-09-27 18:07:03

我试图显示一个简单的Flyout(与信息内容)当AppBarToggleButton在底部appbar被按下,但我的解决方案不起作用。(

这是我的代码:

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

没有出现. .有人能帮我展示一下这个布局吗?非常感谢,很抱歉我的英语不好。:)

上岛

使用BottomAppBar显示弹出框

MSDN上的描述都很清楚(这里也有一个很好的例子):

没有显示,因为Flyouts只自动打开按钮(和AppBarToggleButton不从Button类派生):

当用户单击按钮时,按钮附加的弹出框会自动打开。您不需要处理任何事件来打开弹出框。(这包括从Button派生的控件,如AppBarButton

)

当然,你可以添加一个Flyout到任何FrameworkElement,但你必须手动打开它:

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

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

<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);  
}