Flyout Placement Bottom Windows Phone - windows

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 ?

Answer 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

Answer 2

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.