none
[UWP]Show Flyout (not Menuflyout!) above UI element at a specific position

    Question

  • I have gridView, and it's items are quite simple, I have button on each gridViewItem. On this button click I want to show a flyout with the same content as the gridViewItem but also to show some more data. It is all easy to make flyout but I want to position the flyout above the gridViewItem to have it's shown items exactly same position as the gridViewItem items. To be more specific, I want to place flyout at a given point of the screen, not relevant to any element

    This technique is used in Store app for Windows 10. When seen comments from users for apps. clicking more shows that popup.

    Here clicking on "More" displays flyout above this review but it shows full comment and some more data, the position of the title, part of desctiption and review exactly match to the title, description and review of the flyout. So it is easy to get focused. How to achieve this? Flyout can be shown only left,right,top,bottom... positions.... MenuFlyout has method to show it at a specific point. What is my options to show flyout at a given point of the screen?


    giga


    Saturday, March 18, 2017 7:34 PM

All replies

  • Hi Mister_Giga,

    Welcome to the Developing Universal Windows apps forum! Please utilize tagging when posting to this forum, thanks!

    In the store, it seems that when an item is clicked, a Flyout shows at the same position. Do you try to use the Flyout.showAt method to show the Flyout at the position you want? The method shows the Flyout at specified coordinates or at the location of the mouse event object.

    Best regards,

    Breeze Liu


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Monday, March 20, 2017 8:16 AM
    Moderator
  • It does not work, because FlyOut does not have overloaded method ShowAt that takes coordinate (Point) it only takes framework element which it is shown relative to. MenuFlyout has that method but Flyout do not :(

    giga

    Monday, March 20, 2017 2:49 PM
  • Hello Mister_Giga,

    Probably, the control being used in the Store app is not Flyout but Popup. Try embedding Popup control in DataTemplate.

    e.g.

        <GridView>
            <GridView.Items>
                <x:String>Item 1</x:String>
                <x:String>Item 2</x:String>
                <x:String>Item 3</x:String>
                <x:String>Item 4</x:String>
            </GridView.Items>
            <GridView.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="Title" Style="{ThemeResource TitleTextBlockStyle}" Margin="8,0"/>
                        <StackPanel>
    
                            <Popup IsLightDismissEnabled="True">
                                <Border BorderThickness="{ThemeResource FlyoutBorderThemeThickness}" 
                                        BorderBrush="{ThemeResource ContentDialogBorderThemeBrush}" 
                                        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
                                    <StackPanel MinWidth="160">
                                        <TextBlock Text="{Binding}" Margin="8"/>
                                        <TextBlock Text="Hello World!" Margin="8"/>
                                    </StackPanel>
                                </Border>
                            </Popup>
    
                            <StackPanel Margin="{ThemeResource FlyoutBorderThemeThickness}" MinWidth="160">
                                <TextBlock Text="{Binding}" Margin="8"/>
                            </StackPanel>
    
                            <Button Content="More" Click="Button_Click" Style="{ThemeResource TextBlockButtonStyle}" 
                                    Padding="0,4" Margin="8,0"/>
                                    
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
    

    And

    private void Button_Click(object sender, RoutedEventArgs e)
    {
            (((sender as Button).Parent as StackPanel).Children[0] as Popup).IsOpen = true;
    }
    Tuesday, March 21, 2017 2:28 AM