아래 글은 마이크로소프트 기술담당 부사장인 스캇 구슬리의 블로그에 게시된 First Look at Silverlight 2에서 소개된 튜토리얼 중에 두번째인 Part 2: Using Layout Management 번역본 입니다.
번역:오일석
실버라이트 튜토리얼 파트2: 레이아웃 컨트롤 사용하기
이 글은 실버라이트 2의 베타1을 사용한 Digg 클라이언트를 만드는 방법에 대한 8가지의 튜토리얼의 두 번째 파트입니다. 이 튜토리얼들은 순서대로 읽어야 하며 실버라이트의 핵심 프로그래밍 개념을 설명하고 있습니다.
레이아웃 관리의 이해
실버라이트와 WPF는 개발자와 디자이너가 협업을 통해서 쉽게 UI 표면에 컨트롤들을 배치시킬 수 있도록 유연한 레이아웃 관리를 지원합니다. 이 레이아웃 시스템은 절대 좌표를 이용하여 컨트롤들을 위치를 정하는 고정위치모델(fixed position model)을 지원함과 동시에 브라우저의 크기가 변해도 자동적으로 레이아웃과 컨트롤의 크기와 위치가 변경되는 동적위치모델(dynamic position model) 또한 지원합니다.
실버라이트와 WPF를 사용하는 개발자는 레이아웃 패널을 통해서 위치와 그에 포함된 컨트롤들의 크기를 변경합니다. 실버라이트 2 베타1의 빌트인 레이아웃 패널은 WPF에서 가장 일반적으로 사용하는 3가지를 포함했습니다
캔버스 패널(Canvas Panel)
캔버스 패널은 절대 좌표를 사용하여 포함된 컨트롤들의 위치를 잡는 매우 기본적인 레이아웃 패널입니다.
여러분은 "Attached Properties"라고 부르는 XAML의 특성을 이용하여 캔버스 속에 컨트롤을 위치시킬 수 있습니다. 컨트롤의 위치를 바로 상위 부모 캔버스 컨트롤의 Left, Top, Right, Bottom 좌표로 정해주는 것이죠. "Attached Properties"는 어떤 부모 패널 속에 들어있는 컨트롤들의 속성을 확장 시킬 때 매우 유용합니다. 캔버스에 "Top", "Left" 속성을 정의함으로써 버튼 또는 Canvas에 포함된 또 다른 UI 요소들에게 왼쪽과 오른쪽을 정의할 수 있는 능력을 기본적으로 추가할 수 있습니다. 이것은 버튼 클래스를 수정하거나 실제로 버튼 클래스에 속성을 추가하지 않아도 가능합니다.
캔버스 컨테이너에 버튼 두 개를 추가하고 XAML을 이용하여 아래와 같이 두 개 모두 캔버스에서 50픽셀 왼쪽으로 위치시키고 캔버스의 위에서 50과 150 픽셀 떨어뜨려 위치시켜 보겠습니다. Canvas.Left와 Canvas.Top 속성은 attached 속성의 한 예입니다.
아래와 같이 보여질 것입니다.
포함된 UI 요소가 절대 움직이지 않는 시나리오에서는 캔버스가 유용하겠지만 캔버스 안에 더 많은 컨트롤을 포함시키거나 UI가 움직이고 크기가 변하는 시나리오에서는 사용하기가 쉽지 않은 경향이 있습니다. 이러한 경우 여러분은 고통스럽게도 캔버스 안에서 UI 요소들이 움직이게 하는 코드를 스스로 만들어 버립니다. 이러한 시나리오를 위한 좀 더 나은 해결책은 스택패널과 그리드처럼 이런 일을 해주기 위해 만들어진 다른 레이아웃 패널을 사용하는 것이 일반적입니다.
스택패널(StackPanel)
스택패널 컨트롤은 열 또는 행으로 구성된 레이아웃에 컨트롤 배치를 가능하게 하는 간단한 레이아웃 패널입니다. 스택패널은 일반적으로 페이지에서 UI의 작은 섹션을 정렬하는 시나리오에서 사용됩니다.
예를 들어, 아래와 같이 XAML 파일을 이용하여 3개의 버튼을 수직으로 정렬하는데 스택패널을 사용할 수 있습니다.
실행을 하면 아래와 같이 수직으로 3개의 버튼이 자동 정렬될 것입니다.
여러분은 선택적으로 Orientation 속성을 기본값인 Vertical 대신 "Horizontal"로 변경할 수 있습니다.
이것은 아래와 같이 수평 방향으로 버튼 컨트롤들을 자동 정렬하게 합니다.
그리드 패널(Grid Panel)
그리드 패널은 가장 유연한 레이아웃 패널입니다. 이것은 여러 개의 열과 여러 개의 행을 가진 레이아웃에 컨트롤들을 배치할 수 있습니다. 개념적으로는 HTML의 테이블 태그와 유사합니다.
하지만 HTML 테이블과는 다르게 열과 행에 직접 컨트롤들을 포함 할 수 없습니다. 대신 그리드 컨트롤에 직접 선언할 수 있는 <Grid.RowDefinitions>와 <Grid.ColumnDefinitions> 속성을 이용하여 그리드의 열과 행에 대한 정의를 명시할 수 있습니다. 그런 후에 그리드에 포함될 컨트롤에서 XAML의 "Attached Property" 용법을 이용하여 그리드의 열과 행을 지정할 수 있습니다.
예를 들어, 여러분은 3개의 열과 3개의 행으로 구성된 그리드 레이아웃을 정의하고 XAML을 이용하여 4개의 버튼을 그 속에 위치시킬 수 있습니다.
그리드 레이아웃이 버튼 컨트롤들을 아래와 같이 표시할 것입니다.
그리드의 RowDefinition과 ColumnDefinition 컨트롤에서 Height="60"처럼 절대크기를 지정하는 방식 외에도 포함된 컨트롤 크기에 따라서 자동으로 열과 행의 크기를 지정하는 자동크기지정 모드 (Height="Auto")를 지원합니다. 또한 우리가 유용하게 사용할 만한 최소크기와 최대크기 제약사항을 지정할 수도 있습니다.
그리드의 RowDefinitions와 ColumnDefinitions는 "Proportional Sizing"이라는 기능을 지원합니다. 이것은 그리드의 열과 행을 크기를 서로 비례하는 관계로 설정할 수 있습니다. 예를 들어 두 번째 열은 첫 번째 열보다 2배 크기의 비율로 설정할 수 있습니다.
여러분은 그리드 레이아웃이 엄청난 유용성과 유연성을 가지고 있다는 것을 발견할 것이고 아마도 여러분이 가장 많이 사용하게 될 레이아웃 컨트롤이 될 것입니다.
레이아웃 패널을 사용하여 Digg 페이지 만들기
Digg 샘플 프로그램을 만드는 목적은 아래와 같은 모양을 가진 페이지를 만드는 것임을 기억하고 계시죠.
위 그림과 같은 레이아웃을 만들기 위해서 먼저 두 개의 RowDefinitions를 가진 그리드 패널을 추가합니다. 첫 번째 열은 40 픽셀의 크기를 가지며 두 번째는 Height="*"를 사용하여 나머지 공간을 채웁니다.
팁: 제가 "ShowGrideLines"속성을 "True"로 설정한 것을 보세요. 이것은 런타임에 그리드의 열과 행에 대한 영역을 쉽게 확인할 수 있게 해줍니다.
그런 후에 두 번째 그리드 패널 컨트롤을 루트패널 컨트롤의 첫 번째 열의 자식 컨트롤로 포함시킵니다. 그리고 이것을 제일 위 열(헤더)을 정의하는데 사용합니다. 여기에 타이틀, 검색 텍스트박스, 검색 버튼 이렇게 3개의 행을 만들어 줍니다.
여기까지가 Digg 검색 페이지의 기본 레이아웃 작업입니다.
노트: 그리드 레이아웃을 포개는 방법 말고도 3개의 행과 2개의 열을 가진 하나의 그리드 레이아웃을 사용하고 여러 행을 합치는 ColSpan/RowSpan 기능을 이용할 수 있습니다. 이것은 HTML 테이블의 방법과 유사합니다. 저는 여러분이 따라 하기 쉬울 것 같아서 그리드 레이아웃을 포개는 방법을 선택했습니다.
레이아웃 설정을 마쳤고 이제는 컨트롤을 추가할 차례입니다.
헤더에는 CornerRadius를 10으로 설정해서 둥근 모서리를 가지고 있는 빌트인 <Border> 컨트롤을 사용할 것이고 타이틀로 쓸 텍스트를 추가할 것입니다. 두 번째 행에는 검색용 텍스트박스를 만들기 위해 <WatermarkedTextBox> 컨트롤을 사용할 것입니다. 그리고 세 번째 열에 검색 <Button>을 넣을 것입니다. 두 번째 열에는 나중에 검색 결과를 표시하기 위한 텍스트가 들어갈 자리를 만들어 넣을 것입니다.
노트: 아래는 스타일 정보(FontSize, Colors, Margins 등) 컨트롤에 직접 정의했습니다. 이 튜토리얼 시리즈의 마지막에는 이러한 스타일들을 뽑아내서 전체 응용프로그램에서 재사용 가능한 분리된 파일(CSS 파일)에 모으는 방법을 보여드리겠습니다.
이제 프로그램을 실행하면 아래와 같이 보일 것입니다.
크기를 동적으로 변화시키기
위에서 보는 페이지의 XAML파일에서 알아야 할 것은 최상위 컨트롤은 여전히 고정된 너비와 높이를 가지고 있다는 것입니다.
실버라이트 응용프로그램을 위와 같이 설정하면 언제나 고정된 크기로 남아 있습니다. 브라우저를 크게 늘려보면 크기가 고정된 모습이 볼 수 있습니다.
HTML 페이지 영역 안에 고정된 크기로 포함시킨 응용프로그램은 특정 시나리오에는 적합할지 모르지만 Digg 검색 프로그램에서는 브라우저와 함께 자동으로 크기와 레이아웃의 흐름이 변경되는 경험을 원합니다. HTML 페이지가 그런 것처럼 말이죠.
좋은 소식은 그렇게 구현하기 쉽다는 것입니다. 루트 컨트롤에서 단지 Width와 Height 속성을 제거하기만 하면 됩니다.
이제 우리의 실버라이트 응용프로그램은 HTML 컨테이너에 꽉 차게 자동으로 확장될 것입니다. 우리가 테스트하고 있는 SilverlightTestPage.html 파일에서 실버라이트 컨트롤을 포함하는 HTML <div> 태그가 100% 너비와 높이를 가지고 있다고 CSS 파일에 설정되어 있기 때문에 Digg 클라이언트는 브라우저 전체를 채울 것입니다.
헤더에 포함되어 있는 컨트롤들이 브라우저의 너비에 따라서 자동으로 크기와 레이아웃의 흐름이 어떻게 변경되는지 보시기 바랍니다.
브라우저를 축소시킬 때 워터마크 텍스트박스와 검색 버튼은 그리트 컨테이너의 행이 고정된 너비로 설정되어 있기 때문에 같은 크기로 머물러 있습니다. "Digg Search" 타이틀을 포함하고 있는 <Border> 컨트롤은 브라우저를 축소시킬 때 자동으로 크기가 변경됩니다. 왜냐하면 그리드 레이아웃의 행이 Width="*"로 설정되어 있기 때문입니다.
우리는 이러한 레이아웃 흐름을 만들기 위해서 한 줄의 코드도 사용하지 않았습니다. 그리드 컨테이너와 레이아웃 시스템이 우리를 위해 모든 동적인 크기변경과 레이아웃의 흐름의 변화를 관리해주고 있습니다.
다음 단계
우리는 지금까지 Digg 클라이언트의 기본 레이아웃 구조와 헤더를 만들었습니다.
다음 단계는 검색을 구현하여 사용자가 어떤 주제로 검색을 실행 했을 때 Digg.com에서 실제 스토리 컨텐츠를 가져와 보겠습니다.
다음 단계 Using Networking to Retrieve Data and Populate a DataGrid (한글 번역본)로 넘어가세요.
Published Friday, February 22, 2008 5:55 AM by ScottGu