아래 글은 마이크로소프트 기술담당 부사장인 스캇 구슬리의 블로그에 게시된 First Look at Silverlight 2의 튜토리얼 중에 여섯 번째인 Using User Controls to Implement Master/Detail Scenarios의 번역본 입니다. 

번역 : 오일석

실버라이트 튜토리얼 파트 6: 사용자 정의 컨트롤을 사용하여 Master/Detail 시나리오 구현하기

이 글은 실버라이트 2의 베타1을 사용한 Digg 클라이언트를 만드는 방법에 대한 8가지의 튜토리얼의 여섯 번째 파트입니다. 이 튜토리얼들은 순서대로 읽어야 하며 실버라이트의 핵심 프로그래밍 개념을 설명하고 있습니다.

사용자 정의 컨트롤이란?

실버라이트와 WPF의 기본적인 디자인 목표는 재사용 가능한 컨트롤에 UI 기능을 쉽게 캡슐화 할 수 있게 만들어 주는 것입니다. 개발자는 컨트롤 베이스 클래스 또는 TextBox나 Button과 같은 기존에 존재하는 컨트롤의 클래스를 상속해서 새로운 사용자 정의 컨트롤을 구현할 수 있습니다. 또 다른 방법은 기존 컨트롤의 UI를 XAML 파일에서 합성해서 만드는 방법입니다.

Digg 프로그램에서는 사용자가 특정 주제를 검색하고 그와 관련된 스토리의 리스트를 표시하여 스토리에 대한 보다 자세한 내용을 보기 위해서 선택 가능한 Master/Detail 시나리오를 만들고 싶습니다. 예를 들어, 아래 리스트에서 스토리를 선택하면

그 스토리에 대한 자세한 내용이 들어있는 대화상자를 띄워줍니다.

우리는 리스트 박스의 스토리를 선택할 때 보여줄 상세 내용을 "StoryDetailsView"라는 사용자 정의 컨트롤을 이용하여 구현할 것입니다.

StoryDetailsView 사용자 정의 컨트롤 구현하기

비주얼 스튜디오의 DiggSample 프로젝트를 오른쪽 마우스로 클릭하고 "Add New Item"을 선택합니다. New Item 대화상자가 띄워지면 UserControl 템플릿을 선택하고 새 컨트롤의 이름을 "StoryDetailsView"라고 해줍니다.

그러면 DiggSample 프로젝트에 " StoryDetailsView"라는 이름의 사용자 정의 컨트롤이 추가됩니다.

사용자 정의 컨트롤을 사용하여 모달 대화상자 만들기

StoryDetailsView 컨트롤을 사용하여 스토리의 상세 내용을 담은 대화상자를 효과적으로 표시해 보겠습니다. 스토리의 상세정보가 표시될 때는 페이지의 다른 컨텐츠 보다 상위에 표시되게 하고 그 상세정보를 닫기 전에는 다른 일을 하지 못하게 하고 싶습니다.

모달 대화상자와 비슷하게 행동하도록 만드는 방법은 몇 가지 있습니다. 이번 시나리오에서는 우선 StoryDetailsView.xaml을 열어서 아래의 XAML 내용을 추가하면서 시작해 보겠습니다.

위에서 첫 번째 <Rectangle> 컨트롤은 스크린 위의 모든 공간을 덮을 수 있게 설정되었습니다. 배경색은 아래에서 보듯이 투명도(Opacity)를 .765로 했기 때문에 약간 투명한 회색입니다. 두 번째 <Border> 컨트롤은 Rectangle 컨트롤의 위에 올라가고 고정된 크기를 가지게 됩니다. 바탕색은 파란색이고 닫기 버튼을 포함하고 있습니다.

StoryDetailsView 사용자 정의 컨트롤은 우선 아래처럼 표시될 것입니다.

사용자 정의 컨트롤의 코드 비하인드 파일에 "CloseBtn_Click" 이벤트 핸들러를 구현 합니다. 클릭을 하면 닫기 버튼의 이벤트 핸들러는 사용자 정의 컨트롤의 Visibility 속성을 "Collapsed"로 설정 합니다. 이렇게 하면 컨트롤이 사라지고 그 아래에 있는 컨텐츠가 다시 보이게 됩니다.

StoryDetailsView 표기하기

StoryDetailsView 사용자 정의 컨트롤이 스크린에 표시되게 하는 쉬운 방법은 단순히 Page.xaml 파일의 아래에 추가하는 것입니다. 그리고 visibility의 기본 값을 "Collapsed"로 설정하여 프로그램이 처음에 로드되면 보이지 않게 만듭니다.

그런 다음 Page.xaml의 코드 비하인드 클래스에서 리스트박스의 "SelectionChanged" 이벤트를 처리합니다.

사용자가 리스트의 특정 스토리를 선택하면 리스트박스의 SelectionChanged 이벤트 핸들러에서 StoryDetailsView 컨트롤의 Visibility 속성을 Visible로 설정해 줍니다.

이렇게 하면 모달 사용자 정의 컨트롤 대화상자가 표시될 것입니다. 사용자가 "Close"버튼을 클릭하면 대화상자는 사라지고 사용자는 다른 스토리를 선택 가능하며 그 과정을 반복 할 수 있습니다.

스토리 데이터를 StoryDetailsView 사용자 정의 컨트롤에 전달하기

마침내 사용자가 리스트박스에서 선택한 스토리에 대한 자세한 정보를 StoryDetailsView 컨트롤에 표시할 차례입니다.

리스트박스의 페이지의 코드 비하인드에 있는 "SelectionChanged" 이벤트 핸들러에서 리스트박스의 "SelectedItem" 속성을 사용하여 선택된 열과 연결된 DiggStory 데이터 오브젝트에 접근 할 수 있습니다.

StoryDetailsView 컨트롤에 DiggStory 오브젝트를 전달하는 간단한 한가지 방법은 컨트롤을 보이기 바로 전에 사용자 정의 컨트롤의 "DataContext" 속성을 선택된 DiggStory 데이터 오브젝트로 설정하는 것입니다.

DataContext를 이용하여 결과를 표시하기 위해서는 UserControl에 코드를 삽입하거나 데이터바인딩 표현식을 사용하여 그 값을 바인딩 시킬 수 있습니다.

예를 들어, 선택된 스토리의 제목을 표시하기 위해서 아래와 같이 데이터바인딩 표현식을 StoryDetailsView XAML에 추가합니다.

사용자가 스토리를 클릭하면

리스트박스의 이벤트 핸들러에서는 선택된 DiggStory 오브젝트를 DataContext 속성에 설정하고 컨트롤을 보이게 합니다.

DiggStory의 Title이 우리가 추가한 데이터바인딩 표현식 때문 컨트롤에 표시되는 것을 보세요.

사용자 정의 컨트롤 마무리

우리는 위의 예제를 통해서 어떻게 master/deatail 대화상자가 사용되는지 살펴보았습니다. 이제 사용자 정의 컨트롤에 몇 가지 추가 컨트롤과 데이터바인딩 표현식을 사용하여 StoryDetailsView를 완성 할 수 있습니다.

StoryDetailsView 컨트롤이 위의 그림처럼 보이게 하기 위해서 <Border> 컨트롤의 하위에 아래 내용을 채워주세요.

이것 말고는 코드를 바꾸지 않아도 됩니다. 데이터바인딩을 이용하여 DataContext의 값을 끌어왔기 때문에 다른 코드는 필요 없습니다.

다음 단계

이제 우리는 Digg 클라이언트의 모든 기능과 사용자 인터렉션 흐름을 구현했습니다.

마지막 단계는 UI를 좀더 미세하게 조정해보겠습니다. 특히 리스트박스와 버튼 컨트롤들을 약간 우아하게 다듬어 보겠습니다.

다음 단계 Using Control Templates to Customize a Control's Look and Feel (한글 번역본)로 이동하겠습니다.

Published Friday, February 22, 2008 5:50 AM by ScottGu