[WPF] MVVM을 이용한 PasswordBox사용

안녕하세요. 오늘은 PasswordBox 컨트롤을 MVVM에 적용시켜보겠습니다.

기본적으로 TextBox 컨트롤과는 다르게 .text를 비밀번호를 가져올 수 없습니다.

 

그러나 Post로 요청을 날리거나 혹은 비밀번호 데이터가 필요할때가 있기에 사용합시다.

약간의 검색결과 기본적으로 PasswordBox는 데이터를 가져오는걸 지원하지 않는다고합니다.

참고 부탁드립니다.

 

1. xaml코드 작성

먼저 포르젝트 생성 후 xaml파일을 통해 PasswordBox를 생성합니다.

그리고 저는 비밀번호를 입력받는다는 가정으로 Button을 하나 생성하겠습니다.

실행 시 문자가 아닌 '*'표시로 작성되는걸 확인할 수 있습니다.

해당 부분을 이제 Binding해보겠습니다.

 

2. DelegateCommand 작성 및 ViewModel 작성

Binding을 위해 DelegateCommand와 ViewModel을 만들어보겠습니다.

저같은 경우에는 Command  폴더안에 두 개의 cs파일을 만들었습니다.

파일이름은 DelegateCommand파일은 예시를 따라서, 

ViewModel의 파일명은 ViewModel과 붙을 View의 파일명이 MainWindow.xaml파일이기 때문입니다.

 

먼저 DelegateCommand파일 작성은 해당 링크를 따라 작성했습니다.

링크 : https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=goldrushing&logNo=221245862378

MVVM 2 - WPF에서 시작하기

혹여 MVVM, Binding에 관심있으시다면 골드러쉬님이 올려주신 글들을 읽어보시는걸 감히 추천드립니다.

너무나도 많이 배웠고 현재도 배우고 있습니다.

 

그럼 이제 ViewModel 파일을 작성하겠습니다.

 

 

3. ViewModel 작성

이런식으로 사용할 Command 선언 및 Command발생시 동작할 메소드에 대해서 정의해주시면 됩니다.

 

4. xaml 추가설정

이제 틀이만들어지 ViewModel과 xaml를 연동시켜보겠습니다.

먼저 <Window>태그안에 사용할 ViewModel이 있는곳을 선언한 후

<Window.DataContext/>를 이용해 연결합니다.

예시를 남겨놓겠습니다. 이런식으로 추가해 주시면 됩니다.

ViewModel을 붙였으니 Password정보와 Button이 클릭되면 발생할 이벤트를 알아보겠습니다.

PasswordBox에는 Name이라는 속성을 추가해 PasswordBox의 Name을 정의합니다. 저는 그냥 pw라고 간단하게 짓겠습니다.

다음은 Button태그 안에 속성 Command와 CommandParameter를 정의 후 ViewModel에서 생성한 변수의 ClickBTN을 연결해주겠습니다.

CommandParameter에는 Element이름을 위에서 설정한 PasswordBox의 Name을, Command에는 ViewModel에서 만들었던 ICommand 변수와 똑같이 넣어줍시다.

 

5. ViewModel에서 PasswordBox에 대한 정보 가져오기

canClickEvent는 ClickEvent 이벤트 발생조건을 위한 함수로 일단은 true를 리턴합시다.

ClickEvent에 파라미터인 obj를 이용합니다.

위의 코드와 같이 obj를 PasswordBox로 변환한 뒤 테스트합니다.

 

6. 실행결과

이렇게 Password값을 가져오는걸 확인할 수 있습니다.

 

감사합니다. :D

문제시 삭제하겠습니다.