CheckComboBox Virtualization

[Muhahe]

Hi,

is there any option how to turn Virtualization on CheckCombobox?

I tried to replace ItemsPanelTemplate with VirtualizingStackPanel but without success.

<xctk:CheckComboBox Padding="0" ItemsSource="{Binding Data.MasterRoleColumn.FilterValues, Source={StaticResource proxy}}">
	<xctk:CheckComboBox.ItemsPanel>
		<ItemsPanelTemplate>
			<VirtualizingStackPanel Width="100"
			IsItemsHost="True"
			IsVirtualizing="True" />
		</ItemsPanelTemplate>
	</xctk:CheckComboBox.ItemsPanel>
</xctk:CheckComboBox>

[XceedBoucherS]

Hi,
Can you submit a sample where it would be useful so we can test and evaluate the need for this ?
Thank you.

[Muhahe]

Thanks for your interest.

Here is example of CheckComboBox with "attempt" for virtualization.

There is just simple CheckComboBox with integerUpDown where you can set how many items is in CheckComBox.

When you set items to more than 1K, first attempt to open CheckCombobox takes so long. Any other attempt seems to be faster, but still dropdown animation looks strange.

This long opening of combobox dropdown is observable after each change in items count, when items are recreated.

So i though an UI virtualization shoudl help this, but cant make it work as descibed above, or shown in example.

Is this enough? Feel free to ask for another informations

Regards

[XceedBoucherS]

Hi,
In the CheckComboBox template, the scrollViewer contains a StackPanel, which contains the SelectAllSelectorItem and the ItemsPresenter. If the StackPanel (and so the SelectAllSelectorItem are removed) it works, but then we can't use the SelectAll feature.
This template would need to be modified in order to respect Virtualization.

[Muhahe]

Thanks for hint, i was able to change template so virtualization is working and also, SelectAll button seems ok to me.

I just reorganized items in template, so ItemsPresenter is directly in ScrollViewer and SelectAll item is above.

<Style x:Key="CheckComboboxDefaultStyle"
   TargetType="{x:Type xctk:CheckComboBox}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" />
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" />
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="Padding" Value="2" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="ScrollViewer.PanningMode" Value="Both" />
<Setter Property="Stylus.IsFlicksEnabled" Value="False" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Template">
	<Setter.Value>
		<ControlTemplate TargetType="{x:Type xctk:CheckComboBox}">
			<Grid x:Name="MainGrid"
				  SnapsToDevicePixels="true">
				<Popup x:Name="PART_Popup"
					   Margin="1"
					   AllowsTransparency="true"
					   IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
					   Placement="Bottom"
					   PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}"
					   StaysOpen="False">

					<Border x:Name="DropDownBorder"
							MaxHeight="{Binding MaxDropDownHeight, RelativeSource={RelativeSource TemplatedParent}}"
							Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"
							BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}"
							BorderThickness="1">
						<Grid MinWidth="{Binding ActualWidth, ElementName=MainGrid}">
							<Grid.RowDefinitions>
								<RowDefinition />
								<RowDefinition />
							</Grid.RowDefinitions>
							<Grid RenderOptions.ClearTypeHint="Enabled">
								<Canvas Width="0"
										Height="0"
										HorizontalAlignment="Left"
										VerticalAlignment="Top">
									<Rectangle x:Name="OpaqueRect"
											   Width="{Binding ActualWidth, ElementName=DropDownBorder}"
											   Height="{Binding ActualHeight, ElementName=DropDownBorder}"
											   Fill="{Binding Background, ElementName=DropDownBorder}" />
								</Canvas>
								<xctk:SelectAllSelectorItem x:Name="PART_SelectAllSelectorItem"
															Content="{TemplateBinding SelectAllContent}"
															Visibility="{Binding IsSelectAllActive, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BoolToVisibilityConverter}}" />
							</Grid>
							<ScrollViewer x:Name="DropDownScrollViewer"
										  Grid.Row="1"
										  CanContentScroll="True">

								<ItemsPresenter x:Name="PART_ItemsPresenter"
												KeyboardNavigation.DirectionalNavigation="Contained"
												SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />


							</ScrollViewer>
						</Grid>
					</Border>

				</Popup>

				<Border Background="{TemplateBinding Background}"
						BorderBrush="{TemplateBinding BorderBrush}"
						BorderThickness="{TemplateBinding BorderThickness}" />
				<ToggleButton x:Name="PART_DropDownButton"
							  Padding="{TemplateBinding Padding}"
							  HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
							  VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
							  Background="{TemplateBinding Background}"
							  BorderBrush="{TemplateBinding BorderBrush}"
							  Content="{Binding Text, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
							  Focusable="False"
							  IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
							  IsHitTestVisible="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource InverseBoolConverter}}"
							  Style="{StaticResource ComboBoxToggleButton}" />
			</Grid>
		</ControlTemplate>
	</Setter.Value>
</Setter>
<Style.Triggers>
	<Trigger Property="IsEditable" Value="True">
		<Setter Property="IsTabStop" Value="False" />
	</Trigger>
</Style.Triggers>
</Style>