WPF フォルダを選択したら、画像選択画面を表示したい

前提・実現したいこと

フォルダの選択画面を表示し、
フォルダを選択したら、そのフォルダ内にある画像を
ギャラリーみたいに一覧表示したいと思っています。
1つしか選択できない状態にし、何を選択しているのかの値を
別ウィンドウでも参照できる仕組みにしたいと思ってます。

発生している問題・エラーメッセージ

自分がClassを理解できていないのが原因であり、
たぶん初歩的な問題だと思います。

該当のソースコード

参考
WPFでグリッド状に写真を並べる
https://laicos.hatenablog.com/entry/2018/01/15/235825

xaml
1<Window x:Class="PicTEST.MainWindow"
2        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6        xmlns:local="clr-namespace:PicTEST"
7        mc:Ignorable="d"
8        Title="MainWindow" Height="450" Width="800">
9    <Grid>
10        <ListView ItemsSource="{Binding Photos}" SelectionMode="Extended" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
11            <ListView.ItemsPanel>
12                <ItemsPanelTemplate>
13                    <WrapPanel/>
14                </ItemsPanelTemplate>
15            </ListView.ItemsPanel>
16            <ListView.ItemTemplate>
17                <DataTemplate>
18                    <Grid Width="300" Height="200">
19                        <Image Source="{Binding Title}"></Image>
20                        <TextBlock Text="{Binding Url}"></TextBlock>
21                    </Grid>
22                </DataTemplate>
23            </ListView.ItemTemplate>
24        </ListView>
25        <Button Content="Button" HorizontalAlignment="Left" Margin="10,389,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
26    </Grid>
27</Window>

C#
1using Microsoft.WindowsAPICodePack.Dialogs;
2using System;
3using System.Collections.Generic;
4using System.Linq;
5using System.Text;
6using System.Threading.Tasks;
7using System.Windows;
8using System.Windows.Controls;
9using System.Windows.Data;
10using System.Windows.Documents;
11using System.Windows.Input;
12using System.Windows.Media;
13using System.Windows.Media.Imaging;
14using System.Windows.Navigation;
15using System.Windows.Shapes;
16
17namespace PicTEST
18{
19    /// <summary>
20    /// MainWindow.xaml の相互作用ロジック
21    /// </summary>
22    public partial class MainWindow : Window
23    {
24        public MainWindow()
25        {
26            InitializeComponent();
27        }
28
29        private void Button_Click(object sender, RoutedEventArgs e)
30        {
31            using (var cofd = new CommonOpenFileDialog()
32            {
33                Title = "フォルダを選択してください",
34                InitialDirectory = @"C:\",
35                // フォルダ選択モードにする
36                IsFolderPicker = true,
37            })
38            {
39                if (cofd.ShowDialog() != CommonFileDialogResult.Ok)
40                {
41                    return;
42                }
43
44                // FileNameで選択されたフォルダを取得する
45                System.Windows.MessageBox.Show($"{cofd.FileName}を選択しました");
46
47                // とりあえず画像はpng
48                string[] files = System.IO.Directory.GetFiles(
49                cofd.FileName, "*.png", System.IO.SearchOption.AllDirectories);
50                foreach (string file in files)
51                {
52                    Photo photo = new Photo();
53                    photo.Title =file;
54                    photo.Url = file;
55                }
56
57            }
58        }
59    }
60}
61

class
1using System;
2using System.Collections.Generic;
3using System.Linq;
4using System.Text;
5using System.Threading.Tasks;
6
7namespace PicTEST
8{
9    class Photo
10    {
11            public string Title { get; set; }
12            public string Url { get; set; }
13    }
14}
15

試したこと

classについてググッてはいるものの、
ばっちり理解できる感じのデータはないです。
NewでClassのインスタンス?を作れば
データを同じところに入れていけば蓄積されるのかと思ってました。
たぶん違うんだと思います。
勉強不足で申し訳ないですが、今日一日調べても見つからなかったので
回答頂けると嬉しいです。

補足情報（FW/ツールのバージョンなど）

WPFアプリ(.NET Framework)
.NET Framework 4.7.2

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

回答1件

ベストアンサー

参考記事には肝心のPhotosの定義がないですね。
書き忘れたのか、あるいは自明だろうということで省略したのかもしれません。

普通はViewModelに定義しますが、回答ではMainWindowに書きました。
ObservableCollectionは、追加削除を通知するコレクションです（詳しくはググってください）

xml
1<Window
2  x:Class="Questions354973.MainWindow"
3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5  Width="800"
6  Height="450">
7  <Grid>
8    <ListView
9      ItemsSource="{Binding Photos}"
10      ScrollViewer.HorizontalScrollBarVisibility="Disabled"
11      SelectionMode="Single">
12      <ListView.ItemsPanel>
13        <ItemsPanelTemplate>
14          <WrapPanel />
15        </ItemsPanelTemplate>
16      </ListView.ItemsPanel>
17      <ListView.ItemTemplate>
18        <DataTemplate>
19          <Grid Width="300" Height="200">
20            <Image Source="{Binding Title}" />
21            <TextBlock Text="{Binding Url}" />
22          </Grid>
23        </DataTemplate>
24      </ListView.ItemTemplate>
25    </ListView>
26    <Button
27      MinWidth="75"
28      Margin="10"
29      HorizontalAlignment="Left"
30      VerticalAlignment="Bottom"
31      Click="Button_Click"
32      Content="Button" />
33  </Grid>
34</Window>

cs
1using Microsoft.WindowsAPICodePack.Dialogs;
2using System.Collections.ObjectModel;
3using System.IO;
4using System.Windows;
5
6namespace Questions354973
7{
8    public class Photo
9    {
10        public string Title { get; set; }
11        public string Url { get; set; }
12    }
13
14    public partial class MainWindow : Window
15    {
16        public ObservableCollection<Photo> Photos { get; } = new ObservableCollection<Photo>();
17
18        public MainWindow()
19        {
20            InitializeComponent();
21            DataContext = this;
22        }
23
24        private void Button_Click(object sender, RoutedEventArgs e)
25        {
26            using (var cofd = new CommonOpenFileDialog()
27            {
28                Title = "フォルダを選択してください",
29                InitialDirectory = @"C:\",
30                IsFolderPicker = true,
31            })
32            {
33                if (cofd.ShowDialog() != CommonFileDialogResult.Ok) return;
34
35                MessageBox.Show($"{cofd.FileName}を選択しました");
36
37                var files = Directory.GetFiles(cofd.FileName, "*.png", SearchOption.AllDirectories);
38                foreach (var file in files)
39                {
40                    var photo = new Photo
41                    {
42                        Title = file,
43                        Url = file,
44                    };
45
46                    Photos.Add(photo);
47                }
48            }
49        }
50    }
51}