Quantcast
Channel: Code Scratcher » DispatcherTimer
Viewing all articles
Browse latest Browse all 4

Improve ComboBox Performance Using VirtualizingStackPanel in WPF

0
0

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

Improve ComboBox Performance Using VirtualizingStackPanel in WPF - Output

Improve ComboBox Performance Using VirtualizingStackPanel in WPF – Output

Source Code

Download project

What do you think of this article? Improve ComboBox Performance Using VirtualizingStackPanel in WPF
If you have ideas about this article, or an opinion on how we can make it better, then let us know by emailing…
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.


Viewing all articles
Browse latest Browse all 4

Latest Images

Trending Articles





Latest Images