Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Virtualization in WPF with VirtualizingStackPanel

DZone's Guide to

Virtualization in WPF with VirtualizingStackPanel

· Integration Zone ·
Free Resource

SnapLogic is the leading self-service enterprise-grade integration platform. Download the 2018 GartnerMagic Quadrant for Enterprise iPaaS or play around on the platform, risk free, for 30 days.

First blogged about this on my previous blog site here:

http://consultingblogs.emc.com/merrickchaffer/archive/2011/02/14/virtualization-in-wpf-with-virtualizingstackpanel.aspx

However, having come across this again today on a project, I thought it was important enough to re-blog! Finally managed to figure out how to get virtualization to actually behave itself in a listbox wpf control. Turns out that in order for Virtualization to work, you need three things satisfied. 

  1. Use a control that supports virtualization (e.g. list box or list view). (see Controls That Implement Performance Features section at bottom of this page for more info http://msdn.microsoft.com/en-us/library/cc716879.aspx#Controls )
  2. Ensure that the ScrollViewer.CanContentScroll attached property is set to True on the containing list box / list view control.
  3. Ensure that either the list box has a height set, or that it is contained within a parent Grid row, where that row definition has a height set (Height="*" will do if you want it to occupy the Client window height). Note: Do not use height=”Auto” as this will not work, as this instructs WPF to simply size the row to the height needed to fit all the items of the list box in, hence you do not get the vertical scroll bar appearing.
  4. Ensure that there is no wrapping ScrollViewer control around the list box, as this will prevent virtualization from occuring.
  5. Ensure that you use a VirtualizingStackPanel in the ItemsPanelTemplate for the ListBox.ItemsPanel
Example
<Grid Name="listBoxesGrid"
      Grid.Row="2">
  <Grid.ColumnDefinitions>
    <ColumnDefinition/>
    <ColumnDefinition/>
    <ColumnDefinition/>
  </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

  <!-- Target Organizations listbox -->
  <ListBox Name="targetOrganizationsListBox"
           Grid.Column="0"
           HorizontalContentAlignment="Stretch"
           BorderThickness="0"
           Margin="5,10,15,2"
           ScrollViewer.HorizontalScrollBarVisibility="Disabled"
           ScrollViewer.CanContentScroll="True"
           VirtualizingStackPanel.IsVirtualizing="True"
           VirtualizingStackPanel.VirtualizationMode="Recycling"
           SelectionMode="Multiple"
           Width="Auto"
           Background="Transparent"
           ItemTemplate="{DynamicResource TargetOrgContactCard}"
           Height="Auto"
           Expander.MouseDoubleClick="targetOrganizationExpander_MouseDoubleClick"
                      Executed="OnAddToCallList" />
      <CommandBinding Command="local:SearchCoverageCommands.OpenCallDashboard"
                      Executed="OnOpenCallDashboard" />
      <CommandBinding Command="local:SearchCoverageCommands.AddComment"
                      Executed="OnAddComment" />
      <CommandBinding Command="local:SearchCoverageCommands.TargetCompanyChecked"
                      Executed="OnTargetCompanyChecked" />

    </ListBox.CommandBindings>
    <ListBox.ItemsPanel>
      <ItemsPanelTemplate>
          <VirtualizingStackPanel IsVirtualizing="True"
                                  VirtualizationMode="Recycling" />
      </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
  </ListBox>

</Grid>

With SnapLogic’s integration platform you can save millions of dollars, increase integrator productivity by 5X, and reduce integration time to value by 90%. Sign up for our risk-free 30-day trial!

Topics:
dotnet ,tools ,net ,virtualizing ,stackpanel

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}