아래 글은 마이크로소프트 기술이사인 스캇 구슬리의 블로그에 게시된 First Look at Silverlight 2의 8번째 튜토리얼 Creating a Digg Desktop Application using WPF의 번역본 입니다. 본 번역본의 원문은 훈스닷넷의 실버라이트 강좌에 게시되어 있습니다.

실버라이트 튜토리얼 파트 8: WPF를 이용하여 테스트탑용 Digg 클라이언트 만들기

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

여러분은 Digg 클라이언트 샘플 프로그램의 완성된 소스코드를 여기에서 다운로드 받을 수 있습니다. 저의 실버라이트 2 레퍼런스 페이지를 북마크하면 더 많은 실버라이트 관려 글과 컨텐츠를 볼 수 있습니다.

WPF를 이용하여 테스크탑용 Digg 클라이언트 만들기

이번 마지막 튜토리얼은 이전 7개의 튜토리얼과는 다른 목표가 있습니다. 이번에는 실버라이트 코드를 돌려보지 않는 대신 WPF와 .NET 3.5를 사용할 것입니다. 우리는 브라우저의 실버라이트 플러그인에서 작동하는 Digg 클라이언트 코드를 작성했습니다. 그리고 그것을 재사용해서 윈도우 데스크탑용 응용프로그램을 만들 것입니다.

실버라이트는 .NET 프레임워크의 전체 버전과 호환하는 일부 API를 가지고 있습니다. 그 목표 중에 하나는 일반적인 프로그래밍 모델과 도구를 학습한 개발자가 RIA 웹 응용프로그램, 윈도우 데스크탑 응용프로그램, 오피스 솔루션을 넘나들면서 기술, 코드, 컨텐츠를 재사용 가능하게 하는 것입니다.

아래는 브라우저에서 작동하는 Digg 실버라이트 클라이언트의 코드를 재사용하여 브라우저 밖에서 실행되는 윈도우 데스크탑용 버전을 만드는 단계에 대한 내용입니다.

1단계: WPF 데스크탑 응용프로그램 만들기

VS 2008을 이용하여 WPF 데스크탑 응용프로그램을 만들면서 시작해보겠습니다. "DiggDesktopSample"이라고 이름을 짓겠습니다.



App.xaml과 Window.xaml 이라는 두 개의 파일이 프로젝트 안에 만들어 집니다.



우리가 파트1에서 만든 (App.xaml과 Page.xaml을 가지고 있던) 실버라이트 프로젝트와 비슷한 구조라는 것을 알 수 있습니다..

2단계: Digg 클라이언트 코드를 WPF 응용프로그램에 복사하기

우리가 만들었던 DiggApplication의 실버라이트 코드를 복사해서 "DiggDesktopSample" 윈도우 프로젝트에 붙여넣기 하겠습니다.



현재 베타1에서는 이러한 copy/paste 동작이 수동입니다만 결국은 프로젝트 타입간의 코드 이동을 좀더 자동화할 예정입니다.

3단계: 몇 가지 문제점 수정하기

컴파일을 하기 위해서 Digg 샘플 코드의 2가지를 고쳐야 합니다.

1) 실버라이트 베타1 XAML 스키마 xmlns: URL이 WPF 데스크탑 버전과 다릅니다. 새로운 프로젝트에 복사한 코드가 WPF 스키마라는 것을 알려주기 위해서 XAML 파일을 조금 수정해야 합니다. 이것은 정식버전이 나오기 전에 우리가 향상시켜야 할 기능 중에 하나입니다.

2) <WaterMarkTextBox> 컨트롤을 <TextBox>로 변경을 하고 <HyperlinkButton>컨트롤을 <TextBlock>으로 변경해야 합니다. 이 두개의 컨트롤은 아직 WPF에 포함되어 있지 않고 실버라이트 2 베타1에서 새로 추가된 컨트롤입니다. 하지만 이 컨트롤들과 함께 작동하는 다른 어떠한 네트워크, LINQ to XML, 데이터 바인딩 코드도 변경하지 않아도 됩니다.

일단 이렇게 수정을 하면 프로젝트는 깨끗하게 컴파일 됩니다.

4단계: 데스크탑 윈도우에 Digg 클라이언트 올리기

데스크탑 프로젝트에서 프로그램이 시작될 때 로드 되는 기본 윈도우인 Windows1.xaml 파일을 열었습니다.

윈도우의 타이틀을 "Digg Desktop Version"이라고 변경하고 기본 너비와 높이를 변경했습니다.

기존 Digg 실버라이트 프로젝트에 있던 Page.xaml 사용자 정의 컨트롤을 그 윈도우의 루트 컨트롤로 추가했습니다. 이렇게 하면 윈도우가 로드 될 때 윈도우에 보여질 것입니다. 저는 Page 클래스의 어떤한 코드도 변경하지 않았고 컨트롤의 이름도 그대로 사용했습니다. Page 클래스가 UserControl를 상속 받았기 때문에 WPF 윈도우나 컨트롤에 문제없이 올려질 수 있습니다.



마지막으로 수정할 내용은 Digg REST API 서버가 브라우저가 아닌 클라이언트 또는 서버에서의 접근을 알아내서 때때로 접근 거부 응답을 보내기 때문에 발생합니다. 아마도 서비스에 접근하는 자동 스크립트를 막기 위함 일 것입니다. 저는 proxy URL을 통해서 이 문제를 해결했습니다. 코드를 변경하는 것이 아니라 URL만 변경하는 것입니다.

5단계: 프로그램 실행하기

이제 Digg 데스크탑 응용프로그램을 실행 할 수 있습니다. 모든 기능은 실버라이트 버전과 똑같이 작동하고 프로그램도 같은 방식으로 움직입니다.



그리고 리스트에서 스토리를 선택하면 상세정보 사용자 정의 컨트롤이 표시됩니다.



브라우저와 데스크탑 버전 사이에 몇 가지 표면적인 스타일에 다른 점이 있습니다. 이것은 주로 사용자의 운영체제에 설정되어 있는 테마의 글꼴, 색, 스크롤 바와 같은 기본 스타일에 영향을 받기 때문입니다. 반면에 실버라이트는 모든 운영체제에서 사용하는 기본 스타일을 사용하고 있습니다. 만약 데스크탑 버전과 브라우저 버전이 완전히 똑같게 만들고 싶으면 스타일과 컨트롤 템플릿을 더 사용해야 합니다. 그렇지 않으면 데스크탑 버전은 사용자의 운영체제 테마에 맞춰집니다.

요약

우리는 앞으로 실버라이트와 WPF 간에 코드를 공유하는 좀더 자세한 글과 bast practice 가이드라인을 제안할 예정입니다. 저는 여러분이 실버라이트 응용프로그램을 만들 때 배운 기술과 지식이 WPF 프로젝트에 잘 적용될 것이라고 생각합니다. 저희는 솔루션 사이에 코드 재사용을 가능케 하고 컨트롤, 컨텐츠, 코드를 아주 쉽게 공유하게 하는 매우 높은 호환성 확보를 위해서 최선을 다하고 있습니다.

도움이 되었기를 …

스캇

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


WRITTEN BY
ONESTONE

트랙백  1 , 댓글  0개가 달렸습니다.
secret

아래 글은 마이크로소프트 기술담당 부사장인 스캇 구슬리의 블로그에 게시된 First Look at Silverlight 2의 튜토리얼 중에 일곱 번째인 Using Control Templates to Customize a Control's Look and Feel의 번역본 입니다.  본 번역본의 원문은 훈스닷넷실버라이트 강좌에 게시되어 있습니다.

실버라이트 튜토리얼 파트7: 컨트롤 템플릿을 사용하여 룩앤필(Look and Feel) 변경하기

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

여러분은 Digg 클라이언트 샘플 프로그램의 완성된 소스코드를 여기에서 다운로드 받을 수 있습니다. 저의 실버라이트 2 레퍼런스 페이지를 북마크하면 더 많은 실버라이트 관려 글과 컨텐츠를 볼 수 있습니다.

컨트롤의 룩앤필 커스터마이징

WPF와 실버라이트 프로그래밍 모델의 가장 강력한 기능은 컨트롤의 룩앤필을 완벽하게 커스터마이징 할 수 있다는 것입니다. 개발자와 디자이너는 미묘하고 극적인 방법으로 컨트롤의 UI를 만들 수 있고 대단히 유연한 방법으로 원하는 사용자 경험을 완벽하게 만들 수 있습니다.

이 튜토리얼에서 컨트롤을 커스터마이징 하는 몇 가지 방법을 살펴보고 그 기술을 이용해서 Digg 클라이언트의 UI를 마무리 하겠습니다.

컨트롤의 내용을 커스터마이징 하기

튜토리얼 파트1에서 페이지에 단순한 버튼 컨트롤을 추가했었고 어떻게 버튼의 텍스트를 "Push Me!"로 변경하는지 살펴보았습니다. 그리고 "Click" 이벤트 핸들러를 만들어 클릭했을 때의 처리를 구현했습니다.



위의 코드는 버튼을 아래처럼 만들었습니다.



앞으로 버튼 컨트롤이 여러분을 놀래 킬 것 중에 하나는 "Content" 속성이 단순히 "Push Me!"라는 텍스트가 아니라는 것입니다. 사실 "Content"속성은 우리가 원하는 어떤 모양이나 컨트롤로 설정할 수 있습니다.

예를 들어, <Image>와 <TextBlock>을 포함한 StackPanel을 포함시킬 수 있습니다.




위의 코드가 실행되면 아래와 같이 보일 것입니다. 여전히 클릭하거나 기존처럼 클릭 이벤트 핸들러를 연결하는 버튼으로써 기능을 가지고 있는 것을 보세요.



또 다른 방법은 버튼 속에 벡터 그래픽을 이용하여 아래의 Ellipse 컨트롤과 같은 Shape 컨트롤을 사용할 수 있습니다.



위의 코드가 어떻게 RadialGradientBrush로 채운 Ellipse 컨트롤을 사용하여 반사되는 멋진 효과를 넣었는지 살펴보세요.



심지어 버튼 속에 Celendar 컨트롤 같은 인터렉션 가능한 컨트롤 포함시켜 이상한 모양을 만들 수 도 있습니다.



위의 Calendar는 모든 고유 기능을 사용가능 합니다. 이 의미는 사용자가 달력에서 날짜를 찍거나 달을 앞뒤로 이동시킬 수 있고 달력에 포함된 버튼의 "Click"이벤트 핸들러를 호출 할 수 있다는 얘기입니다. (노트: 이것이 좋은 UX인지는 모르겠습니다만 무엇을 하던 할 수 있다는 유연성을 보여줍니다.)



위에 소개한 타입의 컨트롤 커스터마이징은 단지 버튼 컨트롤에서만 가능한 것이 아니고 ContentControl 베이스 클래스를 상속받는 모든 컨트롤에서 가능합니다.

컨트롤 템플릿을 이용한 컨트롤 커스터마이징

실버라이트와 WPF에서 사용한 컨트롤 모델은 컨트롤 속의 내용을 커스터마이징 가능한 것보다 더 많은 것을 할 수 있습니다. 컨트롤의 인터렉션 기능들을 유지하면서 컨트롤의 visual tree 전체를 원하는 만큼 변경할 수 있습니다.

예를 들어, 버튼의 기본적인 모양인 사각형이 싫고 아래와 같이 원모양을 원한다면



App.xaml파일에 "RoundButton" 스타일을 정의함으로써 구현 가능합니다. 버튼의 "Template"속성을 오버라이드하고 버튼의 기본 사각형 모양을 Ellipse와 TextBlock이 들어있는 모양으로 변경하는 ControlTemplate을 제공하면 됩니다.



그런 후에 이 "RoundButton" 모양의 스타일을 버튼 컨트롤에 참조시킵니다.



컨트롤 템플릿에 컨텐츠 통합하기

위의 "RoundButton"컨트롤 템플릿에서 눈여겨봐야 할 것은 버튼의 크기와 내용이 고정되어 있다는 것입니다.

좋은 소식은 WPF와 실버라이트는 이러한 값들을 설정 가능하게 만들어 준다는 것입니다. 이를 위해서 컨트롤의 속성으로 바인딩 할 수 있도록 컨트롤 템플릿 안에서 {TemplateBinding ControlProperty} 마크업 확장 구문(markup extension syntax)을 사용합니다. 이것은 다른 개발자가 컨트롤을 설정할 때 속성을 사용하듯이 컨트롤 템플릿을 사용할 수 있게 합니다.



내용을 표시하기 위해서 <TextBlock>을 사용하는 대신 <ContentPresenter>컨트롤을 사용한 것을 눈 여겨 보세요. 이것은 단지 텍스트 문자열만을 표시하는 것이 아니라 우리가 앞에서 보았듯이 다른 컨텐츠도 표시 가능하게 만들어 줍니다.

위의 스타일을 사용하여 서로 다른 내용과 속성을 설정한 3가지 버튼을 만들어 보겠습니다.



위의 버튼들은 아래처럼 표시될 것입니다. 물론 Calendar 컨트롤은 여전히 달을 이동할 수 있고 날짜를 선택할 수 있습니다.



한걸음 더 나아가자면 ControlTemplate에 "hover", "focus", "pushed" 같은 버튼의 상태를 다루는 스토리보드 애니메이션을 추가 할 수도 있습니다. 이런 능력은 HTML에서 할 수 없는 정말 품위 있는 사용자 인터렉션 시나리오를 만들 수 있게 합니다.

개발자들은 이러한 모든 스타일이나 컨트롤의 인터렉션 커스터마이징에 대해서 무감각한 상태로 응용프로그램을 만들 수 있습니다. 그들은 평소와 같이 컨트롤의 이벤트를 핸들링하고 컨트롤의 오브젝트 모델을 다루고 스타일과 템플릿을 사용하며 룩앤필의 커스터마이징과 예쁘게 꾸미기는 디자이너에게 넘길 수 있습니다.

Digg 클라이언트를 세련되게 꾸미기

이제 우리는 컨트롤 템플릿이 어떻게 작동하는지 기본적인 내용을 살펴보았습니다. 이것을 이용해서 Digg 클라이언트 프로그램의 UI를 좀더 세련되게 만들어 보겠습니다.

여기에 우리가 분명히 바꿀 필요가 있는 한 가지가 있습니다. 그것은 바로 사용자 정의 컨트롤에 있는 "Close" 버튼입니다.



좋은 소식은 이 작업은 개발자 또는 함께 일하는 디자이너들 모두에게 쉽다는 것입니다. App.xaml파일에 "CloseButton"스타일을 정의하기 위해서 ControlTemplate을 추가하고 매력적인 닫기 버튼을 만들기 위해 약간의 벡터 그래픽을 추가하겠습니다. (노트: 물론 저보다 유능한 디자이너는 좀 더 멋지게 보이도록 마우스를 올릴 때의 애니메이션을 추가할 수 있겠죠.)



프로그램을 다시 실행시키면 버튼이 아래처럼 보일 것입니다.



제가 생각할 때 좀 더 세련되게 만들어야 하는 두 번째는 리스트박스의 테두리 UI 입니다. 좀 더 가까이 보면 베타1의 리스트박스는 안쪽에 테두리가 기본적으로 있습니다. (노트: 우리는 여전히 기본 스킨을 마무리 중에 있고 마지막 릴리즈 전에 아마도 변경이 될 것입니다.)



우리는 이 테두리를 제거하고 컨트롤 템플릿을 커스터마이징하여 리스트박스에 단순한 테두리를 만들어 보겠습니다. 아래는 그렇게 하기 위하여 템플릿을 이용하여 만든 리스트박스 템플릿입니다.



이제 리스트박스에서 모든 테두리를 제거 했습니다. 어떤 컨텐츠에도 스크롤이 가능하게 해주는 <ScrollViewer>을 사용했습니다. 그리고 리스트박스 안에 실제 아이템을 랜더링하는 <ItemsPresenter/> 컨트롤 포함시켰습니다. (파트4에서 이런 아이템들을 표현하기 위해서 <DataTemplate>을 사용했었습니다.)

아래 그림은 방금 우리가 만든 좀 더 단순한 모양의 리스트 입니다.



우리는 룩앤필을 변경하기 위해서 코드를 변경하지도 않았고 컨트롤의 XAML 마크업도 변경하지 않았다는 것이 멋지네요. 이러한 코드와 디자인의 분리는 실버라이트와 WPF 응용프로그램을 만들 때 개발자와 디자이너 간의 훌륭한 협업을 가능하게 합니다. Expression Blend와 다른 Expression Studio의 제품들은 한 단계 높은 컨트롤의 디자인 능력을 가지고 있고 커스터마이징이 쉽도록 풍부한 디자이너 툴을 제공합니다.

다음 단계

이제 실버라이트를 이용한 Digg 클라이언트 구현은 끝이 났습니다.

마지막 단계는 Digg 클라이언트의 데스크탑 버전을 구현할 것입니다. 좋은 소식은 실버라이트가 WPF와 .NET 프레임워크의 일부분이기 때문에 개념, 코드, 컨텐츠를 테스크탑 버전으로 이동시키는 것이 어렵지 않다는 것입니다.

다음 단계 Creating a Digg Desktop Application Using WPF (한글 번역본)로 이동하겠습니다.

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


 


WRITTEN BY
ONESTONE

트랙백  1 , 댓글  0개가 달렸습니다.
secret

아래 글은 마이크로소프트 기술담당 부사장인 스캇 구슬리의 블로그에 게시된 First Look at Silverlight 2의 튜토리얼 중에 여섯 번째인 Using User Controls to Implement Master/Detail Scenarios의 번역본 입니다. 본 번역본의 원문은 훈스닷넷실버라이트 강좌에 게시되어 있습니다. 아직 남은 2개의 튜토리얼에 대한 번역이 계속 진행되고 있습니다.

실버라이트 튜토리얼 파트 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


WRITTEN BY
ONESTONE

트랙백  0 , 댓글  1개가 달렸습니다.
  1. 주동석 2008.04.14 18:05
    제일 마지막 코딩중에요. Style 속성을 알아야 실행 돼는거 아닌가요?

    속성을 모르는데 어떡게 하는건가요?? App.xaml에 이름 만 넣어주면

    기본 속성이 있는건가요??
secret

아래 글은 마이크로소프트 기술담당 부사장인 스캇 구슬리의 블로그에 게시된 First Look at Silverlight 2의 튜토리얼 중에 다섯 번째인 Using the ListBox and DataBinding to Display List Data의 번역본 입니다. 본 번역본의 원문은 훈스닷넷실버라이트 강좌에 게시되어 있습니다. 아직 남은 3개의 튜토리얼에 대한 번역이 계속 진행되고 있습니다.

실버라이트 튜토리얼 파트 5: 리스트박스와 데이터바인딩를 사용하여 데이터 표시하기

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

리스트 박스와 데이터 바인딩을 사용하여 Digg 스토리 표시하기

지금까지 우리는 Digg 스토리를 표시하기 위해서 데이터 그리드컨트롤을 사용했습니다. 그 방법은 컨텐츠를 컬럼 형식으로 표시하기를 원할 때 좋습니다. Digg 클라이언트를 위해 우리는 아마도 그 모양을 약간 바꾸고 싶어하고 스토리들을 데이터그리드 보다는 리스트처럼 보이기를 원할 것입니다. 좋은 소식은 그렇게 하기가 쉽다는 것이고 코드를 바꾸지 않아도 된다는 것입니다.

데이터그리드 컨트롤을 <ListBox> 컨트롤로 대체하는 것부터 시작하겠습니다. 컨트롤 이름은 이전과 같은 이름("StoriesList")을 쓰겠습니다.



프로그램을 다시 실행시켜 검색을 해보면 리스트박스는 아래처럼 표시될 것입니다.



우리는 의문이 생깁니다. 왜 각 아이템이 "DiggSample.DiggStory"일까? 원인은 DiggStory 오브젝트를 리스트박스에 바인딩 할 때 기본적으로 ToString()이 호출되기 때문입니다. DiggStory 오브젝트의 "Title" 속성을 표시하려면 리스트박스의 "DisplayMemberPath" 속성을 설정해야 합니다.



이렇게 하면 리스트박스에 제목이 표시됩니다.



한번에 여러 개의 값이 표시되게 하거나 각 아이템의 레이아웃을 커스터마이징 하길 원한다면 리스트박스 컨트롤의 ItemTemplate를 오버라이드하거나 커스텀 데이터템플릿(DataTemplate)를 사용할 수 있습니다. 데이터템플릿 속에 각 DiggStory 오브젝트가 어떻게 표시될 지 설정할 수 있습니다.

예를 들어, 데이터템플릿을 이용하여 DiggStory의 제목과 NumDiggs 값을 동시에 표시하고 싶으면 아래와 같이 합니다.



데이터템플릿을 이용하여 DiggStory 오브젝트에서 원하는 public 속성을 데이터바인딩 시킬 수 있습니다. 위에서 본 두 개의 TextBlock 컨트롤처럼 {Binding PropertyName}을 어떻게 사용했는지 살펴보세요.

위에서 데이터템플릿을 사용하면 우리의 ListBox는 아이템들을 아래처럼 표시할 것입니다.



한걸음 더 나아가서 데이터템플릿을 아래처럼 변경해 보겠습니다. 이 데이터템플릿은 두 스택패널을 사용합니다. 하나는 수평방향으로 열 아이템을 쌓아 올리고 다른 하나는 수직방향으로 텍스트블럭을 쌓아 올립니다.



위의 데이터템플릿은 아래 스크릿샷처럼 아이템들을 표시합니다.



App.xaml에 아래 템플릿을 정의합니다. DiggPanel에서 LinearGradientBrush를 사용하여 쓸만한 노란 그라데이션 배경을 어떻게 만드는지 보세요.



리스트박스에 대한 중요한 한가지는 비록 아이템들이 커스터마이징을 해도 여전히 아이템을 선택하거나 마우스가 위로 올라갈 때 효과를 자동으로 지원한다는 것입니다. 마우스를 사용할 때나 키보드의 위/아래 방향키, home/end키를 사용할 때 모두 지원합니다.



또한 리스트박스는 full flow 크기변환을 지원합니다. 그리고 필요할 때는 컨텐츠의 자동 스크롤링을 지원합니다. 윈도우가 작아졌을 때 수평 스크롤바가 어떻게 나타나는지 살펴보세요.



다음 단계

우리는 데이터 표시방식을 리스트 형태로 바꿨고 컨텐츠 리스트를 정리했습니다.

이제 이 프로그램에서 마지막 남은 기능을 완성합시다. 그리고 사용자가 리스트 한 개를 선택했을 때 그 스토리에 대한 자세한 내용을 볼 수 있도록 하는 master/detail 작업흐름을 구현해 보겠습니다. 다음 단계인 Using User Controls to Implement Master/Detail Scenarios (한글 번역본)로 넘어가겠습니다.

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


WRITTEN BY
ONESTONE

트랙백  0 , 댓글  0개가 달렸습니다.
secret

아래 글은 마이크로소프트 기술담당 부사장인 스캇 구슬리의 블로그에 게시된 First Look at Silverlight 2의 튜토리얼 중에 네 번째인 Using Style Elements to Better Encapsulate Look and Feel의 번역본 입니다. 본 번역본의 원문은 훈스닷넷실버라이트 강좌에 게시되어 있습니다. 아직 남은 4개의 튜토리얼에 대한 번역이 계속 진행되고 있습니다.

실버라이트 튜토리얼 파트 4: 보다 나은 캡슐화 된 룩앤필(Look and Feel)을 위한 Style Elements 사용하기

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

보다 나은 캡슐화 된 룩앤필(Look and Feel)을 위한 Style Elements 사용하기

WPF와 실버라이트는 컨트롤의 속성을 재사용 가능한 자원으로 캡슐화 시킬 수 있는 스타일 메커니즘을 지원합니다. 우리는 페이지로부터 분리된 파일에 이러한 스타일 선언을 저장할 수 있고 프로그램에서 여러 페이지나 컨트롤에 걸쳐 재사용 할 수 있습니다. 이것은 기본 커스터마이징 시나리오를 수행할 때 HTML에 CSS를 사용하는 것과 개념적으로 유사합니다.

노트: Color, Font, Size, Margins와 같은 기본 속성을 설정하는 것 외에도 WPF와 실버라이트에서의 스타일은 대단히 풍부한 스킨화와 컨트롤 구조의 개선을 가능케 만드는 컨트롤 템플릿을 정의하고 재사용하는데 사용 가능합니다. 그리고 오늘날 CSS와 HTML이 하지 못하는 커스터마이징 시나리오를 지원합니다. 이것에 대해서는 이 튜토리얼 시리즈의 파트 7에서 다루겠습니다.

Digg 클라이언트 프로그램을 위해 프로젝트의 App.xaml 파일 속에 스타일 선언을 정의하겠습니다. 이것은 프로그램 내의 모든 페이지와 컨트롤에서 재사용 가능하게 만듭니다.



Digg 페이지의 <Border> 컨트롤과 <TextBlock> 컨트롤을 위한 스타일 캡슐화를 시작해보겠습니다.





우리는 위에서 미리 인라인으로 선언해 놓은 <Border>와 <TextBlock> 설정을 캡슐화 하는 스타일 요소 2개를 아래와 같이 App.xaml 파일 속에 만들 수 있습니다.



어떻게 각 스타일에 유일한 키값을 부여하고 있는지 보세요. 그런 다음 <Border>와 <TextBlock> 컨트롤이 이 키를 가지고 스타일을 참조하도록 수정할 수 있습니다. 우리는 XAML의 "markup extensions" 기능을 사용하여 그렇게 만들 수 있습니다. Markup Extensions는 우리가 설정하려는 것에 대한 리터럴 값이 없을 때 사용됩니다. 이 기능을 사용하는 다른 예는 데이터 바인딩 표현법이 있습니다.



게다가 아래와 같이 Page.xaml 파일에 있는 다른 컨트롤들까지 수정 했습니다.



이러한 방법으로 스타일을 캡슐화 하는 것은 개발자가 응용프로그램의 기본 기능을 만드는데 좀더 집중하게 만들고 다른 컨트롤이나 페이지에서 스타일을 재사용 가능하게 합니다.

노트: 베타1에서 알아야 할 한가지는 우리가 스타일 이름과 속성 선언에 오타가 있다는 에러 메시지가 분명하지 않다는 것입니다. 예외를 발생 시키지만 어떤 것이 틀렸는지 말해주지는 않습니다. 이것은 베타2에서 개선될 것입니다. 스타일이 로딩될 때 발생하는 에러 메시지를 보는 동안에는 글자들을 잘 살펴보셔야 합니다.

다음 단계

이제 우리는 스타일 참조를 통해서 우리의 Page.xaml 파일의 마크업을 정리했습니다. 다음단계로 가서 스토리 데이터의 모양을 좀 더 커스터마이징 해 봅시다.

다음 튜토리얼 Using the ListBox and Databinding to Display List Data (한글 번역본)로 이동하겠습니다.

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



WRITTEN BY
ONESTONE

트랙백  0 , 댓글  0개가 달렸습니다.
secret

아래 글은 마이크로소프트 기술담당 부사장인 스캇 구슬리의 블로그에 게시된 First Look at Silverlight 2에서 소개된 튜토리얼 중에 세번째인 Using Networking to Retrieve Data and Populate a DataGrid 번역본 입니다. 본 번역본의 원문은 훈스닷넷실버라이트 강좌에 게시되어 있습니다. 아직 남은 5개의 튜토리얼에 대한 번역이 계속 진행되고 있습니다.

실버라이트 튜토리얼 파트 3: 네트워킹을 이용하여 데이터를 가져와서 데이터그리드에 뿌리기

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

네트워킹을 사용하여 Digg 스토리 가져오기

실버라이트 2는 실버라이트 클라이언트가 원격의 REST, SOAP/WS*, RSS, JSON, XML HTTP 서비스를 사용 가능하게 하는 빌트인 네트워킹 API를 가지고 있습니다. 또한 실버라이트 2는 HTTP 프로토콜을 이용하지 않고도 (채팅 서버와 같은 시나리오를 위해서) 통신할 수 있는 빌트인 소켓 API를 포함하고 있습니다.

크로스 도메인 네트워크 접근

실버라이트 2 응용프로그램은 네트워크 호출이 필요할 때 항상 "origin" 서버로부터 호출을 받을 수 있습니다. 이 의미는 응용프로그램을 다운로드 받은 같은 도메인의 URL을 호출할 수 있다는 것입니다. 또한 선택적으로 원격의 웹 서버에 클라이언트가 크로스 도메인 호출을 해도 좋다는 XML 정책 파일을 가지고 있을 때 크로스 도메인 호출을 할 수 있습니다. 실버라이트 응용프로그램이 다운로드 된 도메인과 다른 도메인의 URL을 호출할 수 있다는 말입니다.

서버 관리자가 어떤 클라이언트의 접근을 가능하게 할지 미리 관리 할 수 있게 하는 XML 정책 파일 포멧이 있습니다. 또한 플래시 크로스 도메인 정책 파일 포멧도 받아들입니다. 이 의미는 여러분이 플래시 클라이언트를 위해 웹 상에 열어놓은 크로스 도메인 접근이 가능한 원격의 REST, SOAP/WS*, RSS, JSON, XML 엔드포인트를 실버라이트 2에서 호출 가능하다는 얘기 입니다.

Digg.com은 HTTP를 통해서 제공하는 매우 쓸만한 Digg API를 가지고 있습니다. Digg.com은 Flash를 위한 크로스 도메인 정책 파일을 가지고 있기 때문에 Digg 클라이언트 응용프로그램에서 직접 API를 호출할 수 있습니다. Digg.com API에 접근하기 위해서 우리의 웹 서버를 통해서 터널을 만들 필요가 없습니다.

Digg.com의 Topic Feed API

우리는 사용자들이 이 프로그램을 사용하여 검색어를 입력(예를 들어 "Programming")하고 검색 버튼을 눌러 Digg.com으로부터 검색어와 관련된 스토리를 가져올 수 있게 하고 싶습니다.



Digg.com의 List Stories REST API Feed API를 이용해 보겠습니다. API는 URL을 통해서 매개변수를 전달 받은 다음 (예를 들어 GET /stories/topic/programming) 검색어와 관련된 Digg 스토리의 결과를 XML로 받습니다. 여기를 클릭하여 XML이 어떻게 생겼는지 보시기 바랍니다.

System.Net.WebClient를 사용하여 Digg REST Feed를 비동기 호출하기

검색 버튼을 클릭할 때 "Click" 이벤트를 핸들링 합니다. WaterMarkTextBox 컨트롤에서 검색하려는 검색어 문자열을 가져와서 관련된 XML 결과를 받기 위한 Digg 네트워크 호출을 초기화 합니다.

실버라이트는 System.Net 네임스페이스에 WebClient 헬퍼 클래스를 포함 합니다. (이것은 닷넷 프레임워크에도 포함되어 있습니다.) 우리는 이 클래스를 이용하여 URL로부터 비동기적으로 컨텐츠를 다운로드 받을 수 있습니다. Digg 스토리를 비동기적으로 다운로드 받는 것의 장점은 원격 서버로부터 응답을 기다리는 동안 UI가 응답이 없거나 차단되지 않을 것입니다. 이것은 매우 자연스러운 사용자 경험을 제공할 것입니다.

WebClient 클래스로 비동기 방식 다운로드를 하려면 요청된 컨텐츠가 다운로드 될 때 호출되는 "DownloadStringCompleted" 이벤트 핸들러 메소드를 등록하고 다운로드를 시작하기 위해서 WebClient.DownloadStringAsync(url) 메소드를 호출 하기만 하면 됩니다.



그리고 위의 코드에서 보듯이 사용자가 원하는 주제에 대한 Digg 스토리를 포함한 XML 데이터의 문자열을 비동기 적으로 가져올 수 있습니다.

LINQ to XML을 사용하여 스토리 클래스에 Digg XML 스토리 파싱하기

지금까지 Digg 스토리의 XML 데이터를 얻었습니다. 다음 단계에서는 데이터를 바인딩 시킬 "DiggStory" 오브젝트 속에 그것을 파싱하고 변환할 것입니다.

이를 위해서는 우선 Digg로부터 받은 XML 컨텐츠에 맵핑할 속성들을 가진 "DiggStory" 클래스를 정의해야 합니다. 새로운 C# 기능인 "automatic properties" 이용할 수 있습니다.



실버라이트 2에 들어있는 LINQ와 Digg로 부터 받은 XML 문서를 쉽게 파싱하고 필터링 할 수 있는 LINQ to XML (실버라이트 응용프로그램에 포함될 수 있는 추가 라이브러리)을 이용할 수 있습니다. 그리고 아래 코드를 사용하여 "DiggStory" 오브젝트의 시퀀스로 변환할 수 있습니다.



위에서 보듯이 앞으로 작업할 강력한 형식의 DiggStory 오브젝트 가지게 되었습니다.

데이터그리드 컨트롤에 Digg 스토리를 표시하기

Digg 스토리를 표시하기 위해서 새로운 실버라이트 데이터그리드 컨트롤을 사용하겠습니다. 이를 위해서 실버라이트 데이터 컨트롤 어셈블리를 참조해야 하고 데이터그리드 컨트롤 선언으로 페이지에 남아 있는 "Todo" 텍스트를 바꿔야 합니다.



데이터그리드는 명시적으로 컬럼 선언을 설정하고 타입을 표시할 수 있습니다. 다른 방법으로는 데이터그리드의 "AutoGenerateColumns" 속성을 true로 설정하여 바인딩 할 오브젝트의 스키마를 바탕으로 데이터원본 리플렉션(reflection)을 통하여 디폴트 컬럼을 만들게 하는 방법이 있습니다.

검색 버튼을 클릭했을 때 Digg로부터 받은 결과를 데이터 그리드의 "ItemSource"에 프로그램적으로 바인딩 시키기 위해 코드 비하인드 클래스를 수정해 보겠습니다.



이제 프로그램을 실행시키고 검색을 하면 Digg로부터 가져온 스토리 데이터 리스트를 보게 될 것입니다.



실버라이트 데이터그리드 컨트롤은 읽고 쓰기가 가능한 다이렉트 에디팅, 선택, 스크롤링, 컬럼의 크기변경 등 클라이언트 측에서 사용하는 그리드 컨트롤에서 기대하는 기본 기능을 모두 제공합니다. 데이터그리드를 포함하고 있는 컨테이너가 동적으로 늘어나고 줄어들어도 컨테이너를 채우는 자동 레이아웃 기능을 제공합니다. 또한 데이터그리드는 훌륭한 템플릿 모델을 제공하고 있어서 컬럼 데이터의 표시와 편집 방법을 모두 커스터마이징 할 수 있습니다. 데이터그리드의 사용법에 대해서는 조만간 더 포스팅을 하겠습니다.

다음 단계

이제 우리는 Digg.com에서 Digg 스토리를 가져올 수 있고 프로그램에 스토리 데이터를 표시할 수 있습니다. 다음 단계는 Page.xaml 로 되돌아가서 우리가 지금까지 사용해 온 인라인 스타일 선언을 제거해 보겠습니다.

다음 튜토리얼 Using Style Elements to Better Encapsulate Look and Feel (한글 번역본)로 이동하겠습니다.

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


WRITTEN BY
ONESTONE

트랙백  0 , 댓글  0개가 달렸습니다.
secret
아래 글은 마이크로소프트 기술담당 부사장인 스캇 구슬리의 블로그에 게시된 First Look at Silverlight 2에서 소개된 튜토리얼 중에 두번째인 Part 2: Using Layout Management 번역본 입니다. 본 번역본의 원문은 훈스닷넷실버라이트 강좌에 게시되어 있습니다. 아직 남은 6개의 튜토리얼에 대한 번역이 계속 진행되고 있습니다.

실버라이트 튜토리얼 파트2: 레이아웃 컨트롤 사용하기

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

레이아웃 관리의 이해

실버라이트와 WPF는 개발자와 디자이너가 협업을 통해서 쉽게 UI 표면에 컨트롤들을 배치시킬 수 있도록 유연한 레이아웃 관리를 지원합니다. 이 레이아웃 시스템은 절대 좌표를 이용하여 컨트롤들을 위치를 정하는 고정위치모델(fixed position model)을 지원함과 동시에 브라우저의 크기가 변해도 자동적으로 레이아웃과 컨트롤의 크기와 위치가 변경되는 동적위치모델(dynamic position model) 또한 지원합니다.

실버라이트와 WPF를 사용하는 개발자는 레이아웃 패널을 통해서 위치와 그에 포함된 컨트롤들의 크기를 변경합니다. 실버라이트 2 베타1의 빌트인 레이아웃 패널은 WPF에서 가장 일반적으로 사용하는 3가지를 포함했습니다

  • Canvas
  • StackPanel
  • Gird

캔버스 패널(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


WRITTEN BY
ONESTONE

트랙백  0 , 댓글  0개가 달렸습니다.
secret
아래 글은 마이크로소프트 기술담당 부사장인 스캇 구슬리의 블로그에 게시된 First Look at Silverlight 2에서 소개된 튜토리얼 중에 첫번째인 Part 1: Creating "Hello World" with Silverlight 2 and VS 2008 번역본 입니다. 본 번역본의 원문은 훈스닷넷실버라이트 강좌에 게시되어 있습니다.

번역:오일석


실버라이트 튜토리얼 파트 1: VS 2008과 실버라이트 2를 이용한 “Hello World” 만들기

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

VS 2008을 이용하여 새로운 실버라이트 응용프로그램 만들기

Digg 클라이언트를 만들기 위해서 비주얼 스튜디오 2008의 '파일 - 새프로젝트' 메뉴를 선택하고 새 프로젝트 대화상자에서 "Silverlight Application"을 선택하면서 시작해 보겠습니다. (노트: 여러분은 베타1이 배포되면서 지원될 'Silverlight Tools for VS 2008'을 다운로드하여 설치해야 합니다.)



프로젝트 이름을 "DiggSamle"로 합니다. "OK"버튼을 클릭하면 실버라이트 프로젝트만 생성할 것인지 아니면 실버라이트 프로젝트를 포함한 서버측 ASP.NET 웹 프로젝트도 함께 만들것인지 묻습니다. 이번 예제에서 우리는 실버라이트를 포함하는 ASP.NET 웹 프로젝트도 추가를 하고 그 이름을 "DiggSample_WebServer"라고 하겠습니다. "OK"를 클릭하면 실버라이트 클라이언트 프로젝트와 ASP.NET 웹 프로젝트가 함께 포함된 솔루션이 생성됩니다.



비주얼 스튜디오에서 빌드를 하면 컴파일된 실버라이트 응용프로그램이 자동으로 웹 프로젝트에 복사됩니다. 이 작업에서 수동으로 설정해 줄 것은 없습니다. 비주얼 스튜디오가 만들어준 기본 웹 서버 프로젝트에는 ASP.NET 웹 페이지와 우리가 실버라이트 응용프로그램의 테스트와 실행에 사용할 정적인 HTML페이지가 모두 포함되어 있습니다.


노트: 실버라이트 응용프로그램은 리눅스상의 아파치를 포함하여 어떠한 웹서버에서도 사용이 가능하며 정적인 HTML 파일 또는 PHP, Java, Python, Ruby 등의 서버측에서 만들어지는 페이지에서 호스팅 될 수 있습니다. 이번 Digg 클라이언트에서는 서버측 코드는 작성하지 않을 것입니다. 대신에 실버라이트의 크로스 도메인 네트워킹 기능을 사용하여 Digg 서비스 API에 직접 접근할 것입니다. 제가 ASP.NET 웹 서버 프로젝트를 만든 주된 이유는 자동 배포와 테스트를위한 built-in-web-server를 사용하기 위해서 입니다.

실버라이트 응용프로그램 안에 무엇이 있는지 살펴보기

기본적으로 새로 생성된 실버라이트 프로젝트에는 Page.xaml과 App.xaml 파일, 그리고 그와 연결된 VB, C#, Ruby, Phython 등으로 작성된 코드 비하인드 클래스 파일이 포함됩니다.



XAML 파일은 실버라이트 또는 WPF 응용프로그램에서 UI를 선언적으로 나타내기 위한 XML 텍스트 파일입니다. 또한 XAML은 보다 광범위하게는 닷넷 객체들을 선언적으로 나타낼 수 있습니다.  

App.xaml 파일은 일반적으로 프로그램 전체에서 공통으로 사용하는 브러쉬와 스타일 오브젝트 같은 리소스 선언에 사용됩니다. App.xaml을 위한 코드 비하인드 클래스는 Application_Startup, Application_Exit, Application_UnhandledException 등 응용프로그램 레벨의 이벤트 핸들링에 사용합니다.

Page.xaml 파일은 기본적으로 프로그램이 실행될 때 로드되는 초기 UI 컨트롤 입니다. Page.xaml안에서 우리는 사용자 인터페이스를 정의하기 위한 UI 컨트롤들을 사용할 수 있고, Page 코드 비하인드 클래스 안에서 이벤트를 핸들링 합니다. 이에 대해서는 차차 살펴보겠습니다.

비주얼 스튜디오는 DiggSample 프로젝트를 빌드할 때 기본적으로 코드와 XAML 마크업을 기본 닷넷 어셈블리와 함께 컴파일합니다. 그리고 이미지 또는 우리가 포함하고자 하는 파일들과 같은 정적인 리소스들을 "DiggSample.xap" 파일에 패키징 합니다.



"zap, 잽"이라고 발음하는 ".xap"파일은 클라이언트 다운로드 사이즈를 줄이기 위해서 표준 zip 압축 알고리즘을 사용했습니다. VB 또는 C#으로 만든 "hello world" 닷넷 실버라이트 응용프로그램의 크기는 4KB 정도입니다.

노트: 베타1의 어떤 컨트롤들은 사용할 때 .xap파일 안에서 redisted(?) 되는 어셈블리로 구현되어 있습니다. 이것은 크기를 4KB 기본 크기보다 크게 만들 것입니다. Digg 프로그램에서 사용한 모든 컨트롤은 실버라이트 베타 2 다운로드 패키지와 최종 릴리즈에 포함될 것입니다. 이 의미는 최종 프로그램의 다운로드 크기는 아마도 6-8KB 범위 일 것입니다. 매우 작고 빠를 것입니다.

여러분이 실버라이트 2 응용프로그램을 실행하고 호스팅하려면 표준 HTML 페이지에 <object> 태그를 이용하여 .xzp 파일의 위치를 지정하면 됩니다. 자바스크립트는 필요하지 않습니다. 이 방법은 크로스 브라우저(Safari, Firefox, IE 등)와 크로스 플랫폼(Windows, Mac, Linux등)에서 작동합니다.

우리의 실버라이트 프로그램을 참조하는 <object> 태그가 포함된 테스트용 HTML, ASP.NET 페이지는 프로젝트를 만들 때 자동으로 추가되었습니다.  이 말은 우리는 단지 F5를 눌러 빌드, 실행, 테스트를 할 수 있다는 것입니다.

컨트롤 추가와 이벤트 다루는 방법 배우기

지금까지 우리의 Digg 프로그램은 아무일도 하지 않고 있으며 실행하면 빈 페이지만 보여집니다. 우리는 프로젝트에 있는 Page.xaml 파일을 열어서 컨텐츠를 추가하여 이 상황을 변화시킬수 있습니다.



그리드의 배경을 바꾸고 그 안에 버튼 컨트롤을 선언하면서 시작해 보겠습니다. 코드 비하인드 클래스에서 버튼을 프로그래밍적으로 참조할 수 있도록 버튼의 'x:Name' 속성에 'MyButton'이라고 입력합니다. 그리고 Content, Width, Height 속성을 설정합니다.



프로그램을 실행 했을 때 우리가 만든 버튼은 아래와 같이 페이지의 중앙에 "Push me"라는 텍스트와 함께 표시될 것입니다.



버튼의 행동을 추가하기 위해 "Click"이벤트 핸들러를 추가합니다. 소스뷰에서 이벤트 이름을 입력하여 추가할 수 있습니다.



코드 비하인드 클래스에서 사용할 이벤트 핸들러를 입력받기 위해 대기합니다.



이벤트 핸들러의 메소드 이름을 입력하거나 엔터키를 입력하여 기본 네이밍 규칙을 사용하는 이벤트 핸들러 메소드 이름을 입력할 수 있습니다.



비주얼 스튜디오는 코드 비하인드 클래스 파일에 이벤트 핸들러의 기본 구현 코드를 자동으로 만들어 줍니다. 우리는 이 이벤트 핸들러를 이용하여 버튼이 클릭될 때 버튼의 content 속성을 새로운 메시지로 변경할 수 있습니다.



위와 같이 코드를 변경하고 다시 프로그램을 실행하여 버튼을 클릭하면 이제는 버튼의 content 텍스트가 "Pushed!"로 변경된 것을 볼 수 있습니다.



다음 단계

여러분들은 아직 프로그램이 완성되기까지 해야할 일이 약간 더 남아 있습니다. :-)

다음 단계에서 우리는 프로그램의 전체적인 UI 레이아웃을 잡고 컨트롤을 몇가지 더 배치할 것입니다. 다음 튜토리얼로 점프 하세요: 레이아웃 관리 사용하기 (한글 번역본)

2008년 2월 22일 금요일 오전 4시 57분 ScottGu가 발행함.


WRITTEN BY
ONESTONE

트랙백  0 , 댓글  0개가 달렸습니다.
secret

아래 글은 마이크로소프트 기술이사인 스캇 구슬리의 블로그에 게시된 First Look at Silverlight 2의 번역본 입니다. 본 번역본의 원문은 훈스닷넷실버라이트 강좌에 게시되어 있습니다. 아래 본문의 튜토리얼에 대한 번역도 진행되고 있습니다.

번역 : 오일석


실버라이트2의 첫만남

 

우리는 지난 9월에 맥과 윈도우를 위한 실버라이트 1.0을 출시했고 리눅스를 위한 실버라이트의 출시계획을 발표했습니다. 실버라이트 1.0은 브라우저 상에서 풍부한 미디어 시나리오를 가능하게 하고 Javascript AJAX 프로그래밍 모델 지원에 초점이 맞추어져 있었습니다.

 

우리는 RIA(Rich Internet Application) 개발을 위한 실버라이트의 주요 업데이트가 될 실버라이트 2의 첫 번째 공개 베타를 곧 배포할 예정입니다. 이 글은 앞으로 몇 주 또는 몇 달에 걸쳐서 실버라이트 2에 대하여 보다 깊게 진행될 글 중 첫 번째 글입니다.

크로스 플랫폼 / 크로스 브라우저 .NET 개발

실버라이트 2는 닷넷 프레임워크의 크로스 플랫폼, 크로스 브라우저 버전이며 브라우저에서 실행되는 닷넷 개발플랫폼을 포함합니다. 개발자들은 VB, C#, Javascript, IronPython, IronRuby를 포함하는 여러 닷넷 언어를 이용하여 실버라이트 응용프로그램을 만들 수 있습니다. 우리는 실버라이트 응용프로그램을 만들 때 개발자와 디자이너간의 훌륭한 워크플로와 협업을 가능케 하는 비주얼 스튜디오 2008과 익스프레션 스튜디오용 도구를 배포할 예정입니다.

곧 나올 실버라이트 2 베타1RIA 응용프로그램 개발을 위한 풍부한 기능들을 제공합니다. 아래의 내용들을 포함합니다.

  • WPF UI 프레임워크 : 실버라이트 2는 보다 쉽게 리치 웹 응용프로그램을 만들 수 있게 해주는 WPF 기반의 UI 프레임워크를 포함합니다. 강력한 그래픽스와 애니메이션 엔진의 제공과 동시에 컨트롤, 레이아웃 도구, 데이터 바인딩, 스타일, 템플릿 스킨과 같은 상위 레벨의 UI 기능을 지원합니다. 실버라이트의 WPF UI 프레임워크는 닷넷 프레임워크 WPF UI 프레임워크의 일부분과 호환되고 개발자로 하여금 리치 크로스 브라우저 웹 응용프로그램뿐만 아니라 리치 데스크탑 윈도우 응용프로그램에서도 기술, 컨트롤, 코드, 컨텐츠를 재사용 할 수 있게 합니다.
  • 풍부한 컨트롤들 : 실버라이트 2는 개발자나 디자이너가 빠르게 응용프로그램을 만들 수 있게 하는 풍부한 빌트인 컨트롤을 포함합니다. 이번 베타 1에서는 core form controls(Textbox, Checkbox, RadioButton ), Layout management panels (StackPanel, Grid, Panel ), common functionality controls (Slider, ScrollViewer, Calendar, DatePicker ), data manipulation controls (DataGrid, ListBox 등)을 제공합니다. 빌트인 컨트롤은 개발자와 디자이너가 멋진 솔루션을 만들기 위해 서로 협업이 가능하게 만드는 템플릿 모델을 지원합니다.
  • 풍부한 네트워크 지원 : 실버라이트 2는 풍부한 네트워킹 기능을 제공합니다. REST, WS*/SOAP, POX, RSS, 표준 HTTP 서비스가 쉽게 사용 가능한 형태로 포함됩니다. 또한 실버라이트 클라이언트가 웹상의 소스로부터 직접 데이터와 리소스를 접근할 수 있게 하는 크로스 도메인을 지원합니다. 게다가 베타 1에서는 소켓 네트워킹 기능을 제공합니다.
  • 풍부한 기본 클래스 라이브러리 : 실버라이트 2는 컬렉션, IO, 제너릭, 쓰레딩, 국제화, XML, 로컬 저장소 등 닷넷 기본 클래스 라이브러리를 제공합니다. HTML DOM/Javascript와 닷넷의 통합을 위한 API와 데이터를 쉽게 가져오고 변환 가능하게 하는 LINQ, LINQ to XML 라이브러리 또한 지원합니다. 실버라이트의 닷넷 API는 닷넷 프레임워크의 일부분과 호환합니다.

실버라이트2의 실행을 위해 내 컴퓨터에 닷넷 프레임워크를 설치할 필요는 없습니다. 실버라이트 설치 프로그램은 위에서 설명한 모든 특징들을 포함하여 맥 OSX 또는 윈도우에서 필요한 기능들을 다운로드 합니다.

실버라이트 2 베타1 4.3MB의 용량으로 컴퓨터에 처음 설치될 때 4-10초 정도 걸립니다. 실버라이트 2가 한번 설치되면 여러분의 웹 브라우저(IE, FireFox, Safari )에서 자동으로 실버라이트 응용프로그램이 실행됩니다.


실버라이트 2 튜토리얼: 간단한 Digg 클라이언트 만들기


저는 실버라이트 2를 시작하려는 분들에게 도움을 주기 위해서 실버라이트 프로그램을 작성하고 더불어 컨트롤, 레이아웃 관리, 네트워킹, 데이터 바인딩, 스타일, 사용자 정의 컨트롤, 템플릿 등에 숨어있는 다양한 프로그래밍 개념을 설명하고 파헤칠 단계별 튜토리얼을 만들었습니다. 또한 이러한 응용프로그램을 브라우저 밖으로 마이그레이션하여 닷넷 프레임워크와 WPF를 사용하는 데스크탑 응용프로그램을 어떻게 만들 수 있는지에 대한 방법과 글을 추가했습니다.


아래는 제가 작성한 8개의 튜토리얼에 대한 링크입니다. (아래 링크 한글번역 진행중입니다)

 

Part1: VS 2008과 실버라이트 2를 이용한 “Hello World” 만들기 (한글 번역본 읽기)

Part2: 레이아웃 관리 사용하기 (한글 번역본 읽기)

Part3: 데이터를 가져오기 위한 네트워킹과 DataGrid 사용하기 (한글 번역본 읽기)

Part4: 보다 나은 룩앤필(Look and Feel)을 위한 Style Elements 사용하기 (한글 번역본 읽기)

Part5: 실버라이트 튜토리얼 파트 5: 리스트박스와 데이터바인딩를 사용하여 데이터 표시하기 (한글 번역본 읽기)

Part6: 사용자 정의 컨트롤을 사용하여 Master/Detail 시나리오 구현하기 (한글 번역본 읽기)

Part7: 컨트롤 템플릿을 사용하여 룩앤필(Look and Feel) 변경하기 (한글 번역본 읽기)

Part8: WPF를 이용하여 데스크탑용 Digg 클라이언트 만들기 (한글 번역본 읽기)


튜토리얼에서 만든 응용프로그램은 유명한 Digg.com 사이트를 대상으로 한 간단한 검색용 클라이언트 프로그램으로 사용자는 검색 토픽을 입력하여 관련된 Digg스토리를 검색 합니다.

 

프로그램에서 사용한 모든 UI는 실버라이트의 WPF 프레임워크를 사용했습니다. 프로그램에서 실버라이트 네트워킹 스택을 사용했고 Digg REST API를 직접 접근하기 위한 크로스 도메인 지원을 사용했으며 UI에 데이터바인딩 시킬 DiggStory 데이터의 쿼리와 가공을 위해 LINQ LINQ to XML을 사용했습니다.


사용자 삽입 이미지


프로그램은 사용자로 하여금 검색된 리스트에서 스토리를 선택하고 그것에 대한 자세한 정보를 빠르게 보기 위해서 Master/details 데이터 상호작용 모델을 지원합니다. 사용자는 자세히 보기에서 Digg스토리로 바로 점프하거나 자세히 보기를 닫고 다른 스토리를 선택해 볼 수 있습니다.


사용자 삽입 이미지

 

전체 프로그램은 약 35줄의 C# 코드와 75줄의 XAML 페이지와 사용자 정의 컨트롤 코드로 구현됩니다. 단지 실버라이트에서 제공하는 라이브러리와 컨트롤들만 사용했을 뿐입니다.

 

만약 여러분께서 WPF를 사용해 보신 경험이 있다면 제가 이 튜토리얼에서 논의하는 UI 개념이 매우 낮 익을 것입니다. 하지만 WPF를 사용해 보신 경험이 없다면 이 튜토리얼은 기본적인 프로그래밍 개념을 잡기 위한 좋은 개요를 제공할 것 입니다. 그리고 바라건데 실버라이트 2 베타1이 나왔을 때 VS 2008과 함께 실버라이트 2 응용프로그램을 시작하는 데 필요한 기본 지식을 알려줄 것입니다.

 

베타1이 다운로드 가능하게 되면 제 블로그를 통해서 자세한 내용을 알려드릴 것입니다. 또한 베타1이 출시되면 최종 Digg 프로그램을 코드와 VS 2008에서 열어서 수정할 수 있는 프로젝트 파일과 함께 제 블로그에 올려둘 생각입니다.

 

도움이 되었기를

 

스캇.

 

2008년 2월 22일 오전 6시 41분 ScottGu가 발행함.


윗글은 마이크로소프트 기술이사인 스캇 구슬리의 블로그에 게시된 First Look at Silverlight 2의 번역본 입니다. 본 번역본의 원문은 훈스닷넷의 실버라이트 강좌에 게시되어 있습니다.


WRITTEN BY
ONESTONE

트랙백  0 , 댓글  0개가 달렸습니다.
secret