Virtual scrolling option for combobox

Question

I need to display the visible items into view instead of displays all the rows in combo box control. While scrolling that, we need to load next visible items.

How can I do that? Also, how can I ensure whether it is loaded in virtually?

Sample example:

public List<string> items = new List<string>();
public MainWindow()
{
  InitializeComponent();
  DataContext = this;
  for (int i = 0; i < 100000; i++)
  {
    items.Add("item"+ i.ToString());
  }
  combo.ItemsSource = items;
}

Front end:

<Grid>
   <StackPanel>
      <ComboBox x:Name="combo" Width="150" HorizontalAlignment="Left" Margin="10,10,0,10" VirtualizingPanel.IsVirtualizing="True" />
    </StackPanel>
 </Grid>

After refer link:

   <ComboBox x:Name="combo" Height="100" Width="150" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
               ScrollViewer.CanContentScroll="True" HorizontalAlignment="Left" Margin="10,10,0,10" 
               VirtualizingStackPanel.IsVirtualizing="True" VirtualizingStackPanel.VirtualizationMode ="Recycling" >
         <ComboBox.ItemsPanel>
              <ItemsPanelTemplate>
                   <VirtualizingStackPanel IsVirtualizing="True"
                                      VirtualizationMode="Recycling" />
              </ItemsPanelTemplate>
         </ComboBox.ItemsPanel>
    </ComboBox>

Yes i am also try with Then How can i ensure whether it is loading as virtual? — Pandi, Mar 09 '18 at 10:27
https://dzone.com/articles/virtualization-wpf check this site. Also to ensure, try to get any ye to load container using ItemsContainerGenerator. some thing like .. _comboBox.ItemsContainerGenerator.ContainerFromItem({_unloadedmodelitem}) — WPFUser, Mar 09 '18 at 10:34
That link is not helpful for me.Can you please explain your point? — Pandi, Mar 09 '18 at 11:25
in that link they are using VirtualizingStackPanel to ItemsPanel, which can be set for ComboBox as well. — WPFUser, Mar 09 '18 at 11:55
Yes i had tried but i have seen no improvement. code has been attached above. — Pandi, Mar 09 '18 at 12:08
I think there may be some confusion on what you are trying to achieve. Are you trying to just show like 3 items in the with a smaller drop down instead of the default amount of "x" items WPF shows? The virtualization part should be working. — Tronald, Mar 09 '18 at 20:32
I am trying to show some items(Ex:3 items) in combo box, while i am scrolling that scroll bar need to show the next visible items(Next 3 items). — Pandi, Mar 12 '18 at 03:52

score 0 · Answer 1 · answered Mar 12 '18 at 14:54

There are a couple thing you will need to do. First thing, lets clean up your ComboBox and Subscribe to the ScrollViewer.ScrollChanged event. Many of your ComboBox properties are already set by default so we can remove them. We can also set the MaxDropDownHeight to specify how many items to show at once. Here's how it should look.

 <ComboBox x:Name="combo" ScrollViewer.ScrollChanged="combo_ScrollChanged" MaxDropDownHeight="70" Height="100" Width="150" HorizontalAlignment="Left" Margin="10,10,0,10">
     <ComboBox.ItemsPanel>
           <ItemsPanelTemplate>
                <VirtualizingStackPanel/>
           </ItemsPanelTemplate>
      </ComboBox.ItemsPanel>
 </ComboBox>

Next, we need to handle the scroll event in order to skip items by 3 while also preventing recursion when we force the scrollviewer to change.

    bool scrolling = false;//Used to prevent recursion
    private void combo_ScrollChanged(object sender, ScrollChangedEventArgs e)
    {         
        ComboBox cb = (ComboBox)sender; //Get the sending ComboBox
        ScrollViewer sv = cb.Template.FindName("DropDownScrollViewer", cb) as ScrollViewer; //Find the Comboxes ScrollViewr

        //If scrolling down
        if (e.VerticalChange < 0 && !scrolling)
        {
            scrolling = true; //Set to true to prevent recursion
            sv.ScrollToVerticalOffset(e.VerticalOffset - 2);//Scroll an extra 2 spaces up
            return; //Exit 

        }
        //If scrolling up
        if (e.VerticalChange > 0 && !scrolling)
        {
            scrolling = true; //Set to true to prevent recursion              
            sv.ScrollToVerticalOffset(e.VerticalOffset + 2);//Scroll an extra 2 spaces down
            return; //Exit
        }
        if (scrolling) { scrolling = false; } //Set to false to allow offsets
    }

Hi @Tronald I have understand your code.Here you visible the next items while scrolling scroll bar. But what my need is, i have 1 million records and show that data via combo box control. Here i have applied control template and data template for that combo box.So it will take long time and UI will be crashed. — Pandi, Mar 13 '18 at 04:04
So need to apply that data template for visible items only, remaining items are loaded while scroll bar changed.How to achieve this? — Pandi, Mar 13 '18 at 04:07

Virtual scrolling option for combobox

1 Answers1