Click here to Skip to main content
15,881,600 members
Articles / General Programming / Performance

Implement Selectable Virtual List

Rate me:
Please Sign up or sign in to vote.
5.00/5 (4 votes)
3 Jan 2013CPOL8 min read 29.9K   540   15  
This article is Part 2 of the data display performance optimizing series. The Selectable Virtual List is a list where you can select individual items in the list, and move it out or in to the list. You can also use the select all checkbox to select all items in the list.
<Window x:Class="SelectableVirtualList.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>
		<SolidColorBrush x:Key="GrayText"
						 Color="#6b717b"></SolidColorBrush>

		<Style x:Key="CustomBorder"
			   TargetType="{x:Type Border}">
			<Setter Property="Background"
					Value="White"></Setter>
			<Setter Property="BorderBrush"
					Value="#c7d6ee"></Setter>
			<Setter Property="BorderThickness"
					Value="1"></Setter>
		</Style>

		<Style TargetType="{x:Type CheckBox}"
			   x:Key="AnswerCheckBox">
			<Setter Property="FontSize"
					Value="18"></Setter>
			<Setter Property="Foreground"
					Value="{DynamicResource  GrayText}"></Setter>
		</Style>

		<DataTemplate x:Key="CustomCellTemplate">
			<Border BorderThickness="0"
					Style="{DynamicResource CustomBorder}">
				<CheckBox Tag="{Binding}"
						  IsChecked="{Binding IsSelected}"
						  Padding="5,0,0,0"
						  Style="{DynamicResource AnswerCheckBox}"
						  FontSize="14" />
			</Border>
		</DataTemplate>

		<DataTemplate x:Key="EmployeeNameTemplate">
			<Border BorderThickness="1, 0, 0, 0"
					Style="{DynamicResource CustomBorder}"
					Width="Auto"
					Margin="-7, 0, 0, 0"
					Height="20"
					Background="Transparent"
					VerticalAlignment="Top">
				<TextBlock Text="{Binding Name}"
						   TextTrimming="CharacterEllipsis"
						   VerticalAlignment="Center"
						   HorizontalAlignment="Left"
						   Margin="5,2,0,2" />
			</Border>
		</DataTemplate>

		<Style x:Key="GridViewColumnHeaderGripper"
			   TargetType="{x:Type Thumb}">
			<Setter Property="Canvas.Right"
					Value="-7.75" />
			<Setter Property="Width"
					Value="12" />
			<Setter Property="Height"
					Value="40" />
			<Setter Property="Padding"
					Value="0,1,0,1" />
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type Thumb}">
						<Rectangle Width="4"
								   Height="40"
								   Fill="#c7d6ee" />
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>

		<Style x:Key="GridHeaderStyle">
			<Setter Property="Control.Template">
				<Setter.Value>
					<ControlTemplate>
						<Border BorderThickness="0,1,1,1"
								Style="{DynamicResource CustomBorder}"
								ClipToBounds="True"
								BorderBrush="#c7d6ee">
							<Grid>
								<Canvas>
									<Thumb x:Name="PART_HeaderGripper"
										   Style="{StaticResource GridViewColumnHeaderGripper}"
										   Background="Transparent" />
								</Canvas>
								<DockPanel HorizontalAlignment="Left"
										   VerticalAlignment="Bottom">
									<ContentControl Margin="5, 2, 5, 2"
													Content="{TemplateBinding ContentControl.Content}"
													FontSize="12"
													Foreground="#6b717b"
													Background="White"
													FontFamily="Arial"
													FontWeight="Bold"
													TextBlock.TextAlignment="Left" />
								</DockPanel>
							</Grid>
						</Border>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>

		<ControlTemplate x:Key="Default"
						 TargetType="{x:Type ListViewItem}">
			<StackPanel>
				<Border BorderThickness="0,0,0,1"
						Style="{DynamicResource CustomBorder}"
						Margin="0">
					<GridViewRowPresenter Content="{TemplateBinding Content}"
										  Margin="0"
										  Columns="{TemplateBinding GridView.ColumnCollection}"
										  TextBlock.FontSize="12"
										  TextBlock.Foreground="#6b717b" />
				</Border>
			</StackPanel>
		</ControlTemplate>
	</Window.Resources>
	<Grid>
		<Grid.RowDefinitions>
			<RowDefinition Height="0.09*" />
			<RowDefinition Height="0.128*" />
			<RowDefinition Height="0.157*" />
			<RowDefinition Height="0.096*" />
			<RowDefinition Height="0.09*" />
			<RowDefinition Height="0.112*" />
			<RowDefinition Height="0.279*" />
			<RowDefinition Height="0.048*" />
		</Grid.RowDefinitions>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="0.026*" />
			<ColumnDefinition Width="0.398*" />
			<ColumnDefinition Width="0.091*" />
			<ColumnDefinition Width="0.456*" />
			<ColumnDefinition Width="0.029*" />
		</Grid.ColumnDefinitions>
		<ListView x:Name="availableListView"
				  Grid.Column="1"
				  Grid.RowSpan="5"
				  Grid.Row="2"
				  ScrollViewer.VerticalScrollBarVisibility="Auto"
				  ScrollViewer.HorizontalScrollBarVisibility="Hidden"
				  ItemsSource="{Binding AvailableEmployeeCollection}"
				  BorderThickness="0"
				  TabIndex="4"
				  Height="Auto"
				  Width="Auto"
				  HorizontalContentAlignment="Left">
			<ListView.ItemContainerStyle>
				<Style TargetType="{x:Type ListViewItem}">
					<Setter Property="Template"
							Value="{StaticResource Default}" />
				</Style>
			</ListView.ItemContainerStyle>
			<ListView.View>
				<GridView AllowsColumnReorder="False"
						  ColumnHeaderContainerStyle="{StaticResource GridHeaderStyle}">
					<GridViewColumn Width="25"
									CellTemplate="{StaticResource CustomCellTemplate}">
						<ContentControl>
							<CheckBox x:Name="selectAllAvailableEmployees"
									  Style="{DynamicResource AnswerCheckBox}"
									  FontSize="14"
									  Unchecked="OnAvailableListUnchecked"
									  Checked="OnAvaialbelListChecked" />
						</ContentControl>
					</GridViewColumn>
					<GridViewColumn Header="Employee"
									Width="270"
									CellTemplate="{StaticResource EmployeeNameTemplate}" />
				</GridView>
			</ListView.View>
		</ListView>

		<ListView x:Name="SelectedListView"
				  Grid.Column="3"
				  Grid.RowSpan="5"
				  Grid.Row="2"
				  ScrollViewer.VerticalScrollBarVisibility="Auto"
				  ScrollViewer.HorizontalScrollBarVisibility="Hidden"
				  ItemsSource="{Binding SelectedEmployeeCollection}"
				  BorderThickness="0"
				  TabIndex="7">
			<ListView.ItemContainerStyle>
				<Style TargetType="{x:Type ListViewItem}">
					<Setter Property="Template"
							Value="{StaticResource Default}" />
				</Style>
			</ListView.ItemContainerStyle>
			<ListView.View>
				<GridView AllowsColumnReorder="False"
						  ColumnHeaderContainerStyle="{StaticResource GridHeaderStyle}">
					<GridViewColumn Header="Selected"
									Width="270"
									CellTemplate="{StaticResource EmployeeNameTemplate}" />
				</GridView>
			</ListView.View>
		</ListView>

		<Button Grid.Column="2"
				Grid.Row="3"
				Click="OnAdd"
				Margin="0, 0, 0, 0">
			<Image Source="btn_next_def.gif"
				   ToolTip="Move to Selected List"
				   Margin="0"
				   VerticalAlignment="Top" />
		</Button>


		<TextBlock Grid.Column="1"
				   Margin="0,0,0,5"
				   Grid.Row="1"
				   TextWrapping="Wrap"
				   Text="Available List"
				   VerticalAlignment="Center" />
		<TextBlock Grid.Column="3"
				   Margin="0,0,0,5"
				   Grid.Row="1"
				   TextWrapping="Wrap"
				   Text="Selected List"
				   VerticalAlignment="Center" />

	</Grid>
</Window>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
Canada Canada
I am a passionated software developer / engineer with strong desire to develop in a simple, fast, beautiful way with the skillset such as simple design, refactoring, TDD. i worked in J2EE for about 5 years, now i work as a .NET devleoper.

Comments and Discussions