1

I am displaying around 1000+ images in my WPF application. All these images are grouped using "GroupID" property. Since I have to take care of memory ,I have used VirtualizingStackPanel and secondly I am using WrapPanel to display all these images as per space accumulated by my ListView.

My solution works fine for small set of images and WPF wrap panel removes the Virtualization effect when items are grouped. Thus i googled this problem and found out we can use VirtualWrapPanel.

I tried it but i started to get Exception

"_owner was null." at VirtualWrapPanel "_owner.InvalidateScrollInfo();"

MainWindow.cs

        List<SearchData> myData = new List<SearchData>();
        GetData(ref myData);
        listView.ItemsSource = myData;

        //Grouping code
        CollectionView view = (CollectionView)CollectionViewSource.GetDefaultView(myData);
        PropertyGroupDescription groupDescription = new PropertyGroupDescription("GroupId");
        view.GroupDescriptions.Add(groupDescription);    

MainWindow.cs

    <Window x:Class="WpfItemVirtualization.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfItemVirtualization"
    xmlns:dz="clr-namespace:DevZest.Windows.DataVirtualization;assembly=DevZest.DataVirtualization"
    DataContext="{Binding RelativeSource={RelativeSource Self}}"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>

    <Style TargetType="ListViewItem">
        <Setter Property="dz:VirtualListItemBase.AutoLoad" Value="true" />
    </Style>
    <DataTemplate  x:Key="ThumbGridTemplate" >
        <VirtualizingStackPanel x:Name="OuterStackPanel" Height="253" Width="230" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Background="White">
            <VirtualizingStackPanel x:Name="InnerStackPanel" Height="{Binding Height, ElementName=OuterStackPanel}" Width="{Binding Width, ElementName=OuterStackPanel}" >

                <Grid Margin="0,0,0,0" Height="253" Background="#FFCDCDCD">                        
                    <TextBlock TextTrimming="CharacterEllipsis" Text="{Binding FilePath}"  FontFamily="Segoe UI" Foreground="Black"  HorizontalAlignment="Left" TextAlignment="Left" Margin="0" FontSize="12" Height="20" Background="{x:Null}" Width="Auto"   VerticalAlignment="Top"/>                        
                </Grid>
            </VirtualizingStackPanel>
        </VirtualizingStackPanel>           
    </DataTemplate>

</Window.Resources>
<Grid>
    <ListView x:Name="listView"
              VirtualizingStackPanel.IsVirtualizing="True"
              VirtualizingPanel.IsVirtualizingWhenGrouping="True"
                VirtualizingStackPanel.VirtualizationMode="Recycling"
                ScrollViewer.IsDeferredScrollingEnabled="True"
                dz:GridViewSort.AutoSort="True"
                dz:VirtualListLoadingIndicator.IsAttached="False"  ItemTemplate="{StaticResource ThumbGridTemplate}"
             Margin="0,35,0,0" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Visible">

        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <local:VirtualizingWrapPanel IsItemsHost="True" Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>

        <ListView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <Grid Background="#FF3E3E3E" Height="30" Margin="0,1,0,1">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="{Binding GroupId, StringFormat={}Duplicate \Group {0}}" Foreground="Black" FontSize="14" FontFamily="Segoe UI Semibold" VerticalAlignment="Center" Margin="20,0,0,0"/>

                        </Grid>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
            </GroupStyle>
        </ListView.GroupStyle>
    </ListView>

</Grid>

Any suggestion will be helpful. Thank you.

Tejas Pandya
  • 3,987
  • 1
  • 26
  • 51

0 Answers0