WPF MVVM 예시 설명

wpf mwm 예 시 를 설명 하지 않 기 전에 MVVM 이론 지식 을 간단하게 말씀 드 리 겠 습 니 다.
데이터 로 UI 를 구동 하 는 것 이 WPF 기술 의 주요 특징 이기 때문에 WPF 기술 을 사용 해 개발 하 는 과정 에서 데 이 터 를 핵심 으로 하 는 WPF 는 데이터 바 인 딩 메커니즘 을 제공 해 데이터 가 변 하면 WPF 가 자동 으로 UI 를 업데이트 하 라 는 알림 을 보낸다.
우리 가 사용 하 는 모델 은 일반적으로 높 은 내부 집적 저 결합 에 이 르 기 를 원한 다.WPF 개발 에서 전형 적 인 프로 그래 밍 모델 은 MVVM 으로 WPF 를 위 한 맞 춤 형 모델 이다.이 모델 은 WPF 의 데이터 바 인 딩 체 제 를 충분히 이용 하여 Xmal 파일 과 CS 파일 의 결합 도 를 최대한 낮 추 었 다.즉,UI 디 스 플레이 와 논리 코드 의 결합 도 이다.인터페이스 를 교체 해 야 할 경우 논리 코드 수정 이 적 고 수정 하지 않 아 도 된다.WinForm 개발 에 비해 저 희 는 보통 백 엔 드 코드 에서 컨트롤 의 이름 으로 컨트롤 의 속성 을 조작 하여 UI 를 업데이트 합 니 다.WPF 에 서 는 데이터 바 인 딩 을 통 해 UI 를 업데이트 합 니 다.사용자 작업 에 응답 할 때 WinForm 은 컨트롤 의 이 벤트 를 통 해 처리 되 고 WPF 는 명령 바 인 딩 방식 으로 처리 할 수 있 으 며 결합 도가 낮 아 집 니 다.
우선 MVVM 디자인 모델 의 구조

보기:Window/page/UserControl 등 으로 구성 되 어 있 으 며,DataBinding 을 통 해 ViewModels 와 관련 이 있 습 니 다.
ViewModels:하나의 명령 으로 연결 할 수 있 는 속성,조작 논리 로 구성 되 어 있 습 니 다.View 와 ViewModel 이 결합 을 풀 었 기 때문에 우 리 는 ViewModel 에 대해 유닛 테스트 를 할 수 있 습 니 다.
Models:실체 대상 이나 웹 서비스 일 수 있 습 니 다.
다음은 간단 한 예 를 통 해 WPF MVVM 모드 를 소개 한다.예 를 들 어 그림 브 라 우 저 를 보 여 주 며 그림 을 열 어 그림 크기 를 확대/축소 합 니 다.우선 항목 구조:

UI:
   

 <Grid>
  <DockPanel>
   <Menu DockPanel.Dock="Top">
    <Menu>
     <MenuItem Header="_Open" Command="{Binding OpenFileCommand}"/>
    </Menu>
    <Menu>
     <MenuItem Header="_ZoomIn" Command="{Binding ZoomCommand}" CommandParameter="ZoomIn"/>
    </Menu>
    <Menu>
     <MenuItem Header="_ZoomOut" Command="{Binding ZoomCommand}" CommandParameter="ZoomOut"/>
    </Menu>
    <Menu>
     <MenuItem Header="_Normal" Command="{Binding ZoomCommand}" CommandParameter="Normal"/>
    </Menu>
   </Menu>
   <ScrollViewer>
    <Image Source="{Binding ImagePath}" Stretch="None">
     <Image.LayoutTransform>
      <ScaleTransform ScaleX="{Binding Zoom}" ScaleY="{Binding Zoom}"/>
     </Image.LayoutTransform>
    </Image>
   </ScrollViewer>
  </DockPanel>
 </Grid>

ViewModelBase(수정 알림 을 실현 하 는 데 사용):
  

 public class ViewModelBase : INotifyPropertyChanged
 {
  public event PropertyChangedEventHandler PropertyChanged;
  protected virtual void OnPropertyChanged(string propName)
  {
   if(PropertyChanged!=null)
   {
    PropertyChanged(this, new PropertyChangedEventArgs(propName));
   }
  }
 }

OpenFileCommand:

public class OpenFileCommand : ICommand
 {
  private MainViewModel _data;
  public OpenFileCommand(MainViewModel data)
  {
   _data = data;
  }
  public event EventHandler CanExecuteChanged;
  public bool CanExecute(object parameter)
  {
   return true;
  }
  public void Execute(object parameter)
  {
   OpenFileDialog dialog = new OpenFileDialog() { Filter = "Image Files|*.jpg;*.png;*.bmp;*.gif" };
   if(dialog.ShowDialog().GetValueOrDefault())
   {
    _data.ImagePath = dialog.FileName;
   }
  }

ZoomCommand:
   

 public enum ZoomType
 {
  ZoomIn = 0,
  ZoomOut = 1,
  Normal = 2
 }
 public class ZoomCommand : ICommand
 {
  private MainViewModel _data;
  public ZoomCommand(MainViewModel data)
  {
   _data = data;
  }
  public event EventHandler CanExecuteChanged
  {
   add { CommandManager.RequerySuggested += value; }
   remove { CommandManager.RequerySuggested -= value; }
  }
  public bool CanExecute(object parameter)
  {
   return _data.ImagePath != null;
  }
  public void Execute(object parameter)
  {
   ZoomType type = (ZoomType)Enum.Parse(typeof(ZoomType), (string)parameter, true);
   switch(type)
   {
    case ZoomType.Normal:
     _data.Zoom = 1;
     break;
    case ZoomType.ZoomIn:
     _data.Zoom *= 1.2;
     break;
    case ZoomType.ZoomOut:
     _data.Zoom /= 1.2;
     break;
   }
  }
 }

MainViewModel:

public class MainViewModel : ViewModelBase
 {
  private string _imagePath;
  public string ImagePath
  {
   get
   {
    return _imagePath;
   }
   set
   {
    if (_imagePath != value)
    {
     _imagePath = value;
     OnPropertyChanged("ImagePath");
    }
   }
  }
  private double _zoom = 1.0;
  public double Zoom
  {
   get
   {
    return _zoom;
   }
   set
   {
    if(_zoom != value)
    {
     _zoom = value;
     OnPropertyChanged("Zoom");
    }
   }
  }
  private ICommand _openFileCommand;
  public ICommand OpenFileCommand
  {
   get { return _openFileCommand; }
  }
  private ZoomCommand _zoomCommand;
  public ZoomCommand ZoomCommand
  {
   get { return _zoomCommand; }
  }
  public MainViewModel()
  {
   _openFileCommand = new OpenFileCommand(this);
   _zoomCommand = new ZoomCommand(this);
  }
 }

다음 단 계 는 MainView Model 을 MainWindow 에 연결 하 는 것 입 니 다.우 리 는 다음 두 가지 방식 으로 연결 할 수 있 습 니 다.
1.MainWindow 의 Code Behind 에서 직접 귀속:
       

 public MainWindow()
  {
   InitializeComponent();
   DataContext = new MainViewModel();
  }

2.App.xaml 배경 코드 에 바 인 딩(App.xaml 에서 StartupUri="MainWindow.xaml"를 삭제 합 니 다):

  public App()
  {
   MainWindow window = new MainWindow();
   window.DataContext = new MainViewModel();
   window.Show();
  }

실행 효과 그림 은 다음 과 같 습 니 다:

이상 은 WPF MVVM 예시 에 대해 설명 한 모든 내용 이 며,효과 도 를 첨부 하여 보기 에는 괜 찮 은 것 같 습 니 다.마음 에 드 시 면 좋 겠 습 니 다.귀중 한 의견 을 제시 해 주시 기 바 랍 니 다.