이 내용은 2011년 6월 현재 Silverlight5 Beta를 기준으로 작성 되었으며 Silverlight5 공식버전(RTM) 발표까지 꾸준히 업데이트 예정입니다.
아울러, 현재 Beta버전이지만 강좌를 따라해 보시는데 아무 문제 없으실거에요. 도움 되시길 바랍니다.
==================================================================================================



이전 강좌에서 실버라이트의 기본 컨트롤들 중 일부를 살펴봤습니다. 강좌에서 소개한 컨트롤 이외에도 여러 가지 컨트롤들이 더 있지만 언제나 그렇듯이 기본 컨트롤만으로는 부족한 감이 있죠.  특히 실버라이트는 그 정도가 더 심해서 데스크탑용 .NET Framework에 비해서 기본 컨트롤이 매우 부족합니다.

 

 

왜 그럴까요?

 

만약 실버라이트 런타임이 한 15메가 정도 된다고 한다면, 포맷하고 실버라이트를 사용하는 홈페이지에 접속할 때 15메가나 되는 실버라이트 런타임을 다운로드 해야만 그 홈페이지가 제대로 보이겠죠? 즉, 실버라이트 런타임은 절대적으로 크기가 작아서 빨리 다운로드되어야만 했던 겁니다. 그래서, 실버라이트 런타임에서는 다운로드 용량을 줄이기 위해 아주 기본적인 컨트롤들만 포함하고 있습니다.

 

 

따라서, 조금만 복잡한 프로그램을 만들려고 해도 기본 컨트롤만으로는 금새 한계에 도달하게 됩니다.

 

 

 

이런 경우 추가 컨트롤을 사용하면 되는데, 우리에게는 다음과 같은 3가지 선택이 있습니다.

 

1) 무료 오픈소스 컨트롤을 찾거나…

2) 서드 파티 컨트롤을 구입하거나

3) 직접 만들거나…

 

 

이 강좌에서는 이 중에서 1) 안에 대해서 얘기를 해볼까 합니다.

 

 

 

 

 

실버라이트가 버전 5까지 나온 이 시점에는 매우 다양한 무료 오픈 소스 실버라이트 컨트롤들이 나와있습니다. 이 중에서 가장 으뜸이라고 말할 수 있는 것은 Silverlight Toolkit입니다.

 

실버라이트 초기에는 워낙 기본 컨트롤 개수가 적어서 Microsoft에서 직접 발벗고 나서서 Silverlight Toolkit이라는 컨트롤을 만들어서 무료로 제공하고 거기에 소스까지 공개했습니다. Silverlight Toolkit은 초기에는 그냥 오픈 소스 컨트롤이었는데 요즘은 거의 실버라이트 기본 컨트롤 취급을 받고 있습니다.

 

다시 말하면, 실버라이트 개발 환경을 구축할 때 되도록이면 Silverlight Toolkit도 같이 설치하는 것이 좋다라는 겁니다.^^

 

 

Silverlight Toolkit은 아래 링크에 가시면 다운로드 하실 수 있습니다.

http://silverlight.codeplex.com/

 

 

공식 홈페이지에 들어가면 다음과 같이 데스크탑 용과 윈도우폰 용이 각각 제공이 됩니다. 우리는 데스크탑용을 설치해야겠죠?

Silverlight Toolkit은 실버라이트 버전업과 독립적으로 계속 버전업이 이루어지고 있으며 개발자들의 피드백을 적극적으로 수용하고 있습니다.

 

image_2.png

 

 

 

 

현 시점에서 Silverlight Toolkit은 공식적으로 실버라이트 4용이 공개되어 있고 실버라이트 5 베타용은 공개되어 있지 않습니다. BusyIndicator를 비롯하여 몇몇 컨트롤들은 실버라이트 5 Beta에서 정상적으로 작동되지 않습니다. 따라서, Silverlight Toolkit이 제대로 작동하지 않는 경우에는 당분간은 다음과 같이 타겟 버전을 실버라이트 4로 바꾸신 후 실행하시기 바랍니다.

 

image_55.png


 

 

 

메인 페이지에서 Silverlight 4 Samples를 클릭하면 다음과 같이 각 컨트롤들에 대한 상세한 데모를 보실 수 있습니다.

MS에서 직접 관리하는 프로젝트이다보니 상용 컨트롤에 버금가는 수준의 완성도와 지원을 해주고 있죠.

 

image_4.png

 

 

 

여기서 잠깐

Silverlight Toolkit은 실버라이트 2 시절부터 개발이 이루어져왔습니다. 실버라이트가 버전업 되면서 Silverlight Toolkit의 컨트롤 중 일부가 기본 컨트롤로 편입된 것들이 있습니다. 따라서, Silverlight Toolkit Samples 컨트롤 중 일부는 Silverlight Toolkit을 설치하지 않아도 사용할 수 있습니다.


 

 

 

Silverlight Toolkit에서 제공하는 컨트롤 중 몇 가지 살펴보도록 하죠.

 

 

 

Accordion 컨트롤

Accordion 컨트롤은 아코디언과 비슷하게 작동하는 컨트롤로 한 번에 하나의 영역만 확장되고 나머지는 제목만 보여주는 컨트롤입니다. Outlook의 사이드 패널과 비슷한 컨트롤이죠.

 

Visual Studio의 툴박스에서 Accordion 컨트롤을 화면으로 드래그해서 추가한 다음, 아래와 같이 XAML을 직접 편집해보세요.

<toolkit:Accordion Height="200" Margin="10" Name="accordion1" Width="200" >

        <toolkit:AccordionItem Header="Header 1" IsSelected="True">

        <StackPanel>

        <TextBlock Text="Text1"/>

        <TextBlock Text="Text2"/>

        </StackPanel>

        </toolkit:AccordionItem>

            <toolkit:AccordionItem Header="Header 2" >

        <StackPanel>

        <TextBlock Text="Text1"/>

        <TextBlock Text="Text2"/>

        </StackPanel>

        </toolkit:AccordionItem>

</toolkit:Accordion>

 

 

 

프로젝트의 Reference 항목을 보시면 다음과 같이 관련 어셈블리가 자동으로 추가되어 있음을 확인하실 수 있습니다.

 

image_25.png

 

 

 

 

실행하면 다음과 같이 아코디언(?)처럼 작동하는 것을 보실 수 있습니다.

image_10.png     image_8.png

 

 

 

여기서 잠깐

Silverlight Toolkit과 같이 외부 컨트롤을 사용할 경우 해당 컨트롤에 대한 어셈블리 파일이 참조로 추가되어야 합니다. 이 때, 프로젝트의 참조에도 추가가 되어야 하지만 다음과 같이 외부 컨트롤이 사용되는 XAML 페이지에도 해당 어셈블리의 네임스페이스가 추가가 되어야 정상적으로 컴파일이 됩니다.

<UserControl x:Class="SilverlightToolkitTest.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400" >

 

그래서, Accordion의 XAML 소스에 “toolkit”이라는 네임스페이스가 사용되고 있는 것이죠.


 

 

 

Accordion은 여러 개의 AccordionItem 컨트롤을 자식으로 취하게 되는데, AccordionItem은 System.Windows.Controls.HeaderedContentControl을 상속하고 있습니다.

 HeaderedContentControl은 그룹박스처럼 헤더를 가지고 있는 ContentControl입니다.

 

아하~ AccordionItem은 Button처럼 Content를 취할 수 있으며, 아무 컨트롤이나 포함시킬 수 있겠군요.!

 

 

 

 

그래서, 다음과 같이 다른 컨트롤을 넣을 수도 있습니다.

image_12.png    image_14.png

 

 

 

다음과 같이 Accordion 컨트롤의 Header의 모양과 방향도 바꿀 수도 있습니다.

image_6.png

 

image_16.png

 

 

 

 

여기에서는 Accordion 컨트롤을 소개하기 위해서 XAML에 AccordionItem을 직접 정의했는데, 일반적으로는 데이터 바인딩을 통해 자동으로 매핑하는 방법을 많이 사용합니다. 데이터 바인딩과 관련된 내용은 별도의 강좌로 설명드리도록 하겠습니다. 원래 실버라이트의 각 기능들이 서로 연관되어 있는 경우가 많습니다.^^;

 

 

 

 

 

아주 간단하면서도 유용한 컨트롤 하나 더 소개하도록 하죠. 바로 BusyIndicator입니다.

BusyIndicator를 이용하면 단 몇 줄만으로 프로그램이 작업중임을 사용자에게 알려줄 수 있습니다.

 

직접 사용법을 보도록 하죠.

 

 

 

다음과 같이 화면에 Button 하나와 BusyIndicator를 추가합니다.

 

image_31.png

 

 

 

 

그런 다음, MainPage.xaml.cs에 다음과 같이 코드를 추가합니다.

 

image_33.png

 

 

 

 

실행한 후 버튼을 누르면 다음과 같이 대기중 애니메이션이 작동합니다.

 

image_35.png

 

 

 

이처럼, BusyIndicator의 IsBusy 속성만 변경하면 간편하게 대기중임을 표시할 수 있습니다.

 

 

 

 

 

Silverlight Toolkit에는 다양한 Chart 컨트롤까지 들어있어서 기업용 프로그램 만들 때 매우 유용하게 사용할 수 있습니다.

 

image_27.png

 

image_29.png

 

 

 

 

이 강좌의 목적은 Silverlight Toolkit을 예로 들어서 실버라이트에서 외부 컨트롤을 사용하는 방법에 대해서 설명드리는 것이므로 Chart 컨트롤의 자세한 사용법은 생략하도록 합니다.^^;

 

 

 

 

 

 

Silverlight Toolkit에는 테마 기능도 들어있습니다. 실버라이트에서는 컨트롤의 모양을 마음대로 바꿀 수 있으므로 기존 컨트롤의 모양을 바꿔서 쓰는 경우가 많지만, 기본 컨트롤의 모양을 그대로 사용하면서 테마만 적용하는 것도 때로는 나쁘지 않습니다. 특히 화면이 매우 많은 경우에는 생산성과 디자인 모두를 잡을 수 있는 좋은 방법이기도 합니다.

 

 

Silverlight Toolkit에서 테마를 사용하는 것은 매우 간단합니다. 직접 사용법을 보도록 하죠.

다음과 같이 System.Windows.Controls.Theming.Toolkit과 원하는 테마 어셈블리를 추가합니다. 여기에서는 ShinyRed를 사용했습니다.

 

image_39.png

 

 

 

사용하려는 테마에 대한 네임스페이스를 추가한 후, 테마를 지정할 컨트롤들을 다음과 같이 감싸줍니다.

image_41.png

 

 

그러면 다음과 같이 기본 컨트롤의 모양이 바뀝니다.

image_43.png

 

 

 

여기에서 테마만 바꿔주면 컨트롤 모양을 한꺼번에 바꿀 수 있죠.

image_51.png

 

image_49.png

 

 

 

 

 

 

Silverlight Toolkit을 예로 들어서 실버라이트에서 외부 컨트롤을 사용하는 방법에 대해서 살펴봤습니다. 이처럼 외부 컨트롤을 이용하면 실버라이트의 기능을 무한대로 확장할 수 있으며 생산성 또한 높아집니다.

 

 

 

여기서 잠깐

외부 컨트롤을 사용하게 되면 여러분의 실버라이트 응용 프로그램의 XAP 파일도 같이 커진다는 것을 잊지 마세요. XAP 파일 안에는 아주 기본적인 어셈블리를 제외하고는 참조되는 모든 어셈블리 파일이 압축되어 포함됩니다. 따라서, 이런저런 외부 컨트롤을 사용하다 보면 간단한 프로그램임에도 불구하고 1메가 넘는 것은 순식간입니다.

XAP 파일이 커지면 커질수록 여러분의 실버라이트 프로그램이 로딩되는 시간도 더 걸리고 네트워크 부하도 늘어난다는 사실을 기억해주세요.

특히, 프로그램이 복잡해질수록 XAP 파일의 크기에 대해서 심각하게 고민을 안 할 수가 없게 됩니다. 이 경우  Assembly Library Cache를 사용하거나, 아니면 동적으로 필요한 어셈블리만 로딩하는 방식을 사용함으로써 메인 XAP 파일의 크기를 줄일 수가 있습니다. 이와 관련된 이야기는 꽤 길기 때문에 기회가 되면 별도의 강좌로 소개하도록 하겠습니다.



Silverlight5 시리즈 강좌 리스트
[Silverlight5강좌] 1. 실버라이트, 어디에 쓰는 물건인가요?
[Silverlight5강좌] 2. 실버라이트로 Hello World 만들기
[Silverlight5강좌] 3. 레이아웃 시스템 이해하기 #1 - 레이아웃 시스템 개념 이해하기
[Silverlight5강좌] 4. 레이아웃 시스템 이해하기 #2 - 레이아웃 시스템의 꽃 Grid 살펴보기
[Silverlight5강좌] 5. 이것만은 꼭! - 간단한 Expression Blend 사용법
[Silverlight5강좌] 6. 유저 인터페이스를 만들어봅시다 - 기본 컨트롤 사용하기
[Silverlight5강좌] 7. 나에게 더 많은 컨트롤을 줘! - Silverlight Toolkit
[Silverlight5강좌] 8. 컨트롤 사이의 연결 고리 - Element Binding
[Silverlight5강좌] 9. 데이터 바인딩 #1 - DataContext
[Silverlight5강좌] 10. 좀더 깊은 곳으로 - 의존 속성(Dependency Property) 이해하기
[Silverlight5강좌] 11. 애니메이션 시스템 이해하기 #1 - Render Transform
[Silverlight5강좌] 12. 애니메이션 시스템 이해하기 #2 - Perspective 3D
[Silverlight5강좌] 13. 애니메이션 시스템 이해하기 #3 - Storyboard
[Silverlight5강좌] 14. 한 방에 편리하게 모양 바꾸기 - Style
[Silverlight5강좌] 15. 컨트롤 모양을 내 마음대로 - ControlTemplate
[Silverlight5강좌] 16. 나만의 컨트롤 만들기 - User Control
[Silverlight5강좌] 17. 실버라이트의 최고 장점! 미디어 제어하기 - MediaElement
[Silverlight5강좌] 18. 손쉽게 다중 페이지 UI 만들기 - Navigation Framework
[Silverlight5강좌] 19. 실버라이트로 데스크탑 응용 프로그램 만들기
[Silverlight5강좌] 20. 실버라이트 응용 프로그램 배포하기

 



Silverlight5 동영상 강좌 리스트

[Silverlight5 동영상 강좌] 2. 실버라이트로 Hello World 만들기
[Silverlight5 동영상 강좌] 3. 레이아웃 시스템 이해하기 #1 - 레이아웃 시스템 개념 이해하기
[Silverlight5 동영상 강좌] 4. 레이아웃 시스템 이해하기 #2 - 레이아웃 시스템의 꽃 Grid 살펴보기
[Silverlight5 동영상 강좌] 5. 이것만은 꼭! - 간단한 Expression Blend 사용법
[Silverlight5 동영상 강좌] 6. 유저 인터페이스를 만들어봅시다 - 기본 컨트롤 사용하기
[Silverlight5 동영상 강좌] 7. 나에게 더 많은 컨트롤을 줘! - Silverlight Toolkit
[Silverlight5 동영상 강좌] 8. 컨트롤 사이의 연결 고리 - Element Binding
[Silverlight5 동영상 강좌] 9. 데이터 바인딩 #1 - DataContext
[Silverlight5 동영상 강좌] 10. 좀더 깊은 곳으로 - 의존 속성(Dependency Property) 이해하기
[Silverlight5 동영상 강좌] 11. 애니메이션 시스템 이해하기 #1 - Render Transform
[Silverlight5 동영상 강좌] 12. 애니메이션 시스템 이해하기 #2 - Perspective 3D
[Silverlight5 동영상 강좌] 13. 애니메이션 시스템 이해하기 #3 - Storyboard
[Silverlight5 동영상 강좌] 14. 한 방에 편리하게 모양 바꾸기 - Style
[Silverlight5 동영상 강좌] 15. 컨트롤 모양을 내 마음대로 - ControlTemplate
[Silverlight5 동영상 강좌] 16. 나만의 컨트롤 만들기 - User Control
[Silverlight5 동영상 강좌] 17. 실버라이트의 최고 장점! 미디어 제어하기 - MediaElement
[Silverlight5 동영상 강좌] 18. 손쉽게 다중 페이지 UI 만들기 - Navigation Framework
[Silverlight5 동영상 강좌] 19. 실버라이트로 데스크탑 응용 프로그램 만들기
[Silverlight5 동영상 강좌] 20. 실버라이트 응용 프로그램 배포하기






profile