UWP：在AppBarButton-flyout中未选择ListBox项

Question

I have come across a strange issue: When I have a ListBox included in a AppBarButton-Flyout:

 <Page.TopAppBar>
            <CommandBar>
                <AppBarButton Icon="Add">
                <AppBarButton.Flyout>
<Flyout x:Name="TestFlyout">
                        <ListBox>
                            <ListBoxItem Content="A" />
                            <ListBoxItem Content="C" />
                            <ListBoxItem Content="D" />
                            <ListBoxItem Content="e" />
                            <ListBoxItem Content="F" />
                            <ListBoxItem Content="A" />

                        </ListBox>
                    </Flyout>
                </AppBarButton.Flyout>
            </AppBarButton>
            </CommandBar>
        </Page.TopAppBar>

The items get not selected (they should be highlighted in blue). The same Listbox in a Button Flyout is working:

  <Button Content="Click me" IsEnabled="True">
            <Button.Flyout>
                <Flyout>
                    <ListBox>
                        <ListBoxItem Content="A" />
                        <ListBoxItem Content="C" />
                        <ListBoxItem Content="D" />
                        <ListBoxItem Content="e" />
                        <ListBoxItem Content="F" />
                        <ListBoxItem Content="A" />

                    </ListBox>
                </Flyout>
            </Button.Flyout>
        </Button>

At first I thought maybe it's a graphical issue, but I've tried to bind the SelectedItem property to a settter. But the setter is never called. I just can't find my mistake here.

Edit:

Seems to be an issue with my machine. On other Windows-10 it's working like a charm.

Answer 1

Set AllowFocusOnInteraction property to true on the AppBarButton .

Solution in XAML (for Windows 10, version 1607)

<AppBarButton x:Name="myAppBarButton"
              AllowFocusOnInteraction="True">
...
</AppBarButton>

or if you are targeting Windows 10 Anniversary update (1607) build 14393 or higher, but the app's minimum Windows 10 version is lower , you should check if the AllowFocusOnInteraction property is available on the platform.

So you can't set the AllowFocusOnInteraction property in XAML. Instead, do it in code-behind:

Solution in C# code-behind

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 all Windows 10 versions.

More info

You're running into 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.