如何为具有可变高度的弹出窗口设置垂直偏移

Question

我正在使用 C#/XAML 开发 Windows 8（我知道 Windows 8.1 有 Flyout 控件）应用程序。我想显示如下所示的弹出菜单。现在最初它总共有 10 个选项，但根据上下文我显示了一定数量的选项，所以用户控件没有固定高度，它是自动的。

我按照this article 在应用栏按钮单击时正确显示浮出控件。但这对我没有用，因为它使用的是用户控件的高度，而对于我来说，它是 NaN。

所以任何人都有更好的解决方案来显示可变高度的弹出窗口。

PS：我不想将 Callisto 用于单一需求。

弹出用户控件。 (ExportTypes.xaml)

<Border BorderThickness="2" BorderBrush="#1789E6" Background="#D1E7FA" Width="230">
    <StackPanel VerticalAlignment="Bottom">
        <Grid x:Name="grdPdf" Tapped="grdExportType_Tapped">
            <TextBlock Text="PDF" FontSize="20" />
        </Grid>
        <Grid x:Name="grdOpenSpreadsheet" Tapped="grdExportType_Tapped">
            <TextBlock Text="Open Office Spreadsheet" FontSize="20"/>
        </Grid>
        <Grid x:Name="grdMsExcel" Tapped="grdExportType_Tapped">
            <TextBlock Text="Microsoft Excel" FontSize="20"/>
        </Grid>
        <Grid x:Name="grdMsWord" Tapped="grdExportType_Tapped">
            <TextBlock Text="Microsoft Word" FontSize="20"/>
        </Grid>
        <Grid x:Name="grdOpenDoc" Tapped="grdExportType_Tapped">
            <TextBlock Text="Open Office Document" FontSize="20"/>
        </Grid>
        <Grid x:Name="grdHtml" Tapped="grdExportType_Tapped">
            <TextBlock Text="HTML" FontSize="20"/>
        </Grid>
        <Grid x:Name="grdRtf" Tapped="grdExportType_Tapped">
            <TextBlock Text="RTF" FontSize="20"/>
        </Grid>
        <Grid x:Name="grdPlainText" Tapped="grdExportType_Tapped">
            <TextBlock Text="Plain Text" FontSize="20"/>
        </Grid>
        <Grid x:Name="grdJson" Tapped="grdExportType_Tapped">
            <TextBlock Text="JSON" FontSize="20"/>
        </Grid>
        <Grid x:Name="grdMsPowerPoint" Tapped="grdExportType_Tapped">
            <TextBlock Text="Microsoft PowerPoint" FontSize="20"/>
        </Grid>
    </StackPanel>
</Border>

MainPage.xaml.cs 中的下载按钮点击事件

private void btnDownload_Click(object sender, RoutedEventArgs e)
{
    var ucExportTypes = new ExportTypes();
    var flyout = new Popup();
    var windowBounds = Window.Current.Bounds;
    var rootVisual = Window.Current.Content;

    var gt = btnDownload.TransformToVisual(rootVisual);
    var absolutePosition = gt.TransformPoint(new Point(0, 0));

    flyout.IsLightDismissEnabled = true;
    flyout.VerticalOffset = absolutePosition.Y - 150 - 10;
    flyout.HorizontalOffset = absolutePosition.X + 20;
    flyout.Child = ucExportTypes;
    flyout.IsOpen = true;
}

Answer 1

在 Windows 8 中使用 AppBar MenuFlyout。

http://msdn.microsoft.com/en-us/library/windows/apps/jj150602.aspx

http://channel9.msdn.com/Series/Windows-Store-apps-for-Absolute-Beginners-with-C-/Part-21-Implementing-an-AppBar-and-Flyout

Answer 2

如果你有一个容器，你的垂直偏移问题可以解决，并且你从底部向上生长它。整个用户控件的designHeight 必须是您拥有最大元素数（在您的情况下为 10）的那个。用户控件将VerticalAlignment 设置为Bottom ，因此任何添加的元素都将强制用户控件从底部向上增长，使用户控件的底部边框保持静止。你在ExportType.xaml 中使用的Stackpanel 可能会让你有些头疼......

Here 是一个链接，可以帮助您理解我的意思。这是关于从底部向上动画高度（您不需要动画，但主要是为了获得“从底部到向上”的想法）。仔细阅读该问题的公认答案，关于高度的要求。

Answer 3

只需将其更改为 Popup 中的 ItemsControl，它绑定到 View Model 中的 ObservableCollection。然后，当您更改可用的内容时（您似乎将其称为case），然后更新集合。 ItemsControl 将再次设置，您可以使用相同的逻辑重新显示 Flyout。

使用这个http://codepaste.net/erev2v

然后编写如下代码：

new FlyoutHelper().Show(YourFlyout, YourButton);

说实话，应该就这么简单。唯一的问题是只有在菜单可见时列表中的项目数量发生了变化。除此之外，我认为你已经准备好了。

祝你好运！