C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

ListViewでデータが多いときの表示高速化

[トピック内 2 記事 (1 - 2 表示)]  << 0 >>

■93808 / inTopicNo.1)  ListViewでデータが多いときの表示高速化
  
□投稿者/ りんく (7回)-(2020/02/06(Thu) 17:58:24)

分類:[.NET 全般] 

VisualStudio 2017
C#
WPF

1つのセルに番号と文字を表示し、1列に5つずつ表示するListViewを作成しています。
例図:
----------------
|1|2|3|4|5|
|あ|い|う|え|お|
----------------
|6|7|8|9|10|
|さ|し|す|せ|そ|
----------------
※下記のページのようなListViewです。
 http://www.magnuslindhe.com/2014/09/listbox-with-grid-layout-in-wpf/

上記のようなリストで10000件のデータを表示しなければなりませんが
改行するために、「UniformGrid」を使用しているため
仮想化ができずに表示がとてつもなく重いです。
※ちなみに「WrapPanel」も仮想化できず却下しました。
「VirtualizingStackPanel」を使用すれば早くなるのですが
【1列に5つ表示する】という条件が実現できずに困っています。
うまく実現できる方法はあるでしょうか?
ListViewでなくてもかまいません。


下記は実際の処理を端折り簡略化したものです。

// ItemsSource用のクラス
class Data
{
    public int Number {get;set;}
    public string Name {get;set;}
    public string Detail {get;set;}
}

ViewModelで、Dataクラスの配列を作成(10000件)

//XAML
<ListView ItemsSource="{Binding Dataクラスの配列}"
          ScrollViewer.CanContentScroll="True"
          VirtualizingPanel.ScrollUnit="Pixel">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <TextBlock Text="{Binding Number}"/>
                <TextBlock Grid.Row="1" Text="{Binding Name}"/>
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="5"/> ※ここを「VirtualizingStackPanel」にして1列5つを実現できれば最強。
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

引用返信 編集キー/
■93860 / inTopicNo.2)  Re[1]: ListViewでデータが多いときの表示高速化
□投稿者/ りんく (9回)-(2020/02/12(Wed) 11:40:28)
試行錯誤した結果、自己解決しました。
ListViewに渡すリストを二次元配列として定義することにしました。
見た目の微調整は必要ですが、一旦これで解決といたします。

public ReactiveCollection<List<Data>> Datas {get;set;}

Datas.Add(new List<Data>() { new Data(1, "あ"), new Data(2, "い"), new Data(3, "う"), new Data(4, "え"), new Data(5, "お")});
Datas.Add(new List<Data>() { new Data(6, "か"), new Data(7, "き"), new Data(8, "く"), new Data(9, "け"), new Data(10, "こ")});

以下、変更後のXAML
<ListView ItemsSource="{Binding Datas}"
            VirtualizingStackPanel.IsVirtualizing="True"
            VirtualizingStackPanel.VirtualizationMode="Recycling">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemTemplate>
        <DataTemplate>
            <ListView ItemsSource="{Binding}"
                VirtualizingStackPanel.IsVirtualizing="True"
                VirtualizingStackPanel.VirtualizationMode="Recycling">
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid Columns="5"/>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition />
                            </Grid.RowDefinitions>
                            <TextBlock Text="{Binding Number}"/>
                            <TextBlock Grid.Row="1" Text="{Binding Name}" />
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

解決済み
引用返信 編集キー/

このトピックをツリーで一括表示


トピック内ページ移動 / << 0 >>

このトピックに書きこむ