Click here to Skip to main content
15,886,362 members
Articles / Desktop Programming / WPF

Replacing TreeView with ListBox

Rate me:
Please Sign up or sign in to vote.
4.83/5 (18 votes)
6 Oct 2011BSD4 min read 70.8K   5.2K   66  
TreeView is not good enough to support millions of nodes. Simulating using a ListBox might help.
<UserControl x:Class="MediaAssistant.Controls.Library.LibraryView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             xmlns:Constants="clr-namespace:MediaAssistant.DAL.Constants;assembly=MediaAssistant.DAL" 
             xmlns:Converters="clr-namespace:MediaAssistant.Converters" 
             Background="{StaticResource BodyBackground}"
             MinWidth="200">
    <UserControl.Resources>
        <ResourceDictionary>
            <Style x:Key="ExpandCollapseToggleStyle" TargetType="{x:Type ToggleButton}">
                <Setter Property="Focusable" Value="False"/>
                <Setter Property="Width" Value="19"/>
                <Setter Property="Height" Value="13"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ToggleButton}">
                            <Border Width="19" Height="13" Background="Transparent">
                                <Border SnapsToDevicePixels="true" Width="9" Height="9" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" BorderBrush="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" BorderThickness="1">
                                    <Path Margin="1,1,1,1" x:Name="ExpandPath" Fill="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" Data="M 0 2 L 0 3 L 2 3 L 2 5 L 3 5 L 3 3 L 5 3 L 5 2 L 3 2 L 3 0 L 2 0 L 2 2 Z"/>
                                </Border>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter Property="Data" TargetName="ExpandPath" Value="M 0 2 L 0 3 L 5 3 L 5 2 Z"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <Converters:LibraryItemMarginConverter x:Key="LibraryItemMarginConverter" />
            <Converters:HasChildreenVisibilityConverter x:Key="HasChildreenVisibilityConverter" />
            <DataTemplate x:Key="ListLibraryItemTemplate" >
                <StackPanel x:Name="listItemPanel" Orientation="Horizontal" Margin="{Binding Converter={StaticResource LibraryItemMarginConverter}}">
                    <ToggleButton x:Name="expandCollapseButton" IsChecked="{Binding IsExpanded, Mode=TwoWay}" 
                                  Visibility="{Binding HasChildren, Converter={StaticResource HasChildreenVisibilityConverter}}"
                                  Command="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type UserControl}}, Path=DataContext.ToggleExpandCollapseCommand}"
                                  Style="{StaticResource ExpandCollapseToggleStyle}"/>
                    <Border Name="iconBorder" Width="20" Height="20">
                        <ContentControl x:Name="icon"/>
                    </Border>
                    <TextBlock TextAlignment="Left" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Title}" ToolTip="{Binding Title}" Width="150" TextTrimming="CharacterEllipsis"></TextBlock>
                </StackPanel>
                <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.MovieLibrary}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource MovieLibraryImage}"/>
                        <Setter TargetName="iconBorder" Property="Width" Value="25"/>
                        <Setter TargetName="iconBorder" Property="Height" Value="25"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.UnreadMovieLibrary}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource NewImage}"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.StaredMovieLibrary}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource StarImage}"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.RecommendedMovieLibrary}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource RecommendedMovieImage}"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.WishListLibrary}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource WishListImage}"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.DirectorLibrary}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource DirectorImage}"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.Director}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource DirectorImage}"/>
                        <Setter TargetName="iconBorder" Property="Width" Value="16"/>
                        <Setter TargetName="iconBorder" Property="Height" Value="16"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.WriterLibrary}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource WriterImage}"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.Writer}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource WriterImage}"/>
                        <Setter TargetName="iconBorder" Property="Width" Value="16"/>
                        <Setter TargetName="iconBorder" Property="Height" Value="16"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.ActorLibrary}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource ActorImage}"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.Actor}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource ActorImage}"/>
                        <Setter TargetName="iconBorder" Property="Width" Value="16"/>
                        <Setter TargetName="iconBorder" Property="Height" Value="16"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.MovieGenreLibrary}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource MovieGenreImage}"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.MovieGenre}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource MovieGenreImage}"/>
                        <Setter TargetName="iconBorder" Property="Width" Value="16"/>
                        <Setter TargetName="iconBorder" Property="Height" Value="16"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.YearLibrary}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource YearImage}"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.Year}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource YearImage}"/>
                        <Setter TargetName="iconBorder" Property="Width" Value="16"/>
                        <Setter TargetName="iconBorder" Property="Height" Value="16"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.WatchListLibrary}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource WatchListImage}"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.ProcessingLibrary}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource ProcessingImage}"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.FailedLibrary}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource ProcessFailedImage}"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.RatedLibrary}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource RatedImage}"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.IMDbMustWatchList}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource IMDBImage}"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.Rated}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource RatedImage}"/>
                        <Setter TargetName="iconBorder" Property="Width" Value="16"/>
                        <Setter TargetName="iconBorder" Property="Height" Value="16"/>
                    </DataTrigger>

                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.MusicLibrary}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource MusicLibraryImage}"/>
                        <Setter TargetName="iconBorder" Property="Width" Value="25"/>
                        <Setter TargetName="iconBorder" Property="Height" Value="25"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.AlbumLibrary}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource AlbumImage}"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.Album}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource AlbumImage}"/>
                        <Setter TargetName="iconBorder" Property="Width" Value="16"/>
                        <Setter TargetName="iconBorder" Property="Height" Value="16"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.ArtistLibrary}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource ArtistImage}"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.Artist}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource ArtistImage}"/>
                        <Setter TargetName="iconBorder" Property="Width" Value="16"/>
                        <Setter TargetName="iconBorder" Property="Height" Value="16"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.PlayListLibrary}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource PlayistImage}"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.Playlist}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource PlayistImage}"/>
                        <Setter TargetName="iconBorder" Property="Width" Value="16"/>
                        <Setter TargetName="iconBorder" Property="Height" Value="16"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.GenreLibrary}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource GenreImage}"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.Genre}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource GenreImage}"/>
                        <Setter TargetName="iconBorder" Property="Width" Value="16"/>
                        <Setter TargetName="iconBorder" Property="Height" Value="16"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.Composer}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource ComposerImage}"/>
                        <Setter TargetName="iconBorder" Property="Width" Value="16"/>
                        <Setter TargetName="iconBorder" Property="Height" Value="16"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.ComposerLibrary}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource ComposerImage}"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Type}" Value="{x:Static Constants:LibraryItemType.RecentlyPlayedMovieLibrary}">
                        <Setter TargetName="icon" Property="Content" Value="{StaticResource RecentImage}"/>
                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </ResourceDictionary>
    </UserControl.Resources>
    <DockPanel>
        <DockPanel  DockPanel.Dock="Top" Background="{StaticResource HeaderGradientBackground}" >
            <ContentControl Margin="5" Width="30" Height="30" Content="{StaticResource LibraryImage}"/>
            <ToggleButton Margin="5" DockPanel.Dock="Right" Width="30" Height="30" ToolTip="Mount/unmount media drive"
                                      IsChecked="{Binding IsMounted}"
                                      Command="{Binding MountUnmountMediaDriveCommand}"
                                      Style="{StaticResource opacityToggleButton}">
                <ContentControl  Content="{StaticResource MountImage}"/>
            </ToggleButton>
            <TextBlock Margin="5" VerticalAlignment="Center" Text="Media Library" FontSize="18"/>
        </DockPanel>

        <ListBox Name="Tree" DockPanel.Dock="Top" 
                     ItemsSource="{Binding DataSource.OrderedLibraryItems}" 
                     Width="230" HorizontalAlignment="Left"
                     BorderThickness="0"
                     Background="Transparent"
                     VirtualizingStackPanel.IsVirtualizing="True"
                     VirtualizingStackPanel.VirtualizationMode="Standard"
                     ScrollViewer.IsDeferredScrollingEnabled="True"               
                     ItemTemplate="{StaticResource ListLibraryItemTemplate}"
                     SelectionMode="Single"
                     MouseDoubleClick="HandleMouseDoubleClick"
                     />
    </DockPanel>
</UserControl>

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 BSD License


Written By
Software Developer (Senior) KAZ Software Limited
Bangladesh Bangladesh
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions