locked
How to set vertical offset for popup having variable height? RRS feed

  • Question

  • I am developing Windows 8 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 : I don't want to use Callisto for a single requirement.

    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>

    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;
    }

    Friday, November 29, 2013 12:57 PM

All replies

  • Hi,

    Flyout is a new feature in windows 8.1. You can use flyout instead of Popup in your project.  Use Flyout can implement your UI experience easily. Change your code like below:

    <Button Content="Button" Margin="495,350,0,380" Click="Button_Click" Name="btnDownload">
                <Button.Flyout>
                    <Flyout>
                        
                            <StackPanel VerticalAlignment="Bottom">
                                <Grid x:Name="grdPdf" >
                                    <TextBlock Text="PDF" FontSize="20" />
                                </Grid>
                                <Grid x:Name="grdOpenSpreadsheet" >
                                    <TextBlock Text="Open Office Spreadsheet" FontSize="20"/>
                                </Grid>
                                <Grid x:Name="grdMsExcel" >
                                    <TextBlock Text="Microsoft Excel" FontSize="20"/>
                                </Grid>
                                <Grid x:Name="grdMsWord" >
                                    <TextBlock Text="Microsoft Word" FontSize="20"/>
                                </Grid>
                                <Grid x:Name="grdOpenDoc" >
                                    <TextBlock Text="Open Office Document" FontSize="20"/>
                                </Grid>
                                <Grid x:Name="grdHtml" >
                                    <TextBlock Text="HTML" FontSize="20"/>
                                </Grid>
                                <Grid x:Name="grdRtf" >
                                    <TextBlock Text="RTF" FontSize="20"/>
                                </Grid>
                                <Grid x:Name="grdPlainText" >
                                    <TextBlock Text="Plain Text" FontSize="20"/>
                                </Grid>
                                <Grid x:Name="grdJson" >
                                    <TextBlock Text="JSON" FontSize="20"/>
                                </Grid>
                                <Grid x:Name="grdMsPowerPoint" >
                                    <TextBlock Text="Microsoft PowerPoint" FontSize="20"/>
                                </Grid>
                            </StackPanel>
                       
                    </Flyout>
                </Button.Flyout>
            </Button>

    And you can refer to the link to get more information about how to add a Flyout:

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

    Best Wishes!


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey. Thanks<br/> MSDN Community Support<br/> <br/> Please remember to &quot;Mark as Answer&quot; the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, December 2, 2013 3:57 AM
  • I already told in question, I am creating app for Windows 8. All people haven't upgraded to Windows 8.1 still. I want solution which can work in Windows 8.
    Monday, December 2, 2013 5:38 AM