Place a popup under a button (UWP, XAML, C#)

Question

I have created a Button . When the button is pressed a Popup appears. The Problem is, the popup is on the top left side while the button is on the Right side.

What do I have to do in XAML to make the popup appear under the button?

I even tried to place the popup in the top rightcorner via HorizontalAllignment . The Problem then is that the popup is outside my program (Right next to it. Literally).

Answer 1

just use the new DropDownButton in the new winUi library, it has a build in popup which comes under the button and the button even has an arrow on right side, it is perfect for your scenario. just use the nuget package, docs are here : https://docs.microsoft.com/en-us/uwp/toolkits/winui/

Answer 2

You can use the Flyout which is attached to specific controls including Button , then You can use the Placement property to specify where a flyout appears: Top, Left, Bottom, Right, or Full. So you can use the Placement property to specify the flyout to appear under the button as the following code.

<Button Content="Click me">
    <Button.Flyout>
        <Flyout Placement="Bottom">
            <TextBlock Text="This is a flyout!"/>
        </Flyout>
    </Button.Flyout>
</Button>

By the way, as we suggestion in the Remark part ,

Do not use a Popup if a Flyout , MenuFlyout , ToolTip or ContentDialog ( MessageDialog for a Windows 8 app) is more appropriate.