How to make dropdown button's flyout auto close after selected an item?

Viewed 225

How do I have the dropdown button flyout auto close after user selected an item?

Here is the XAML:

<DropDownButton Content="{x:Bind CurrentMode, Mode=OneWay}" >
    <DropDownButton.Flyout>
        <Flyout>
            <ListView x:Name="testListView" ItemsSource="{x:Bind mDropdownItems, Mode=OneWay}" 
                      SelectionMode="Single" SelectedItem="{x:Bind CurrentMode, Mode=TwoWay}"
                      SelectionChanged="OnSelectionChanged" >
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="x:String">
                        <TextBlock Text="{x:Bind}"></TextBlock>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Flyout>
    </DropDownButton.Flyout>
</DropDownButton>

Code Behind:

private void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var listView = sender as ListView;

    // if I add this, the flyout will not show correctly probably due to hiding during initialization.
    //testListView.Hide();

    NotifyPropertyChanged("CurrentMode");
}
1 Answers

In your OnSelectionChanged event just add this line of code:

DropDownButton.Flyout.Hide();
Related