WPF ObservableCollection<myData>の修正更新手順

Question

色々なサイトを参考にさせて頂いてます。
最終的には、WPFでCSVファイルを読込み、DataTableに表示させたいと思っています。

初歩的な事かもしれず大変申し訳ないのですが、教えてください。

【知りたい事】
・クリックされたセルの修正（プログラム側で）
⇒ObservableCollectionの修正方法
ObservableCollection<myData>
これを　myData[row][col]＝"A"みたいに編集したりしたいです。

<DataGrid Name="dataGrid" ItemsSource="{Binding Path=myData}" CanUserSortColumns="False" IsReadOnly="True" AutoGenerateColumns="False" CanUserReorderColumns="False" MouseDoubleClick="dataGrid_MouseDBLCLK">
           <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding Path=Title,TargetNullValue=''}" Header="タイトル" MinWidth="100"/>
                <DataGridTextColumn Binding="{Binding Path=CurrentFol,TargetNullValue=''}" Header="カレントフォルダ" />
                <DataGridTextColumn Binding="{Binding Path=Pic,TargetNullValue=''}" Header="画像"  />
            </DataGrid.Columns>

</DataGrid>
<Button Content="Button" HorizontalAlignment="Left" Height="72" Margin="311,620,0,0" VerticalAlignment="Top" Width="157" Click="Button_Click"/>

        public MainWindow()
        {
            InitializeComponent();
            UpdateDispList();

        }

        //表示用リストを再設定  
        private void UpdateDispList()
        {
            //dataGrid.ItemsSource = myData;
            dataGrid.ItemsSource = new ObservableCollection<myData> {
            new myData { Title="化粧品", CurrentFol="/pic" },
            new myData { Title="洗剤", CurrentFol="/pic" },
            new myData { Title="パン", CurrentFol="/pic" },
            };
        }


//座標を出すもの
        private void dataGrid_MouseDBLCLK(object sender, MouseButtonEventArgs e)
        {
            // データグリッドでマウスがクリックされた位置を取得します。
            var dataGrid = sender as DataGrid;
            var point = e.GetPosition(dataGrid);
            // データグリッドでマウスがクリックされた位置の行オブジェクトを取得します。
            var row = GetDataGridObject<DataGridRow>(dataGrid, point);
            if (row == null)
            {
                return;
            }
            // 行オブジェクトから行インデックス(0起算)を取得します。
            var rowIndex = row.GetIndex();
            // データグリッドでマウスがクリックされた位置のセルオブジェクトを取得します。
            var cell = GetDataGridObject<DataGridCell>(dataGrid, point);
            if (cell == null)
            {
                return;
            }
            // セルオブジェクトから列インデックス(0起算)を取得します。
            var columnIndex = cell.Column.DisplayIndex;

            MessageBox.Show($"行={rowIndex} 列={columnIndex}");

            switch (columnIndex)
            {
                case 0:
                    
                    break;
                case 1:
			//ファイル選択画面
                    string exeFolder = AppDomain.CurrentDomain.BaseDirectory;
                    var uriBase = new Uri(exeFolder);//カレントディレクトリ
                    var Cell = GetCellText(dataGrid,columnIndex, rowIndex);//dataGridのCell値取得

                    var dlg = new MSAPI::Dialogs.CommonOpenFileDialog();
                        // フォルダ選択ダイアログ（falseにするとファイル選択ダイアログ）
                        dlg.IsFolderPicker = true;
                        // タイトル
                        dlg.Title = "フォルダを選択してください";
                        // 初期ディレクトリ
                        dlg.InitialDirectory = exeFolder + Cell;
                        if (dlg.ShowDialog() == MSAPI::Dialogs.CommonFileDialogResult.Ok)
                        {
                          //  MessageBox.Show($"{dlg.FileName}が選択されました。");


                        var uriTarget = new Uri(dlg.FileName);
                        // MakeRelativeUriメソッドで相対パスを取得する
                        // 同時にURIに変換する際にエスケープされた文字列をアンエスケープする
                        var relativePath = Uri.UnescapeDataString(uriBase.MakeRelativeUri(uriTarget).ToString());
                        //    var img = new BitmapImage(new Uri("フォルダー/Test.png", UriKind.Relative));
                    }
                    break;
                case 2:
                    
                    break;
                default:
                    return;
            }

        }

//座標を出すもの
       private T GetDataGridObject<T>(DataGrid dataGrid, Point point)
    {
        T result = default(T);
        var hitResultTest = VisualTreeHelper.HitTest(dataGrid, point);
        if (hitResultTest != null)
        {
            var visualHit = hitResultTest.VisualHit;
            while (visualHit != null)
            {
                if (visualHit is T)
                {
                    result = (T)(object)visualHit;
                    break;
                }
                visualHit = VisualTreeHelper.GetParent(visualHit);
            }
        }
        return result;
    }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            //値の変更が可能かテスト
            dataGrid.ItemsSource = new ObservableCollection<myData> {
            new myData { Title="あ", CurrentFol="/pic" },
            new myData { Title="い", CurrentFol="/pic" },
            new myData { Title="う", CurrentFol="/pic" },
            new myData { Title="あ", CurrentFol="/pic" },
            new myData { Title="い", CurrentFol="/pic" },
            new myData { Title="う", CurrentFol="/pic" },
            };

    class myData
    {
        public string Title{ get; set; }
        public String CurrentFol { get; set; }
        public String Pic { get; set; }
	}

Answer 1

クリックされたセルの修正（プログラム側で）⇒ObservableCollectionの修正方法

ObservableCollectionはアイテムの増減を通知しますが、中のアイテムの状態は関知しません。
ObservableCollection<T> クラス (System.Collections.ObjectModel) | Microsoft Docs

INotifyCollectionChanged インターフェイス (System.Collections.Specialized) | Microsoft Docs

中のアイテムのプロパティの変更は、INotifyPropertyChangedを実装する必要があります。
INotifyPropertyChanged インターフェイス (System.ComponentModel) | Microsoft Docs

実例や詳細はいっぱい記事がありますので検索してください。

myData[row][col]＝"A"みたいに編集したりしたいです。

インデクサを作ればそのようなアクセスはできますがうれしいですかね？

---

CSVの編集ツールという感じなのでしょうか。
「存在しないフォルダやファイルは入力させたくない＆手入力はだるい」のでダイアログで選択するような仕様と。

ソートやカラム移動を禁止しているので今の実装でも問題なさそうですが、DataGridCellにイベントを付けたほうがはるかに簡単だと思います。
そうすれば禁止にする必要もなくなります（Column.Headerでswitchするのは微妙な気もしますが^^;

注）カレントフォルダの扱いが違っていると思います（完動コードとして作りにくいので^^;
注）新規行を追加するにはタイトルを先に入れる必要があります（先にカレントフォルダ等をダブルクリックしても無視する）
NuGet Gallery | Ookii.Dialogs.Wpf 3.1.0を使用

<Window
  x:Class="Questions341357.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="1000"
  Height="300"
  HorizontalAlignment="Center">
  <DockPanel>
    <StackPanel DockPanel.Dock="Bottom">
      <Button Click="ResetButton_Click" Content="リセット" />
      <Button Click="PrintButton_Click" Content="確認" />
    </StackPanel>

    <DataGrid AutoGenerateColumns="False" ItemsSource="{Binding Items}">
      <DataGrid.CellStyle>
        <Style TargetType="DataGridCell">
          <EventSetter Event="MouseDoubleClick" Handler="DataGridCell_MouseDoubleClick" />
        </Style>
      </DataGrid.CellStyle>
      <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding Title}" Header="タイトル" />
        <DataGridTextColumn
          Width="*"
          Binding="{Binding CurrentFolder}"
          Header="カレントフォルダ"
          IsReadOnly="True" />
        <DataGridTextColumn
          Width="300"
          Binding="{Binding PictureFileName}"
          Header="画像"
          IsReadOnly="True" />
        <DataGridTemplateColumn Width="32" IsReadOnly="True">
          <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
              <Image Source="{Binding PicturePath}" />
            </DataTemplate>
          </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
      </DataGrid.Columns>
    </DataGrid>
  </DockPanel>
</Window>

using Microsoft.Win32;
using Ookii.Dialogs.Wpf;
using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Diagnostics;
using System.IO;
using System.Runtime.CompilerServices;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace Questions341357
{
    public partial class MainWindow : Window
    {
        public ObservableCollection<Item> Items { get; } = new ObservableCollection<Item>();

        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;
            Reset();
        }

        private void Reset()
        {
            Items.Clear();
            Items.Add(new Item
            {
                //Title = "taroko",
                CurrentFolder = "https://teratail-v2.storage.googleapis.com/uploads/avatars/u7/72728/",
                PictureFileName = "FBvOAPUf_thumbnail_32x32.jpg",
            });
            // インデクサを作れば↓のようなアクセスはできますがうれしいかどうか。。。
            Items[0][0] = "taroko";

            Items.Add(new Item
            {
                Title = "TN8001",
                CurrentFolder = "https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/",
                PictureFileName = "KnkDDC5A_thumbnail_32x32.jpg",
            });
        }

        private void ResetButton_Click(object sender, RoutedEventArgs e) => Reset();

        private void PrintButton_Click(object sender, RoutedEventArgs e)
        {
            foreach (var item in Items)
            {
                Debug.WriteLine($"Title:{item.Title}");
                Debug.WriteLine($"CurrentFolder:{item.CurrentFolder}");
                Debug.WriteLine($"PictureFileName:{item.PictureFileName}");
                Debug.WriteLine("");
            }
        }

        private void DataGridCell_MouseDoubleClick(object sender, MouseButtonEventArgs e)
        {
            if (!(sender is DataGridCell cell)) return;
            if (!(cell.DataContext is Item item)) return;

            var header = cell.Column.Header as string;
            var exeFolder = AppDomain.CurrentDomain.BaseDirectory;
            switch (header)
            {
                case "カレントフォルダ":
                    var folderDlg = new VistaFolderBrowserDialog { SelectedPath = exeFolder, };
                    if (folderDlg.ShowDialog() == true)
                    {
                        item.CurrentFolder = folderDlg.SelectedPath;
                    }
                    break;
                case "画像":
                    var fileDlg = new OpenFileDialog
                    {
                        InitialDirectory = exeFolder,
                        Filter = "画像ファイル(*.bmp,*.jpg,*.jpeg,*.png)|*.bmp;*.jpg;*.jpeg;*.png",
                    };
                    if (fileDlg.ShowDialog() == true)
                    {
                        item.CurrentFolder = Path.GetDirectoryName(fileDlg.FileName);
                        item.PictureFileName = Path.GetFileName(fileDlg.FileName);
                    }
                    break;
                default: return;
            }
        }
    }

    public class Item : Observable
    {
        // View側（ユーザー操作）からしか変更されないのであれば、PropertyChangedを呼ぶ必要はない
        public string Title { get; set; }
        //private string _Title;
        //public string Title { get => _Title; set => Set(ref _Title, value); }

        // ViewModel側（コード）でも変更がある場合は、PropertyChangedを呼びViewに変更を伝えなければならない
        // 関連したプロパティ（PicturePath）があるので冗長だが、
        // 通常の独立したプロパティなら↑のコメント化したTitleのような書き方
        private string _CurrentFolder = ""; // Path.CombineでArgumentNullExceptionがでるので^^;
        public string CurrentFolder
        {
            get => _CurrentFolder;
            set
            {
                if (Set(ref _CurrentFolder, value))
                {
                    // PicturePathも変わるわけなので、同じくPropertyChangedを呼ぶ
                    OnPropertyChanged(nameof(PicturePath));
                }
            }
        }

        private string _PictureFileName = "";
        public string PictureFileName
        {
            get => _PictureFileName;
            set
            {
                if (Set(ref _PictureFileName, value))
                {
                    OnPropertyChanged(nameof(PicturePath));
                }
            }
        }

        // PicturePathのPropertyChangedを呼べばViewが再取得するので、最新の値に常になる
        public string PicturePath => Path.Combine(CurrentFolder, PictureFileName);


        // インデクサ
        public string this[int index]
        {
            get
            {
                switch (index)
                {
                    case 0: return Title;
                    case 1: return CurrentFolder;
                    case 2: return PictureFileName;
                    default: throw new ArgumentOutOfRangeException();
                }
            }
            set
            {
                switch (index)
                {
                    case 0: Title = value; break;
                    case 1: CurrentFolder = value; break;
                    case 2: PictureFileName = value; break;
                    default: throw new ArgumentOutOfRangeException();
                }
            }
        }
    }

    // INotifyPropertyChangedのよくある実装 ViewModelBase等の場合も
    public class Observable : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected bool Set<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
        {
            if (Equals(storage, value)) return false;
            storage = value;
            OnPropertyChanged(propertyName);
            return true;
        }
        protected void OnPropertyChanged(string propertyName) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Comments

[退会済みユーザー]

回答ありがとうございます。
HTMLを自動的に作るようなツールを目指しています。
HTMLから参照するため、画像までのパスをフルパスにしてしまうと
少々困ったことになるため、このようなことになってます。
カレントフォルダという名称は違うかもしれませんが、
現在のパスから、どのフォルダを経て画像フォルダにいくのか
それを記載しようと思い、このような流れになっています。

data[i][j]=""のように修正できたら良いと書きましたが
単純に「ObservableCollection<myData>」の値を
どのようにしたら修正出来るのか確認したかったのです。

例えば、カレントフォルダを選択しなおした場合
そのセルだけカレントフォルダの内容を書き換えるようなものです。
最終的にこのデータはCSVで書き出したりすることもでき
読み込みも出来るようにしたいと思っています。

例えばなのですが、
var TEST = dataGrid.ItemsSource;
TEST[rowIndex].title = "タイトル変更後";
このような感じで編集できないでしょうか。

[TN8001]

できますよ。見ているものは同じですから。
ただしキャストがいります。
var TEST = dataGrid.ItemsSource as ObservableCollection<myData>;

MainWindowクラスにObservableCollectionのプロパティを用意すると、
DataContext = this;
ItemsSource="{Binding Items}"
は、
dataGrid.ItemsSource = Items;
と同じことをしていることになります。

MVVMでは DataContext = new ViewModel(); と、別のクラスに分けるのですが、その前段階として DataContext = this; と、MainWindow自身を設定するのは割とおすすめです。

publicプロパティにしないとバインドできないのは注意です。

[退会済みユーザー]

ありがとうございます。
理解力が乏しく、中々上手くいきませんでした。
var TEST = dataGrid.ItemsSource as ObservableCollection<myData>;
TEST[rowIndex].Title = "タイトル変更後";
dataGrid.ItemsSource= TEST;
dataGrid.Items.Refresh();//更新

このようにしたら、無事表示できました。
色々と基礎が足りていないため、C#の本でも読んでみようと思います。
ありがとうございました。

[TN8001]

> dataGrid.ItemsSource= TEST;

この操作は不要です。

> dataGrid.Items.Refresh();//更新

件数が多くなくラグ等を感じないのであればまあいいとは思います^^

これがないと確かに反映されませんが、これは大変重い操作です。
1か所読み直せばいいはずですが、全部を読み直してしまいます。
どこが変わったのかをViewに教えてあげてそこだけ更新してもらうのが、INotifyPropertyChangedなのです。

回答では画像を表示したかったので、かなり過剰なコードになってしまったのは失敗だったかもしれません^^;
INotifyPropertyChangedはWPFの基本なので、ぜひマスターしてください^^

参考
[Windows 10 アプリケーションにデータ バインディングを実装する - Learn | Microsoft Docs](https://docs.microsoft.com/ja-jp/learn/modules/implement-data-binding-in-windows-10-app/

[退会済みユーザー]

丁寧にありがとうございます！
色々と勉強になりました。
じっくりとソースを読んで1行1行考えてみようと思います。
教えて頂いたサイト、そしてソースを参照させて頂き
INotifyPropertyChangedについて勉強します！
またわかないことがあれば相談させてください、
ありがとうございました！