WPF searchable combobox

Question

I've got a ComboBox as follows:

<ComboBox IsEditable="True" 
          Width="200" 
          Height="25" 
          IsTextSearchEnabled="False" 
          x:Name="cb" 
          PreviewTextInput="Cb_OnPreviewTextInput" 
          ItemsSource="{Binding ItemList}" 
          Text="{Binding SearchTextText}">
    <ComboBox.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel />
        </ItemsPanelTemplate>
    </ComboBox.ItemsPanel>
</ComboBox>

When Cb_OnPreviewTextInput is called I set IsDropdownOpen = true. In the first attempt (after typing the first letter) the first item on the list is selected and I can go up and down using relevant arrows, the caret is still in the TextBox.

When I keep on typing at that point, I'm not able to navigate up and down (1 item at time) anymore; at this point the whole ScrollViewer gets focus and I can only go to the bottom or to the top, but not 1 by 1. I have to close the popup e.g. by pressing Escape and then reopen by typing 1 character to be able to go up/down again.

I also noticed that after pressing PageUp the first item gets selected as well, so I tried to mimic that in code, but no luck.

Does anyone know what to do here to be able to navigate up/down and type without problems?

Please, fix your code (close all tags) and spelling inside description. Also, please paste in Cb_OnPreviewTextInput body. Is ItemList collection of strings, I am assuming? — Zozo, Jun 27 '17 at 13:29

score 6 · Answer 1 · answered Jun 27 '17 at 13:46

When I have tried to reproduce your issue in isolated environment, everything seams to be fine...

Which .NET version are you using?

I have used code like this:

<Window x:Class="InterviewApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="350"
        Width="525"
        DataContext="{Binding RelativeSource={RelativeSource Self}}">
    <WrapPanel Orientation="Horizontal">
        <ComboBox IsEditable="True"
                  Width="200"
                  Height="25"
                  IsTextSearchEnabled="False"
                  x:Name="cb"
                  PreviewTextInput="Cb_OnPreviewTextInput"
                  ItemsSource="{Binding ItemList}"
                  Text="{Binding SearchTextText}">
            <ComboBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel />
                </ItemsPanelTemplate>
            </ComboBox.ItemsPanel>
        </ComboBox>
    </WrapPanel>
</Window>

and code behind looks like this

namespace Application
{
    public partial class MainWindow : INotifyPropertyChanged
    {
        public MainWindow()
        {
            ItemList = new ObservableCollection<string>();
            for (var i = 0; i < 1000; i++)
            {
                ItemList.Add($"Item {i}");
            }

            InitializeComponent();
        }

        private void Cb_OnPreviewTextInput(object sender, TextCompositionEventArgs e)
        {
            cb.IsDropDownOpen = true;
        }

        public ObservableCollection<string> ItemList { get; set; }

        public string SearchTextText
        {
            get => _searchTextText;
            set
            {
                if (_searchTextText == value) return;
                _searchTextText = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(SearchTextText)));
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

It doesn't do what I described – LoPeZ Jun 27 '17 at 15:00 — LoPeZ, Jun 27 '17 at 15:00

score 0 · Answer 2 · answered May 13 '21 at 13:38

Jordi has the best answer for creating a filtered ComboBox here: Dynamic filter of WPF combobox based on text input If you go this way, you can implement as such in xaml:

<local:FilterableComboBox Width="250" Height="25" ItemsSource="{Binding ItemList}" SelectedItem="{Binding SelectedItem}" OnlyValuesInList="True"/>

WPF searchable combobox

2 Answers2