Flyout Placement Bottom Windows Phone

时间:2015-01-10 15:43:13

标签: windows xaml windows-phone

我想将Flyout放在我页面的底部。 所以我就是这样创造的。

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

并在code behind

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

但它每次都会在我的页面顶部打开。我可以将它设置为FlyoutPlacementMode.Full,例如它正在以预期的方式工作。

我将它附在完整的页面并尝试了,但结果是一样的。那么如何让它在我的页面底部打开?

////编辑

我找到了following answer,但这不适合我!我不想用按钮打开它!

我正在以我想要的方式使用MenuFlyout,但我希望有一个PickerFlyout

有描述表明其他展示位置无效Flyout s。任何想法?

2 个答案:

答案 0 :(得分:1)

不幸的是,Windows Phone RT应用程序仅支持您已经建立的Full或Top展示位置的弹出窗口。但是可以做你要问的事情。

本文可能对您有用:Flyout on Windows Phone 8.1 Runtime

答案 1 :(得分:0)

好吧我解决了!

我想在其中显示文字/信息,因此MenuFlyout对我来说无处可选。 PickerFlyout是不可修改的,所以我采用了共同的。{/ p>

正如我所提到的,除了Flyout之外,底部没有MenuFlyout的工作展示位置。 所以这就是我所做的。

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

我将PlacementMode设置为Full并应用了不可见的背景。现在只有外部Stackpanel显示背景。这种感觉就像真正的PlacementMode.Bottom