3-1-1.컨트롤 계층

윈도우폰은 그래픽 기반의 GUI 운영체제이다. 문자를 입력할 수 있는 하드웨어 키보드가 없고 터치를 주로 사용하므로 문자 입력보다는 그래픽 위주가 될 수밖에 없다. 어느 화면을 보나 예쁜 모양의 이미지나 도형들로 장식되어 있으며 버튼, 리스트 박스, 텍스트 박스 같은 컨트롤들로 채워져 있다. 심지어 문자열들도 텍스트 블록 컨트롤로 출력하며 작도 메서드로 직접 그리는 경우가 거의 없다.

대신 컨트롤들이 사용자에게 정보를 보여주고 터치를 통해 입력을 받아들인다. 사용자를 대면하는 주된 장치가 바로 컨트롤이다. 그래서 컨트롤을 배치하여 간결하고 직관적인 화면을 디자인하는 기술은 윈도우폰 앱 개발의 가장 기초에 해당한다. 보여줄 정보에 적합한 컨트롤을 선정하고 어느 환경에서나 일관된 모양을 가지도록 예쁘게 배치하는 것이 관건이다. 이번 장과 다음 장은 이런 기술들에 대해 연구해 보기로 한다.

윈도우폰의 기반 플랫폼인 실버라이트는 객체 지향 클래스 라이브러리를 제공하며 모든 컨트롤은 클래스 계층속에 존재한다. 홀로 존재하는 것이 아니라 다른 컨트롤과 부모 자식 관계를 구성하여 체계를 이룬다. 따라서 개별 컨트롤을 따로 공부하는 것보다 전체적인 클래스 계층을 연구하고 구조를 파악하는 것이 차후의 학습이나 실제 개발에도 아주 유용하다.

전체 클래스 계층은 상당히 복잡하지만 컨트롤과 관련된 상위 계층만 정리해 보면 다음과 같다. 모바일 실버라이트의 클래스 계층은 상위 프레임워크인 WPF나 웹용 실버라이트의 계층도와는 약간 다르다. 이 계층도는 실버라이트의 전반적인 클래스 계층 체계를 보여주며 개발중에 항상 참고해야 할 정도로 중요하다. 가능하다면 외워 두는 것이 좋으며 대충이라도 전체적인 구조를 익혀 두도록 하자.

계층의 최상위에 Object가 있고 Object로부터 무수히 많은 클래스들이 가지를 뻗어가며 상속된다. 클래스 계층을 따라 위에서부터 순서대로 속성들을 연구해 보자. 부모 클래스의 멤버들은 자식 클래스로 상속되므로 부모의 멤버들을 미리 연구해 두면 자식 클래스를 훨씬 더 빠르고 정확하게 이해할 수 있다.

모든 닷넷 클래스는 Object로부터 파생되며 컨트롤들도 마찬가지이다. Object는 닷넷의 루트 클래스이며 객체 비교를 위한 Equals 메서드, 객체 출력을 위한 ToString 메서드 등 가장 기본적인 메서드를 제공한다. Object 자체는 하위 클래스를 위한 부모로 사용될 뿐 별다른 기능은 없다. 계산이나 정보 저장을 위한 간단한 자료 구조 클래스가 필요하다면 Object로부터 상속을 받아 필요한 멤버를 추가한다.

DependencyObject는 실버라이트의 종속 속성(dependency property) 기능을 관리하는 클래스로서 종속 속성을 구현하는 정적 메서드(GetValue, SetValue)를 제공한다. 종속 속성은 바인딩, 애니메이션 등 윈도우폰 개발의 주요 기술을 구현하는 핵심 기능이다. 종속 속성과 관련 기술에 대한 상세한 내용은 차후에 따로 알아보기로 하되 일단은 거의 모든 컨트롤이 이 기능을 활용한다는 점만 알아 두자.

그래서 컨트롤뿐만 아니라 실버라이트의 주요 클래스들은 모두 DependencyObject로부터 파생된다. 모든 컨트롤의 부모인 UIElement는 물론이고 컨트롤에 속성 집합을 제공하는 스타일, 배경을 채색하는 브러시, 궤적 정보를 저장하는 지오메트리 등 무수히 많은 자식 클래스들이 파생된다. Object가 닷넷의 루트 클래스라면 DependencyObject는 실버라이트의 루트 클래스에 해당된다.

UIElement는 화면에 보이고 입력을 받아들이는 역할을 하며 이름 그대로 사용자와의 인터페이스(UI)를 구성하는 기본 요소(Element)이다. 다음 도표는 UIElement의 주요 속성을 정리한 것이다. 처음 공부할 때는 필수적으로 이해해야 하는 속성만 설명하므로 전체 속성은 레퍼런스를 참조하기 바란다. 대부분의 속성은 읽고 쓸 수 있으므로 값을 지정하는 것뿐만 아니라 조사하는 것도 가능하다.

속성	설명
IsHitTestVisible	터치 입력을 받을 것인가를 의미한다.
Opacity	불투명 정도이다. 0은 투명이며 1은 불투명이다. 디폴트는 1이다.
Visibility	컨트롤의 보임 여부를 지정한다.
RenderTransform	변환 방법을 지정하는 객체이다.
RenderTransformOrigin	변환의 원점을 지정한다.
AllowDrop	드롭 타겟으로 사용되는가를 지정한다.

화면에 보이므로 보임 여부와 불투명 정도를 지정하는 속성이 제공되며 회전이나 확대를 위한 변환 객체를 지정할 수 있다. 또한 입력을 받아들이는 도구이므로 터치 입력을 받을 것인지 아닌지를 지정하는 속성도 제공된다. 그래서 UIElement로부터 파생되는 모든 컨트롤은 숨길 수 있고 반투명하게 출력할 수 있으며 터치 입력을 받아들일 수 있다.

UIElement로부터 파생되는 FrameworkElement는 여기에 몇 가지 속성을 추가하여 좀 더 구체적이고 기능이 많다. 레이아웃을 처리하여 객체의 계층을 구성하며 데이터 바인딩 관련 기능을 제공하고 생명 주기를 관리한다. FrameworkElement는 UIElement의 유일한 서브 클래스이며 형제 클래스가 없다. 몇 가지 속성이 추가되어 있지만 모든 컨트롤의 루트라는 점에서 사실상 UIElement와 동일하며 이런 식이라면 굳이 계층을 구성할 필요가 없어 보인다.

하지만 커스텀 컨트롤 제작시 좀 더 단순한 상위 클래스로부터 상속받기 위해 두 클래스가 계층을 이루도록 되어 있다. UIElement는 커스텀 컨트롤 제작을 위한 상속 출발점으로 사용하기 위해 존재한다. 그러나 이 기법은 WPF에서만 해당되며 실버라이트에는 해당되지 않는다. 즉 실버라이트에서는 UIElement와 FrameworkElement를 구분해야 할 아무런 이유가 없는 셈이다.

그럼에도 불구하고 WPF의 계층 구조를 물려받다 보니 이렇게 될 수밖에 없다. WPF와 웹용 실버라이트를 간략화한 모바일용 실버라이트에는 상위 프레임워크의 영향을 받는 부분이 있다. 모바일만을 위해 새로 만든 것이 아니라 다른 프레임워크를 가져와 쓰다 보니 구조상 자유도가 떨어질 수밖에 없다. 태생적인 한계로 인해 모바일용 라이브러리의 입장에서는 비상식적이고 불합리해 보이는 것들이 가끔 존재한다. 추가된 주요 속성은 다음과 같다.

속성	설명
Name	객체의 이름을 정의한다. 코드에서 참조하려면 이름을 반드시 지정해야 한다. 명칭이므로 자유롭게 이름을 줄 수 있지만 명칭 규칙에 맞아야 한다. 코드에서 참조하지 않으면 생략해도 무방하다.
Width, Height	폭과 높이이다.
MinWidth, MinHeight	가능한 최대 크기를 지정한다.
MaxWidth, MaxHeight	가능한 최소 크기를 지정한다.
ActualWidth, ActualHeight	실제 그려진 폭과 높이이다. 그려진 후에 결정된다.
HorizontalAlignment	수평 정렬 방식을 지정한다. Left, Center, Right, Stretch 중 하나이며 디폴트는 Stretch이다.
VerticalAlignment	수직 정렬 방식을 지정한다. Top, Center, Bottom, Stretch 중 하나이며 디폴트는 Stretch이다.
Margin	바깥 여백을 지정한다. 4면에 모두 같은 여백을 줄 수도 있고 각 변마다 여백을 각각 지정할 수도 있다.

화면에 배치되므로 크기와 정렬 관련 속성을 가지고 인접 컨트롤과 간격을 띄우기 위한 마진 속성이 제공된다. Name 속성은 코드에서 참조할 컨트롤의 이름을 지정하며 이름이 있어야 코드에서 컨트롤을 조작할 수 있다. Name 속성은 FrameworkElement 클래스 소속이므로 다른 계층의 객체에는 이 속성이 없다. 예를 들어 DependencyObject로부터 상속된 Brush 객체는 Name 속성으로 이름을 지정할 수 없다. 이럴 경우는 x:Name 속성을 대신 사용한다. 두 속성의 차이점은 다음과 같다.

■ Name : 간단하지만 FrameworkElement 서브 클래스의 객체에만 사용할 수 있어 범용성이 떨어진다.

■ x:Name : 모든 객체에 이름을 붙일 수 있지만 x: 접두를 붙이는 것이 귀찮고 소스의 모양새도 좋지 못하다.

두 속성 모두 이름을 부여한다는 기능적인 면은 동일하다. 이름을 줄 수 있는 모든 클래스의 최상위에 Name 속성을 둔다면 자연스럽지만 클래스 계층이 애매하다 보니 이런 문제가 발생하는 것이다. 이 책에서는 가급적이면 간략한 Name 속성을 사용하고 불가피할 경우에만 x:Name을 사용하기로 한다.

FrameworkElement로부터 Control과 Panel이 파생된다. Control로부터 파생되는 각종 컨트롤에 대해서는 다음 장에서 연구해 보기로 하고 이번 장에서는 컨트롤을 배치하는 Panel 클래스와 그 서브 클래스들 위주로 연구할 것이다. 즉, 컨트롤을 사용하는 방법에 앞서 컨트롤을 화면에 배치하는 방법부터 공부한다. 컨트롤을 잘 사용하기 위해서는 화면의 제 위치에 원하는 크기대로 놓을 수 있어야 한다.

Panel은 일정한 규칙에 따라 자식 컨트롤을 화면에 배치하는 레이아웃 역할을 한다. 컨트롤을 놓는 판이라고 이해하면 된다. Panel 자체는 추상 클래스이며 그 파생 클래스인 StackPanel, Grid, Canvas 등이 실제로 자식들을 배치한다. 마법사가 만든 프로젝트를 보면 그리드와 스택 패널이 사용되었음을 알 수 있다. 패널 클래스별로 컨트롤을 배치하는 방법이 다르며 고유의 규칙에 따라 컨트롤의 그룹을 구성한다.

다음은 Panel 클래스의 주요 속성이다. 모양이나 크기와 관련된 대부분의 속성을 부모로부터 상속받으므로 고유 속성은 많지 않다. 물론 Panel로부터 파생되는 서브 클래스들은 배치 방법에 따라 추가 속성을 더 가진다.

속성	설명
Background	배경을 칠할 브러시를 지정한다. #RRGGBB 형식으로 색상의 강도를 지정하거나 Red, Blue 같은 이름으로 지정한다.
Children	차일드 컨트롤의 컬렉션이다.

눈에 보이므로 배경 색상을 가지고 차일드 컨트롤의 목록을 보유한다. Children은 UIElementCollection 타입이며 UIElement로부터 파생되는 컨트롤의 목록을 관리한다. Count 프로퍼티로 개수를 조사할 수 있으며 Add, Remove, Clear 메서드로 실행중에 차일드의 목록을 첨삭할 수 있다. 차일드의 목록을 멤버로 가짐으로써 패널이 컨트롤의 컨테이너가 되는 것이다.