UWP - GridView 项目覆盖答案

【问题标题】：UWP - GridView item overlayUWP - GridView 项目覆盖
【发布时间】：2016-01-19 16:24:51
【问题描述】：

我的目标是创建填充了我的自定义控件的 GridView。控件有两种状态——关闭（70px 高）和打开（200px 高）。它包含两个网格 - 70 和 130。上部网格始终可见，下部默认折叠，并且 Canvas.ZIndex 设置为 2。

每次我展开控件时，它都不会覆盖 GridView 中的其他项目 - 相反，控件会将它们推低。何来解决这个问题？

【问题讨论】：

【解决方案1】：

要在 UI 的其余部分上呈现叠加的控件，您需要使用 Popup。它可以完全定制，但需要一些支持代码才能使其工作。

如果您要求不高，使用Flyout 可能就足够了。它在定位、外观和行为方面受到更多限制，但使用起来也更简单：

<TextBlock Tapped="UIElement_OnTapped">Closed
    <FlyoutBase.AttachedFlyout>
        <Flyout Placement="Bottom">
            <TextBlock>Opened</TextBlock>
        </Flyout>
    </FlyoutBase.AttachedFlyout>
</TextBlock>

在事件处理程序中，您可以使其可见：

private void UIElement_OnTapped(object sender, TappedRoutedEventArgs e)
{
    var uiSender = sender as UIElement;
    var flyout = (FlyoutBase) uiSender.GetValue(FlyoutBase.AttachedFlyoutProperty);
    flyout.ShowAt(uiSender as FrameworkElement);
}

如需了解更多信息，请查看this blog post，了解如何创建基于 Popup 的自定义 Fylout 类控件。

【讨论】：