WP7 개발 기초 - 기본 네비게이션

SilverlightSimpleNavigation.zip

안녕하세요?

방학을 맞아 또 다시 이어나가고자 합니다.
아예 컴퓨터도 포멧하고 새로운 마음에 진행해보렵니다.

우선 다시 시작하게 될 파트는 페졸드 책에서도 언급되고 있는 페이지 네비게이션 파트이며 여기에서는 tombstoning이라는 주제가 들어가 있어서 한번씩 따라가면서 진행해보겠습니다.

일단 실버라이트 프로젝트로 SilverlightSimpleNavigation이란 이름으로 프로젝트를 설정합니다.
그리고 다음과 같이 코드를 짭니다.

다들 아시다시피 현재는 MainPage.xaml 내에서 Title을 수정하고 있는 겁니다. 그냥 자기가 하고 싶은대로 타이틀을 삽입하면 되지요.

그리고 본격적으로 ManipulationStarted 이벤트를 처리할 핸들러가 필요합니다. 책에서는 OnTextBlockManipulationStarted라는 이름으로 지정되어있습니다.

가운데에 글이 오게끔 설정하고 OnTextBlockManipulationStarted 란 이름으로 핸들러를 삽입했습니다. 여기서 기존에 보지 못한 TextBlock 내 구문이 바로 padding일텐데 한번 이걸 선택한후 디자이너 뷰로 보겠습니다.

제가 생각하는 게 맞다면 아마 padding 이라는 구문은 글자가 없는데도 있게끔 TextBlock을 채워주는 기능을 하는 것 같습니다. 지금 앞에서 0,34로 지정했으니까 가로 여백은 0 픽셀, 세로 여백은 위아래로 34픽셀씩 주는 기능일듯합니다.

자 이제 단순히 이벤트 핸들러 변수만 지정했으니 코드로 이를 동작하게 될 구문을 짜야 됩니다.

우선 전반적인 기능은 다음과 같습니다.
 
TextBlock의 Padding 부분 이외를 누르면 색이 랜덤하게 설정되고 TextBlock을 누르게 되면 NavigationServie.Navigate에서 원하는 동작을 하게끔 합니다. 여기서는 SecondPage라는 xaml을 따로 만들어서 거기로 넘어가는 걸 확인하고자 했습니다.

밑에 ManipulationCompleted는 앞에서 말한것처럼 이외 부분을 눌렀을때 색이 랜덤하게 변하게 하기 위한 기법입니다. 여기가 활성화 된다면 ContentPanel의 배경색이 랜덤하게 변하겠지요.

그런데 위의 코드에서도 잘못되어있는게 있고 여러분들도 주의해야 될게 있습니다. 바로 xaml파일을 지정하는 곳입니다. 위와 같이 표현할게 아니라

와 같이 프로젝트 내에서 옮겨다녀야 하기 때문에 파일처리를 해줘야 하는 겁니다.

자 그럼 간단하게 SecondPage를 만들어서 프로젝트내에 삽입합니다.
그리고 mainPage와의 변화를 주기 위해서 Title을 second page로 바꿔 보겠습니다.

이번에는 TextBlock을 삽입해서 누르면 Mainpage로 돌아가게 하는 기능을 넣겠습니다.
물론 코드는 앞에서 말한 것과 거의 유사합니다.

 

차이가 있는 곳이라면 밑줄쳐진 GoBack이란 메서드네요. GoBack의 기능은 기본적으로 이 페이지로 이동하기 전으로 되돌아가게 하는 겁니다. 따라서 SecondPage에서 이 메서드 실행되면 다시 MainPage로 돌아가게 되는거지요

실행 결과는 다음과 같습니다.

보는 것과 같이 누르면 색깔이 랜덤하게도 변하고, padding 부분을 인지해서 다음 페이지로 넘어가는 것까지 해봤습니다.

그런데 문득 고민을 해보는건 GoBack을 쓰지말고 mainPage에서 했던 것처럼 Navigate로 하면 어떨까요?
아마 제 생각에는.... 될듯합니다. 일단 지금은 예시로 두개 페이지만 두고 했기에 GoBack으로 처리했지
여러 페이지가 된다면 Navigate를 써서 여러개를 옮겨 다닐 수 있을거 같단 생각을 해봅니다.

이제 이 부분을 고려해보고자 합니다. Second page로 넘어갈때를 유심히 보시면 main을 넘어갔다가 second로 갔을때 배경색이 이전의 second을 유지하고 있습니다. 왜 그럴까요?

이를 책에서는 SecondPage class 내의 새 인스터스라고 설명해놨습니다.
책에 있는 있는 내용을 인용하자면 silverlight 내에 페이지를 옮겨 다니는 네비게이션 시스템은 스택 구조를 택합니다. 컴퓨터 전공인 분들은 아시겠지만 스택이라함은 Last-in-First-Out을 택하는 알고리즘입니다. 흔히 마지막에 넣은걸 빼야 그전에 집어넣은 걸 뺄수 있는 구조라고 보시면 될거 같습니다.

그런데 NavigationService의 GoBack 메서드는 Navigate와는 다르게 인스턴스를 생성하는게 아니라 그대로 뒤로 돌아가는 기능을 수행합니다. 하드웨어상의 back 버튼과 동일한 기능을 하는 것이지요. 프로젝트를 디버깅하고 한참돌리고 난후 back 버튼을 눌러보면 아시겠지만 딱 두번이 수행되고 메뉴로 넘어갑니다. 이는 navigate를 호출할때 이전 page가 stack상에 놓이고 또다른 page가 그 위로 올라가는 겁니다. 그래서 back 버튼을 누르면서 stack에서 빠져나가게 됩니다. 아무것도 없는 상태에서 back을 누르게 되면 당연히 메뉴로 넘어가야 정상이 됩니다.

그럼 이부분을 조금만 수정해보겠습니다. 앞에서 잠깐 언급한 Navigate 방법을 적용하면 다음과 같습니다.

이렇게 하면 Navigation 시스템이 조금 바뀝니다. main에서 Second로 넘어갈때도 또다른 인스턴스가 생성되어서 차곡차곡 쌓이게 됩니다. 그래서 back을 눌렀을때도 각각의 인스턴스에 대한 동작이 나타나게 됩니다. 실행장면은 다음과 같습니다.

지금까지 전반적인 Navigation의 구성과 Stack 으로 인스턴스가 쌓이는 것까지 확인해보았습니다.
이것만 할 수 있다면 page별로 지정해서 넘어가거나 동작을 달리하는게 가능하겠지요

다음 시간에는 페이지 상으로 받은 데이터를 다른 페이지로 넘기는 것에 대해 다뤄보겠습니다.