0

I need to navigate through Auto suggest box with keyboard up and down arrows I tried this way of using XYFocusKeyboardNavigation="Enabled" but when I navigate through the suggestions the suggestions are being selected , but I want them to get selected only when I press enter . enter image description here

so this is my UI and that is the auto suggest box my plan is to navigate through those suggestions using keyboard up and down arrow controls when ever i press enter that option should be selcted for example

enter image description here

I should get like that, for all the auto suggest box I have developed my code only remaining is that to navigate through the suggestions and select when ever enter is presssed.

<AutoSuggestBox Name="MyAutoSuggestBox"
                                                            PlaceholderText="Search"
                                                            TextChanged="MyAutoSuggestBox_TextChanged"
                                                            SuggestionChosen="MyAutoSuggestBox_SuggestionChosen"
                                                            Width="150"
                                                            ItemsSource="{x:Bind NotAddedPersons,Mode=OneWay}"
                                                            GotFocus="MyAutoSuggestBox_GotFocus"
                                                            XYFocusKeyboardNavigation="Enabled"
                                                            >
                                                <AutoSuggestBox.ItemTemplate >
                                                    <DataTemplate x:DataType="local:Person">
                                                        <TextBlock Text="{x:Bind Name, Mode=OneWay}"/>
                                                    </DataTemplate>
                                                </AutoSuggestBox.ItemTemplate>
                                            </AutoSuggestBox>

please clear this to me. Thanks in advance

Os Snehith Ab
  • 67
  • 1
  • 7
  • You can do it only with a custom autosuggestbox. You have to write the logic on your own to get that. – Ax1le Nov 16 '21 at 02:21
  • This behavior is the default behavior of the `AutoSuggestBox` when using keyboard navigation. If you are using a mouse, you will get the behavior you want. But using the keyboard is different from using a mouse, when you press the direction key of the keyboard, it means selected and it triggers the **SuggestionChosen event**. So the `AutoSuggestBox` will directly show the text. When using a mouse moves over the items, it's just pointer over and it won't trigger the **SuggestionChosen event** so the text remains the same. Would you mind telling me why do you want to change this behavior? – Roy Li - MSFT Nov 16 '21 at 03:16
  • @Anonymous how can i customize autosuggestbox – Os Snehith Ab Nov 16 '21 at 06:18
  • @RoyLi-MSFT Hai I don't want to make keyboard select on pressing down arrow II should navigate through the suggestions when ever i press enter i want to make the trigger suggestion chosen event. Actually I need to select people from the auto suggest box , If i want to choose a person from the middle of suggestions list through key board . I am not able to do it . – Os Snehith Ab Nov 16 '21 at 06:21
  • As I mentioned, when you are using a keyboard key to navigate, it's different from using a mouse. It will trigger the SuggestionChosen event and change the Text of the TextBox. But it does not trigger the query event which is triggered by the enter key. If you don't want to show text in the TextBox when you are using a keyboard key, then you should create a custom autosuggestbox like @Anonymous mentioned. – Roy Li - MSFT Nov 16 '21 at 07:04
  • @RoyLi-MSFT how to create custom auto suggestbox? – Os Snehith Ab Nov 16 '21 at 12:01
  • To custom your own autosuggestbox, you have to know how the autosuggestbox is built. You could check the [source code of autosuggestbox](https://github.com/microsoft/microsoft-ui-xaml/tree/main/dev/AutoSuggestBox) in WinUI library. The autosuggestbox is made up of a textbox and a popup that contains a listview. What you need to do is to use the same way to create an autosuggestbox and change the inner logic of it. – Roy Li - MSFT Nov 17 '21 at 05:57

0 Answers0