Question

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

我跟着this article在appbar按钮点击时正确显示弹出窗口。但它对我没有用，因为它使用的是usercontrol的高度，对于我的情况，它是NaN。

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

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

enter image description here

弹出用户控制。（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 ，因此任何添加的元素都会强制用户控件从底部向上增长，使用户控件的底部边框保持静止。您在Stackpanel中使用的ExportType.xaml可能会让您感到头痛......

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

Answer 3

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

使用此http://codepaste.net/erev2v

并编写类似这样的代码：

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

说实话，这应该很容易。唯一的问题只有在菜单可见时列表中的项目数量发生了变化。除此之外，我认为你已经定下来了。

祝你好运！

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

3 个答案: