Click here to Skip to main content
12,398,537 members (55,405 online)
Click here to Skip to main content

Stats

13K views
416 downloads
15 bookmarked
Posted

Implement Selectable Virtual List

, 3 Jan 2013 CPOL
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.
Source
nunit.framework.dll
SelectableVirtualList
bin
Debug
SelectableVirtualList.exe
SelectableVirtualList.vshost.exe
SelectableVirtualList.vshost.exe.manifest
Release
btn_next_def.gif
btn_prev_def.gif
Images
btn_next_def.gif
btn_prev_def.gif
obj
x86
Debug
TempPE
Properties
SelectableVirtualList.5.1.ReSharper.user
_ReSharper.SelectableVirtualList
BuildScriptCache
.crc
.version
0
3
4
5cdb3e1e.dat
DecompilerCache
NamedArguments
.crc
.version
0
54464846.dat
PdbInfo
ProjectModel
ProjectModel.dat
Resources
.crc
.version
0
54464846.dat
SymbolCache.bin
TagPrefixes
.crc
.version
TodoCache
.crc
.version
0
54464846.dat
WebsiteFileReferences
.crc
.version
WordIndex
.crc
.version
6
7b5a6c11.dat
SelectableVirtualList.5.1.ReSharper.user
SelectableVirtualListTest
bin
Debug
nunit.framework.dll
SelectableVirtualList.exe
SelectableVirtualListTest.dll
Release
obj
x86
Debug
TempPE
Properties
_ReSharper.SelectableVirtualList
BuildScriptCache
.crc
.version
NamedArguments
.crc
.version
7
1b6a2cee.dat
PdbInfo
ProjectModel
ProjectModel.dat
Resources
.crc
.version
SymbolCache.bin
TagPrefixes
.crc
.version
TodoCache
.crc
.version
WebsiteFileReferences
.crc
.version
WordIndex
.crc
.version
<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)

Share

About the Author

Young Ye
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.

You may also be interested in...

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.160721.1 | Last Updated 3 Jan 2013
Article Copyright 2012 by Young Ye
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid