KTour 0.6 동영상 & 소스 - 상세 페이지 구현

 

* 목표 화면

 

 

 

 

* 행사 상세 정보

1. 행사 상세 페이지 구성 정보

- 사용할 서비스, 공통정보 조회, 소개정보 조회, 반복정보 조회, 이미지 정보 조회(여기서는 공통정보 조회만 사용)

- 화면 구성 - 목표화면, pptx 화면

2. 공통정보 조회 서비스 추가, 공통정보 결과 모델 생성

- 조회 파라메터 : 전체 Y

http://youtu.be/YQ0QROOarl0

 

3. 행사 이야기 페이지에서 행사 상세 페이지로 네비게이션 기능 추가, 상세 뷰, 상세 뷰모델 추가

- 어떤 화면에서라도 컨텐츠ID, 컨텐츠TypeID 2가지만 넘겨주면 각 상세 화면에서 구성해서 보여주도록 만듬

http://youtu.be/iVbwTLCn_PA

http://youtu.be/EuE1BppGBr0

 

4. 상세 뷰모델 디자인 타임 데이터 작업, 상세 뷰 디자인

그리드뷰를 이용해서 컨텐츠를 어떻게 보여줄 것인지..고민..

* 처음 생각

GroupModel에 CodeModel을 이용해서 몇개의 그룹을 만든다.

- 소개그룹, 사진그룹, 지도그룹, ...

- 각 그룹안에는 CodeModel 타이틀에 소제목, ValueString에 내용을 채워서 넣어 주고

- 아이템 템플릿에서 소제목, 내용으로 구성된 아이템을 생성한다.

- 이때 가로 크기는 지정하고 세로크기를 지정하지 않는다. 어떻게 표시가 될지는 잘 모르겠다;;;

- 네비게이트 될때 pageState에 뷰모델 저장해 놓았다가, pageBack되면 복구해줌

http://youtu.be/qniNp3vsqho

http://youtu.be/2dUuT3BySI4

* 30번까지 진행했는데 문제가 있어서 생각 변경

- 소개의 경우 1개의 아이템에 소개 텍스트를 다 집어 넣고 ItemTemplateSelector를 이용해서 다르게 표현

- 소개 텍스트를 RichTextBlock, RichTextColumns를 이용해서 표시 -> 디자인 타임 데이터 완성

http://youtu.be/gPRSuhL6BjM

 

5. 런타임 데이터를 이용해서 화면 구성 & 디버깅 & 마무리 작업

http://youtu.be/KIGX7Ch6W70

http://youtu.be/jVprxiIM8rQ

 

6. 최종 화면

 

 

 

7. 소스

KTour_0.6.zip

다운로드