[Windows 8] Windows 8 store style로 e-Book 만들어보기

WPF에서 가장 중요한 요소 중 하나인 StackPanel을 다뤄보고 있습니다. 이번 포스트에서 다룰 내용은 StackPanel 중에서도 Resources라는 것을 다뤄보고 이를 활용해서 간단한 e-book을 만들어보고자 합니다. 물론 기본 예제에서는 동화 컨텐츠를 사용했지만 저는 블로그에 컨텐츠가 많으니까 그 중 하나인 Hello Windows 8이라는 포스트를 하나의 e-book으로 만들어보고자 합니다. 물론 여러분들이 컨텐츠를 만들고자 하면 그에 필요한 내용과 이미지는 다 준비하셔야 합니다.

 

 자 우선 e-book인 만큼 가장 많이 사용되는 요소는 바로 TextBlock이라는 겁니다.  물론 그냥 단순하게 화면상에 TextBlock 요소를 올려놓고 할수도 있겠지만 여러분 책을 딱 펼쳐보세요. 뭔가 느껴지시지 않나요?

 

<Programming Windows sixth edition에서 발췌>

 

딱 책을 보면 글자체라던가 글자 크기가 동일하지 않습니다. 어떤거는 Bold처리가 되어 있고 가장 중요하다고 되어 있는 부분은 글자 크기가 다릅니다. 물론 TextBlock의 속성을 주면 된다고 하지만 위 책처럼 챕터마다 반복되는 폰트나 크기가 있을거고 그걸 속성처리로 구현하자니 조금 번거러울 겁니다. 그래서 사용하는 요소가 바로 Resource라는 겁니다. WPF의 특성상 요소의 속성은 하나의 Style로 대체해서 사용할 수 있습니다. 그래서 만약 사전에 GangnamStyle이라는 스타일을 선언해놓고 TextBlock이 이걸 사용하겠다고 치면 그 스타일에 선언되어 있는 내용을 다시 xaml코드로 칠 필요가 없이 그대로 정의됩니다. 사실 Windows 8 Programming에서는 이런 Style에 대해서 정의해둔 부분이 있습니다. 그걸 확인할 수 있는 부분이 바로 Common 폴더에 들어있는 StandardStyle.xaml입니다.

 

지금 위의 이미지는 이전까지 다뤘었던 ScrollViewerStyle이 정의되어 있는 부분입니다. 그냥 Orientation이 어떻게 되어 있느냐에 따라서 알맞는 스타일을 선정해주면 해당 속성은 자동으로 결정되어 있는 것이지요. 이 부분은 사전에 다 predefine되어 있는 부분입니다. 위와 같은 스타일에 접근하려면 그냥 해당 요소의 속성안에 StaticResource를 붙여주면 됩니다. 가령 이렇게 처음 만들면 생성되는 Grid에도 이런 비슷한 형식이 정의되어 있습니다.

 

 

위의 것은 스타일의 형식이 아니지만 사용은 위와 같이 StaticResource .... 로 접근하시면 됩니다.

자 그럼 문제는 과연 사용자도 이런 스타일을 접근할 수 있느냐인데요. 앞에서 말한 Resource를 정의하면 됩니다. 자 프로젝트를 생성하시고 MainPage.xaml 상에 다음과 같이 작성해줍니다.

 

 

지금 이 MainPage를 구성하는 요소자체가 Page이기 때문에 우리가 작성할때는 Page의 속성인 Resource에 접근할 수 있습니다. 이제 위의 ScrollViewerStyle처럼 스타일을 형성하면 됩니다. 가령 titleTextStyle을 만들고 싶다하면 생성하고 그에 필요한 속성을 안에 정의하면 됩니다. 하나의 예를 들어볼까요?

 

 

이렇게 하면 titleTextStyle에만 접근해도 세부 속성이 지정된다는 것이지요. 유의할 것은 TargetType의 속성에 따라서 Property에 나오는 값들이 달라진다는 겁니다. 그래서 그걸 사전에 정의할 필요가 있습니다. 이제 style을 만드는 법을 알았으니까 여러가지를 더 만들어봅시다.

 

 

재미있는 건 다른 스타일을 가져올 수 있다는 겁니다. 위와 같이 BasedOn이란 속성을 사용하면 그 속성을 사용하면 추가적으로 속성을 더할 수 있습니다. 다르게 말하면 뿌리를 내린다고 할까요?

 그래서 보통 이런 스타일을 사용할 때는 아주 기본적인 스타일을 적용한 후에 자기에게 필요한 속성을 추가해서 사용하는 형식을 취합니다. 자 그럼 마지막으로 이미지에 대한 스타일을 정의한 후에 e-book을 만들어 보겠습니다.

 

 

 자 이제 e-book을 만들어봅시다. 하단에 있는 grid에 scrollViewer를 달고 그 안에 StackPanel을 삽입해봅시다.

 

 

이제 이안에 TextBlock을 삽입하면 됩니다. 물론 Style을 아까 말씀드린 대로 적용하면 되겠지요. 일단 저는 제일처음에 제목을 삽입하려고 합니다. 그러면 다음과 같이 작성해주면 되겠지요.

 

 

이런 식으로 하나씩 작성해나가면 됩니다. 이 후에는 여러분들이 하실 수 있겠지요? 저만의 e-book은 다음과 같이 구성됩니다.

 

 

https://dl.dropbox.com/u/96808368/Windows%208/Ebook.zip

간단하게 만들어본 e-book이었습니다. 생각보다 무척이나 간단하고 컨텐츠만 있다면 얼마든지 자신만의 책을 만들어 낼수 있다는게 좋지요