[C# windows form ] 画像のプレビューを非同期で表示させ、表示処理中に別の物を表示させる処理に対応させたい

質問内容

C# windows formでlistviewのリストをクリックすると画像のプレビューが表示される処理を作りたいのですが、画像をビットマップに変更してピクチャーボックスコンポーネントに渡す処理を非同期で実行しますが、別のリストをクリックしたときに、今の表示処理中、また表示中のものを削除して、今クリックしたものを表示させるように処理を作りたいです。

問題

lstFile_Clickをクリックし続けるとその分タスクが増えてしまいます。

現状

重い画像と軽い画像が来た時に処理時間の問題で表示がおかしくなります。

知りたいこと

表示処理中に別のリストをクリックしたときに、今、表示処理中のものをキャンセルして
今クリックしたものを表示したい、
処理中はロード中といった文字を表示させる予定です。

非同期の理由

大きい画像だと、プレビューの表示に時間がかかってまい、UIがフレーズするので
非同期にしています

試したこと

変数を用意して、クリックするたびにタスクが増えてしまう現象を対処に挑戦

ソースコード

cs
1
2        bool isNext = false;
3        bool isNow = false;
4        private async Task setPicturePreview(string filePath)
5        {
6            isNow = true;
7            MagickImage image = new MagickImage(filePath);
8            image.Resize(picPreview.Size.Width,picPreview.Size.Height);
9            bitmap = image.ToBitmap();
10            bitmap.RotateFlip(RotateFlipType.Rotate90FlipNone);
11            picPreview.Image = new Bitmap(bitmap);
12
13            image.Dispose();
14
15            if(isNext == true)
16            {
17                picPreview.Image = null;
18
19                setPicturePreview(lstFile.SelectedItems[0].Text.ToString());
20                isNow = false;
21                isNext = false;
22            }
23
24
25        }
26
27
28        private void lstFile_Click(object sender, EventArgs e)
29        {     
30            if(lstFile.SelectedItems.Count  == 1)
31            {
32                if(isNow == true)
33                {
34                    isNext = true;
35                }
36////////////////////////////////////////////////////////////////////////////////////////////////////
37                if(isNext == false)
38                { 
39                    setPicturePreview(lstFile.SelectedItems[0].Text.ToString());
40                }
41////////////////////////////////////////////////////////////////////////////////////////////////////
42            }
43
44        }

行動規範の内容に同意します

回答1件

ベストアンサー

lstFile_Clickをクリックし続けるとその分タスクが増えてしまいます。

CancellationTokenSourceを使用して、タスクをキャンセルしてください。
タスクのキャンセル - .NET | Microsoft Learn
CancellationTokenSource クラス (System.Threading) | Microsoft Learn
CancellationToken 構造体 (System.Threading) | Microsoft Learn

大きい画像だと、プレビューの表示に時間がかかってまい、UIがフレーズするので非同期にしています

PictureBoxは元々非同期で読み込めますが、対応していないフォーマットだとしょうがないですね。
PictureBoxを使って、非同期的に画像を読み込み、表示する - .NET Tips (VB.NET,C#...)

特に記載がないので.NET8です^^

cs
1using System.Diagnostics;
2using ImageMagick;
3
4namespace Q7etdhvwuo7f4r0;
5
6public partial class Form1 : Form
7{
8    private CancellationTokenSource cts = new();
9
10    // [【みんなの知識 ちょっと便利帳】フリーで使えるローディング画像/LOADING GIF/CSSのみでローディングアニメーション] (https://www.benricho.org/loading_images/)
11    // [loading-05.gif(32×32)] (https://www.benricho.org/loading_images/img-popular/loading-05.gif)
12    private readonly Bitmap loading = new("loading-05.gif");
13
14    public Form1()
15    {
16        InitializeComponent();
17
18        pictureBox1.SizeMode = PictureBoxSizeMode.CenterImage;
19
20        listView1.MultiSelect = false;
21        listView1.View = View.SmallIcon;
22        listView1.SelectedIndexChanged += ListView1_SelectedIndexChanged;
23
24        string[] paths = [
25            @"C:\Windows\Web\Wallpaper\Windows\img0.jpg",
26            @"C:\Windows\Web\Wallpaper\Windows\img19.jpg",
27        ];
28        foreach (var path in paths) listView1.Items.Add(path);
29    }
30
31    private async void ListView1_SelectedIndexChanged(object? sender, EventArgs e)
32    {
33        if (listView1.SelectedItems.Count == 1)
34        {
35            var filePath = listView1.SelectedItems[0].Text;
36
37            // 以前のタスクがあればキャンセル（完了していても呼んでエラーになるわけではない）
38            cts.Cancel();
39
40            // CancellationTokenSourceは再利用できません
41            cts = new();
42            try
43            {
44                await SetPicturePreview(filePath, cts.Token); // CancellationTokenを渡す
45            }
46            catch (OperationCanceledException)
47            {
48                Debug.WriteLine("キャンセル");
49            }
50        }
51    }
52
53    private async Task SetPicturePreview(string filePath, CancellationToken token)
54    {
55        pictureBox1.Image = loading; // ローディング表示
56
57        Bitmap? bitmap = null;
58
59        await Task.Run(async () =>
60        {
61            //await Task.Delay(TimeSpan.FromSeconds(2), token); // はやすぎるので
62
63            using var image = new MagickImage();
64
65            // ReadAsyncがある（Readに時間がかかるなら途中で中止する機会あり）
66            await image.ReadAsync(filePath, token);
67
68            // 他が遅いなら全体をTask.Runするしかないか
69
70            // キャンセル要求されたら例外出して抜ける（ネックがわからんのでしつこく確認ｗ
71            token.ThrowIfCancellationRequested();
72            image.Resize(pictureBox1.Size.Height, pictureBox1.Size.Width);
73
74            token.ThrowIfCancellationRequested();
75            bitmap = image.ToBitmap();
76
77            token.ThrowIfCancellationRequested();
78            bitmap.RotateFlip(RotateFlipType.Rotate90FlipNone);
79
80        }, token);
81
82        token.ThrowIfCancellationRequested();
83        pictureBox1.Image = bitmap;
84    }
85}