WPF 1주일만에 끝내기 - 실습 #2 NavigationService.Navigate

WPF 1주일만에 끝내기 - 실습 #2
 NavigationService.Navigate

 2번째 실습을 풀이해 보도록 하겠습니다. 이번에는 실습#1에서 만들었던 컨텍트페이지를 메뉴에 연동해서 동작시키도록 하겠습니다.

 위와 같이 3개의 메뉴(버튼)가 존재하며 Email Support 버튼을 클릭하게 되면 실습1에서 만들었던 페이지로 이동되게 하면됩니다. 이때 페이지 이동기법은 예시로 인터넷 사이트에서 링크 클릭시 해당 페이지로 이동하는 것과 동일하다고 생각하시면되겠습니다.

 일단 메뉴페이지를 추가해서 위와같이 드래그엔 드롭으로 버튼과 텍스트 블록을 추가해주시기바랍니다. 그리고 만얀에 실행한다면 크기가 자동으로 변환되지 않는 문제가 발생합니다.

그래서 위와 같이 코드를 작성해야합니다. Grid는 기본적으로 컨텐츠를 꽉 채워서 표시하기 때문에 Row(행)과 Col(열) 속성을 사용해서 사용하게 됩니다.

 이때 그리드의 RowDefinitions로 행을 정의해줍니다. Height속성으로 높이 설정을 해줄 수 있습니다. 마찬가지로 Col정의도 가능합니다.(col은 Width속성 지정가능)

 그리고 버튼을 추가합니다. 이때 Grid.Row로 행을 지정하며 Column속성으로 열을 지정하시면됩니다. 우리는 1행에 3개의 버튼을 추가할 것이므로 0,1,2 순으로 설정해주시면되겠습니다.

 그런데 지금은 2x3 행렬이기 때문에 2행에도 3칸의 열이 생기게됩니다. 우리는 3개의 칸을 통합해서 텍스트블록을 나타내면 되므로 이럴 때는 Grid.ColumSpan을 사용해서 3칸을 병합해주면됩니다. (html에서 하던거랑 똑같죠?)

 그리고 Email support를 사용자가 클릭하면 이벤트가 발생하도록 하기위해서 버튼을 클릭하고 위 사진과 같이 이벤트 중에서 Click이벤트를 더블 클릭하여 추가해줍니다. (또는 해당 버튼을 디자이너편집기에서 더블 클릭해도 이벤트가 자동으로 생성됩니다.)

 그럼 위와같이 C#코드에 버튼클릭이벤트가 추가되는데 클릭시에 우리가 실습1에서 만들었던 Contact로 넘어가면되므로, NavigationService.Navigate를 사용해서 해당 파일의 경로를 입력해서 전달합니다. (이때 '/'를사용해도 되지만 심심해서 문자열앞에 @를 추가한뒤 \를 사용해 주었습니다. 문자열앞에 를 붙이면 \의 특수성질이 무시되는 C#문법 기억나시죠?)

그리고 마지막으로 메인윈도우에서 Menu가 기본으로 뜨도록 Frame을 설정해 주시면되겠습니다.

 그리고 실행시켜주면, 처음에는 메뉴페이지가 뜨며 이메인서포트번튼을 클릭하게되면 우리가 작성했던 Contact페이지로 넘어가는 것을 확일 할 수 있습니다. 그리고 웹브라우저와 마찬가지로 뒤로버튼을 통해서 바로 메뉴로 되돌아갈 수 있습니다.. 아주 엄청나군요. Winform이나 MFC 등으로 개발을 했다면 좀 더 귀찮은 작업이 필요했을텐데 말이죠.

 그럼 다음 실습으로 넘어가 보도록하겠습니다. 참고로 위에 코드에서 주석된 부분과, 설명되지않은 Xaml파일은 추가 학습하면 도움이 되는 내용이므로 첨부파일을 통해서 연습해 보시기바랍니다.

BikeShop - 2 - 메뉴페이지.zip