Windows Phone Flyout is always on top

Flyout control for Windows Phone SDK (WP 8.1) doesn't work as I expected.

No matter how I change the Placement property, the only thing that changes anything is PlacementMode.Full. Top, Bottom, Left, and Right still retain the checkbox at the top of the display. Is there any other way to show the crash at the bottom of my page? For example, Microsoft's calendar app has this exact behavior, changing the view by clicking the right AppBarButton from the CommandBar.

Screenshot of the calender app

Here are the two ways I tried:

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>

      

+3


source to share


3 answers


Once you've edited the question to include it, it becomes much clearer.

What they are using is MenuFlyout, not just a regular crash.

It can be as easy as in the code below:



<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>

      

enter image description here

You can of course style it however you like.

+1


source


There is a workaround, however it doesn't look like the best way. You can target the FlyoutPresenter style and set the margin to make the Flyout appear in the botton, you need to bind the margin using a converter that takes the screen width and height and sets the margin to move the popup to the bottom of the page for each screen size. It does work, but as I said, it doesn't seem like the best way.



+1


source


I modified your code a bit to show the popup at the bottom.

<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>

      

From this article: http://msdn.microsoft.com/en-us/library/windows/apps/xaml/dn308515.aspx

Windows Phone displays a pop-up window at the top of the screen by default. You can change the Placement property to FlyoutPlacementMode.Full so that the popup is fully displayed. Top, Bottom, Left, and Right values ​​have no effect on Windows Phone apps.

enter image description hereenter image description here

0


source







All Articles