Improve comboBox performance using VirtualizingStackPanel in WPF : Resolve the comboBox performance problems by binding a large collections using VirtualizingStackPanel in WPF. We will use VirtualizingStackPanel to improve comboBox performance.
In previous articles we explained WPF Multithreading Backgroundworker, Encryption and Decryption of XML, Web Browser Control, Check Internet Connection Available or Not, Import Excel File to DataGrid, Touch Screen Keyboard, Image Slideshow, Display Password in PasswordBox, Create Timer and Now we will move on improve comboBox performance Using virtualizingStackPanel in WPF.
What is VirtualizingStackPanel?
A VirtualizingStackPanel can offer performance benefits when working with very large collections. It does so by only rendering and processing a subset of the data which is visible to the user vs. processing the entire list of data. By creating only UI elements for the visible items, this can greatly reduce the amount of work it has to do.
Following are the steps to improve comboBox performance Using virtualizingStackPanel in WPF.
The quick fix for this issue is to insert a VirtualizingStackPanel into the template for the ComboBox. This panel has the ability to assess how many items can be displayed, based on the measurements of the ComboBox, and automatically creates the visuals for that limited number of items only.
An easy way to implement this is to create an ItemsPanelTemplate as a Resource and reference it in the ComboBox markup.
ADD RESOURCE CODE
<Window.Resources> <ItemsPanelTemplate x:Key="VSP"> <VirtualizingStackPanel/> </ItemsPanelTemplate> </Window.Resources>
ADD COMBOBOX CODE
<ComboBox Height="23" Margin="27,10,10,0" Name="ComboBox1" VerticalAlignment="Top" ItemsSource="{Binding}" ItemsPanel="{StaticResource VSP}"> </ComboBox>
Specifically, the ItemsPanel property of the ComboBox is set to that ItemsPanelTemplate Resource.
If you prefer, you can include the VirtualizingStackPanel right in the ComboBox creation markup:
<ComboBox Height="23" Margin="27,10,10,0" Name="ComboBox1" VerticalAlignment="Top" ItemsSource="{Binding}"> <ComboBox.ItemsPanel> <ItemsPanelTemplate> <VirtualizingStackPanel /> </ItemsPanelTemplate> </ComboBox.ItemsPanel> </ComboBox>
In this article we take two different combobox controls. First combobox is normal combobox and Second combobox with VirtualizingStackPanel. We will bind same data in two different combobox and let’s see what happen.
ADD XAML CODE
<Window x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <ItemsPanelTemplate x:Key="VSP"> <VirtualizingStackPanel/> </ItemsPanelTemplate> </Window.Resources> <Grid> <Label Content="Hello Code Scratcher!" FontWeight="Bold" FontSize="20" Margin="0,10,0,0" HorizontalAlignment="Center" Name="lblTitle" VerticalAlignment="Top"/> <Separator Margin="20,60,20,0" VerticalAlignment="Top"/> <Label Content="ComboBox without VirtualizingStackPanel" FontSize="20" Margin="0,87,0,0" HorizontalAlignment="Center" Name="lblWithoutVirtualizingStackPanel" VerticalAlignment="Top"/> <Label Content="ComboBox with VirtualizingStackPanel" FontSize="20" HorizontalAlignment="Center" Margin="0,202,0,0" Name="lblWithVirtualizingStackPanel" VerticalAlignment="Top" /> <ComboBox FontSize="20" MaxDropDownHeight="160" HorizontalAlignment="Center" Margin="0,130,0,0" Name="cbWithoutVirtualizingStackPanel" DisplayMemberPath="Value" SelectedValuePath="Key" VerticalAlignment="Top" Width="300" /> <ComboBox FontSize="20" MaxDropDownHeight="160" HorizontalAlignment="Center" Margin="0,245,0,0" Name="cbWithVirtualizingStackPanel" DisplayMemberPath="Value" SelectedValuePath="Key" VerticalAlignment="Top" Width="300" ItemsPanel="{StaticResource VSP}" /> </Grid> </Window>
ADD CODE-BEHIND SOURCE
Class MainWindow Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded Try Dim listToFillCombo As New List(Of KeyValuePair(Of Integer, String)) listToFillCombo.Add(New KeyValuePair(Of Integer, String)(0, "Select all")) For i As Integer = 1 To 5000 listToFillCombo.Add(New KeyValuePair(Of Integer, String)(i, "Item " & i)) Next cbWithoutVirtualizingStackPanel.ItemsSource = listToFillCombo cbWithoutVirtualizingStackPanel.SelectedIndex = 0 cbWithVirtualizingStackPanel.ItemsSource = listToFillCombo cbWithVirtualizingStackPanel.SelectedIndex = 0 Catch ex As Exception End Try End Sub End Class
RUN PROJECT AND CHECK FINAL OUTPUT
Source Code
help@codescratcher.com
Incoming search terms
Improving the performance of the ComboBox, Optimize WPF ComboBox search with thousands items, Bind Combobox with huge data in WPF, WPF ComboBox performance problems by binding a large collections, WPF: Using a VirtualizingStackPanel to Improve ComboBox Performance, Simple Search in ComboBox Filled With Very Large items, WPF Databound ComboBox Performance, WPF ComboBox performance problems by binding a large collections, Optimizing Performance: Controls, Combobox Performance with many Elements.
The post Improve ComboBox Performance Using VirtualizingStackPanel in WPF appeared first on Code Scratcher.