3

Windows Phone SDK (WP 8.1) 的 Flyout 控件无法正常工作。

无论我如何更改 Placement 属性,唯一改变的就是 PlacementMode.Full。顶部、底部、左侧和右侧仍将浮出控件保持在显示屏顶部。还有其他方法可以在我的页面底部显示弹出窗口吗?例如,Microsoft 的日历应用程序在通过按下 CommandBar 的右 AppBarButton 更改视图时具有这种确切的行为。

日历应用程序的屏幕截图

以下是我尝试的两种方法:

XAML:
<Page.Resources>
    <Flyout x:Key="MyFlyout">
        <StackPanel>
            <TextBlock Text="Test"/>
        </StackPanel>
    </Flyout>
</Page.Resources>

C#:
Flyout flyout = (Flyout) this.Resources["MyFlyout"];
flyout.Placement = FlyoutPlacementMode.Bottom;
flyout.ShowAt(this.LayoutRoot);

XAML:
<Button Content="ShowFlyout">
    <Button.Flyout>
        <Flyout Placement="Bottom">
            <StackPanel>
                <TextBlock Text="Test"/>
            </StackPanel>
        </Flyout>
    </Button.Flyout>
</Button>
4

3 回答 3

1

在您编辑问题以包含屏幕截图后,它变得更加清晰。

他们使用的是 MenuFlyout,而不仅仅是普通的弹出窗口。

这很容易,如下面的代码所示:

<Page.BottomAppBar>
    <CommandBar Background="Black" IsOpen="False" IsSticky="False" ClosedDisplayMode="Minimal">
        <CommandBar.PrimaryCommands>
            <AppBarButton x:Name="btnPin" Label="Choose" Icon="Calendar" Foreground="White">
                <Button.Flyout>
                    <MenuFlyout Placement="Top">
                        <MenuFlyoutItem Text="Day" /><MenuFlyoutSeparator/>
                        <MenuFlyoutItem Text="Week" /><MenuFlyoutSeparator/>
                        <MenuFlyoutItem Text="Month" />
                        <MenuFlyoutSeparator/>
                        <MenuFlyoutItem Text="Year" />
                        <MenuFlyoutSeparator/>
                    </MenuFlyout>
                </Button.Flyout>
            </AppBarButton>                
        </CommandBar.PrimaryCommands>
    </CommandBar>
</Page.BottomAppBar>

在此处输入图像描述

当然,你可以按照你想要的方式来设计它。

于 2014-09-17T05:49:50.003 回答
1

有一个简单的解决方法,但它看起来并不是最好的方法。您可以创建一个针对 FlyoutPresenter 的 Style 并设置边距以强制 Flyout 显示在底部,您需要将 Margin 与一个转换器绑定,该转换器获取屏幕的宽度和高度并设置边距以将 Flyout 向下移动到每个屏幕尺寸的页面。它确实有效,但正如我所说,这似乎不是最好的方法。

于 2015-07-15T15:06:24.713 回答
0

我只是稍微修改了您的代码以在底部显示弹出窗口。

<Grid>
    <Button x:Name="DeleteButton" Content="Empty cart">
        <Button.Flyout>
            <Flyout Placement="Full">
                <Grid VerticalAlignment="Bottom" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                    </Grid.RowDefinitions>
                    <TextBlock Grid.Row="1" Style="{StaticResource BaseTextBlockStyle}">
                        All items will be permanently removed from your cart.
                    </TextBlock>
                    <Button Grid.Row="2" Click="DeleteConfirmation_Click" Margin="0">
                        Empty my cart
                    </Button>
                </Grid>                        
            </Flyout>
        </Button.Flyout>
    </Button>
</Grid>

从这篇文章:http: //msdn.microsoft.com/en-us/library/windows/apps/xaml/dn308515.aspx

在 Windows Phone 上,Flyout 默认显示在屏幕顶部。您可以将 Placement 属性更改为 FlyoutPlacementMode.Full 以使弹出窗口覆盖全屏。Top、Bottom、Left 和 Right 值在 Windows Phone 应用程序中没有任何影响。

在此处输入图像描述 在此处输入图像描述

于 2014-09-15T05:04:37.267 回答