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

问题描述:

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

I am developing Windows 8 (I know Windows 8.1 has Flyout control) app using C#/XAML. I want to show a flyout menu like given below. Now originally it has total 10 options but based on context I am showing certain amount of options, so the usercontrols doesn't have fixed height, it's Auto.

我关注了

I followed this article to correctly appear flyout on appbar button click. But it's not useful for me because it's using usercontrol's height and for my case it's NaN.

因此,任何人都有更好的解决方案来显示高度可变的弹出效果.

So any one has any better solution to show flyout with variable height.

PS:我不想将Callisto用于单个需求.

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

Flyout usercontrol. (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中的下载按钮单击事件

Download button click event in 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;
}

只需将其更改为绑定到视图模型中的ObservableCollection的Popup中的ItemsControl.然后,当您更改可用的内容时(您似乎将其称为case),然后更新集合. ItemsControl将再次设置,您可以使用相同的逻辑重新显示弹出窗口.

Just change it to be an ItemsControl in the Popup that is bound to an ObservableCollection in your View Model. Then when you change what is available (you seem to call it case) then update the collection. The ItemsControl will setup again, and you can re-show the Flyout using the same logic.

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

并编写如下代码:

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

说实话,这应该很容易.唯一的难题只有当菜单可见时列表中的项目数发生了变化.除此之外,我认为您已定案.

It should be that easy, to be honest. The only gotcha would only be if the number of items in the list changed while the menu is visible. Other than that, I think you are set.

祝你好运!