How to get the comboBox to display a portion of the bound data

Question

I currently have a comboBox which is bound to DataSet from a database. The problem with it is that when i want to display the dataSet using a comboBox, it takes about 8 seconds for it to load the full dataSet into the comboBox. Would like to ask if there is any way to display only the first few data from the dataSet in the comboBox such that it is much faster?

I am currently using another thread to load the data into the comboBox and using DisplayMemberPath to display the contents of the dataSet into the comboBox.

Any suggestions would be welcomed! :)

suppose you have 20 records and it takes 10 sec to display it on combo box then you want to show only first 5 in your combo box instead of 20 for speed issue. — Rahul, May 20 '13 at 07:19
hi Rahul, that is what i have in mind, but as i am relatively new to wpf, i do not know how to implement it, are there any references you could point me to? — Sheep, May 20 '13 at 07:25
but if u r only showing 5 out of 20 rows in combo box then how user get selected the combo box data which is not showing..just think.suppose he want to select `India` as a country but `india` comes at number 7 out of 20 countries then how one can select `india` as a country because you are showing only 5.it's a example — Rahul, May 20 '13 at 07:27
what i want to achieve is actually to display the first 20 out of say a 1000 data items first, and have a backgroundworker thread to load the rest of it after the combBox displays the 20. Is there any way to do this? — Sheep, May 20 '13 at 07:32

Sheep · Accepted Answer · 2013-05-20T09:02:06.297

Hi the solution for this question is actually quite simple. All you have to do is add the following style to your xaml code:

<Style TargetType="ComboBox">
    <Setter Property="ItemsPanel">
      <Setter.Value>
        <ItemsPanelTemplate>
          <VirtualizingStackPanel/>
        </ItemsPanelTemplate>
      </Setter.Value>
    </Setter>
  </Style>

this code here will use the VirtualizingStackPanel, which calculates the number of visible items and creates the visual for the visible items only! Therefore, when user wants to display the comboBox, the dropdown will promptly appear when the user opens it.

If you face the problem of the dropdown changing its width due to the width of the item displayed, you might want to use the following style to bind to the width of the comboBox:

            </Style>
            <Style TargetType="{x:Type Popup}">
                <Setter Property="Width" Value="{Binding ElementName=comboBoxName, Path=ActualWidth}"/>
            </Style>

Edit:

thx to morimer, i was pointed to the following blog where i learnt more of how virtualization works. Excellent reference!

score 0 · Answer 2 · edited May 23 '17 at 11:49

Directly answering your question - you need to implement either Data or UI virtualization (like Sheep proposed in his answer). Take a look at this answer for further details and explanations: https://stackoverflow.com/a/1453818/786055

But generally speaking, using ComboBox for displaying large sets of data IMHO is not a best decision from the usability point of view. Consider using autocomplete textbox instead or something similar (like described here or something similar - there are a plenty of options)

How to get the comboBox to display a portion of the bound data

2 Answers2