Flyout Placement Bottom Windows Phone

Question

I want to place my Flyoutat the Bottom of my Page. So i created it like this.

<Grid x:Name="ExampleRoot">

    <Grid HorizontalAlignment="Center"
              VerticalAlignment="Top">
        <Image Source="{Binding Path=CurrentPage}" 
                           Stretch="Uniform"                               ContinuumNavigationTransitionInfo.IsEntranceElement="True"
                           />
    </Grid>


    <FlyoutBase.AttachedFlyout>

        <PickerFlyout Placement="Bottom" > <!-- Here I set my Placement --->
            <StackPanel>
                <TextBlock Style="{ThemeResource TitleTextBlockStyle}" Text="{Binding Path=DocumentPageCounterDescription, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" />
                <TextBlock Style="{ThemeResource TitleTextBlockStyle}" Text="{Binding Path=SelectedAnnotation.Description, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" TextWrapping="Wrap" />
            </StackPanel>
        </PickerFlyout>
    </FlyoutBase.AttachedFlyout>

</Grid>

and open it like this in the code behind

    private void SomePropertyChanged(DependencyPropertyChangedEventArgs e)
    {
        ViewModel selected = e.NewValue as ViewModel;
        FlyoutBase fly = FlyoutBase.GetAttachedFlyout(this.LayoutRoot);
        fly.ShowAt(this.LayoutRoot);
    }

But it opens every time at the top of my page. I can set it to FlyoutPlacementMode.Full for example and it is working the expected way.

I attached it at the complete page and tried it, but the result is the same. So how do I get it to open at the bottom of my Page?

//// Edit

I found the following answer, but this is not working for me! I dont want to open it from a button!

It is working with a MenuFlyout the way I want to, but i want to have a PickerFlyout.

There is descripted that other placements not working on Flyouts. Any Ideas ?

score 1 · Answer 1 · answered Jan 17 '15 at 22:03

1

Unfortunately, Windows Phone RT apps only support the flyout in Full or Top placement which you've already established. It is possible to do what you're asking however.

This article might be of use to you: Flyout on Windows Phone 8.1 Runtime

answered Jan 17 '15 at 22:03

James Croft

1,680
13
25

score 0 · Accepted Answer · answered Jan 10 '15 at 17:26

All right I solved it!

I want to show Text / information in it so a MenuFlyout was no option for me. The PickerFlyout isn't modifiable enought so i took the common one.

As I mentioned there is no working placement with a Flyout at the Bottom except with a MenuFlyout. So here is what I did.

        <FlyoutBase.AttachedFlyout>
            <Flyout Placement="Full">

                <StackPanel Background="{ThemeResource FlyoutBackgroundThemeBrush}" >
                    <StackPanel Margin="5,0">
                        <TextBlock Style="{ThemeResource TitleTextBlockStyle}" Text="Some Title Example" />
                        <TextBlock Style="{ThemeResource TitleTextBlockStyle}" Text="Some Information Example" TextWrapping="Wrap" />
                    </StackPanel>
                </StackPanel>

                <Flyout.FlyoutPresenterStyle>
                    <Style TargetType="FlyoutPresenter">
                        <Setter Property="Background" Value="Transparent" />
                        <Setter Property="VerticalContentAlignment" Value="Bottom" />
                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                    </Style>
                </Flyout.FlyoutPresenterStyle>

            </Flyout>
        </FlyoutBase.AttachedFlyout>
    </Grid>

I set the PlacementMode to Full and applied an invisible Background. Only the the outer Stackpanel is now showing a background. This way it feels like the real PlacementMode.Bottom.

your way do make the flyout appear at the bottom, but if you click anywhere it wont dismiss as the normal flyout would do because i'm simply clicking 'inside' the flyout not outside it as the user thinks — NadaNK, Jun 09 '15 at 06:46

Flyout Placement Bottom Windows Phone

2 Answers2