How to implement text boxes with multiple options like people app at runtime in uwp app?

Question

I am developing a UWP app and I have to make a control like in the People app for Windows 10.

I am currently trying this

 <StackPanel x:Name="stp">
            <Button Content="Button 1" x:Name="btnAction1">
                <Button.Flyout>
                    <MenuFlyout>
                        <MenuFlyoutItem Text="Action 1" Click="MenuFlyoutItem_Click">
                        </MenuFlyoutItem>

                    </MenuFlyout>
                </Button.Flyout>
            </Button>
        </StackPanel>

and in c#

 private void MenuFlyoutItem_Click(object sender, RoutedEventArgs e)
    {
        btnAction1.Margin = new Thickness(0, 10, 0, 0);
        stp.Children.Add(new TextBox() { Name = "newTxtBox", Text="Tushar"});
    }

But this will end up handling UI too much with no animation at all. I want to give an option to the user to remove this dynamically created control.

After that I would want something like this:Dynamically adding textboxes with animation and option to close

Can anybody please help? Thanks in advance.

Answer 1

Check the documentation of Flyout and use the LightDismissOverlayMode property to suit your scenario. If any particular UI specific implementation required, post a screenshot.