WPF 페이지의 전환 서비스
안녕하세요 DKLEE (이동규) 입니다.
이번 강좌에서는 WPF 의 NavigationService 를 사용하여 Page간의 전환을 따라하기 예제를 통해 알아보겠습니다. [그림 1]과 같이 페이지 전환이 가능하고 네비게이션바를 통해 다시 돌아갈 수 있는 기능을 살펴보겠습니다. Host 라고 이름지은 NavigationWindow 에서 Page1 과 Page2가 전환되는 예제를 구현해 보겠습니다. 개발도구는 Visual Studio 2008 입니다.
[그림 1]
자 이제 강좌를 시작하겠습니다!!
[그림 2]
[그림 3]
[그림 2]와 같이 새 프로젝트를 생성하게 됩니다. 생성이 완료되면 [그림 3]처럼 솔루션 탐색기에 나오게 됩니다. 이번 강좌에서는 Window 요소를 사용하지않기 때문에 Windows1.xaml을 삭제를 하고 새로운 Window 즉, NavigationWindow 를 만들어 보겠습니다. [그림 4] 참조
새로운 창의 이름을 'Host'로 명하여 만들고 비하인드 코드로(단축키 F7) 넘어와서 상속 클래스를 기존의 Window 에서 NavigationWindow로 [그림 5]와 같이 변경 하겠습니다.(왼쪽에서 오른쪽으로)
 |
 |
[그림 5]
위의 과정대로 상속 클래스의 변경이 완료되었다면 다자인 코드(XAML)로 다시 넘어와(단축키 Shift+F7) 몇가지 수정을 해야합니다. 아래 [그림 6]을 통해 코드의 변화를 살펴 보겠습니다. 노란색으로 강조된 부분이 변경된 코드입니다.
[그림 6]
디자인 코드를 살펴보면 우선 Window -> NavigationWindow로 변경 되었습니다. 또한 Source 속성을 추가해 줄수 있습니다. 이를 통해 최초 로드되는 페이지를 설정해 줄 수 있습니다. 이번 예제에서는 Page1 에서 Page2 로 전환을 살펴보기 위해 최초 페이지는 Page1 으로 하겠습니다. 하지만 아직 Page1 은 작성되지 않았기때문에 [그림 7]과 같이 Page1.xaml 을 추가해 보겠습니다. 이어서 Page2.xaml 또한 추가하겠습니다. (페이지 추가에 주의)
[그림 7]
다음으론 실제로 페이지 전환을 위해 링크를 만드는 방법을 두가지로 알아보겠습니다. 첫번째는 비하인드 코드에서 두번째는 다자인 코드에서 입니다. 아래 [그림 8]에서 두가지를 비교해 보았습니다만 역시 디자인 코드에서의 작성이 조금더 간결한거 같습니다. 텍스트 블럭안에 Hyperlink 를 통해 연결하였습니다.(왼쪽 - 코드비하인드 / 오른쪽 - 디자인코드)
 |
 |
[그림 8]
이제 실행해볼 일만 남았습니다. 하지만 여기서 실행하게되면 런타임시에 에러가 나오게 되는데요 이유는 App.xaml 내에 시작 Uri 기본 설정이 이전에 삭제했던 Windows1 로 되어 있기 때문입니다. App의 디자인 코드로 넘어와서 다음과 같이 수정해주셔야 합니다.
StartupUri="Host.xaml"
실행을 하여 "Go to Page 2" 를 클릭하게되면 정상적으로 다음페이지로 넘어 가게되는 모습을 볼 수 있습니다. 또한 다음페이지로 넘어가게되면 인터넷 익스플로러와 같이 네비게이션 바에 화살표가 활성화 되는것을 볼 수 있고 히스토리또한 남는 것을 확인할 수 있습니다. 보기에는 복잡해 보이지만 직접 따라 해보시면 굉장히 간단하게 구현됨을 볼 수 있습니다. 이상으로 이번 강좌를 마치겠습니다. 다음 강좌에서는 네비게이션에서 가장 중요한 데이터 전달입니다. 단순 화면만 넘겨 보여줄 프로그램은 없다고 생각됩니다. 차례대로 페이지가 넘어가면서 데이터 전달또한 필요하게 됩니다. 다음 강좌를 기대하세요^^
invalid-file
