XAMLをC#で記述して、Imageの切り替え、イベントを追加したい。

Question

実現したいこと

XAMLをC＃で記述して下記を作っています。
①ボタンを押すごとにImageが１つの画面、２つの画面と切り替えられる。
（お試しなので1つ目の画面のみImageを追加)
②Imageの１つ目はマウスホイールによる挙動等のイベントを追加したい。

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

①下記のソースコードでは、ボタンを押すごとにRowが追加されていってしまいます。
②マウスホイール関数のGetPositionにあるScrollViewer.Nameの設定方法がわかりません。

該当のソースコード

<Window x:Class="WpfApp1.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:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Grid>
        <Grid ShowGridLines="True">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="10*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="10*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid Name="grid1" Grid.Row="1" Grid.Column="1" />

            <StackPanel Grid.Row="1" Grid.Column="2">
                <Button Click="Button_Click">test1</Button>
            </StackPanel>
        </Grid>
    </Grid>
</Window>

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.IO;

namespace WpfApp1
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        BitmapImage _bmpImage1;
        System.Windows.Controls.Image _image1;

        public MainWindow()
        {
            InitializeComponent();

            BitmapImage bmpImage = new BitmapImage();
            using (FileStream stream = File.OpenRead(@"./image1.png"))
            {
                bmpImage.BeginInit();
                bmpImage.StreamSource = stream;
                bmpImage.DecodePixelWidth = 500;
                bmpImage.CacheOption = BitmapCacheOption.OnLoad;
                bmpImage.CreateOptions = BitmapCreateOptions.None;
                bmpImage.EndInit();
                bmpImage.Freeze();
            }

            _bmpImage1 = bmpImage;

        }

        private bool flg = true;
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            /*
             * ここでgrid1にある内容をクリアできればいい？ 
             */

            CreateImageViewer(flg);

            flg = !flg;
        }

        private void CreateImageViewer(bool flg)
        {
            if (flg)
            {
                grid1.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(15.0d) });
                grid1.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1.0, GridUnitType.Star) });

                Border border1 = new Border();
                Thickness marginThickness1 = new Thickness(5, 0, 5, 0);
                border1.Margin = marginThickness1;
                border1.Background = System.Windows.Media.Brushes.Gray;
                Grid.SetRow(border1, 0);

                TextBlock txt1 = new TextBlock();
                txt1.Foreground = System.Windows.Media.Brushes.Black;
                txt1.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
                txt1.VerticalAlignment = VerticalAlignment.Center;
                txt1.Text = "image1";

                border1.Child = txt1;

                Border border2 = new Border();
                Grid.SetRow(border2, 1);
                Thickness marginThickness2 = new Thickness(5, 0, 5, 5);
                border2.Margin = marginThickness2;
                border2.Background = System.Windows.Media.Brushes.Silver;

                ScrollViewer scrollViewer = new ScrollViewer();
                scrollViewer.Name = "ScrollViewer1";
                scrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Hidden;
                scrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Hidden;
                scrollViewer.PreviewMouseWheel += new MouseWheelEventHandler(ScrollViewer_PreviewMouseWheel);

                _image1 = new System.Windows.Controls.Image();
                _image1.Name = "image1";
                _image1.Source = _bmpImage1;
                border2.Child = _image1;

                grid1.Children.Add(border1);
                grid1.Children.Add(border2);
            }
            else
            {
                grid1.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1.0, GridUnitType.Star) });
                grid1.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1.0, GridUnitType.Star) });

                // 上半分
                Grid grid2 = new Grid();
                grid2.ShowGridLines = true;

                grid2.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(15.0d) });
                grid2.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1.0, GridUnitType.Star) });

                Border border1 = new Border();
                Thickness marginThickness1 = new Thickness(5, 0, 5, 0);
                border1.Margin = marginThickness1;
                border1.Background = System.Windows.Media.Brushes.Gray;
                Grid.SetRow(border1, 0);

                TextBlock txt1 = new TextBlock();
                txt1.Foreground = System.Windows.Media.Brushes.Black;
                txt1.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
                txt1.VerticalAlignment = VerticalAlignment.Center;
                txt1.Text = "image2";

                border1.Child = txt1;

                Border border2 = new Border();
                Grid.SetRow(border2, 1);
                Thickness marginThickness2 = new Thickness(5, 0, 5, 5);
                border2.Margin = marginThickness2;
                border2.Background = System.Windows.Media.Brushes.Silver;


                grid2.Children.Add(border1);
                grid2.Children.Add(border2);

                grid1.Children.Add(grid2);

                // 下半分
                Grid grid3 = new Grid();

                Grid.SetRow(grid3, 1);
                grid3.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(15.0d) });
                grid3.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1.0, GridUnitType.Star) });

                Border border3 = new Border();
                Thickness marginThickness3 = new Thickness(5, 0, 5, 0);
                border3.Margin = marginThickness3;
                border3.Background = System.Windows.Media.Brushes.Gray;
                Grid.SetRow(border3, 0);

                TextBlock txt2 = new TextBlock();
                txt2.Foreground = System.Windows.Media.Brushes.Black;
                txt2.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
                txt2.VerticalAlignment = VerticalAlignment.Center;
                txt2.Text = "image3";

                border3.Child = txt2;

                Border border4 = new Border();
                Thickness marginThickness4 = new Thickness(5, 0, 5, 5);
                border4.Margin = marginThickness4;
                border4.Background = System.Windows.Media.Brushes.Silver;

                Grid.SetRow(border4, 1);

                grid3.Children.Add(border3);
                grid3.Children.Add(border4);

                grid1.Children.Add(grid3);
            }
        }

        // マウスを押下した点を保存
        System.Windows.Point _MouseDownStartPoint = new System.Windows.Point(0, 0);
        // マウスの現在地
        System.Windows.Point _MouseCurrentPoint = new System.Windows.Point(0, 0);
        //画像倍率
        double _dispScale = 1;

        private void ScrollViewer_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
        {
            //キャストではできないから他の方法を探すが見つけられません
            _MouseCurrentPoint = e.GetPosition((IInputElement)"ScrollViewer1");

            var scale = 1.0;

            if (e.Delta > 0) scale = 1.25;
            else scale = 1 / 1.25;

            var matrix = _image1.RenderTransform.Value;

            matrix.ScaleAt(scale, scale, _MouseCurrentPoint.X, _MouseCurrentPoint.Y);
            _image1.RenderTransform = new MatrixTransform(matrix);

            _dispScale = _dispScale * scale;
        }
    }
}

試したこと

上記の通りとなります。
①ではGridのクリアに類するものを探してみましたが見つけられませんでした。
②GetPositionの引数をどうすればよいかわかっていません。String→IInputElementのキャスト方法を調べましたがわかりませんでした。

何か解決策を教えていただければ幸いです。

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

VisualStudio2017
.Net Framework 4.8

Comments

[Zuishin]

ユーザーコントロールを使えばいいのでは？

Answer 1

①下記のソースコードでは、ボタンを押すごとにRowが追加されていってしまいます。
*ここでgrid1にある内容をクリアできればいい？

単純にはgrid1の中身と、RowDefinitionsをクリアします（ただしイベント解除しないとリークします）
Panel.Children プロパティ (System.Windows.Controls) | Microsoft Learn
Grid.RowDefinitions プロパティ (System.Windows.Controls) | Microsoft Learn

②マウスホイール関数のGetPositionにあるScrollViewer.Nameの設定方法がわかりません。
//キャストではできないから他の方法を探すが見つけられません

ScrollViewerにイベントを付けたのですから、senderがそれ自身です。

あるいはフィールド（メンバ変数）に取っておくとか、FindNameで探してくることもできます。
FrameworkElement.FindName(String) メソッド (System.Windows) | Microsoft Learn

using System.IO;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;

namespace Qd60jx9ak65tvo3
{
	public partial class MainWindow : Window
	{
		private readonly BitmapImage _bmpImage1;
		private Image _image1;

		public MainWindow()
		{
			InitializeComponent();

			_bmpImage1 = new BitmapImage();
			using (var stream = File.OpenRead(@"./image1.png"))
			{
				_bmpImage1.BeginInit();
				_bmpImage1.StreamSource = stream;
				_bmpImage1.DecodePixelWidth = 500;
				_bmpImage1.CacheOption = BitmapCacheOption.OnLoad;
				_bmpImage1.CreateOptions = BitmapCreateOptions.None;
				_bmpImage1.EndInit();
				_bmpImage1.Freeze();
			}
		}

		private bool flg = true;
		private void Button_Click(object sender, RoutedEventArgs e)
		{
			//ここでgrid1にある内容をクリアできればいい？
			var scrollViewer = FindName("ScrollViewer1") as ScrollViewer;
			if (scrollViewer != null)
			{
				// Window（のメソッド）でイベントをハンドリング（＝WindowがscrollViewerを強参照）
				// イベント解除しないとリーク（scrollViewerがGCされない）
				scrollViewer.PreviewMouseWheel -= ScrollViewer_PreviewMouseWheel;
			}
			grid1.Children.Clear();
			grid1.RowDefinitions.Clear();

			CreateImageViewer(flg);
			flg = !flg;
		}

		private void CreateImageViewer(bool flg)
		{
			if (flg)
			{
				grid1.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
				grid1.RowDefinitions.Add(new RowDefinition());

				var border1 = new Border
				{
					Margin = new Thickness(5, 0, 5, 0),
					Background = Brushes.Gray,
					Child = new TextBlock
					{
						HorizontalAlignment = HorizontalAlignment.Center,
						Text = "image1",
					},
				};
				Grid.SetRow(border1, 0);
				grid1.Children.Add(border1);


				var border2 = new Border
				{
					Margin = new Thickness(5, 0, 5, 5),
					Background = Brushes.Silver,
				};
				Grid.SetRow(border2, 1);

				_image1 = new Image
				{
					Name = "image1",
					Source = _bmpImage1,
				};
				var scrollViewer = new ScrollViewer
				{
					Name = "ScrollViewer1",
					VerticalScrollBarVisibility = ScrollBarVisibility.Disabled,
					Content = _image1,
				};
				scrollViewer.PreviewMouseWheel += ScrollViewer_PreviewMouseWheel;
				border2.Child = scrollViewer;
				grid1.Children.Add(border2);
			}
			else
			{
				grid1.RowDefinitions.Add(new RowDefinition());
				grid1.RowDefinitions.Add(new RowDefinition());

				// 上半分
				var grid2 = new Grid
				{
					ShowGridLines = true,
				};
				grid2.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
				grid2.RowDefinitions.Add(new RowDefinition());

				var border1 = new Border
				{
					Margin = new Thickness(5, 0, 5, 0),
					Background = Brushes.Gray,
				};
				Grid.SetRow(border1, 0);

				var txt1 = new TextBlock
				{
					HorizontalAlignment = HorizontalAlignment.Center,
					Text = "image2",
				};
				border1.Child = txt1;

				var border2 = new Border
				{
					Margin = new Thickness(5, 0, 5, 5),
					Background = Brushes.Silver,
				};
				Grid.SetRow(border2, 1);


				grid2.Children.Add(border1);
				grid2.Children.Add(border2);

				grid1.Children.Add(grid2);

				// 下半分
				var grid3 = new Grid();
				Grid.SetRow(grid3, 1);
				grid3.RowDefinitions.Add(new RowDefinition() { Height = GridLength.Auto });
				grid3.RowDefinitions.Add(new RowDefinition());

				var border3 = new Border
				{
					Margin = new Thickness(5, 0, 5, 0),
					Background = Brushes.Gray,
				};
				Grid.SetRow(border3, 0);

				var txt2 = new TextBlock
				{
					HorizontalAlignment = HorizontalAlignment.Center,
					Text = "image3",
				};
				border3.Child = txt2;

				var border4 = new Border
				{
					Margin = new Thickness(5, 0, 5, 5),
					Background = Brushes.Silver,
				};
				Grid.SetRow(border4, 1);

				grid3.Children.Add(border3);
				grid3.Children.Add(border4);

				grid1.Children.Add(grid3);
			}
		}

		private void ScrollViewer_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
		{
			//キャストではできないから他の方法を探すが見つけられません
			var _MouseCurrentPoint = e.GetPosition((IInputElement)sender);

			var scale = e.Delta > 0 ? 1.25 : 1 / 1.25;
			var matrix = _image1.RenderTransform.Value;

			matrix.ScaleAt(scale, scale, _MouseCurrentPoint.X, _MouseCurrentPoint.Y);
			_image1.RenderTransform = new MatrixTransform(matrix);
		}
	}
}

---

そもそもコードでView作るのって、めちゃくちゃ面倒じゃないですか？（わたしは途中で分からなくなりました^^;
例えばこんな感じにUserControlに分けられませんかね（DataTemplateとか手段はいろいろありますが）

MainWindow

<Window
  x:Class="Qd60jx9ak65tvo3.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="800"
  Height="450">
  <Grid>
    <Grid ShowGridLines="True">
      <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="10*" />
        <RowDefinition />
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="10*" />
        <ColumnDefinition />
      </Grid.ColumnDefinitions>
      <!--  ContentPresenterに特に意味はない GridでもBorderでもいい  -->
      <ContentPresenter
        x:Name="cp"
        Grid.Row="1"
        Grid.Column="1" />
      <StackPanel Grid.Row="1" Grid.Column="2">
        <Button Click="Button_Click" Content="test1" />
      </StackPanel>
    </Grid>
  </Grid>
</Window>

using System.IO;
using System.Windows;
using System.Windows.Media.Imaging;

namespace Qd60jx9ak65tvo3
{
	public partial class MainWindow : Window
	{
		private readonly BitmapImage _bmpImage1;

		public MainWindow()
		{
			InitializeComponent();

			_bmpImage1 = new BitmapImage();
			using (var stream = File.OpenRead(@"./image1.png"))
			{
				_bmpImage1.BeginInit();
				_bmpImage1.StreamSource = stream;
				_bmpImage1.DecodePixelWidth = 500;
				_bmpImage1.CacheOption = BitmapCacheOption.OnLoad;
				_bmpImage1.CreateOptions = BitmapCreateOptions.None;
				_bmpImage1.EndInit();
				_bmpImage1.Freeze();
			}
		}

		private bool flg = true;
		private void Button_Click(object sender, RoutedEventArgs e)
		{
			if (flg)
			{
				var view = new SingleView();
				view.image1.Source = _bmpImage1;
				cp.Content = view;
			}
			else
			{
				var view = new SplitView();
				cp.Content = view;
			}

			flg = !flg;
		}
	}
}

SingleView

<UserControl
  x:Class="Qd60jx9ak65tvo3.SingleView"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid Margin="5">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition />
    </Grid.RowDefinitions>
    <Border Background="Gray">
      <TextBlock HorizontalAlignment="Center" Text="image1" />
    </Border>

    <Border Grid.Row="1" Background="Silver">
      <ScrollViewer PreviewMouseWheel="ScrollViewer_PreviewMouseWheel" VerticalScrollBarVisibility="Disabled">
        <Image x:Name="image1" />
      </ScrollViewer>
    </Border>
  </Grid>
</UserControl>

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;

namespace Qd60jx9ak65tvo3
{
	public partial class SingleView : UserControl
	{
		public SingleView() => InitializeComponent();

		private void ScrollViewer_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
		{
			var _MouseCurrentPoint = e.GetPosition((IInputElement)sender);

			var scale = e.Delta > 0 ? 1.25 : 1 / 1.25;
			var matrix = image1.RenderTransform.Value;

			matrix.ScaleAt(scale, scale, _MouseCurrentPoint.X, _MouseCurrentPoint.Y);
			image1.RenderTransform = new MatrixTransform(matrix);

		}
	}
}

SplitView

<UserControl
  x:Class="Qd60jx9ak65tvo3.SplitView"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid Margin="5">
    <Grid.RowDefinitions>
      <RowDefinition />
      <RowDefinition />
    </Grid.RowDefinitions>
    <Grid ShowGridLines="True">
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
      </Grid.RowDefinitions>
      <Border Background="Gray">
        <TextBlock HorizontalAlignment="Center" Text="image2" />
      </Border>
      <Border Grid.Row="1" Background="Silver" />
    </Grid>

    <Grid Grid.Row="1">
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
      </Grid.RowDefinitions>
      <Border Background="Gray">
        <TextBlock HorizontalAlignment="Center" Text="image3" />
      </Border>
      <Border Grid.Row="1" Background="Silver" />
    </Grid>
  </Grid>
</UserControl>

using System.Windows.Controls;

namespace Qd60jx9ak65tvo3
{
	public partial class SplitView : UserControl
	{
		public SplitView() => InitializeComponent();
	}
}

Comments

[chiken]

大変わかりやすい方法を提示していただきありがとうございます。
コードビハインドでの書き方も見やすく参考になりました。
UserControlで分けたほうが今後に活かせそうなので利用させていただきます。
ありがとうございました。