WPF: can't set ItemsPresenter to use a VirtualizingStackPanel - wpf

Question

I've seen a few posts about this, including on StackOverflow - but I can't find an answer.
In WPF, I created a ControlTemplate for a ComboBox, simply by clicking "Edit Template -> Copy" in visual studio.
Now my problem is that the items in the dropdown are presented in an ItemsPresenter, and I simply can't figure out how to use a VirtualizingStackPanel inside that ItemsPresenter. I tried settings the ItemsPanel of the control in the control's style, but that doesn't help.
Here is the XAML of the ControlTemplate. It is pretty standard. The ItemsPresenter is called PART_ItemsPresenter.
<ControlTemplate x:Key="ComboBoxControlTemplate" TargetType="{x:Type ComboBox}">
<Grid x:Name="templateRoot" SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"
Width="0" />
</Grid.ColumnDefinitions>
<Popup
x:Name="PART_Popup"
AllowsTransparency="True"
Grid.ColumnSpan="2"
IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}"
PopupAnimation="Fade"
Placement="Bottom">
<!--<themes:SystemDropShadowChrome x:Name="shadow" Color="Transparent" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=templateRoot}">-->
<Border
x:Name="DropDownBorder"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"
MinWidth="{Binding ActualWidth, ElementName=templateRoot}">
<ScrollViewer
x:Name="DropDownScrollViewer">
<Grid x:Name="grid" RenderOptions.ClearTypeHint="Enabled">
<Canvas x:Name="canvas" HorizontalAlignment="Left" Height="0" VerticalAlignment="Top"
Width="0">
<Rectangle x:Name="OpaqueRect" Fill="{Binding Background, ElementName=DropDownBorder}"
Height="{Binding ActualHeight, ElementName=DropDownBorder}"
Width="{Binding ActualWidth, ElementName=DropDownBorder}" />
</Canvas>
<ItemsPresenter
x:Name="PART_ItemsPresenter"
KeyboardNavigation.DirectionalNavigation="Contained"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
</ItemsPresenter>
</Grid>
</ScrollViewer>
</Border>
<!--</themes:SystemDropShadowChrome>-->
</Popup>
<ToggleButton
x:Name="toggleButton"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Grid.ColumnSpan="2"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Focusable" Value="False" />
<Setter Property="ClickMode" Value="Press" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border x:Name="templateRoot" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{StaticResource ControlBackgroundBrush}"
SnapsToDevicePixels="True">
<Border x:Name="splitBorder" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="1" HorizontalAlignment="Right" Margin="0,-1,-1,-1"
Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
<Path
x:Name="Arrow"
Data="M0,0C0,0 3.5,4 3.5,4 3.5,4 7,0 7,0 7,0 0,0 0,0z"
Fill="{TemplateBinding BorderBrush}"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="templateRoot"
Value="{StaticResource ControlBackgroundMouseOverBrush}" />
<Setter Property="BorderBrush" TargetName="templateRoot"
Value="{StaticResource ControlBorderMouseOverBrush}" />
<Setter Property="BorderBrush" TargetName="splitBorder"
Value="{StaticResource ControlBorderMouseOverBrush}" />
<Setter Property="Fill" TargetName="Arrow"
Value="{StaticResource ControlBorderMouseOverBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" TargetName="templateRoot" Value="#FFC4E5F6" />
<Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF2C628B" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="templateRoot" Value="#FFF4F4F4" />
<Setter Property="BorderBrush" TargetName="templateRoot" Value="#FFADB2B5" />
<Setter Property="Background" TargetName="splitBorder" Value="#FFF4F4F4" />
<Setter Property="BorderBrush" TargetName="splitBorder" Value="#FFADB2B5" />
<Setter Property="Fill" TargetName="Arrow"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
<Border x:Name="Border" Background="{StaticResource ControlBackgroundBrush}"
Margin="{TemplateBinding BorderThickness}">
<TextBox x:Name="PART_EditableTextBox"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
IsReadOnly="{Binding IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}"
Margin="{TemplateBinding Padding}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="AllowDrop" Value="True" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="0" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst" />
<Setter Property="Stylus.IsFlicksEnabled" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<ScrollViewer
x:Name="PART_ContentHost"
Template="{Binding PART_ItemsPresenter.Template}"
Background="Transparent"
Focusable="False"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TextBox.Style>
</TextBox>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" TargetName="Border" Value="0.56" />
</Trigger>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="Foreground" Value="Black" />
</Trigger>
<!--<Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="True">
<Setter Property="Margin" TargetName="shadow" Value="0,0,5,5"/>
<Setter Property="Color" TargetName="shadow" Value="#71000000"/>
</Trigger>-->
<Trigger Property="HasItems" Value="False">
<Setter Property="Height" TargetName="DropDownBorder" Value="95" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsGrouping" Value="True" />
<Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="ScrollViewer.CanContentScroll" Value="False" />
</MultiTrigger>
<Trigger Property="CanContentScroll" SourceName="DropDownScrollViewer" Value="False">
<Setter Property="Canvas.Top" TargetName="OpaqueRect"
Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}" />
<Setter Property="Canvas.Left" TargetName="OpaqueRect"
Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

Answer 1

This should be all you need in your ComboBox style:
<Setter Property="VirtualizingStackPanel.IsVirtualizing"
Value="True" />
<Setter Property="VirtualizingStackPanel.VirtualizationMode"
Value="Recycling" />
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel
IsItemsHost="True"
IsVirtualizing="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=(VirtualizingStackPanel.IsVirtualizing)}"
VirtualizationMode="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=(VirtualizingStackPanel.VirtualizationMode)}" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
Whether you use the Standard or Recycling virtualization mode is up to you. The Recycling mode tends to cause some odd artifacts on a ComboBox. For example: as you scroll, you may see more than one item highlighted with the 'selected' effect (but never more than one in view at a time).
However, there is a catch to making this work: you need to rename PART_ItemsPresenter to something else (I renamed it to ItemsPresenter). I have not been able to nail down why, but when you use the name PART_ItemsPresenter, your ItemsPanelTemplate doesn't get applied the virtualization is being negated somehow. I can see that the template is being applied, but there are clearly too many item containers being generated, which makes using a virtualizing panel rather pointless. Whatever the cause, simply giving your ItemsPresenter a different name appears to resolve the issue.
As #mm8 points out, you should also set MaxHeight="{TemplateBinding MaxDropDownHeight}" on DropDownBorder, or your popup will try to grow to accommodate all the items.
Lastly, I'm not sure what your intent was when you added the binding below, but you can't just add a named reference to the property path to set the binding source. Whatever your intent was, this binding is not going to satisfy it. I'd just get rid of it.
<ScrollViewer x:Name="PART_ContentHost"
Template="{Binding PART_ItemsPresenter.Template}"
... />

Answer 2

You need to do multiple things to support virtualization. Setting the ItemsPanelTemplate was part of the solution:
<Setter Property="VirtualizingPanel.IsVirtualizing" Value="True" />
<Setter Property="ScrollViewer.CanContentScroll" Value="True" />
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>

Answer 3

Setting the ItemsPanel to a VirtualizingStackPanel does work:
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
However, in order for the actual virtualization to work, you should also set the MaxHeight property of the DropDownBorder element in your template (or don't comment out the SystemDropShadowChrome element):
<Border x:Name="DropDownBorder" MaxHeight="{TemplateBinding MaxDropDownHeight}" ...