Click here to Skip to main content
15,885,546 members
Articles / Desktop Programming / WPF

Wrap Panel Virtualization

Rate me:
Please Sign up or sign in to vote.
4.95/5 (18 votes)
2 Jan 2012CPOL2 min read 53.2K   5.6K   41  
WrapPanel doesn't support virtualization. But we can improve the performance by simulating virtualization.
<UserControl x:Class="MediaAssistant.Controls.MovieThumbnails.MovieThumbnailsView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:Converters="clr-namespace:MediaAssistant.Converters" 
             xmlns:Converters1="clr-namespace:MefBasic.Converters;assembly=MefBasic" mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
    	<Converters:NotNullToVisibilityConverter x:Key="NotNullToVisibilityConverter" />
    	<Converters1:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
        <Converters:DoneStatusVisibilityConverter x:Key="DoneStatusVisibilityConverter" />
        <Converters:DoneStatusInverseVisibilityConverter x:Key="DoneStatusInverseVisibilityConverter" />
        <Style x:Key="LibraryItemsControlStyle" TargetType="{x:Type ItemsControl}" >
            <Setter Property="ItemTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Button Content="{Binding Title}" Style="{StaticResource LinkButtonStyle}" Margin="0,0,5,0"  FontSize="10"
                                ToolTip="{Binding Converter={StaticResource LibraryItemSearchTooltipConverter}}"
                                Command="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}},Path=DataContext.DataSource.SelectLibraryItemCommand}"
                                CommandParameter="{Binding}"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <WrapPanel/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Converters:NullVisibilityConverter x:Key="NullVisibilityConverter" />
        <DataTemplate x:Key="NormalThumbnail">
            <DockPanel>
                <Border BorderBrush="LightGray" BorderThickness="2" DockPanel.Dock="Left" Width="130" Padding="2" Margin="2">
                    <Grid>
                        <ContentControl Content="{StaticResource MoviePosterImage}" 
                                                    Visibility="{Binding PosterImage, Converter={StaticResource NullVisibilityConverter}}"/>
                        <Image HorizontalAlignment="Center" VerticalAlignment="Center">
                            <Image.Source>
                                <MultiBinding Converter="{StaticResource PosterImageConverter}">
                                    <Binding/>
                                    <Binding Path="Poster"/>
                                    <Binding Path="PosterImage"/>
                                </MultiBinding>
                            </Image.Source>
                        </Image>
                    </Grid>
                </Border>
                
                <Grid Width="170" DockPanel.Dock="Left">
                    <TextBlock Text="Not available" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="15" Foreground="Gray">
                                <TextBlock.Visibility>
                                    <MultiBinding Converter="{StaticResource DoneStatusInverseVisibilityConverter}">
                                       <Binding/>
                                       <Binding Path="Status"/>
                                    </MultiBinding>
                                </TextBlock.Visibility>
                    </TextBlock>
                    <StackPanel Margin="5">
                        <StackPanel.Visibility>
                            <MultiBinding Converter="{StaticResource DoneStatusVisibilityConverter}">
                                <Binding/>
                                <Binding Path="Status"/>
                                <Binding RelativeSource="{RelativeSource Mode=FindAncestor,AncestorType={x:Type UserControl}}" Path="DataContext.DataSource"/>
                            </MultiBinding>
                        </StackPanel.Visibility>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding Title}" FontSize="13" FontWeight="Bold" Margin="0,5,0,0" Width="160" TextTrimming="CharacterEllipsis" ToolTip="{Binding Title}"/>
                        </StackPanel>
                        <Border HorizontalAlignment="Left" Margin="0,2,0,5">
                            <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
                                <ContentControl Width="12" Height="12" ToolTip="Available movie at local repository"
                                        Visibility="{Binding FullPath, Converter={StaticResource NotNullToVisibilityConverter}}"
                                        Content="{StaticResource MovieFolderImage}"/>
                                <ContentControl Width="12" Height="12" ToolTip="Wish list movie"
                                        Visibility="{Binding IsStarred, Converter={StaticResource BoolToVisibilityConverter}}"
                                        Content="{StaticResource StarImage}"/>
                                <ContentControl Width="12" Height="12" ToolTip="Wish list movie"  Margin="2,0"
                                        Visibility="{Binding IsInWishList, Converter={StaticResource BoolToVisibilityConverter}}"
                                        Content="{StaticResource WishListImage}"/>
                                <ContentControl Width="12" Height="12" ToolTip="Watched movie"
                                        Visibility="{Binding Watched, Converter={StaticResource BoolToVisibilityConverter}}"
                                        Content="{StaticResource WatchListImage}"/>
                            </StackPanel>
                        </Border>
                        <ItemsControl ItemsSource="{Binding Genres}" Style="{StaticResource LibraryItemsControlStyle}" Margin="0,2,0,2"/>
                        <Border Margin="0,2" BorderThickness="1" BorderBrush="LightGray"/>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding Rating, StringFormat='Rating: {0}/10'}" FontSize="12"/>
                            <TextBlock Text="{Binding Votes, StringFormat='Votes: {0}'}" Margin="5,0,0,0"  FontSize="12"/>
                        </StackPanel>
                        
                        <StackPanel Margin="0,2">
                            <TextBlock Text="Director:" Margin="0,0,2,0" FontSize="10"/>
                            <ItemsControl ItemsSource="{Binding Directors}" Style="{StaticResource LibraryItemsControlStyle}"/>
                        </StackPanel>
                        <StackPanel Margin="0,2">
                            <TextBlock Text="Stars:" Margin="0,0,2,0" FontSize="10"/>
                            <ItemsControl ItemsSource="{Binding Stars}" Style="{StaticResource LibraryItemsControlStyle}"/>
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </DockPanel>
        </DataTemplate>
        <DataTemplate  x:Key="NormalThumbnailTemplate">
            <Border Width="300" Height="200" BorderThickness="1" Margin="5" BorderBrush="Gray">
                <ContentControl x:Name="content" Content="{Binding}" ContentTemplate="{x:Null}"/>
            </Border>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding IsVisible}" Value="True">
                    <Setter TargetName="content" Value="{StaticResource NormalThumbnail}" Property="ContentTemplate"/>
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </UserControl.Resources>
    <Grid>
        
        <ListBox x:Name="thumbnailListBox" ItemsSource="{Binding DataSource.ResultMovies}" 
                 ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                 SelectedItem="{Binding DataSource.SelectedMovie}"
                 VirtualizingStackPanel.IsVirtualizing="True"
                 VirtualizingStackPanel.VirtualizationMode="Recycling"
                 ScrollViewer.IsDeferredScrollingEnabled="True"
                 ItemTemplate="{StaticResource NormalThumbnailTemplate}"
                 ScrollViewer.ScrollChanged="HandleScrollChanged"
                 >
            <ListBox.ContextMenu>
                <ContextMenu>
                    <MenuItem Header="Play" Command="{Binding DataSource.PlayMovieCommand}"/>
                    <Separator/>
                    <MenuItem Header="Show in Windows Explorer" Command="{Binding DataSource.ShowMovieInWindowsExplorerCommand}"/>
                </ContextMenu>
            </ListBox.ContextMenu>
            
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
    </Grid>
</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 Code Project Open License (CPOL)


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