WPFで、行ボタン押したら上の行と同じ内容を挿入したい、親と子の色情報を共有したい

Question

WPFで、行にボタンを追加し、上の行と同じ内容を挿入したい（行番号を取得したい）

WPF「ObservableCollection」「INotifyCollectionChanged」「Class」が良く分からない
https://teratail.com/questions/1ypxtzrjzwnam0

上記リンクと似たような事がしたかったのですが、
良く分からないため質問させてください。ソースもお借りしました。

前提・実現したいこと

●ボタン列をクリックしたときに、行番号を取得したい
・「追加」列のボタンを押したら、1行上の行をコピーし挿入したい
「画像ファイル」「タイトル」「詳細」を結合させたい（できたらレベルの話なので、出来なくても問題ない）

　・「削除」列のボタンを押したら、警告を出した後　行を削除したい

●別のxamlで色を選択したいが、子ウィンドウへと親ウィンドウの文字色受け渡しが分からない
・そもそも「Button」にする必要はあったのか…（Webで使える色名を選択できるようにしたかった）
DataGridへのCombobox選択も良いかと思ったのですが、操作性が良くなさそうなのと
WPF初心者な自分には難しそうだったので、別ウィンドウで表示して選択させるようにしようと思いました。
ですが、親フォームにある色を子フォームに持っていく方法・子から親に持っていく方法が分かりません。

該当のソースコード

親

<Window x:Class="nya_3.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:nya_3"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <DataGrid AutoGenerateColumns="False" ItemsSource="{Binding}">
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding Mypic}" Header="画像ファイル" />
                <DataGridTextColumn Binding="{Binding Title}" Header="タイトル" />
                <DataGridTextColumn Binding="{Binding Detail}" Header="詳細" />
                <DataGridTemplateColumn Header="色">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button Content="White" Click="Color_Click" Background="White"/>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTextColumn Header="次リンク" Binding="{Binding Nextlink}" />
                <DataGridTemplateColumn Header="追加">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button Content="+" Click="Add_Click" Tag="{Binding}" Background="White" />
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                <DataGridTemplateColumn Header="削除">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Button Content="-" Click="Del_Click" Tag="{Binding}" Background="White"/>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>

        <UniformGrid Grid.Row="1" HorizontalAlignment="Center" Rows="1">
            <Button Margin="10" Click="SaveButton_Click" Content="Save" />
            <Button Margin="10" Click="LoadButton_Click" Content="Load" />
            <Button Margin="10" Click="AddButton_Click" Content="Add" />
        </UniformGrid>
    </Grid>
</Window>

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Xml.Serialization;

namespace nya_3
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {

        public class Item
        {
            [XmlAttribute] public string Mypic { get; set; }
            [XmlAttribute] public string Title { get; set; }
            [XmlAttribute] public string Detail { get; set; }
            [XmlAttribute] public string Nextlink { get; set; }
            [XmlAttribute] public bool Isedit { get; set; }

        }

        public ObservableCollection<Item> Items { get; private set; } = new ObservableCollection<Item>();
        public MainWindow()
        {
            InitializeComponent();
            Items.Add(new Item { Mypic = "1.jpeg", Title = "タイトル1", Detail = "詳細1", Nextlink="2.jpeg", });
            Items.Add(new Item { Mypic = "2.jpeg", Title = "タイトル2", Detail = "詳細2", Nextlink = "1.jpeg" ,});
            Items.Add(new Item { Mypic = "3.jpeg", Title = "タイトル3", Detail = "詳細3", Nextlink = "3.jpeg", });
            DataContext = Items;
        }

        private void SaveButton_Click(object sender, RoutedEventArgs e)
        {
            var serializer = new XmlSerializer(Items.GetType());
            using (var fs = new FileStream("mydata.xml", FileMode.Create))
                serializer.Serialize(fs, Items);
        }

        private void LoadButton_Click(object sender, RoutedEventArgs e)
        {

            var serializer = new XmlSerializer(Items.GetType());
            using (var fs = new FileStream("mydata.xml", FileMode.Open))
            {
                Items = (ObservableCollection<Item>)serializer.Deserialize(fs);

                // Items自体の変更は通知されないので明示的に入れ替え
                // INotifyPropertyChangedを実装するか、Clear・Addするか
                DataContext = null;
                DataContext = Items;
            }
        }

        private void AddButton_Click(object sender, RoutedEventArgs e)
        {
            Items.Add(new Item {Isedit = true, });
        }

        private void Add_Click(object sender, RoutedEventArgs e)
        {
            Console.WriteLine((((Button)sender).Tag as Item).Title);
            //クリックした行と部分的に同じものを、1つ下の行に挿入したい
            Items.Insert(1, new Item { Title = $"タイトル{1}", Detail = $"詳細{1}", });
            //やり方が分からなかったため、とりあえず1行目の下にInsert
        }

        private void Del_Click(object sender, RoutedEventArgs e)
        {
            //クリックした行を削除したい
            Console.WriteLine((((Button)sender).Tag as Item).Title);
            //やり方は不明
        }
    }
}

子ウィンドウ

<Window x:Class="nya_3.ColorSelectWin"
        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:nya_3"
        mc:Ignorable="d"
        Title="ColorSelectWin" Height="180" Width="300">
    <Grid>
        <StackPanel Orientation="Vertical">
            <StackPanel Orientation="Horizontal" Height="30">
                <Button Content="1" Width="30" Background="black"></Button>
                <Button Content="1" Width="30" Background="darkslategray"></Button>
                <Button Content="1" Width="30" Background="slategray"></Button>
                <Button Content="1" Width="30" Background="lightslategray"></Button>
                <Button Content="1" Width="30" Background="dimgray"></Button>
                <Button Content="1" Width="30" Background="gray"></Button>
                <Button Content="1" Width="30" Background="darkgray"></Button>
                <Button Content="1" Width="30" Background="silver"></Button>
                <Button Content="1" Width="30" Background="lightgray"></Button>
                <Button Content="1" Width="30" Background="gainsboro"></Button>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Height="30">
                <Button Content="1" Width="30" Background="white"></Button>
                <Button Content="1" Width="30" Background="mintcream"></Button>
                <Button Content="1" Width="30" Background="azure"></Button>
                <Button Content="1" Width="30" Background="aliceblue"></Button>
                <Button Content="1" Width="30" Background="ghostwhite"></Button>
                <Button Content="1" Width="30" Background="whitesmoke"></Button>
                <Button Content="1" Width="30" Background="seashell"></Button>
                <Button Content="1" Width="30" Background="beige"></Button>
                <Button Content="1" Width="30" Background="lavenderblush"></Button>
                <Button Content="1" Width="30" Background="mistyrose"></Button>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Height="30">
                <Button Content="1" Width="30" Background="orangered"></Button>
                <Button Content="1" Width="30" Background="darkorange"></Button>
                <Button Content="1" Width="30" Background="red"></Button>
                <Button Content="1" Width="30" Background="tomato"></Button>
                <Button Content="1" Width="30" Background="coral"></Button>
                <Button Content="1" Width="30" Background="gold"></Button>
                <Button Content="1" Width="30" Background="yellow"></Button>
                <Button Content="1" Width="30" Background="lightyellow"></Button>
                <Button Content="1" Width="30" Background="violet"></Button>
                <Button Content="1" Width="30" Background="pink"></Button>
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

※文字数のため、SlackPanelを2行分削除

試したこと

調べると「e.RowIndex」というので取得できそうだと思ったのですが、
e.と入力した後の候補に出てこないため利用できないと判断しました。
DataTableを利用していたら可能なもの？なのかもしれません。
ググッても見つかりませんでした…。

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

.Net FrameWork 4.7.2

Answer 1

ボタン列をクリックしたときに、行番号を取得したい
・「追加」列のボタンを押したら、1行上の行をコピーし挿入したい

DataGridは列ヘッダーをクリックすると並び替える機能が標準で入っています。
その行のインデックスを取得することはできますが、その上（下？）というのは並び順次第になります。

Itemsの中だけの話（DataGridでは並び替えない）であれば難しいことはありません。
ObservableCollectionは（アイテム増減の）通知機能のあるコレクションですが、通常のListと同じことができます。
IndexOfやInsertでいいでしょう。
Collection<T>.IndexOf(T) メソッド (System.Collections.ObjectModel) | Microsoft Docs
Collection<T>.Insert(Int32, T) メソッド (System.Collections.ObjectModel) | Microsoft Docs

「画像ファイル」「タイトル」「詳細」を結合させたい（できたらレベルの話なので、出来なくても問題ない）

セルの結合？データの取得？ちょっと意味が分かりませんでした。

・「削除」列のボタンを押したら、警告を出した後　行を削除したい

同様にRemove。
Collection<T>.Remove(T) メソッド (System.Collections.ObjectModel) | Microsoft Docs

別のxamlで色を選択したいが、子ウィンドウへと親ウィンドウの文字色受け渡しが分からない
・そもそも「Button」にする必要はあったのか…（Webで使える色名を選択できるようにしたかった）
DataGridへのCombobox選択も良いかと思ったのですが、操作性が良くなさそうなのと
WPF初心者な自分には難しそうだったので、別ウィンドウで表示して選択させるようにしようと思いました。

DataGridComboBoxColumnは確かにいまいちですが、個人的には別窓を出すよりはましだと感じます。
DataGridTemplateColumnでComboBoxを使えば操作性もよくなります。

まあウィンドウ間での受け渡しは、初心者が詰まりやすいポイントなのでやってみましょうか。
モーダル（いわゆるダイアログ。閉じないと親を操作できない）か、モードレス（ペイントソフトの色選択窓のように常に表示され、どちらも操作可能）かでだいぶ話が変わります。
ダイアログ ボックスの概要 - WPF .NET | Microsoft Docs

盛り沢山になってしまったのでコードを見てください^^;
わかりにくい点があればコメントしてください^^

MainWindow（親）

<Window
	x:Class="Qtfv3nqhv521ip3.MainWindow"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="clr-namespace:Qtfv3nqhv521ip3"
	Width="800"
	Height="450">
	<Grid>
		<DataGrid
			x:Name="dataGrid"
			AutoGenerateColumns="False"
			CanUserAddRows="False"
			ItemsSource="{Binding}"
			SelectionChanged="DataGrid_SelectionChanged">
			<DataGrid.Columns>
				<DataGridTextColumn Binding="{Binding Title}" Header="タイトル" />

				<DataGridTemplateColumn Header="色（モーダル）">
					<DataGridTemplateColumn.CellTemplate>
						<DataTemplate>
							<Button Background="{Binding ColorName}" Click="Color_Click" Content="{Binding ColorName}" />
						</DataTemplate>
					</DataGridTemplateColumn.CellTemplate>
				</DataGridTemplateColumn>

				<DataGridTemplateColumn Header="色（モードレス）">
					<DataGridTemplateColumn.CellTemplate>
						<DataTemplate>
							<Button Background="{Binding ColorName}" Click="Color2_Click" Content="{Binding ColorName}" />
						</DataTemplate>
					</DataGridTemplateColumn.CellTemplate>
				</DataGridTemplateColumn>

				<DataGridTemplateColumn Header="色">
					<DataGridTemplateColumn.CellTemplate>
						<DataTemplate>
							<ComboBox ItemsSource="{Binding Source={x:Static local:MainWindow.Colors}}" SelectedItem="{Binding ColorName, UpdateSourceTrigger=PropertyChanged}">
								<ComboBox.ItemTemplate>
									<DataTemplate>
										<Ellipse Width="20" Height="20" Fill="{Binding}" />
									</DataTemplate>
								</ComboBox.ItemTemplate>
							</ComboBox>
						</DataTemplate>
					</DataGridTemplateColumn.CellTemplate>
				</DataGridTemplateColumn>

				<DataGridTemplateColumn Header="追加">
					<DataGridTemplateColumn.CellTemplate>
						<DataTemplate>
							<Button Click="Add_Click" Content="+" />
						</DataTemplate>
					</DataGridTemplateColumn.CellTemplate>
				</DataGridTemplateColumn>
				<DataGridTemplateColumn Header="削除">
					<DataGridTemplateColumn.CellTemplate>
						<DataTemplate>
							<Button Click="Del_Click" Content="-" />
						</DataTemplate>
					</DataGridTemplateColumn.CellTemplate>
				</DataGridTemplateColumn>
			</DataGrid.Columns>
		</DataGrid>
	</Grid>
</Window>

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Diagnostics;
using System.Runtime.CompilerServices;
using System.Windows;
using System.Windows.Controls;
using System.Xml.Serialization;

namespace Qtfv3nqhv521ip3
{
	public class Item : INotifyPropertyChanged
	{
		[XmlAttribute] public string Title { get; set; }

		// ColorSelectWindowでリアルタイムに変更を反映させたいのでINotifyPropertyChangedを実装する
		[XmlAttribute]
		public string ColorName { get => _ColorName; set => Set(ref _ColorName, value); }
		private string _ColorName;

		#region INotifyPropertyChanged
		public event PropertyChangedEventHandler PropertyChanged;
		protected void Set<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
		{
			if (Equals(storage, value)) return;
			storage = value;
			OnPropertyChanged(propertyName);
		}
		protected void OnPropertyChanged(string propertyName) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
		#endregion
	}

	public partial class MainWindow : Window
	{
		public static string[] Colors { get; } = {
			"Black", "DarkSlateGray", "SlateGray", "LightSlateGray", "DimGray", "Gray", "DarkGray", "Silver", "LightGray", "Gainsboro",
		};

		public ObservableCollection<Item> Items { get; private set; } = new ObservableCollection<Item>();

		// 複数開かないように表示非表示の切り替えにする
		private readonly ColorSelectWindow window = new ColorSelectWindow { Visibility = Visibility.Hidden, };


		public MainWindow()
		{
			InitializeComponent();
			Items.Add(new Item { Title = "タイトル1", ColorName = "White", });
			DataContext = Items;
		}

		private void DataGrid_SelectionChanged(object sender, SelectionChangedEventArgs e) => window.DataContext = dataGrid.SelectedItem;

		private void Color_Click(object sender, RoutedEventArgs e) // モーダル
		{
			// Tagに入れるまでもなく、DataContextに入っています
			if (((Button)sender).DataContext is Item item)
			{
				var dialog = new ColorSelectDialog { Owner = this, };
				if (dialog.ShowDialog() == true)
				{
					// いろいろな方法はあるが、お手軽に直接ListBoxを公開して取ってくる
					item.ColorName = dialog.ListBox.SelectedItem as string;
				}
			}
		}

		private void Color2_Click(object sender, RoutedEventArgs e) // モードレス
		{
			window.Visibility = Visibility.Visible;
			window.Owner = this;
		}

		private void Add_Click(object sender, RoutedEventArgs e)
		{
			if (((Button)sender).DataContext is Item item)
			{
				//クリックした行と部分的に同じものを、1つ下の行に挿入
				var i = Items.IndexOf(item);
				Items.Insert(i + 1, new Item { Title = item.Title, });


				// 見た目上の行番号を取得
				var row = dataGrid.ItemContainerGenerator.ContainerFromItem(item) as DataGridRow;
				Debug.WriteLine(row?.GetIndex());
			}
		}

		private void Del_Click(object sender, RoutedEventArgs e)
		{
			if (((Button)sender).DataContext is Item item)
			{
				var r = MessageBox.Show("削除します。いいですか？", "", MessageBoxButton.YesNo, MessageBoxImage.Information);
				if (r == MessageBoxResult.Yes)
				{
					Items.Remove(item); //クリックした行を削除
				}
			}
		}
	}
}

ColorSelectDialog（モーダル）

<Window
	x:Class="Qtfv3nqhv521ip3.ColorSelectDialog"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="clr-namespace:Qtfv3nqhv521ip3"
	Title="ColorSelectDialog"
	ResizeMode="NoResize"
	ShowInTaskbar="False"
	SizeToContent="WidthAndHeight"
	WindowStartupLocation="CenterOwner">
	<DockPanel>
		<StackPanel HorizontalAlignment="Right" DockPanel.Dock="Bottom" Orientation="Horizontal">
			<Button Click="OkButton_Click" Content="OK" />
			<Button Click="CancelButton_Click" Content="キャンセル" />
		</StackPanel>
		<Grid>
			<ListBox x:Name="ListBox" ItemsSource="{Binding Source={x:Static local:MainWindow.Colors}}" SelectedIndex="0">
				<ListBox.ItemsPanel>
					<ItemsPanelTemplate>
						<UniformGrid Columns="10" />
					</ItemsPanelTemplate>
				</ListBox.ItemsPanel>
				<ListBox.ItemTemplate>
					<DataTemplate>
						<Ellipse Width="30" Height="30" Fill="{Binding}" />
					</DataTemplate>
				</ListBox.ItemTemplate>
			</ListBox>
		</Grid>
	</DockPanel>
</Window>

using System.Windows;

namespace Qtfv3nqhv521ip3
{
	public partial class ColorSelectDialog : Window
	{
		public ColorSelectDialog() => InitializeComponent();

		private void OkButton_Click(object sender, RoutedEventArgs e) => DialogResult = true;

		private void CancelButton_Click(object sender, RoutedEventArgs e) => DialogResult = false;
	}
}

ColorSelectWindow（モードレス）

<Window
	x:Class="Qtfv3nqhv521ip3.ColorSelectWindow"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="clr-namespace:Qtfv3nqhv521ip3"
	Title="ColorSelectWindow"
	Closing="Window_Closing"
	ResizeMode="NoResize"
	ShowInTaskbar="False"
	SizeToContent="WidthAndHeight">
	<Grid>
		<ListBox
			x:Name="ListBox"
			ItemsSource="{Binding Source={x:Static local:MainWindow.Colors}}"
			SelectedIndex="0"
			SelectedItem="{Binding ColorName}">
			<ListBox.ItemsPanel>
				<ItemsPanelTemplate>
					<UniformGrid Columns="10" />
				</ItemsPanelTemplate>
			</ListBox.ItemsPanel>
			<ListBox.ItemTemplate>
				<DataTemplate>
					<Ellipse Width="30" Height="30" Fill="{Binding}" />
				</DataTemplate>
			</ListBox.ItemTemplate>
		</ListBox>
	</Grid>
</Window>

using System.ComponentModel;
using System.Windows;

namespace Qtfv3nqhv521ip3
{
	public partial class ColorSelectWindow : Window
	{
		public ColorSelectWindow() => InitializeComponent();

		private void Window_Closing(object sender, CancelEventArgs e)
		{
			// 閉じるのをキャンセルし非表示にする
			e.Cancel = true;
			Visibility = Visibility.Hidden;
		}
	}
}

Comments

[TN8001]

回答を１万字に収めるのに苦労したので、質問を前半・後半（DataGridの話とWindowの話）に分けていただきたかったです^^;

[nya-3]

TN8001様
返信遅れて申し訳ありません、回答ありがとうございました！
コンボボックスが一番分かりやすかったため、それを利用することとしました！
別件で聞きたい事ができたため、また質問させて頂くとは思いますが
その際は確認をお願いいたします。