믹스 드 코드 랩 : MVVM In Xamarin . Forms 기초 편 - 프로젝트 생 성 및 VIEW 구성 하 기 
 안녕 하 세요 . 믹스 드 코드 운영 자 강창훈 입니다 . 
 본격 적 으로 XAMARIN . FORMS 에서 의 MVVM UI Design Pattern 사용 방법 을 알아보 도록 하 겠 습니다 . 
 함께 하 시 는 분 들 의 원 할 한 이해 와 실습 을 위해 MVVM IN XAMARIN - 기초 편 과 MVVM IN XAMARIN - 심화 편 으로 커리큘럼 을 재 구성 하 였으며 
 기초 편 에서 는 XAMARIN . FORMS 프로젝트 구성 방법 과 기초 적 인 VIEW , VIEWMODEL , MODEL 기능 구현 을 통해 MVVM 의 개념 과 프로세스 를 이해 할 수 있 게 구성 하 였 습니다 . 
 심화 편 에서 는 기초 편 에서 작성 한 View , ViewModel , Model 등 의 기본 코드 를 다듬 고 기능 을 확장 하 며 MVVM 패턴 에 최적 화 되 어 사용 가능 한 몇몇 확장 개념 들 을 적용 하 여 코드 의 재 사용 성 과 확장 성 , 코딩 의 효율 성 고려 한 XAML & MVVM 패턴 의 고급 기능 까지 적용 해 보 도록 하 겠 습니다 . 
 먼저 Visual Studio 2017 과 Windows 10 기반 에서 XAMARIN . FORMS 프로젝트 를 생성 합니다 . 
 TOPIC 1 : Xamarin . Forms 프로젝트 생 성 및 빌드 / 실행 하 기 
 1 ) Visual Studio 2017 를 시작 합니다 . 
 2 ) 파일 > 새로 만들 기 > 프로젝트 메뉴 를 클릭 하 여 새 프로젝트 를 생 성 템플 릿 팝업 을 오픈 합니다 . 
 3 ) 좌측 Visual C # 카테고리 에서 Cross - Platform 을 선택 하 고 해당 템플 릿 을 선택 후 아래 처럼 관련 정보 를 입력 후 확인 버튼 을 클릭 하 여 자 마린 프로젝트 를 생성 합니다 . 
 - 화면 중간 상단 . NET Framework 4 . 6 . 2 버전 을 선택 합니다 . 
 - 프로젝트 템플 릿 으로 플랫 폼 간 앱 ( Xamarin . Forms 또는 네이티브 ) 템플 릿 을 선택 합니다 . 
 - 하단 프로젝트 이름 에 " XamarinMVVMDemo " 라고 입력 합니다 . 
 - 솔루션 이 생성 될 물리 적 폴더 위치 를 지정 합니다 . ( D : \ ) 
 4 ) 메인 페이지 템플 릿 유형 을 비 어 있 는 앱 을 선택 하 고 코드 공유 전략 을 반드시 PCL 항목 을 선택 한 후 확인 을 클릭 합니다 . 
 - 코드 공유 전략 ? 
 ㄴ 공유 프로젝트 : IOS , Android , UWP 프로젝트 에서 참조 가능 한 공통 프로젝트 로 사용 됩니다 . 
 ㄴ PCL ( 이식 가능 한 클래스 라이브러리 ) : 개발 된 소스 가 IOS , Android , UWP 프로젝트 에 자동 이식 됩니다 . 
 5 ) 설정 된 템플 릿 에 따라 자 마린 솔루션 및 필수 프로젝트 들 이 자동 생성 됩니다 . 
 - Windows 10 용 전용 앱 개발 기능 ( UWP ) 지원 을 위한 Windows 10 환경 설정 팝업 창 이 나타나 면 버전 을 확인 후 확인 버튼 을 클릭 합니다 . 
 6 ) Xamarin Mac 에이전트 연결 팝업 창 을 닫 습니다 . 
 - IOS 개발 소스 의 빌드 및 배포 를 위해서 는 MAC O / S 가 설치 되 는 컴퓨터 가 필요 하 며 해당 컴퓨터 에 연결 하 기 위한 팝업 창 입니다 . 
 7 ) 솔루션 에 는 PCL ( 이식 가능 ) 프로젝트 와 Android , IOS , UWP 용 필수 프로젝트 가 생성 됩니다 . 
 - Xamarin . Forms 는 PCL 프로젝트 에 주요 기능 을 개발 하 고 개발 된 내용 은 Android , IOS , UWP 프로젝트 에 이식 되 어 각각 의 모바일 O / S 별 로 맵 핑 되 는 해당 프로젝트 들 이 배포 되 고 설치 되 는 방법 으로 크로스 플랫 폼 환경 을 제공 합니다 . 
 8 ) 개발 및 디버깅 을 위해 안드로이드 프로젝트 를 시작 프로젝트 로 설정 합니다 . 
 - 안드로이드 폰 과 Windows 10 컴퓨터 를 사용 하 는 개발자 라면 Android 또는 UWP 프로젝트 를 시작 프로젝트 로 지정 하 여 배포 및 디바이스 기준 디버깅 이 가능 합니다 . 
 - IOS 의 디버깅 및 배포 . 디버깅 작업 은 MAC 컴퓨터 와 연결 후 가능 합니다 . 
 - 시작 프로젝트 로 설정 되 면 프로젝트 명 이 흰색 볼드체 로 표기 되 어 나타납니다 . 
 9 ) 디버깅 을 위해 사전 에 안드로이드 폰 은 개발자 모드 가 활성 화 되 어 있 어야 하 며 안드로 이 폰 을 USB 로 개발 컴퓨터 와 연결 합니다 . 
 - 안드로이드 폰 과 개발 컴퓨터 가 USB 로 연결 되 면 Visual Studio 2017 의 디버깅 모드 가 해당 안드로이드 폰 으로 자동 설정 됩니다 . 
 - 안드로이드 폰 의 안드로이드 버전 확인 과 개발자 모드 설정 은 구글링 해 보 면 많 은 정보 가 제공 됩니다 . ^^ 
 10 ) F 5 키 를 눌러 기본 Xamarin . Forms 프로젝트 를 빌드 하고 안드로이드 폰 에 개발 결과 를 배포 합니다 . 
 - 실제 Xmarin . Forms 의 PCL 프로젝트 가 안드로이드 프로젝트 에 이식 되 어 배포 된 모습 ( MainPage . xaml ) 이 며 관련 앱 이 폰 에 설치 ( XamarinMVVMDemo App ) 된 것 을 확인 할 수 있 습니다 . 
 1 . View 구성 하 기 - 기초 편 
 자동 으로 생성 된 PCL 프로젝트 의 메인 페이지 와 메인 페이지 의 코드 비하인드 내용 을 확인 해 보 도록 하 겠 습니다 . 
 1 ) 디폴트 메인 페이지 인 MainPage . xaml 의 모습 입니다 . 
 2 ) 디폴트 메인 페이지 인 MainPage . xaml 의 모습 입니다 . 
 3 ) UX 표현 방식 
 Forms 에서 는 화면 을 담당 하 는 뷰 를 표현 하 는 방법 으로 ~. xaml 과 1 : 1 맵 핑 되 는 ~. xaml . cs 코드 비하인드 클래스 에 C # 언어 를 이용 해 프로그래밍 방식 으로 UI 를 표현 하 는 방법 과 XAML 마크업 언어 를 이용 해 XML 태그 로 UI 를 표현 하 는 두 가지 방식 을 제공 합니다 . 
 Case 1 : 코드 비하인드 방식 
 - 개발자 가 프로그래밍 방식 으로 직접 UX 요소 를 C # 언어 로 만들 고 제어 하 는 방식 을 말 합니다 . 
 - 아래 코드 는 메인 페이지 인 MainPage . xaml 의 코드 비하 인 클래스 MainPage . xaml . cs 의 생성자 에서 StackLayout UI 요소 를 C # 으로 생성 하 고 자식 요소 로 라벨 을 추가 한 후 해당 StackLayout 을 ContentPage 의 내용 으로 채 웁 니다 . 
 - In CodeBehind 
 - 빌드 결과 
 - 코드 비하인드 클래스 에서 직접 StackLayout 컨트롤 을 만들 고 자식 요소 로 라벨 컨트롤 을 만들 어 추가 한 후 ContentPage 로 StackLayout 요소 를 C # 언어 를 이용 프로그램 밍 방식 으로 지정 하 였 습니다 . 
 Case 2 : XAML 방식 
 - XAML ( 재 믈 , 재 므얼 ) 은 UI 를 표현 하 는 방법 과 UI 로 직 을 분리 하 기 위한 방법 으로 WPF 와 함께 도입 된 UX 표현 및 상호 작용 을 지원 하 기 위한 UX 표현 용 마크업 언어 입니다 . 
 XML 문법 을 기반 으로 UX 를 표현 하 고 사용자 와 상호 작용 ( InterAction ) 할 수 있 는 새로운 매 커 니즘 들 을 ( Triggers , Converter , Behavior . .) 추가 로 제공 합니다 . 
 빌드 과정 을 통해 해당 XAML 코드 는 C # 언어 로 변환 되 어 해당 UI 페이지 의 코드 비하인드 클래스 파일 과 병합 되 어 하나 의 뷰 ( View ) 가 디바이스 에서 표현 됩니다 . 
 - XAML Syntax 
 - xml 문서 형식 정의 
 - XAML 문서 는 기본 적 으로 XML 언어 를 이용 해 표기 되 는 문서 이 기 떄문에 xml 문서 형식 이 xml 버전 및 인코딩 유형 을 정의 한다 . 
 < ContentPage ></ ContentPage > 
 - Xamarin . Forms 에서 제공 하 는 UI 컨텐츠 를 담 는 컨테이너 Eelement 이 자 컨트롤 의 한 종류 . 
 - WPF 에서 는 Windows , Page , UserControl 등 다양 한 종류 의 컨텐츠 컨테이너 가 존재 함 . 
 - 해당 네임 스페이스 가 정의 된 컨텐츠 가 Xamarin . Form 클래스 를 참조 할 수 있 는 환경 을 제공 합니다 . 
 - 해당 네임 스페이스 가 정의 된 xaml 요소 및 하위 요소 들 은 Xamarin . Forms 네임 스페이스 내 모든 객체 접근 이 가능 합니다 . 
 - XAML 은 접두사 ( 앨리어스 ) 를 통해 네임 스페이스 를 선언 하 고 XAML 페이지 내 에서 해당 접두사 를 통해 하위 클 래스 들 을 접근 하 거나 사용 이 가능 한 환경 을 제공 합니다 . 
 - x 접두사 를 사용 하 고 접두사 는 앨리어스 로 사용 되 어 Xaml 내 에서 x 를 통해 . NET Framework 4 . 0 내 의 각종 객체 접근 및 xaml 문법 규칙 사용 이 가능 함 . 
 - 해당 프로젝트 의 루트 를 위치 를 local 이 라는 접두사 로 앨리어스 를 선언 한 것 임 
 - 현재 XAML 페이지 가 존재 하 는 동일 어셈블리 ( App 1 ) 및 동일 어셈블리 하위 네임 스페이스 의 각종 객체 를 local 로 XAML 에서 접근 가능 함 . 
 - 다른 어셈블리 의 특정 네임 스페이스 를 접근 할 때 는 하 기 와 같이 표기 합니다 . 
 ㄴ partial 클래스 를 통해 코드 숨김 클래스 와 XAML 파일 을 결합 하 려면 XAML 파일 의 루트 요소 에서 
 해당 코드 비하인드 클래스 를 x : Class 특성 으로 명명 해야 합니다 . 
 4 ) 화면 구성 의 기본 단위 Page 객체 이해 하 기 
 하나 의 화면 을 구성 하 는 기본 단위 는 Page 라는 객체 를 사용 합니다 . 
 PCL 프로젝트 의 MainPage 클래스 의 상속 구조 는 아래 같 으며 Xamarin . Forms Page 의 종류 는 용도 에 맞 게 다양 한 모습 으로 제공 되 고 있 습니다 . 
 MainPage : ContentPage : TemplatedPage : Page , IControlTemplated 
 ㅁ Xamarin . Forms Page 유형 
 - ContentPage 
 - MasterDetailPage 
 5 ) 화면 레이아웃 구성 하 기 
 단일 화면 내 에 각종 요소 를 배치 하 여 화면 을 구성 하 는 레이아웃 작업 을 하 기 위해서 Xamarin . Forms 에서 는 아래 와 같 은 주요 Layout 컨트롤 요소 를 제공 합니다 . 
 상기 레이아웃 요소 중 에 Grid 컨트롤 을 이용 해 향후 MVVM 예제 로 사용 할 간단 한 사용자 등록 및 사용 자 목록 화면 을 구성 해 보 도록 하 겠 습니다 . 
 - in XAML ( View ) 
 < TextCell / > 
 6 ) 화면 스타일 적용 하 기 
 하나 의 앱 은 일반 적 으로 여러 개 의 화면 으로 구성 됩니다 . 
 그러나 화면 별 로 존재 하 는 각종 텍스트 박스 나 라벨 등 의 요소 등 은 사용 자 에게 보여질 때 UX 일관 성 유지 를 위해 동일 한 모습 ( 스타일 ) 으로 보여질 필요 가 있 습니다 . 
 단일 화면 내 또는 모든 화면 의 각종 요소 들 에 대한 일관 된 스타일 처리 및 변경 및 유지 보수 의 효율 성 을 위해 XAML 에서 는 ResourceDictionary 라는 스타일 관리 기능 을 제공 합니다 . 
 상기 XAML 코드 의 각종 컨트롤 마다 매번 설정 되 어 있 는 동일 스타일 지정 코드 를 공통 스타일 로 빼 고 해당 스타일 을 요소 마다 지정 하 는 방법 을 실습 해 보 겠 습니다 . 
 그리고 하나 의 화면 내 특정 요소 ( StackLayout ) 내 에서 부분 적 으로 스타일 을 적용 하 는 예시 도 적용 해 보 겠 습니다 . 
 이번 에 는 해당 스타일 을 단일 페이지 영역 이 아닌 모든 페이지 에서 전역 적 으로 사용 가능 하 게 < ResourceDictionary > 위치 를 App . xaml 페이지 로 이동 시켜 적용 해 보 겠 습니다 . 
 MVVM IN XAMARIN . FORMS 기초 편의 VIEW 다루 는 내용 은 이 정도 만 다루 도록 하 겠 습니다 . 
 MVVM IN XAMARIN . FORMS 활용 편의 VIEW 토픽 에서 는 사용 자 액션 과 상호 작용 할 수 있 는 XAML 에서 의 기술 로 Trigger , XAML 요소 에 바인딩 된 값 의 변환 처리 를 담당 하 는 Converter , Xaml 요소 의 확장 속성 을 제공 할 수 있 는 Attached Property 기능 에 대해서 알아보 도록 하 겠 습니다 . 
 다음 MVVM IN XAMARIN . FORMS 기초 편의 ViewModel 섹션 에서 는 XAML 요소 의 Bindable 속성 과 모델 의 속성 을 바인딩 할 수 있 는 메카 니즘 을 제공 하 는 INotifyChanged 와 Xaml 요소 의 이벤트 가 발생 했 을 때 뷰 모델 로 사용 자 의도 ( 명령 ) 을 전달 할 수 구조 를 제공 하 는 ICommand 에 대해 알아보 고 관련 기능 을 구현 해 보 겠 습니다 . 
 Tags : Xamarin . Forms , Model , View , ViewModel , Visual Studio , MixedCode