c# - 自动重新定位时调整弹出位置

在此处查看演示



我有一个UWP应用，该应用的ListView带有可选的列表项，如图所示。选择项目的右侧将打开一个Flyout（不是MenuFlyout）。我将Placement的Flyout指定为Bottom，并在Margin样式中指定0, -4, 0, 0的FlyoutPresenter。这将导致所需的外观，Flyout直接位于项目的下方和邻近。

但是，如果没有足够的空间显示Flyout，它将自动移动到Placement的Top。即使我将FlyoutPresenter样式的边距定义为具有-4底边距，也似乎没有应用。

有办法移动Flyout吗？如果可能的话，我宁愿不要使用MenuFlyout，因为没有什么是可选择的。弹出式窗口没有附加的Canvas属性，并且更新Canvas.Top的最高子级的Flyout位置无效（而且我并不期望这样做）。

编辑：所需的行为是使Flyout出现在Top Placement中，但实际上在Flyout和Target之间没有空格。

最佳答案

根据Quickstart: Adding a Flyout的放置弹出部分：


  如果屏幕上有足够的空间，则会使用首选的位置显示弹出窗口。如果没有足够的空间（例如，当元素位于屏幕边缘附近时），将使用此后备顺序放置弹出按钮。


当placement设置为bottom时，如果没有足够的空间，它将放置在设计使然的顶部。


  但在弹出按钮和目标之间没有空格


如果底部没有足够的空间，则在顶部的Flyout位置，此时，应将margin的FlyoutPresenter更改为0,4,0,0而不是0,-4,0,0以获得与打开时相同的效果底端。但是您不会知道Flyout是放在顶部还是底部，因此，可以将margin的控制模板中0,-5,0,-5元素的Border设置为FlyoutPresenterStyle来满足您的要求，这是一种解决方法。例如：

<Button
        Canvas.Top="600"
        HorizontalAlignment="Center"
        VerticalAlignment="Bottom"
        Click="Button_Click"
        Content="Open flyout">
        <Button.Flyout>
            <Flyout x:Name="flyout" Placement="Bottom">
                <Flyout.FlyoutPresenterStyle>
                    <Style TargetType="FlyoutPresenter">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="FlyoutPresenter">
                                    <Border
                                        Margin="0,-5,0,-5"
                                        Background="{TemplateBinding Background}"
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        BorderThickness="{TemplateBinding BorderThickness}">
                                        <ScrollViewer
                                            x:Name="ScrollViewer"
                                            AutomationProperties.AccessibilityView="Raw"
                                            HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                            HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                            VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                            VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                            ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
                                            <ContentPresenter
                                                Margin="{TemplateBinding Padding}"
                                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                Content="{TemplateBinding Content}"
                                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                                ContentTransitions="{TemplateBinding ContentTransitions}" />
                                        </ScrollViewer>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Flyout.FlyoutPresenterStyle>
                <TextBlock Text="This is some text in a flyout." TextWrapping="Wrap" />
            </Flyout>
        </Button.Flyout>
    </Button>