C# - MVVM 패턴 ICommand

 

 

변수와 프로퍼티 차이점 알아보기

** 변수는 소문자 / 프로퍼티는 대문자로 시작 ^^

1. 변수

변수는 데이터를 저장하기 위한 메모리 공간으로, 클래스나 메서드 내에서 값을 직접 저장하고 가져오는 데 사용됩니다.

- 외부 접근 제어 및 로직 추가가 불가능합니다.

- 외부 접근 제어 및 로직 추가가 불가능합니다.

2. 프로퍼티

- 필드에 대한 읽기/쓰기 접근을 캡슐화합니다.

- 로직을 추가하여 데이터 접근을 제어할 수 있습니다.

- get : 값을 반환

- set : 값을 설정

대리자 생성

 

Action , Function(Func) 으로 대리자를 선언하는데

반환값이 없으면 Action

반환값이 있으면 Func 사용

 

** Action

- 최대 16개의 매개젼수를 받을 수 있다.

 

 

ICommand

 

 

- 인터페이스

** ICommand 인터페이스에 가지고있는 인터페이스 메서드 알아야한다.

 

1. bool CanExecute(object parameter) : 명령을 실행할 수 있는지 여부를 결정하는 메서드

- Command 바인딩된 UI 요소(예: 버튼)는 CanExecute의 반환값에 따라 활성화되거나 비활성화됩니다.

- CanExecute가 false를 반환하면 버튼이 비활성화

 

2. void Execute(object parameter) : 명령이 실행될 때 호출되는 메서드

- 버튼 클릭과 같은 이벤트에 반응하여 실제 작업을 수행합니다.

- 매개변수(parameter)를 통해 추가 데이터를 전달할 수 있습니다(예: CommandParameter).

 

3. event EventHandler CanExecuteChanged : 상태가 변경되었음을 UI에 알리기 위한 이벤트 메서드

- 호출되면 바인딩된 UI 요소가 CanExecute를 다시 호출하여 상태를 갱신합니다.

- 일반적으로 CommandManager.InvalidateRequerySuggested()를 호출하여 상태 변경을 트리거합니다.

 

1. MyCommand 클래스 의 객체 생성

2. MyCommand 클래스 메서드에 버튼 클릭 이벤트 구현 해서

3. viewmodel에서 mycommand 객체를 만들어 메서드 바인딩 시키기

<Button Command="{Binding DisplayMessageCommand}"

 

[ViewModel -> Helpers -> AccuWeatherHelper.cs]

헬퍼 클래스 : request , response 결과값(반환값) 받아오는 것까지 역할

 

 

오늘 ICommand 인터페이스를 상속받아 WeatherAPP에 적용

대리자 사용안하고 커맨드 클래스안에 뷰모델 객체를 만들어 사용할수있다.

 

1. ICommand 인터페이스 상속받기

- ViewModel -> Commands 폴더 생성

 

[SearchCommand.cs]

- ViewModel 클래스(WeatherVM)를 Command 클래스에 넣어 다시 가져다 뷰모델에 넘겨준다.

- ViewModel 프로퍼티 생성 하는 방법 : prop 입력하고 Tab 키 누르면 자동완성

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;

namespace WeatherApp.ViewModel.Commands
{
    // Command 클래스에 인터페이스 상속받기  
    
    // Ctrl + . 인터페이스 구현 
    public class SearchCommand : ICommand
    {
        // 뷰모델 클래스를 Command 클래스에 넣어 다시 가져다 뷰모델에 넘겨준다.
        // 뷰모델 프로퍼티 생성 : prop 입력하고 Tab 누르면 자동완성 
        public WeatherVM VM { get; set; }

        public event EventHandler? CanExecuteChanged;

        public SearchCommand(WeatherVM vm)
        {
            VM = vm;
        }

        public bool CanExecute(object? parameter)
        {
            //throw new NotImplementedException();

            string? query = parameter as string;

            if (string.IsNullOrEmpty(query))
                return false;
            return true;
        }

        public void Execute(object? parameter)
        {
            //throw new NotImplementedException();
            _= VM.MakeQueryAsync();
        }
    }
}

 

 

[1. WeatherVM.cs 에서 SearchCommand 프로퍼티 객체 생성]

  // 1번 Command 프로퍼티 객체 생성
  public SearchCommand SearchCommand { get; set; }

 

[2. WeatherVM.cs 에서 뷰모델 안의 Command 사용하기 위해 선언]

  public WeatherVM()
  {
      // ViewModel, WeatherVM 클래스의 생성자에서, CurrentConditions, SelectedCity 프로퍼티 초기화
      Selectedcity = new City
      {
          LocalizedName = "서울"
      };

      CurrentConditions = new CurrentConditions
      {
          WeatherText = "Partly cloudy",
          Temperature = new Temperature
          {
              Metric = new Units
              {
                  Value = 21
              }
          }
      };
      // 2번 뷰모델 안의 Command 사용하기 위해 선언 
      SearchCommand = new SearchCommand(this);
      
  }

 

API 반환값 받아오는 함수 만들기

- WeatherVM 파일에

반환값 : City의 리스트

Command 클래스 객체와 뷰모델 클래스 프로퍼티 가져오기

 public async Task MakeQueryAsync()
 {
     var cities = await AccuWeatherHelper.GetCities(Query);

 }

 

Command바인딩 하기

 <Button 
     Command="{Binding SearchCommand}"
     CommandParameter="{Binding Query}" 
     Margin="0,10"
     Content="Search"/>