Can't enter enter text in TextBox control inside Flyout

Question

I want to use the CommandBar and a Flyout to build something like this.

Answer 1

Set AllowFocusOnInteraction property to true on the AppBarButton.

Solution in XAML (if app min. target version is 10.0.14393 or higher)

If the app's minimum version is lower than Anniversary update 1607 (build 10.0.14393) (even if your target version is 1607 or higher), you can't set the AllowFocusOnInteraction property directly in XAML. Instead, you should do it in code-behind.

Solution in C# code-behind

// check if the AllowFocusOnInteraction property is available on the platform 
if (Windows.Foundation.Metadata.ApiInformation.IsPropertyPresent("Windows.UI.Xaml.FrameworkElement", "AllowFocusOnInteraction"))
     myAppBarButton.AllowFocusOnInteraction = true;

You can also wrap it into an attached property that can be used in XAML even on old Windows 10 versions.

More info

This is a new feature on Windows 10 Anniversary update (1607), build 14393.

That's an improvement for most app bar uses but interferes with yours, so you'll need to override the default value when you change your build to rather 14393 instead of 10586.

Here's a blog post ComboBox on a Flyout attached to an AppBarButton loses mouse input on 1607. It also contains the attached property implementation.