[c# wpf] command 개념/사용법

 

 

이번 포스팅은 Command를 이용한 간단한 기능을 구현해 보겠습니다.

 

 

포스팅은 코드비하인드단에 이벤트를 구현하는 방법을 확인한 후 Command사용법에 대해 알아보는 순으로 진행하겠습니다.

 

 

이 글을 읽기 전 선수 지식 포스팅

• [c# wpf] DataContext란? 왜 쓰는 것일까?
• [c#] 인터페이스란?
• [c#] Action, Func, Predicate 개념/ 차이
• [c#] 델리게이트를 왜 쓸까?

 

1. 코드비하인드와 xaml 이벤트를 활용한 방법

1) 기본 ui

//MainWindow.xaml

 

 

버튼에 클릭 이벤트를 등록해줍니다.

 

 

2) 이벤트 함수 작성

//MainWindow.xaml.cs

클리할 경우 Message가 나오는 로직을 적어 줍니다.

 

 

2. Command를 활용한 방법

기존에 작성했던 부분을 다 지워 줍니다.

 

 

 

 

Command는 mvvm패턴에서 사용하는 방식으로 mvvm패턴에 맞게 구조를 설계 해줘야 합니다.

 

 

1) ViewModel 폴더 생성

 

 

2) ViewModel 클래스 생성

ViewModel폴더 안에 클래스를 제작해주겠습니다.

이름은 아무렇게 적어도 상관없는데요. 저는 MessageViewModel.cs로 생성하였습니다.

 

 

3) ViewModel DataContext에 할당

mvvm패턴에서는 UI(xaml)와 통신을 코드비하인드 단이 아닌 ViewModel과 통신하기 때문에 앞서 정의한 ViewModel클래스를 통째로 DataContext에 할당합니다.

 

//MainWindow.xaml.cs

 

(DataContext가 낯선 분은 해당 포스팅 참조하기 바랍니다.)

 

 

이때 빨간줄이 나오는건 ctrl + . 을 통해 네임스페이스를 추가 해주면 됩니다.

 

4) Command를 작성할 준비

//MainWindow.xaml

xaml로 돌아가서 기존에 Click이 있던 부분을 Command로 변경해줍니다.

 

 

5) Command 클래스 파일 생성

ViewModel 폴더 안에 Commands 폴더와 MessageCommand.cs클래스를 생성합니다.

 

 

//MessageCommand.cs

커맨드로서 작동하기 위해서는 해당 클래스에 ICommand 인터페이스를 상속해야 합니다.

 

그러면 빨간줄이 먼저 뜰텐데요.

 

 

ctrl + .을 눌러서 네임 스페이스를 추가해줍니다.

 

필요한 네임스페이스가 추가되고도 여전히 빨간줄이 있을건데요. 이것은 ICommand 인터페이스에서 요구하는 메소드를 아직 작성하지 않았기 때문입니다.

 

다시 한번 ctrl+. 엔터를 누르시면 아래와 같이 메소드가 자동 생성됩니다.

(인터페이스가 낯선 분은 해당 포스팅 참조하기 바랍니다.)

 

 

간단히 각 메소드에 대해 설명하자면,

CanExecute는 버튼을 활성화 여부를 정하는 메소드 입니다.

 

가령 해당 부분을 false를 리턴하도록 세팅한다면

 

 

아무리 버튼을 눌러도 아무 동작도 일어나지 않습니다.

 

반면에 true 설정하면 잘 동작하겠죠. 여기서는 true로 설정하겠습니다.

 

 

다음으로 Execute메소드는 실질적인 로직을 담당하는 부분입니다.

 

이렇게 간단히 세팅만 해두고 다시 ViewModel로 가보겠습니다.

 

//MessageViewModel.cs

 

ViewModel단에 버튼을 클릭하면 "클릭했어요"라는 메세지 박스를 출력하는 함수를 생성합니다.

 

 

이 함수는 특정 이벤트가 발생할때만 실행되도록 해야 하는데요.

이를 위해 델리게이트를 이용해보겠습니다.

 

델리게이트는 Command단에 정의 하겠습니다.

 

//MessageCommand.cs

 

 

델리게이트 중에서도 Action 델리게이트를 이용하여 정의하였습니다.

(Action이 낯선 분은 해당 포스팅 참조하기 바랍니다.)

 

우리가 실행시키고 싶은 함수(DisplayMessage)가 반환값이 없는 형태의 함수이기 때문에 Action을 사용한 것입니다.

 

생성자를 통해서 델리게이트 _execute가 DisplayMessage와 연결 될수 있도록 세팅합니다.

(추 후 인자로 DisplayMessage 함수가 넘어올것이기 때문에 이 둘을 연결 하기 위한 준비라고 말한것입니다.)

 

 

다시 ViewModel로 돌아가겠습니다.

//MessageViewModel.cs

 

 

먼저 MessageCommand 클래스 프러퍼티를 정의하고 MessageViewModel 생성자를 통해서 값을 할당할건데요.

 

어떤 값을 할당할까요?

바로 Command클래스에 DispalyMessage 함수를 넣은 객체를 할당하는 것입니다.

 

다시 말하면 Command클래스 안에 정의된 Action 델리게이트에 DisplayMessage()를 연결 까지 완료한 완전체 커맨드를 넘긴것이지요.

(이 부분이 이해가 안되시는 분은 델리게이트가 필요한 이유 포스팅을 참조하기 바랍니다.)

 

//MessageCommand.cs

다시 Command로 돌아오겠습니다.

 

이제 이벤트를 언제 실행 시켜줄지를 알려줘야 할차례입니다.

 

버튼이 클릭되었을때 실행 되어야 하니까 Execuete 메소드 안에 아래와 같이 이벤트를 실행하는 함수를 넣어줍니다.

(왜냐하면 버튼이 클릭되었을때 실행되는 메소드가 Execute이기 때문입니다.)

 

마지막으로 //MainWindow.xaml 로 돌아가서 ViewModel에서 전달받은 Command클래스를 xaml단에서 바인딩 시켜줍니다.

 

 

 

output:

 

 

 

정리

프로젝트가 커질경우에는 command를 이용하는것이 좋은 선택이지만, 우리 예시처럼 간단한 작업을 할경우 오히려 배보다 배꼽이 커지는 일이 발생됩니다.

 

그렇기 때문에 상황에 맞게 적절히 사용하시는걸 추천드립니다.

 

 

다음 포스팅에서는 Command를 이용하여 TextBox창에 입력한 값이 메세지박스로 출력되는 방법에 대해 알아보겠습니다.