【第2章】Windows Presentation Foundation (WPF) に入門してみる　part 2　ViewModelを学習する

はじめに
目標
方法
- ViewModel
- Model
- View
参考にさせて頂いたサイト

はじめに

前回「バインディング」について学習しました。

今回は「ViewModel」について学習します。前回同様「XAML」は書きません。

目標

ボタンを押したら写真が切り替わるWindowを作ってみたいと思います。
f:id:touch-sp:20210930125935p:plain:w500

今回は画像表示までです。ボタンクリックをViewModelで実装するのは今後の課題とします。

方法

ViewModel

using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Media.Imaging;

namespace imageShow
{
    class ViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private BitmapImage img;
        public BitmapImage Img
        {
            get { return img; }
            set
            {
                img = value;
                OnPropertyChanged();
            }
        }
        protected void OnPropertyChanged([CallerMemberName] string name = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        }
    }
}

Model

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

namespace imageShow
{
    public partial class MainWindow : Window
    {
        private ViewModel vm;
        BitmapImage first = new(new Uri(AppDomain.CurrentDomain.BaseDirectory + "/1.jpg"));
        BitmapImage second = new(new Uri(AppDomain.CurrentDomain.BaseDirectory + "/2.jpg"));

        int current_image = 1;

        public MainWindow()
        {
            InitializeComponent();
            WindowSetting();

            vm = new ViewModel();
            DataContext = vm;

            vm.Img = first;

        }
        private void ChangeImage(object sender, RoutedEventArgs e)
        {
            current_image *= -1;
            if (current_image == 1)
            {
                vm.Img = first;
            }
            else
            {
                vm.Img = second;
            }
        }
    }
}

View

using System.Windows;
using System.Windows.Controls;

namespace imageShow
{
    public partial class MainWindow : Window
    {
        private void WindowSetting()
        {
            Grid mainGrid = Myfunc.newGrid("8,1", "");
            Content = mainGrid;

            Image imagePanel = new();
            Grid.SetRow(imagePanel, 0);
            mainGrid.Children.Add(imagePanel);

            imagePanel.SetBinding(Image.SourceProperty, "Img");

            Button changeImage = new() { Content = "Change Image" };
            Grid.SetRow(changeImage, 1);
            mainGrid.Children.Add(changeImage);

            changeImage.Click += ChangeImage;
        }
    }
}