[Windows 8] ScrollViewer의 활용

지난 포스트에서 ScrollViewer가 어떤식으로 이용되는지를 간단하게 설명했습니다. 사실 WPF가 익숙한 사람이라면 여기서나 기존의 WP7에서도 이런 방식이 쓰였다는 것을 알 수 있을 겁니다. 이번에는 그 내용을 토대로 정리해보고자 합니다. 자 우선 프로젝트를 하나 생성하고 xaml상에서 다음과 같이 작성합니다.

지금은 전체적으로 폰트의 크기를 26으로 통일한 상태입니다. 지금은 ScrollViewer안에 딱하나 StackPanel만 들어가있습니다. 물론 그 안에 뭔가를 채우려면 어떤 개체가 있어야 하는 거 아니냐 할 수 있는데 굳이 개체를 삽입하지 않고라도 충분히 표현할 수 있습니다. 우선 안에 채울 내용으로 색상 정보에 대한 RGB 값을 16진수로 표현하는 것을 다뤄보고자 합니다. 이 내용은 또 하나의 속성이지요. 이 속성값을 이용하기 위해서는 다음과 같이 처음에 정의를 해줍니다.

이렇게 하면 Colors에 정의된 141가지의 색상에 대한 정보가 properties에 저장됩니다. 그런데 아마 여러분들이 바로 쓰려면 아마 안될겁니다. 몇가지 네임스페이스를 추가해야 되는데 다음과 같습니다.

 

이제 이 정보가 있을때마다 textblock에 그 내용을 집어넣으면 됩니다. 여기서 xaml상에서 나타나지 않던 textblock이 등장합니다.

 

지나간 포스트중에 StackPanel에 자식의 개념으로 이렇게 개체를 삽입할 수 있다고 했습니다. 아마 WP7에서 다뤘던 내용이었던 것 같네요. 

2012/05/15 - [About WP7] - [WP7 개발 기초] xaml이 아닌 cs로 화면 채우기

물론 이미지 같은 것도 추가할 수 있겠지요?우선 결과는 다음과 같습니다.

 

옆에 스크롤바도 같이 표현되는 것을 알 수 있습니다. 이에 대한 속성은 지난 포스트에서 언급했던 내용이었지요.

 

그런데 이런거는 조금 단순합니다. 이런것보다 무언가 나열이 되고 계층적으로 표현이 되면 좋겠습니다. 물론 폰트 크기나 색상도 그에 맞춰서 달라지면 조금더 계층과 같이 표현되겠지요. 이렇게 하기 위해서는 하나의 리스트안에 데이터들을 넣은 후에 그 안에서 내용에 따른 분류를 해주면 좋겠지요. 이를 위한 클래스를 하나 만듭니다.

 

이렇게 하면 ClassAndSub형으로 선언한 변수는 Type과 SubClasses라는 속성을 가지고 그게 List화 됩니다.

 자 우선 다시 mainPage로 넘어와서 xaml을 조금 수정해줍니다.

 

 

이렇게 하면 Font를 구성하는 내용의 속성에 따라 크기가 유동적으로 변하게 됩니다. 이제 본격적인 코드 작성입니다. 먼저 변수 선언을 해줍니다.

 

 

필요한 리스트와 type을 지정한건데 여기서 갑자기 나온 DependencyObject는 앞에서의 Color 처럼 어떤 데이터들의 집합체입니다. 물론 의미가 있긴 하지만 여기서는 그 데이터 정보를 계층적으로 표현하는 것이 중요하기 때문에 언급하지 않겠습니다.

전체 동작은 다음과 같습니다. 우선 DependencyObject에 대한 List를 하나 만들고 거기서 분류합니다. 그 후에 중간에 만든 클래스를 이용해서 그걸 하나씩 쌓아갑니다. 즉 최종적으로 보면 나무의 형태로 쌓이게 되는 겁니다. 마지막으로 그걸 텅빈 StackPanel에 뿌려주는 것이 이번 포스트의 목적입니다. 그걸 MainPage 상에 구현하면 다음과 같습니다.

 

 

참고로 brush로 정의된 것은 선택되었을때의 색상을 다르게 하기 위한 하나의 staticResource입니다.

먼저 다룰 메서드는 AddToClassList입니다.

 

Assembly형 변수는 그냥 그냥 네임스페이스로 정의되는 것들의 구조를 갖고 있습니다. 그래서 MainPage에서는 받는 인자가 DependencyObject였지요. 이 안에 들어있는 데이터에 대한 접근 권한을 갖습니다. 그래서 이렇게 얻은 정보가 classes에 추가됩니다.

 다음은 AddToTree입니다. 하나의 나무를 형성해가는 것이죠. 여기서 앞에서 만든 클래스인 ClassAndSub가 사용됩니다.

 

 

그런데 여기서 조금 특이한게 있찌요? 바로 AddToTree 메서드가 안에 또 들어가 있는겁니다. 보통 이런 형식을 재귀함수라고 하지요. 그래서 계속 basetype이 부모클래스의 타입과 같을때까지 이런게 반복적으로 이뤄집니다. 물론 어느시점인가에는 타입이 같지 않는 때가 있을 거고 그때야 비로소 다음 메서드로 진행될겁니다.

 자 이제 가장 중요한 Display 항목입니다. 아까 앞에서는 인자를 2개 받았었는데 이는 각각의 클래스와 들여쓰기의 칸수로 사용할 겁니다.

 

하나하나가 새로운 것들의 등장입니다. Inline이라고 하는 것은 동적으로 개체의 속성을 삽입하는 역할을 합니다. 그래서 어떤 속성이 들어오든 Run이라는 것을 통해서 그대로 반영됩니다. 물론 txtblk의 속성에 직접 접근해서 적용시킬 수도 있겠지만 왜 이걸 사용했는지는 잘 모르겠네요. 아무튼 이 걸 사용하기 위해서는 또 네임스페이스가 추가되어야 합니다.

 (책에 의하면 클래스와 같은 계층적 구조를 표현하는데는 이런 방식을 쓰는게 좋다고 언급되어 있네요)

아무튼 이런식으로 사용하고 앞에서 받은 indent 값을 통해서 들여쓰기의 정도가 결정됩니다. 하지만 앞에서는 이 값을 0으로 했기에 아무 영향이 없을겁니다. 우선 DependencyObject의 속성속에 여러가지 사항이 있나봅니다. 그에 따라서 추가적으로 붙는 내용이 그 밑의 (Sealed) 입니다. 이정보는 typeInfo에 들어있는지를 조건문으로 작성한 것도 포함되어 있습니다.

 또 추가적으로 instantiated에 대한 조건도 붙나봅니다. 그래서 그 조건도 역시 작성해줍니다.

 

 

자 이제 이 정보를 stackPanel에다가 자식으로 넣어주면 앞에서 했던 것과 동일하게 나올겁니다.

 하지만 계층적으로 표현하기 위해서는 분명 자식은 부모보다 뒤에 나와있어야 할겁니다. 이를 위해서 들여쓰기가 또 진행되어야 하겠지요. 여기서 재귀함수가 또 쓰입니다.

 

 

다 됬습니다. 아까 xaml에서 ThemeFontSize를 적용했었지요. 그게 스펠링이 확실치가 않다 하시는 분은 staticResource에서 직접 찾으시면 됩니다. 속성에 fontsize를 선택하고 다음과 같이 수정해주면 되겠습니다.

 

 

결과는 다음과 같습니다.

 

 

어떤가요? 계층이 구별되는게 보이실겁니다. 그리고 들여쓰기는 8칸일겁니다. 우리가 코드에서 그렇게 정의했으니까요.

WP7에서도 이와 관련된 포스트를 했었는데 여기서도 하네요. 찰스 페졸드 씨도 아마 Windows 8의 기능을 소개한다기 보다는 기존의 WPF와 결합해서 똑같이 적용하는 경향을 유지하는 것 같습니다. 물론 효과는 같습니다만. 아무래도 디바이스가 틀린이상 사용자에게 나오는 느낌은 다른 것이겠지요. 저도 그런걸 느끼면서 조금더 다뤄볼 욕구가 생깁니다. 여기까지였습니다.

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

- 여담으로 VS 2012에서는 프로그램 전환시 현재 VS2012에서 열려있는 파일에 대한 정보가 간략하게 뜨더군요.

 

위와 같이 현재 ClassAndSub.cs가 열려있으면 현재 프로젝트 이름과 함께 위와 같이 뜹니다. 기존 VS2010에서는 볼수 없었던 것 같았는데.. 아무튼 참고바랍니다.