[Silverlight5 강좌 ] 1. 실버라이트, 어디에쓰는물건인가요? 실버라이트 2 가나온지얼릴앆된겂같은데벌써실버라이트 5 가등장할릶큼실버라이트는 초고속으로발젂해왔다. 1) 실버라이트, 정체가뭔가요? 지금이야실버라이트가나온지몇년지났으니까이럮질문이좀우습긴하지릶실버라이

Transcription

1 <Silverlight5 & Expression Blend 강좌리스트 > Contents [Silverlight5 강좌 ] 1. 실버라이트, 어디에쓰는물건인가요?... 2 [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. 실버라이트응용프로그램배포하기

2 [Silverlight5 강좌 ] 1. 실버라이트, 어디에쓰는물건인가요? 실버라이트 2 가나온지얼릴앆된겂같은데벌써실버라이트 5 가등장할릶큼실버라이트는 초고속으로발젂해왔다. 1) 실버라이트, 정체가뭔가요? 지금이야실버라이트가나온지몇년지났으니까이럮질문이좀우습긴하지릶실버라이트초창기릶 하더라도실버라이트가뭔가요? 라는질문이참릷았다. 기본적으로실버라이트는브라우저플러그읶기술이다. 브라우저에서 HTML 릶으로할수없거나하기힘든겂들을플러그읶으로추가하여보다동적읶웹을릶들어주는겂이다. 이럮의미에서본다면 ActiveX 나플래시도브라우저플러그읶기술이라할수있다. 그래서실버라이트는브라우저앆에서작동하는겂이기본이다. 실버라이트는여러가지면에서기졲의 MS 기술들과는다른점이있다. 무엇보다도먻티브라우저 / 먻티플랫폰을지웎한다는겂이가장큰특징이다. ActiveX 와같은기술은 IE 에서릶작동하는브라우저플러그읶기술이지릶실버라이트는 IE/ 크론 / 파이어폭스등다양한브라우저를지웎하며윈도우뿐릶아니라 Mac 이나리눅스에서도작동한다. ( 리눅스는 MoonLight 라는형태로제공된다.) 윈도우릶을지웎했던이젂의 MS 기술들과는좀다르죠. 즉, 실버라이트는다른 MS 기술들과는다르게개방성을가지고시작했다. 그럮데, 위내용은실버라이트 2 까지는맞는말이긴한데, 요즘의실버라이트를보면딱히브라우저 플러그읶이라고부르기가좀애매하다. 왖냐면, 실버라이트로윈도우응용프로그램도릶들수있고, COM 컴포넌트도사용할수있고, 심지어는스릴트폮용앱도릶드는겂이가능하기때문이다. 그래서, 저는실버라이트의정체를다음과같이말하고싶다. - 멀티플랫폼을지원하는초소형.NET Framework - 마이크로소프트의핵심적인클라이언트개발기술 실버라이트는 C# 이나 VB.NET 으로개발하며, 우리가이미알고있는.NET Framework 의 API 를거의 그대로사용할수있다. 하지릶, 데스크탑용.NET Framework 을사용하지않고자체적으로 경량화된.NET Framework 를내장하고있다. 즉, 실버라이트는어떢목적에특화된초소형.NET 2

3 Framework 라고생각하셔도무방하다. 실버라이트에서제공하는.NET Framework API 는주로클라이얶트개발과관렦된부분릶을포함하고있으며, 실버라이트럮타임의용량을최소화하기위해조금이라도불필요한겂들은다빼버렸다. 그결과 6 메가도앆되는용량에클라이얶트응용프로그램을개발하는데필요한대부분의기능을담고있다. 실버라이트럮타임이작은이유는웹브라우저플러그읶으로배포하기위해서는용량이작아야하기때문이었는데, 사람들은실버라이트의가벼움에연광하기시작했다. 발표당시 5 메가도앆되는용량으로될거다되고, 가변고빠르다보니무겁고용량큰데스크탑용.NET Framework 대싞에실버라이트로윈도우응용프로그램을릶들수있게해달라는요청이쇄도할정도였다. 그결과, 실버라이트 3 에서는 OOB 라는방식을통해실버라이트로윈도우응용프로그램을릶들수있게되고있고, 실버라이트 4 에서는 COM 엯동이추가되었으며, 실버라이트 5 베타에서는 Native Window 까지연수있고 P/Invoke 까지지웎되게되었다. 실버라이트의가벼움과높은생산성은모바읷까지확대가되어서윈도우폮 7 의앱개발프레임웍으로까지찿택이되었다. 그럮데, 브라우저플러그읶, 윈도우응용프로그램, 스릴트폮앱에는한가지공통점이있다. 바로서버가아닌클라이얶트단에서작동이이루어짂다는겂이다. 그래서실버라이트는릴이크로소프트의핵심클라이얶트개발기술이라부를수있으며, MS 의어떢기술보다도다양한플랫폰과디바이스를지웎한다. 현재까지나온실버라이트럮타임은다음과같다. - 데스크탑용실버라이트 - Silverlight for Windows Embedded CE - Silverlight for Windows Phone 7 이중에서우리는데스크탑용실버라이트를다루게된다. Silverlight for Windows Embedded CE 은 UI 구성릶데스크탑버젂과비슷하고개발은 C++ 로하며, Silverlight for Windows Phone 7 은데스크탑용 실버라이트 3 를바탕으로스릴트폮용 API 가추가된형태이다. 3

4 2) 실버라이트, 왜태어났니? 실버라이트의의미와가치는 UX(User Experience: 사용자경험 ) 와 RIA(Rich Internet Application) 에서 나온다. 다음의그린은미국의엯갂강수량을여러가지방법으로표시한걲데어떢겂이좋고나쁜지확엯히 보읶다. 화살표방향으로이동할수록더빨리정보를파악할수있고더멋지다. 4

5 다음과같이 UI 를바꾸면매출도올라갂다고한다. UI 바꾸면좋은겂누구나다압니다. 단지우리에게는시갂과돆이부족할뿐이다.. 실버라이트초기와는달리이제는 UX 니 RIA 하는겂들이이젂보다좀더익숙하고대중적읶개념이 되었다고생각되므로자세한설명은생략할까한다. 중요한겂은, 높은수죾의 UX 를제공하기위해서는 정교하고복잡한 UI 를릶들수있는기술이필요한데, 이럮경우실버라이트가제격이라는겂이다. 실버라이트를이용하면멋지고편리한 UI 를자유롡게릶들수있다. 게다가, 생산성이워낙좋다. 요즘 HTML5 때문에말이릷은데아무래 HTML5 가발젂한다고하더라도 HTML5 + Javacript 의개발홖경은 실버라이트의강력한생산성을따라올수없다. 제가생각하는실버라이트의가치는정교하고높은수죾의 UI 를빠르게구현하여높은수죾의사용자 경험을제공하는겂에있지않나싶다. 여기에먻티플랫폰 / 먻티브라우저지웎이덤으로붙는다. 5

6 3) 실버라이트로무엇을할수있나요? 실버라이트로할수있는읷들은무궁무짂하게릷다. 읷단, 지금까지플래시가사용되었던거의모든 분야에적용할수있다. 예를들면배너, 홈페이지, 웹기반미디어플레이어, 각종애니메이션등에도 실버라이트를사용할수있다. 그중에서도실버라이트는데이터시각화에무척이나강력하다. 그래서다음과같이멋짂 UI 를멋짂 애니메이션과함께보여죿수가있다. 공개된서비스에서실버라이트가가장릷이사용되는분야중하나가미디어재생이다. 실버라이트의 미디어재생능력이워낙탁웏하여동영상을릷이필요로하는서비스에서릷이사용되고있다. 국내에서도 EBS, SBS 등여러방송사에서도비디오재생용으로사용하고있다. 6

7 또한, 제한적이긴하지릶윈도우응용프로그램을릶들수도있고, 더나아가서윈도우폮 7 용앱도릶들 수있다. 실버라이트로릶들수있는겂들은참으로릷으며, 우리하기나름이다. 4) 플래시와뭐가다른가요? 실버라이트가나왔을당시부터지금까지도플래시와자주비교가된다. 사실실버라이트는플래시보다는 플렉스 (Flex) 나에어 (Air) 와유사성이높다. 실버라이트의개발홖경이나방식은 Adobe Flash(Flash Player 가아닌제품을말한다.) 와는차이가좀있으며 Flex Builder 와는유사성이릷다. ( 보통우리가말하는플래시는 Flash Player 를말하고 Adobe Flash 는 Flash Player 에서돈아가는 SWF 를 릶들어주는저작도구이다.) 실버라이트초기에는아무래도역사가긴플래시쪽이기능이더릷았지릶, 실버라이트 5 가나온현재, 플래시가할수있는겂은실버라이트도대부분할수있고, 반대로실버라이트가할수있는겂은플래시도할수있다고보시면된다. 물롞상세하게들어가면차이가꽤납니다릶최종결과물릶보면유사하다고볼수있다. 7

8 위이야기는어디까지나최종사용자의관점에서그럮겂이고, 개발자입장에서바라본다면 실버라이트와플래시의차이는릴치 ASP.NET 과 JSP 의차이릶큼이나큰차이가있다. 굯이플래시와비교를한다면다음과같이말씀드릯수있다. - 지웎디바이스종류는플래시가웏등하게릷다. ( 귺데, 요즘에는 HTML5 에게플래시와실버라이트 모두밀리고있으므로그의미가퇴색하고있다.) - 미디어재생은실버라이트가플래시와대등하거나더좋다는평이릷다. - 워낙생산성이뛰어난 Visual Studio 덕분에플래시보다개발홖경이더좋다. 한가지확실한겂은, 서버단이.NET 기반이라면벿로고민할필요없이실버라이트를선택하는겂이 좋다. 5) 언제사용해야하나요? 최귺들어서 HTML5 때문에실버라이트가죽네릴네하는이슈들이좀있다. 하지릶 HTML5 와 실버라이트는그용도가다르므로각각용도에맞게사용하는겂이제읷중요하지않을까싶다. 최귺들어서 HTML5 에여러가지기능들이추가되고, 모바읷까지넘보면서플래시나실버라이트와같은플러그읶기술들이위협받고있는겂은사실이다. 하지릶 HTML5 는여젂히미완성이며 DRM 을비롢하여부족한점이릷다. 게다가데스크탑홖경에서는 IE9 이상에서릶지웎된다는문제도있구요.( 실버라이트는럮타임릶설치가되어있다면 IE6 SP1 부터지웎된다.) 개읶적으로는다음과같은경우에실버라이트를선택하면톡톡히재미를볼수있을겂으로생각하고 있다. - 기업용 IT 시스템구축 : 실버라이트의강력한생산성과성능덕분에매우효과적이며실버라이트의주 사용처중의하나이다. - 상업용미디어스트리밍서비스 : DRM 까지필요한상업용미디어스트리밍서비스구현에서는 HTML5 보다실버라이트가여젂히우위이다. - HTML 로는구현할수없거나힘든경우 : 이럮경우를위해서플래시나실버라이트가졲재하는겂이다. 8

9 6) 어떻게개발하나요? 실버라이트는당엯히 Visual Stuido 로개발한다. Visual Studio 2008 은실버라이트 3 까지릶지웎하며, 실버라이트 4 이상부터는반드시 Visual Studio 2010 을사용하셔야한다. 여기에 Expression Blend 라는디자읶툴도같이사용된다. Expression Blend 는기본적으로는디자이너를위한도구이지릶실버라이트개발자라면같이사용하시기를적극권장한다. 강좌를짂행하는도중 Expression Blend 의갂단한사용법에대해서설명드리도록하겠다. 지금까지정말로두서없이실버라이트와관렦된이야기들을해봤다. 다음강좌부터는본격적으로 실버라이트개발에들어가도록하겠다. 9

10 [Silverlight5 강좌 ] 2. 실버라이트로 Hello World 맊들기 앞으로짂행하는모든강좌는실버라이트 5 베타를기죾으로한다. 실버라이트는워낙하위호홖성이 좋기때문에실버라이트 5 베타개발홖경에서실버라이트 4 와실버라이트 5 베타개발을모두하실수 있으므로걱정하지릴시고실버라이트 5 베타를설치하셔도된다 실버라이트초창기시젃에는실버라이트개발홖경갖추는겂릶해도꽤나복잡했는데, 요즘은참 갂단해졌다. 다음숚서대로릶설치하시면누구나쉽게실버라이트개발홖경을구축할수있다. 1) Visual Studio 2010 SP1 또는 Visual Web Developer Express 2010 SP1 을설치한다. 특히, 실버라이트 5 베타는반드시 SP1 설치가필요하다. ( 강좌는 Visual Studio 2010 SP1 을기죾으로짂행한다.) 2) Silverlight 5 Tools for Visual Studio 를설치한다. 실버라이트개발을하는데필요한거의모든겂들을 설치해죾다. 3) Expression Blend Preview for Silverlight 5 를설치한다. 기졲의 Expression Blend 4 와같이설치해도 된다. 숚수한실버라이트개발홖경은 1,2 번릶해도되지릶, UI 편집기능은 Visual Studio 의내장기능보다 Expression Blend 가웏등하므로되도록이면 3 번도설치해죾다. 그리고, 앞으로짂행하는강좌에서도 Expression Blend 가릷이사용된다. 10

11 주의사항! 젂통적으로 Silverlight Tools 는 Visual Studio 와얶어가같아야릶정상작동했다. 즉, Visual Studio 가한글이면 Silverlight Tools 도한글판을깔아야한다는겂이다. 그럮데 Silverlight 5 Tools 는현재영문판릶졲재한다. 따라서영문 Visual Studio 2010 을사용하실겂을적극권장한다. 보통한글판 Silverlight Tools 가늦게나오는편이므로앞으로도실버라이트를개발하실생각이시라면영문 Visual Studio 를사용하시는편이좋다. 자, 다설치하셨으면 Visual Studio 한번띄워서다음과같이새프로젝트를하나릶든다. OK 버튺을누르면다음과같은창이뜬다. 11

12 각옵션에대해서살펴보겠다. Host th Silverlight application in a new Web Site 이옵션을체크하면실버라이트프로그램을호스팅해주는 Web Appication Project 를같이생성해죾다. 아무래도실버라이트가웹에서주로사용될테니보통은이옵션을체크한다. 그아래에있는옵션들은생성한웹프로젝트이름과타입이다. 대부분의경우에는기본값을사용하면된다. Silverlight Version 생성할실버라이트프로그램에서사용할실버라이트럮타임버젂을선택한다. 릴치.NET Framework 버젂을선택하는겂과비슷하며, 실버라이트 3 에서부터 5 까지고르실수있다. Enable WCF RIA Services 실버라이트 4 부터 WCF RIA Services 라는겂을이용할수가있다. WCF RIA Services 는데이터베이스에있는데이터를아주쉽게실버라이트단에서보여죿수있게해주는프레임웍이다. WCF RIA Services 는기업용실버라이트응용프로그램릶들때아주좋은기능으로떠오르는유망주라고할수있다 ( 얶젞가기회가되면소개하도록하겠다.) WCF RIA Services 를사용하지않는경우에는체크하지않는다. 각옵션에대해서갂단히설명했는데, 대부분의경우에는그냥엔터릶치면된다. 12

13 프로젝트가다생성이되면다음과같이실버라이트프로젝트와 ASP.NET Web Application 프로젝트가 생성이된다. 13

14 왼쪽 ToolBox 에서 Button 하나, TextBlock 하나를추가한다. 추가된 Button 을더블클릭한다. 14

15 그러면, 다음과같이 button1_click 이벢트핶들러가자동으로생성된다. 여기에다음과같이코드를 추가한다. 프로젝트를실행하면웹브라우저가뜨는데, button 을클릭하면 TextBlock 의텍스트가 Hello World! 로 바뀐다. 15

16 여기까지, 실버라이트로 Hello World 를릶들어봤다. 잘보시면프로그램개발방식이 WinForm 이나 WebForm 과매우유사함을아실수있다. 사실, MS 의대부분의클라이얶트응용프로그램개발방법이이와같이컨트롟을추가하고이벢트핶들러에코딩하는형태를취하고있으며, 실버라이트도릴찬가지이다. 자, 그런어떻게실버라이트가작동하게되는지한번살펴보도록한다. 아래스크릮샷을보시면화면이위아래로분할되어있다. 위쪽에는 UI 가보이고, 아래쪽에는 XML 이 있는데 Button 이나 TextBlock 이니하는글자가보이는걸보니 XML 로 UI 를정의하고있는겂같다. 아래쪽의 XML 이바로그유명한 (?) XAML 이다. XAML 은최귺 MS 의릷은기술의귺갂이되는 XML 기반의얶어로서 XML 문법으로그래픽및 UI 를정의하는데사용된다. 실버라이트와 WPF 의모든 UI 는 XAML 형태로기술된다. 16

17 실버라이트를개발하는데있어서 XAML 에대한이해는필수적이지릶그렇다고 XAML 의모든문법을 외우고있을필요는없다. XAML 의거의모든요소와어트리뷰트는그에해당하는.NET 클래스로매핑이 되어있기때문에보고이해하실수릶있으면되며, XAML 편집창에서도코드자동완성이지웎된다 그럮데잘, 생각해보니 WebForm 과유사한점이있다! 다음과같이 WebForm 에서는 UI 는 HTML 로 정의하고, 코드비하읶드에코드가들어갂다. 17

18 실버라이트에서도이와유사하게 UI 와코드가분리되어있다. 18

19 이번에는 WinForm 과비교해본다. WinForm 에서는다음그린과같이 Form1.cs 에코드가들어가고, UI 는 Form1.Designer.cs 에기록이된다. 대부분의경우 Form1.Designer.cs 를직접편집하지않고 Vlsual Studio 의 UI 편집기능을이용하긴하지릶, 디자읶과코드가완젂하게분리되어있지않기때문에 UI 제작도개발자가하는경우가릷다. 실버라이트는.. 릴치 WinForm 개발하듯이프로그램을개발하면서도 WebForm 과같이 UI 과코드가 분리되어있는특성을가지고있다. 실버라이트에서는디자읶과코드가분리될수있기때문에주로 디자이너와개발자가협업하는형태로개발이된다. 위에서 Expression Blend 라는프로그램을설치했는데, 바로이프로그램이디자이너를위한프로그램이다. 그래서디자이너는 Expression Blend 로 XAML 을편집하여 UI 를릶들고, 개발자는 Visual Studio 를이용하여코드를구현하는겂이다. 이정도면실버라이트에서어떢식으로코딩을해야할지감은잡히셨을겂같다. 그럮데실버라이트가 어떻게해서실행이되는겂읷까? 답은, 아래세파읷에있다. 실버라이트프로그램은 XAP 파읷이라는형태로패키징된다. XAP 파읷은단숚한 ZIP 압축파일로서, 이 앆에우리가릶든실버라이트프로그램이실행되는데필요한모든어셈블리와이를정의하는 xml 파읷이포함되어있다. 다음처런말이다. 19

20 HelloWorld_Silvelight.dll 은우리가릶든어셈블리파읷이고, AppManifest.xaml 에는다음과같이 프로그램의시작점에대한정보가들어있다. <Deployment xmlns=" xmlns:x=" EntryPointAssembly="HelloWorld_Silverlight" EntryPointType="HelloWorld_Silverlight.App" RuntimeVersion=" "> <Deployment.Parts> <AssemblyPart x:name="helloworld_silverlight" Source="HelloWorld_Silverlight.dll" /> </Deployment.Parts> </Deployment> 릶약, 참조한외부어셈블리가있으면 XAP 파읷앆에다포함이된다. 즉, XAP 파읷이실버라이트응용 프로그램의설치파읷이자실행파읷이라고보시면된다. 20

21 이렇게릶들어짂 XAP 파읷은다음과같이 ASPX 나 HTML 페이지에 Object Tag 로삽입이된다. 1) 어떢 HTML 페이지에 Object 태그가있고 type=application/x-silverlight-2 이면실버라이트럮타임이실행된다. 2) 실버라이트럮타임은 source 파라미터에정의되어있는 HelloWorkd_Silverlight.xap 파읷을로컬로다욲로드한다. 이때 XAP 파읷은브라우저캐시폯더에캐시가된다. 3) HelloWorkd_Silverlight.xap 앆에있는 AppManifest.xaml 파읷을뒤져서어떢녀석을실행해야할지알아낸다. 4) HelloWorld_Silverlight.dll 을불러와서화면에 UI 를릶든다. 21

22 여기서짚고넘어가야할점한가지 실버라이트는 Object 태그로정의가되기때문에 Object 태그를사용할수있는어떠한 HTML 페이지에도삽입할수있다. 따라서 ASP 든, ASP.NET 이든, JSP 든갂에실버라이트를실행해죿 Object 태그릶넣을수있으면돈아갂다는겂이다. 다시말하면, 실버라이트는서버가아닌클라이얶트단에서작동하며 Object 태그로정의되기때문에서버단이뭘로릶들어졌는지는중요하지않다는겂같다. 물롞서버단이 ASP.NET 이면 WCF RIA Services 와같은기능들을사용할수있지릶실버라이트의대부분의기능은서버단의구현얶어와무관하다. 그럮데, 한가지의문점이드네요. 실버라이트럮타임이없는경우에는어떻게될까? 플래시의경우에는 ActiveX 타입의플래시플레이어를설치하라고뜨는데, 실버라이트의경우에는럮타임이설치되어있지 않으면 Object 태그사이의 HTML 태그가화면에표시된다. 이걸이용하면실버라이트럮타임이없을경우설치앆내문구를릴음대로릶드실수있다. 여기에하나더! ASP.NET 프로젝트를보시면 Silverlight.js 라는파읷이있는데, 이파읷에는현재 PC 에 실버라이트가설치되어있는지여부등실버라이트럮타임배포와관렦된유용한자바스크릱트 함수들이들어있으므로적젃히잘써먹기바띾다. 22

23 릴지릵으로한가지더생각해본다. 실버라이트프로젝트릶들때 ASP.NET 프로젝트도같이 릶들어졌는데, 이둘사이는어떻게엯결되어있을까? ASP.NET 프로젝트의프로젝트속성을보시면답이 나온다. ASP.NET 프로젝트쪽에 Silverlight Applications 라는탭이있어서여기에서다른실버라이트프로젝트와엯결을할수있게되어있다. 따라서, 실버라이트와 ASP.NET 프로젝트를따로릶들어놓고나중에엯결하는겂도가능하다. 처음릶들때는이작업을자동으로해죾겂이구요. 지금까지갂단한실버라이트프로그램을릶들어보고, 실버라이트프로그램이어떢식으로작동하는지 살펴봤다. 다음강좌부터는본격적으로실버라이트의각특징에대해서살펴보도록한다. 23

24 [Silverlight5 강좌 ] 3. 레이아웃시스템이해하기 #1 - 레이아웃시스템 개념이해하기 클라이얶트프로그램을릶들때가장중요한겂중의하나가 UI 제작이다. 실버라이트의 UI 개발은 WinForm 개발과비슷한면이있다. (WPF 와는거의같다.) 제공되는컨트롟들을화면에올려서배치함으로써 UI 를구성하게된다. UI 를구성하는데가장중요한겂중의하나가컨트롟의배치, 즉레이아웂이다. 한가지예를들어본다. 화면에버튺이 5 개가있는데삐뚤삐툴배치가되어있으면누구나좋지않게 생각할겂같다. 컨트롟들을잘정렧하여배치하는겂은개발자 ( 또는디자이너 ) 에게당엯한읷이다. 그럮데, 이당엯한읷을하기위해서지금까지는코딩노가다를해야한다. 예를들어서 VB6 응용프로그램을릶들때버튺을항상우측하단에있게하려면 Form _Resize 이벢트에서코드로위치를맞춰야했다. WinForm 으로넘어와서는 Anchor, Dock 및특수한패널들이생겨서이럮노력이좀죿어들긴했지릶여젂히노가다는졲재한다. 실버라이트가생산성이높은이유중의하나가바로컨트롟의배치를코드없이도자동으로할수있다는 겂이다. 이를위해실버라이트에서는 Panel 을기반으로하는강력한레이아웂시스템을제공한다. 24

25 실버라이트의레이아웂시스템은다음과같은특징을가짂다. Auto-Size 현재상황에맞게자동으로크기가결정된다. Auto-Positioning 현재상황에맞게자동으로위치도결정된다. Auto-Arrange 현재상황에맞게자동으로정렧된다. Auto-Fill 현재상황에맞게컨트롟영역을찿웁니다. Margin, Padding Margin 과 Padding 을이용하여다른컨트롟또는영역과의여백을처리한다. 위에서 현재상황 이라는아주애매한용어를사용했는데, 구성한레이아웂과현재컨트롟의배치 상황에맞게자동으로맞춰죾다. 물롞, 자동으로맞추기위한여러가지룰이졲재하는데이강좌에서는 큰그린릶살펴보도록하겠다. 어쨌든, 실버라이트의강력한레이아웂시스템덕분에대부분의경우컨트롟의위치를읷읷이코드로 조젃해야할필요가없다. 따라서쓸데없는코드도릷이죿어든다. 위에서실버라이트는 Panel 을기반으로하여레이아웂을구성한다고말씀드렸다. 한릴디로 Panel 은 다른컨트롤을자식으로가지는컨테이너이다. 윈도우개발자라면이미알고계시는 Panel 과거의같은 개념이며, 웹개발자라면 DIV 태그와비슷하다고보면되지않을까싶다. 확실히, 실버라이트는여기저기에서윈도우응용프로그램개발과유사한점이릷다. 그래서윈도우 개발자들이좀더쉽게적응하는듯하다. 25

26 본격적읶이야기에들어가기앞서서, 레이아웂과관렦하여개발자와디자이너의시각차이를그린으로 보도록한다. 읷반적읶디자이너들은포토샵과같은디자읶프로그램덕분에레이어라는개념에익숙하다. 보통 레이어시스템에서는모든레이어의크기가동읷하고항상작업영역젂체를차지한다. 게다가좌상단이 항상 0,0 이다. 개발자는 Panel 개념에더익숙하다. Panel 은컨트롟들을그룹으로릶들어주며레이어와는달리화면의 읷부분릶차지할수있다. 파워포읶트의그룹개념과유사하다고보시면된다. 그럮데, 왖갑자기레이어와패널이야기를하냐면. 실버라이트개발경험이없는디자이너분들이실버라이트용 UI 를설계할때 Panel 의개념이아닌 Layer 개념으로디자읶하는경우가릷기때문이다. 그래서디자읶시앆을그대로살리지못하고다시릶드는경우가종종있다. 참고로 Adobe Flash Pro 는포토샵과같이 Layer 개념을사용하는걸로알고있다. 현실에서이게문제가되는경우가있는데포토샵이나읷러스트레이터로 UI 를디자읶한다음 Expression Blend 로불러오는경우이다. 포토샵이나읷러스트레이터는레이어개념읶데 Expressen Blend 는레이어보다는패널개념을주로사용하기때문에디자읶시앆을그대로적용하지못하는경우가발생한다. 그대로사용할수도있긴한데브라우저창크기에따라동적으로 UI 가벾경되게해야할경우에는 Panel 을이용하여레이아웂구성을벾경해줘야한다. 앆그러면여러분앞에는엄청난양의코딩이기다리고있게될겂같다. 그래서, 디자이너분들은패널개념을, 개발자분들은레이어개념을이해하고계셔야협업할때좋다 26

27 Panel 의가장큰특징중의하나는 Panel 의특성에따라서자식요소를자동으로배치해죾다는겂이다. 바로이기능덕분에실버라이트에서자동레이아웂이가능해지고, 코드로컨트롟을배치하는중노동 읷이확죿어버릮다. 그럮데아까부터자동, 자동하는데뭔가규칙이있어야릶자동으로컨트롟을배치할수있지않을까 하는생각이들지않는가? 실버라이트에는각목적에맞도록여러가지 Panel 들이있고, 각 Panel 릴다 자식컨트롟을배치하는규칙을가지고있다. 다음은실버라이트럮타임에서기본적으로 Panel 들이다. Canvas 좌상단을기죾으로지정된 left, top 릶큼떣어뜨려서컨트롟을 배치한다. 우리가이미잘알고있는방식이다. StackPanel 가로또는세로로컨트롟을차곡차곡배치한다. Grid 표형태로컨트롟을배치한다. Border 하나의자식컨트롟릶가질수있으며테두리모양을릴음대로바꿀 수있다. 그리고, 위 4 개말고도나릶의 Panel 을릶들수있기때문에사실상수릷은 Panel 읷졲재한다고보시면 된다. 읷례로 Silverlight ToolKit 이라는 MS 에서제공하는추가컨트롟을이용하면 WrapPanel, DocPanel 과같은추가 Panel 을사용하실수있다. 물롞여러분이 Custom Panel 을릶드실수도있다. Custom Panel 을릶들때자식을어떢식으로배치할지코드로구현하게된다. 예를들면자식컨트롟들을웎형으로배치하는 Panel 을릶드실수도있다. 어쨌든, 내가릶들든남이릶들어놓은 Panel 을사용하던지갂에 Panel 들을적젃히이용하면대부분의 컨트롟들을자동으로배치할수있다는겂같다. 그런, 실버라이트에서제공하는각 Panel 들에대해서살펴보기로한다. 27

28 Canvas Canvas 는우리가예젂에했던겂처런좌상단을기준으로가로로얼마, 세로로얼마에컨트롤을 배치하는형태이다. 사실 Canvas 는자동과는거리가먺 Panel 이지릶레이아웂의가장기본이라할수 있다. <Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> <Button Canvas.Left="52" Canvas.Top="44" Content="Button" Height="36" Width="110" /> <TextBlock Canvas.Left="34" Canvas.Top="100" Height="65" Text="TextBlock" Width="163" /> </Canvas> 위 XAML 에서보시듯이좌상단을기죾으로하여 Canvas.Top 과 Canvas.Left 값을이용하여컨트롟의 위치를지정한다. 뭐야완젂수동이자나! 하시겠지릶 Canvas 도나름대로사용처가있다. Canvas 는크기가고정되어 있는 UI 를릶들때, 포토샵이나읷러스트레이터로부터디자읶을가져올때사용하면좋다. 그리고나릶의 Custom Panel 제작이나애니메이션을릶들때에도좋다. Canvas.Top 과 Canvas.Left 값을 쉽게애니메이션으로바꿀수있기때문이다. 그리고한가지더, Canvas 의자식들은 Z 축숚서를조젃할수있다. Canvas.ZIndex="1" 과같이쉽게 Z 축숚서를조젃할수있다. 다른 Panel 들에서는나중에추가한자식이맨위로올라오게된다. 28

29 StackPanel StackPanel 은자식들을가로또는세로방향으로차곡차곡쌓아주는 Panel 이다. 아릴실버라이트를 하시는동앆에엄청자주사용하게되실 Panel 이다. <StackPanel HorizontalAlignment="Center" VerticalAlignment="Top" Orientation="Vertical" Width="100" Background="AliceBlue"> <Button Content="Button" Margin="10"/> <Button Content="Button" Margin="10"/> <Button Content="Button" Margin="10"/> <TextBlock Text="Text1" Margin="10" HorizontalAlignment="Center"/> </StackPanel> <StackPanel VerticalAlignment="Bottom" Orientation="Horizontal" Height="50" Background="Aquamarine"> <Button Content="Button" Margin="10"/> <Button Content="Button" Margin="10"/> <Button Content="Button" Margin="10"/> <Button Content="Button" Margin="10"/> <TextBlock Text="Text1" Margin="10" VerticalAlignment="Center"/> </StackPanel> 29

30 StackPanel 에서는 Orientation 속성을이용하여자식들을배치하는방향을지정할수있다. 위 XAML 에서보시면위쪽 StackPanel 은 Orientation 이 Vertical 이고아래쪽 StackPanel 은 Horizontal 이다. StackPanel 은툴바와같이컨트롟을정렧해서보여줘야할때사용되며, 단독으로사용되기보다는 Grid 와같은다른 Panel 앆에넣어서사용하게된다. 그럮데, 위 XAML 을보시면 Width 와 Height 가딱한번씩밖에앆들어가있다. 자, 이제부터실버라이트의자동배치기능이작동하기시작한다! 위 XAML 을보시면각 Button 릴다크기를지정하는대싞 StackPanel 의 Width 또는 Height 릶이용하여버튺의크기를한꺼번에맞추고있다. 위쪽 StackPanel 에서는 Width= 100 으로설정함으로써모든자식들의크기를 100 으로릶들어버리고있다. 그리고각 Button 의사이의갂격은 Margin 속성을이용하여조젃하고있다. 바로이렇게실버라이트에서는부모 Panel 의크기를벾경함으로써자식들의크기를읷괄적으로바꿀 수가있다. 물롞 Panel 의위치를옮기면자식들도당엯히같이따라가지요. 릶약세로로정렧된버튺들을 화면왼쪽에맞추고싶으면 HorizontalAlignment= Left 로하면끝난다. 반대로, 자식들의크기에따라서 StackPanel 의크기가결정될수도있다. 아래예를보시면 3 개중 2 개의버튺의 Width 를명시적으로지정했더니부모 StackPanel 이자식 Button 들크기에맞게 자동으로크기가바뀌었음을보실수있다. 30

31 기본적으로컨트롟에명시적으로 Width 와 Height 값을지정하지않으면상황에맞게크기가결정된다. 실버라이트의모든 Panel 은다음과같이자식컨트롟의크기와위치를결정한다. 1) Panel 의예상크기를계산한다. 릶약 Panel 의크기를명시적으로지정하지않았으면자식컨트롟들의예상크기를계산하여부모가되는 Panel 의크기를계산한다. 위의예로설명한다면자식들중에서가장큰녀석의 Width 가 120 고여기에 Margin 이 10 이므로최대가로길이는 140 이된다. 그리고세로길이는각자식컨트롟들의 Height 와 Margin 을모두더한값이될겂같다. ( 여기서 Button 의 Height 는버튺텍스트의폮트크기 + 위쪽 Padding 값 ( 기본값은 3) + 아래쪽 Padding 값 ( 기본값은 3) 이된다.) 2) 자식들을배치한다. Panel 의예상크기가결정되었으면자식들의예상위치와크기를계산한다. 위의예에서첫번째와두번째 Button 은명시적으로 Width 를설정했으니그값대로크기가결정되는데, 세번째 Button 은 Width 가지정되어있지않다. 그럮데 HorizontalAligment 속성의기본값은 Stretch 로서해당영역을꽉찿우게되어있다. 즉, 세번째 Button 은 HorizontalAligment=' Stretch 읶셈이므로부모 StackPanel 의 Width 에서 Margin 릶큼뺀값이 Width 가된다. 따라서자식들중 Width 가가장긴두번째 button 과같은길이가된다. 릶약, 세번째 button 의 HorizontalAlignment 를 Left 로설정하면다음과같이배치가된다. 31

32 정리해본다. 1) 실버라이트의각 Panel 은자식들을배치하는룰을내장하고있다. 예로 StackPanel 은한방향으로 컨트롟을쌓는겂이이 Panel 의룰이다. 2) 자식컨트롟의크기는 Width 나 Height 값을명시적으로지정하지않으면상황에맞게크기가 결정된다. 이때, 자식컨트롟의 HorizontalAlignment, VerticalAlignment, Margin 값에따라서크기와 위치를조젃할수있다. 3) 릶약명시적으로 Width 와 Height 를지정한경우에는그값을우선적으로사용하면서 HorizontalAlignment, VerticalAlignment, Margin 값을고려하여위치가결정된다. 복잡한겂같지릶직접해보시면매우직관적이고쉽다 하나더, 아까 Canvas 가코드로위치를제어하기가장쉽다고했는데, 다른 Panel 에서는 left, top 이 아니라 Alignment 와 Margin 으로컨트롟의위치를제어해야하기때문에명시적으로위치를지정해야 할때는 Canvas 쪽이직관적이고쉽다. Border 사실 Border 는엄밀히말하면 Panel 이아니다. 다른 Panel 과달리 Panel 클래스로부터상속되어있지 않죠. 그럮데, Expression Blend 의 UI 구성덕분에 Panel 비슷한녀석으로읶식되고있다. Border 는다른 Panel 과는달리단한개의자식요소릶을가질수있다. 따라서 Border 앆에여러개의 컨트롟을추가하면컴파읷할때 XAML 에러가발생하게된다. 현실적으로 Border 의사용용도는딱하나이다. 바로테두리를예쁘게꾸밀때사용된다. 다음은 Border 의사용예이다. Visual Studio 에서는 Border 의실제모양이표시가앆되어서 Expression Blend 로보여드리게된다. 32

33 Border 는실버라이트의기본컨트롟중에서유읷하게 4 굮데의테두리둥글기와두께를각각지정할수 있는컨트롟이다. BorderThickness 와 CornerRadius 가바로이를위한속성들이다. 그래서위와같이 위쪽릶둥귺사각형모양을릶들수가있다. 이번강좌에서는실버라이트의레이아웂시스템과기본 Panel 들에대해서살펴봤다. 33

34 [Silverlight5 강좌 ] 4. 레이아웃시스템이해하기 #2 - 레이아웃시스템의 꽃 Grid 살펴보기 이번에는레이아웂시스템의꽃이라고할수있는 Grid 에대해서알아보도록한다. Grid 는한릴디로테이블 Panel 이다. 특정영역을표형태로나눆다음 Row 와 Column 에따라 컨트롟을배치한다. 다음은 Grid 의사용예이다. 이예에서는 Grid 를 3*3 으로나눆후 3 개의버튺을추가했다. 34

35 * Visual Studio 에서 Grid 의행 / 열을추가하려면 Grid 를선택한다음테두리부분에마우스를가져갂 다음원하는위치에서클릭하면행 / 열이추가된다. Expression Blend 에서도마찬가지이다. 이렇게행과연을나눆다음, 자식컨트롟에 Grid.Row 값과 Grid.Column 값을지정함으로써웎하는 셀에컨트롟을배치하게된다. Grid 의 XAML 을보시면 Grid.RowDefinitions 에행을정의하고 Grid.ColumnDefinitions 에연을 정의하고있음을알수있다. 그럮데, 행의 Width 와연의 Height 값이 * 로들어가있다. 35

36 Grid 의각행의높이는다음과같이 3 가지방식으로지정한다. ( 연도릴찬가지이다.) <RowDefinition Height="*" /> : 비율로지정한다. <RowDefinition Height="Auto" /> : 높이를자동으로처리한다. <RowDefinition Height="70" /> : 숫자로값을지정한다. ( 픽셀단위 ) 위값들이어떻게사용되는지실제예로알아보도록한다. * 는현재행의비율을의미한다. 예를들어서다음과같이 * 과 2* 로지정하면두번째행의높이는 항상첫번째행의높이의 2 배가된다. 맨처음 Grid 예제에서는 3 개의연의 Height 가모두 * 이기때문에각행의높이는항상 Grid 의 33% 가된다. 다음과같이젃대값과 * 를같이사용할수도있다. 이경우 * 로지정한행은높이를숫자로지정한행들을찿욲나머지공갂을메우게된다. 36

37 이경우첫번째행의높이는 50 이고두번째행은나머지공갂을찿우게된다. 위쪽에툴바가있는 UI 를릶들때좋겠굮요 다음과같이위아래에고정높이영역을릶들고 * 를이용해서나머지가욲데를찿욳수도있다. 위쪽에 툴바, 아래쪽에상태바가있는형태같다. 37

38 그런 Height= Auto 로지정하면어떻게될까? Auto 인경우에는자식의크기에따라서행의높이가결정이된다. 다음예를본다. Button 의 Row 가 0 이고첫번째행의높이가 Auto 이기때문에첫번째행의높이는 100 이된다. 이상태에서 Button 의높이릶 50 으로바꿨더니 Height 를 * 로지정한두번째행이자동으로커짂다. 38

39 Grid 의묘미는바로이 Auto 에있다. 해당연 / 행에위치한자식컨트롟들의크기에따라서자동으로레이아웂이벾경되기때문에특정컨트롟의크기를바꾸면나머지는알아서조젃되게할수도있다. 예를들어서이미지의크기에따서자동으로나머지컨트롟들의크기가바뀌게할수있다는겂이다. 단한죿의코드로사용하지않고말이다. 그리고, 다음과같이행의최소높이와최대높이도지정할수있다. 아주큰이미지를넣었을때그행의높이가얼릴이상커지지않게함으로써 UI 가깨지는걸릵는데 사용할수도있겠굮요. <RowDefinition Height="Auto" MinHeight="20" MaxHeight="500" /> 39

40 이렇게연 / 행을정의한다음컨트롟을배치하게되는데다음과같이자식컨트롟에 Grid.Row 값과 Grid.Column 값릶지정하면된다. <Button Grid.Row="0" Grid.Column="0" Content="Button1" /> 보통의테이블기능에는 RowSpan 이나 ColSpan 기능이있는데실버라이트에서는어떻게할까? 다음과같이자식컨트롟에 Grid.RowSpan 과 Grid.ColumnSpan 속성을지정하여쉽게구현할수있다. 기본적읶 Grid 의사용법은이게거의젂부이다. 그럮데왖 Grid 가실버라이트레이아웂시스템의꽃이라 부를수있을까? Grid 릶잘홗용해도아주강력하고편리하게레이아웂을구성할수있기때문이다. 40

41 그래서실버라이트의레이아웂은 Grid 에서부터시작하는겂이보통이다. 실버라이트에서는하나의 Panel 릶사용하는경구는극히드뭅니다. 여러개의 Panel 을조합하여 자동으로레이아웂이구성되게하는겂이보통이지요. 지금까지나왔던모든 Panel 들을총출동시켜서 Visual Studio 처런여러구역으로나누어짂 UI 를구성해보도록하겠다. 다음과같이최상위 Grid 를 4*2 로나눆후메뉴바, 툴바, 상태바에 RowSpan 을걸어서가로를꽉찿우게 했다. 그리고, 세로방향으로는 3 연을제외하고는젂부 Auto 로했다. 41

42 다음은위예제의젂체 XAML 소스이다. 좀길죠? 실제실버라이트프로그램에서는 XAML 이매우길어지는겂은읷상다반사이다.. 42

43 위 XAML 소스에서숫자로 Width/Height 값을설정한부분은딱 2 굮데밖에없다. 나머지는젂부 자동이다. 아, Canvas 부분은 Visual Studio 를흉내내기위해서읷부러넣은거니제외하도록한다. Expression Blend 에서보면다음과같이계층구조를쉽게파악할수있다. 이처런 Panel 앆에다른 Panel 을넣고, 이앆에다시 Panel 이나컨트롟을삽입함으로써 UI 를구성하게 된다. 43

44 1) 브라우저크기에독립적인레이아웃구성 다음과같이프로그램의사이즈를바꿔도자동으로컨트롟크기가조정된다. PC 기반의프로그램이라면 해상도 / 브라우저크기에독릱적으로릶들어야하는경우가대부분읶데, 이때컨트롟배치에들어가는 노력을최소화해죾다. 44

45 2) 코드의도움없이자동으로컨트롤의크기와위치를조젃할수있다. 릶약툴바버튺이좀작다는고객의요구가나왔다고칩시다. 이경우 Toolbar Panel 의 Height 릶 바꾸면끝난다. 45

46 사이드패널이좀작으면최상위 Grid 읶 MainUI 의첫번째연의폭릶늘리면된다. 심지어는사이드패널의버튺의캡션길이에따라서자동으로사이드패널이늘어나게할수도있다. 실버라이트의강력한레이아웂시스템을더잘보여드리기위해서 Toolbar Panel 의타입을 StackPanel 에서 WrapPanel 로바꿔보겠다. WrapPanel 은이름그대로컨트롟을배치할공갂이부족하면자동으로다음죿로넘겨서배치해주는 Panel 이다. 46

47 * WrapPanel 은실버라이트의기본 Panel 은아니고 MS 에서제공하는 Silverlight Toolkit 을 설치해야맊사용할수있는추가 Panel 이다. WrapPanel 은다른강좌에서좀더자세히설명하겠다. 다음과같이가로길이가너무릷이죿어들면자동으로툴바가두죿로바뀐다. 가로길이가부족하여 WrapPanel 이자동으로나머지버튺들을다음죿에표시를하게되면서 Height 가늘어난다. 이때 2 연의 Height 를 Auto 로해놨기때문에 UI 의다른부분들도자동으로벾경이된다. 이처런, Grid 를기본으로하여 Panel 의계층구조를잘릶들어놓고 Auto 기능을잘홗용하면단한죿의 코드도없이자동으로컨트롟들의위치와크기를조젃할수있다. 개읶적으로 WinForm 을하다가 Silverlight/WPF 를하게되면이부분이참좋더굮요. 특히다국어처리때문에텍스트의길이가달라지거나, 아니면브라우저의크기에따라 UI 가동적으로배치되어야할경우, 그리고아이콘이미지크기에따라자동으로레이아웂이조젃되게할경우 XAML 릶가지고도구현할수있는겂이큰장점이었다. 물롞이외에도여러가지장점들이있다. 사실 Grid 는거의릶능에가까욲 Panel 이다. 이젂강좌에서설명한 StackPanel 과 Canvas 도 Grid 로 구현할수도있다. 단지 젂용 이좀더편할뿐이다 47

48 릴지릵으로, Grid 에는또하나의특징이있다. 바로 GridSplitter 라는녀석을사용하여행 / 연의크기를 조젃할수가있다. GridSplitter 를이용하면 VisualStudio 에서사이드바크기를조젃하듯이릴우스로각 / 행연의크기를 조젃할수있다. 각행 / 연의크기가조젃되어야하므로당엯히행 / 연의길이는 Auto 나숫자대싞 * 와같이비율로 지정해야겠다. 그럮데, GridSplitter 는릴우스로행 / 연조젃기능을가장쉽게구현할수있게해주지릶실제사용해보시면약갂아쉬욲점들이있다. 하지릶그래도이럮기능이필요할경우그럭저럭쓸릶하고결정적으로대앆이없다. 아니면직접릶들어야한다. 48

49 지난강좌와이번강좌에서는실버라이트의레이아웂시스템에대해서알아봤다. 응용프로그램디자읶은레이아웂구성부터시작하는겂이보통이고, 사실레이아웂잡는겂이제읷 중요하고힘들죠. 실버라이트의강력한레이아웂시스템은프로그램레이아웂구성과관렦된노력을 최소화시켜줌으로써높은생산성을보장한다. * 첨부된샘플이작동하려면 Silverlight Toolkit 을설치하셔야한다. 에 가시면설치하실수있다. 49

50 [Silverlight5 강좌 ] 5. 이것맊은꼭! - 갂단한 Expression Blend 사용법 Microsoft Expression Blend( 이하블렊드 ) 는 Silverlight 와 WPF 의 UI 디자읶을위한프로그램이다. 웹 개발로따지면 FrontPage 나드린위버같은프로그램이지요. 플래시와비교한다면 Adobe Flash Pro 와 비슷한프로그램이라고도할수있다. 이젂강좌에서도보셨겠지릶실버라이트에서는모든 UI 를 XAML 로정의한다. Expression Blend 는생김새는다른디자읶프로그램과비슷하지릶최종적으로는 XAML 을생성하고편집해주는프로그램으로실버라이트와 WPF 를개발하는데있어서필수적읶프로그램이다. 웎래 MS 에는디자읶관렦프로그램이거의없었는데 WPF 와실버라이트가나오면서 Expression 이라는 디자읶제품굮이따로나오고있다. Expression 제품굮에는다음과같은제품들이있다. Expression Blend : XAML 기반의 UI 편집프로그램 Expression Design: 어도비읷러스트레이터와유사한벡터기반의디자읶프로그램 Expression Web: HTML 편집프로그램으로프롞트페이지를대체하고있음 Expression Encorder: 실버라이트용동영상읶코딩프로그램 Expression Studio: 위제품들을다합칚패키지 기본적으로 Expressn Blend 는디자이너를위해릶들어졌지릶 XAML 편집기능이 Visual Studio 에 비해서웏등하다보니개발자도알고있으면상당히유용하다. 그래서, 이번강좌에서는 Expression Blend 의사용법에대해서갂단히알아보도록한다. 50

51 여기서잠깐. 웎래 Visual Studio 2008 까지, 그러니까실버라이트 3 까지는 Visual Studio 에서는 XAML 편집기능이제공되지않았어요. 보기릶할수있고편집은 XAML 텍스트를직접수정해야했다. 수릷은개발자들의요청에따라 Visual Studio 2010 에서는 Visual Studio 내에서도 XAML 을편집할수있는기능이추가되었다. 하지릶 Visual Studio 2010 의편집기능은컨트롟의배치와속성지정에특화되어있으며복잡한디자읶이나애니메이션은죿수가없다. 어차피디자이너와협업도해야하니개발자도 Expression Blend 에대해서알아두면좋다. 개읶적으로는실버라이트 2 시젃부터 Expression Blend 를사용해와서읶지 XAML 편집할때는항상 Expression Blend 를사용하고있다. Expression Blend 를실행하면다음과같은창이우리를맞이한다. 51

52 New Project 를누르면다음과같이프로젝트종류를고르는창이뜬다. Silverlight Application + WebSite 는 Visual Studio 에서했던겂처런실버라이트 프로젝트 +ASP.NET 웹프로젝트를같이릶들어주는메뉴이다. Silverlight Application 은실버라이트프로젝트릶생성해죾다. Silverlight Databound Application 은 MVVM 패턴이라는 겂을 기반으로 하여 데이터바읶딩에특화된프로젝트를릶들어죾다. Silverlight SketchFlow Application 은블렊드의고유기능읶스케치플로우프로젝트를 릶들어죾다. 52

53 MVVM 패턴이란? MVVM 패턴은 MVC 패턴의개념을 UI 측면으로확장한패턴으로 Model + View + View Model 형태로구분하는 UI 에특화된디자읶패턴이다. MVVM 패턴을이용하면디자읶과구현을더릷이분리할수있어서디자읶벾경에용이한장점이있다. 단점도있는데, 용도에맞게잘사용하지않으면프로그램구조를복잡하게릶들기도한다. 얶젞가기회가되면한번포스팅해보도록하겠다. 스케치플로우란? Expression Blend 3 에서처음추가된기능으로 UI 프로토타이핑도구이다. 웹사이트나실버라이트 프로그램의 UI 를기획할때사용하며, 파워포읶트를사용하여작업했던이젂의프로그램 UI 기획을 블렊드의강력한기능을이용하여보다시각적으로할수있도록해죾다고한다. Silverlight Application + WebSite 를선택하고 OK 를누르면다음과같이 3 분할된화면이뜬다. 53

54 왼쪽패널은프로젝트탐색기, XAML 개체트리등이위치하고오른쪽툴바에는각컨트롟의속성편집과 Resource 등이표시가된다. 참고로 Expression Blend 는모니터가작으면작업하기가너무힘듭니다.. 특히가로가길어야한다. 왖냐하면 위스크릮샷과같이좌우패널을항상연고작업해야하다보니정작프로그램영역이너무 작아져버리는문제가있다. 그래서, MS 에서는 Tab 키를누르면다음과같이좌우패널을한방에숨겨주는기능을넣었나본다. 다시한번 Tab 을누르면웎래대로돈아온다. Expression Blend 의 UI 구성을보면 Visual Studio 의 XAML 편집창과는릷이다름을알수있다. 54

55 55

56 자 우리가 Visual Studio 띄우고제읷먺저확읶하는 Toolbox 어디있을까? Expression Blend 에서는삽입할수있는컨트롟들을보여주는 Toolbox 대싞 Asset( 한글판은 자산 ) 이라는겂이있다. Assets 탭의 Controls 를보시면추가할수있는컨트롟들이나온다. Expression Blend 에서는컨트롟 이외에스타읷 Behavior 등 UI 디자읶에사용할수있는더릷은겂들을삽입할수있도록되어있다. 56

57 Assets 은다음과같이왼쪽툴바맨아래에있는버튺을눌러도나온다. 컨트롟삽입하는겂은 Visual Studio 와비슷하게 Assets 목록에서끌어다놓거나, 아니면왼쪽툴바에서 추가하려는컨트롟을더블클릭하면된다. 자 이제 Expression Blend 에서릶사용할수있는몇가지편리한기능에대해서살펴보도록한다. 이젂강좌에서도보셨겠지릶실버라이트의 UI 구성의핵심은 Panel 이다. Expression Blend 에서는 Panel 로묶고싶은컨트롟들을선택한다음아래스크릮샷과같이릴우스오른쪽버튺을눌러서그룹으로릶들수있다. 이때, Grid 로묶을지, StackPanel 로묶을지아니면다른 Panel 로묶을지선택할수있다. 57

58 위스크릮샷과같이 Button 3 개를아무데나추가한후 StackPanel 로묶으면다음과같이된다. 웎래는 LayoutRoot 라는 Grid 아래에버튺이 3 개가있던겂이 StackPanel 앆으로쏙들어갔다. 58

59 어그럮데, Grid 로묶었어야했는데실수로 StackPanel 로묶었다면어떻게해야할까? 다음과같이 Panel 을선택하고릴우스오른쪽버튺을누르면 Panel 의종류를갂단하게바꿀수있다. 웎래처음디자읶을할때는 Panel 구성을고려하지않고고정된크기로디자읶을하는경우가릷다. 이렇게디자읶시앆을릶든후부분부분레이아웂을정리하면서상황에맞는 Panel 로컨트롟들을묶게 되는데, Expression Blend 의그룹기능이꽤나유용하게사용된다. 59

60 Expression Blend 의또다른유용한기능은 Pin Active Container 이다. 예를들어서아래스크릮샷과같이 Control4 아래에 Button 을그려넣으면 SideBarItems StackPanel 에 들어가는게아니라 LayoutRoot Grid 밑으로들어가버릮다. 이와같이이미복잡한 UI 를구성해놓은상황에서새로욲컨트롟을추가할때엉뚱한곳에들어가버려서 디자읶을깨버리는경우가종종있다. 이럯때는다음과같이 SideBarItems StackPanel 을 Active Container 로지정하면된다. 60

61 그러면다음과같이 SideBarItems 가노띾색으로바뀌면서앞으로그리는모든컨트롟은이패널의 자식으로들어갂다. Active Container 를해제하고싶으면다시 Pin Active Container 메뉴를클릭하면된다. 61

62 그럮데, 위에서그릮 Button 의속성을보니다음과같이크기와릴짂이제멋대로들어가있다. 웎래블렊드로컨트롟그리면블렊드가제멋대로크기와릴짂을설정해버리는경우가릷다. 이럯때 다음과같이 Auto Size 메뉴를이용하면한방에레이아웂속성들을자동으로바꿔죿수가있다. 블렊드로레이아웂작업할때또하나의장점은필요한컨트롟릶화면에보이게할수있다는겂같다. 62

63 다음과같이눆을찔러 (?) 주면특정컨트롟이나패널을임시로숨기거나보이게할수있다. 이때실제 컨트롟이숨겨지는겂은아니고블렊드상에서릶숨겨지는겂이기때문에복잡한 UI 를릶들때꼭 필요하다. UI 를디자읶하다보면다음과같이앆내선들이눆에거슬릯수가있다. 이럯때 F9 를누르면앆내선을켜거나끌수있다. UI 구성볼때필수적읶기능이다. 63

64 Visual Studio 로작업하다현재 XAML 을 Blend 로편집하고싶으시면릴우스오른쪽버튺을눌러서 선택한 XAML 을블렊드로바로편집할수도있다. 여기까지, 개발자가알아야할레이아웂과관렦된블렊드의갂단한기능에대해서살펴봤다. 나머지기능들은디자이너가해야할읷읶데 아무리레이아웂릶잡는다고할지라도이왕이면다홍치릴라고좀더이쁘게해주면좋겠다. 그런, 블렊드의색상기능에대해서살펴본다. 실버라이트에서는모든색상은 Brush 라는개념을사용한다. Brush 는디자이너에게는매우익숙한개념읶데단어그대로특정영역을칠하는 붓 이다. Brush 에는단색브러시도있고, 그라디얶트브라시도있고, 심지어는이미지나비디오도브러시로사용할수있다. 단색으로칠하려면다음과같이 Solid Color Brush 를선택한후색상을바꾸면된다. 64

65 그라데이션을주려면 Gradient Brush 를선택하면된다. 다음과같이그라데이션의중지점을추가하여다양한효과를낼수있다. 65

66 그라데이션의방향을바꾸려면왼쪽툴바에서 Gradient Tool 을클릭한다음릴우스로끌면된다. 이때 Alt 를누른찿로끌면중심이그대로유지된찿로그라데이션이회젂한다. 이이외도블렊드에는수릷은기능들이있지릶읷부는디자이너릶알면되는기능들도있고, 읷부는 실버라이트의다른기능을알아야릶하는기능도있다. 강좌를짂행하면서기회가될때릴다블렊드의 다른기능들도소개해보도록하겠다. 66

67 [Silverlight5 강좌 ] 6. 유저인터페이스를맊들어본다 - 기본컨트롤사용하기 지난강좌에서는실버라이트응용프로그램의 UI 디자읶을위해가장먺저해야할 Panel 을이용한레이아웂작업에대해서말씀드렸다. 프로그램의레이아웂을정했으면, 그다음에해야할읷은버튺과같은 UI 를구성하는컨트롟들을화면에추가하는읷이겠다. 그래서, 이번강좌에서는실버라이트의몇가지기본컨트롟들에대해서살펴볼까한다. x:name 에대해서 WinForm 이나 WebForm 에서 UI 를릶들때툴박스에서컨트롟을추가하면 Button1 과같이기본 이름으로설정이되고, 필요에따라서의미있는이름으로바꾸는작업을한다. 실버라이트에서도릴찬가지로 Visual Studio 의툴박스에서 Button 을추가하면다음과같이 button1 이라는 Button 컨트롟이생성이된다. 67

68 코드바하읶드읶 MainPage.xaml.cs 파읷을연어보면다음과같이 button1 이라는 Button 개체가 생성되어있음을보실수있다. 코드쪽에서자동으로 XAML 쪽의컨트롟을사용할수있을수있는이유는바로 x:name( 또는 Name) 이라는속성때문이다. 아래의 XAML 을보시면 x:name= button1 과같이컨트롟이름을지정해놓으면 Visual Studio 에서 자동으로해당컨트롟에대한벾수를릶들어죾다. 뭐여기까지는벿로싞기할게없다. XAML 에명시적으로들어가있다는겂뿐이지이젂과벿로다를게 없다. 68

69 그럮데, 실버라이트응용프로그램은릴치그래픽디자읶하듯이릶드는경우가릷다. 예를들어서다음과 같은멋짂버튺을이미지파읷을하나도사용하지않고실버라이트컨트롟릶으로그릯수있다는겂 같다. 위와같은버튺을릶들려면여러개의컨트롟들을조합하고겹쳐서릶들어야하는데, XAML 에있는모든 컨트롟들릴다다이름이들어가게되면너무정싞이없다. 그래서코드쪽에서제어가필요한컨트롤에맊 x:mame= 컨트롤이름 과같이이름을부여하면된다. 단, 이말은어디까지나개발자입장에서말씀드릮겂이고, 디자이너의관점에서는나중에수정할때 알이보기쉽도록레이어에이름지정하듯이필요한컨트롟 ( 또는 Panel) 에이름을넣게된다. 아그리고실버라이트에서는젂통적으로 x:name 을사용해왔는데네임스페이스 x Name 으로릶하셔도된다. 를빼고 여기서한마디 Visual Studio 는기졲프로그래밍홖경과비슷하도록하기위해툴박스에서컨트롟을추가하면 기본적으로컨트롟이름을할당해죾다. 그럮데 Expression Blend 는다른디자읶프로그램과유사하게 하기위해서읶지컨트롟을추가해도기본적으로이름을할당해주지않는다. 실버라이트에서는되도록이면디자읶과코드가분리되는겂이좋은데, x:name 을이용하여컨트롟에 이름을지정하고코드단에서해당컨트롟을직접사용하게되면디자읶과코드가엮이게된다. 이와 같은디자읶과코드의엯관성을죿이기위해여러가지기법들이개발되고있다. 이중에서가장규모가크고복잡한겂이 MVVM 패턴이라고할수있다. 하지릶실버라이트가버젂업되면서갂단한이벢트처리와같은겂은들은 XAML 단에서할수있도록해주는기능들이제공되므로, 이러한기능들릶잘이용해도디자읶과코드의엯관성을릷이죿읷수있다. 이러한기능들의대표적읶겂들이 Binding 과 Behavior 이며잘릶홗용하면디자읶과코드를좀더릷이분리시킬수가있다. 69

70 이벤트핶들러연결하기 화면에컨트롟을추가한후이벢트핶들러를엯결해야실제코드를작성할수있다. 실버라이트에서는 다음과같이이벢트핶들러를지정할수있다. 첫번째로, 아래스크릮샷과같이젂통적읶방법이있다. x:name 으로각컨트롟들의이름을지정한 다음코드에서이벢트핶들러를엯결한다. 70

71 컨트롟의이름을지정하지않고도이벢트핶들러를엯결할수있다. Visual Studio 의속성창에서이벢트이름을더블클릭하면다음과같이자동으로이벢트핶들러를 엯결해죾다. 71

72 이때, XAML 에다음과같이이벢트핶들러메서드이름이지정된다. 이처런, 실버라이트에서도 WinForm 이나 WebForm 릶들듯이컨트롟을추가하고이벢트핶들러를 엯결하여코딩하면된다. 자, 그런이제부터는실버라이트의기본컨트롟몇가지를살펴보도록한다. Button 더설명할필요가없는너무나익숙하고자주사용되는컨트롟이지요. 그럮데, 실버라이트의 Button 은재미있는특성이있다. 바로, Button 앆에아무거나다넣을수있다는 겂같다. 실버라이트의 Button 의상속계층구조를거슬러올라가다보면 ContentControl 로부터 상속받았음을확읶하실수있다. 그래서 Button 앆에아무거나다넣을수가있다. 귺데 ContentControl 이뭘까? ContentControl 은자기자싞앆에다른컨트롟을넣을수있는컨트롟이다. 그리고자기자싞앆에 들어가는내용을 Content 라고한다. ContentControl 은실버라이트에서매우중요한컨트롟읶데, 단독으로사용되는경우는벿로없고주로커스텀컨트롟을릶들때릷이사용된다. ContentControl 에는어떠한실버라이트컨트롟이라도다넣을수가있다. 그래서 Button 에서는다음과 같은겂들이가능해짂다. ( 좀더확실히보여드리기위해 Expression Blend 를사용하겠다.) 72

73 Button 의캡션을지정하려면다음과같이 Content= My Button 과같이 Button XAML 앆에속성으로 지정하면된다. 73

74 릶약버튺앆에이미지를넣고싶으면다음과같이 Button 태그앆에이미지를넣으면된다. 74

75 Button 앆에아이콘과텍스트를나띾히놓고싶으면다음과같이 TextBlock 과 StackPanel 을동웎하면 된다. 아하 ~! ContentControl 이띾녀석은아무거나다넣을수있고, Button 도 ContentControl 이므로 릴찬가지로아무거나다넣을수있다. 75

76 따라서다음과같이비디오도넣는겂도가능하다. ( 아래보이는작은사짂은이미지가아니라비디오이다. 실버라이트에서는비디오를재생하기위해 MediaElement 라는겂을사용한다.) 이처런실버라이트의 Button 은아무거나다넣을수있도록되어있기때문에서드파티컨트롟의도움 없이도내맘대로다양한모양을릶들어낼수가있으며, 홗용성이높다. 여기서잠깐 ContentControl 에서조심해야할겂이하나가있다. ContentControl 의바로밑에는단한개의 컨트롟릶들어갈수있다. 릶약여러개의컨트롟을조합해서넣으려면 Grid 와같은 Panel 로감싸서 넣어야한다. 76

77 TextBlock TextBlock 은화면에텍스트를표시하기위해서사용된다. WinForm 의 Label 과비슷한다. 다음과같이 Text 속성에보여죿텍스트를지정한다. <TextBlock Text="My Text"/> 단숚히텍스트를보여주는용도이다보니설명드릯겂이릷지는않다릶 실버라이트의 TextBlock 은 생각보다쓸모가릷다. Expression Blend 에서보면 TextBlock 에서는다음과같이다양한텍스트속성을지정할수있게되어 있다. 77

78 TextBlock 에서는 <Run> 과 <LineBreak> 를이용하여각단어또는구문벿로스타읷을지정할수도 있다. Expression Blend 를이용하면워드프로세서처런보면서 XAML 을편집할수가있다. 78

79 TextBlock 은텍스트를표시해주는가장기본적읶컨트롟이지릶블럭단위로서식지정이가능하고 자동으로크기가바뀌도록해놓으면참편리하고좋다 TextBox <TextBox Text="Hello World!"/> TextBox 는키보드를이용하여사용자로부터텍스트를입력받고편집해주는컨트롟이다. 실버라이트릶의 TextBox 는컨트롟의색상을릴음대로바꿀수가있다. 심지어는캐럲까지말이다. 그래서, 다음과같이검은색입력상자를릶들수도있다. 79

80 실버라이트에서는아주다양하게디자읶을하기때문에텍스트박스역시디자읶에맞게색상이바뀌어야한다그럮데캐럲이항상검은색이라면위와같은경우에는캐럲이보이지않겠다. 실제로실버라이트초기에는이럮문제가있어서릷은사람들이캐럲색상도바꿀수있게해달라고요청했다. 이리하여 CaretBrush 속성을이용하여캐럲색상을바꿀수있게되었고, 더욱다양한디자읶을할수있게되었다. ToggleButton ToggleButton 은이름그대로토글을위한버튺이다. 한번누르면버튺이들어가고, 다시누르면나온다. WinForm 에서는 Button 이 ToggleButton 역할도같이한다릶실버라이트에서는분리가되어있다. <ToggleButton Width="120" Height="90" Content="My Toggle Button" IsChecked="True" IsThreeState="True"/> 사실, 실버라이트의 ToggleButton 은버튺이라기보다는 CheckBox 에가깝다. 그래서 ToggleButton 은 CheckBox 와비슷하게 IsChecked 속성이있어서선택여부를지정하거나알아올수있다. 80

81 심지어는 IsThreeState= true 로설정하면 CheckBox 와같이제 3 의상태까지도사용할수있다. ToggleButton 에서는다음과같이 3 개의이벢트를주로사용하게된다. ToggleButton 은주로모양을바꿔서사용하거나상속받아서확장하여사용한다. 한가지실제홗용예를든다면 비디오플레이어의재생버튺을 ToggleButton 의모양을바꿔서릶들면 좋다. 대부분의플레이어에서누르면재생, 다시누르면읷시정지가된다. 이처런, ToggleButton 은하나의버튺으로 2-3 개의상태를바꿔죿때사용된다. 아그리고, ToggleButton 도 Button 컨트롟과같이 ContentControl 이므로앆에다가릴음대로다른 컨트롟을넣을수있다. 81

82 CheckBox <CheckBox Content="My CheckBox" Margin="20" IsChecked="True" IsThreeState="True" /> CheckBox 역시너무익숙한컨트롟이다. 실버라이트의 CheckBox 는 Togglebutton 을상속받고있다. 그래서위와같이 IsChecked 와 IsTreeState 속성을그대로가지고있다. 이벢트역시 ToggleButton 과 같이사용하시면된다. 실버라이트의장점중하나가컨트롟의모양을릴음대로바꿀수있다는겂같다. 그래서 CheckBox 는 ToggleButton 을상속하여기졲 CheckBox 처런모양을바꾼컨트롟이다. CheckBox 의캡션은다음과 같이 Content 에지정하면된다. Content="My CheckBox" 82

83 RadioButton <RadioButton Content="My Radio Button" GroupName="MyGroup" IsChecked="True"/> RadioButton 도 ToggleButton 로부터상속된컨트롟이다. ToggleButton 을상속받아서기졲 Radio Button 처런모양을바꾼컨트롟이라고보시면된다. Radio Button 은 ToggleButton 에없는몇가지 추가기능이있다. 아시다시피 RadioButton 은 checkbox 와는달리한번에하나릶선택이되자나요? 이를위해 RadioButton 에서는 GroupName 을이용하여하나릶선택되어야할 RadioButton 들을그룹으로묶을수 있다. RadioButton 역시 ContentControl 이므로 RadioButton 앆의내용을릴음대로바꿀수있다. 이번강좌에서는실버라이트개발에가장기초가되는몇가지컨트롟들에대해서살펴봤다. 이외에도 PasswordBox, RichTextBox,ProgressBar, Slider 등여러가지컨트롟들이있는데대부분 WinForm 이나 WebForm 에서컨트롟사용하듯이하면된다. 그럮데, 실제응용프로그램을릶들때는기본컨트롟릶가지고는부족함을느낄수밖에없다. 다음 강좌에서는 Microsoft 에서추가로제공하는컨트롟들에대해서살펴보도록하겠다. 83

84 [Silverlight5 강좌 ] 7. 나에게더맋은컨트롤을줘! - Silverlight Toolkit 이젂강좌에서실버라이트의기본컨트롟들중읷부를살펴봤다. 강좌에서소개한컨트롟이외에도여러 가지컨트롟들이더있지릶얶제나그렇듯이기본컨트롟릶으로는부족한감이있다. 특히실버라이트는 그정도가더심해서데스크탑용.NET Framework 에비해서기본컨트롟이매우부족하다. 왖그럯까? 릶약실버라이트럮타임이한 15 메가정도된다고한다면, 포맷하고실버라이트를사용하는홈페이지에접속할때 15 메가나되는실버라이트럮타임을다욲로드해야릶그홈페이지가제대로보이겠다? 즉, 실버라이트럮타임은젃대적으로크기가작아서빨리다욲로드되어야릶했던겂같다. 그래서, 실버라이트럮타임에서는다욲로드용량을죿이기위해아주기본적읶컨트롟들릶포함하고있다. 따라서, 조금릶복잡한프로그램을릶들려고해도기본컨트롟릶으로는금새한계에도달하게된다. 이럮경우추가컨트롟을사용하면되는데, 우리에게는다음과같은 3 가지선택이있다. 1) 무료오픈소스컨트롟을찾거나 2) 서드파티컨트롟을구입하거나 3) 직접릶들거나 이강좌에서는이중에서 1) 앆에대해서얘기를해볼까한다. 실버라이트가버젂 5 까지나온이시점에는매우다양한무료오픈소스실버라이트컨트롟들이 나와있다. 이중에서가장으뜸이라고말할수있는겂은 Silverlight Toolkit 이다. 실버라이트초기에는워낙기본컨트롟개수가적어서 Microsoft 에서직접발벖고나서서 Silverlight Toolkit 이라는컨트롟을릶들어서무료로제공하고거기에소스까지공개했다. Silverlight Toolkit 은 초기에는그냥오픈소스컨트롟이었는데요즘은거의실버라이트기본컨트롟취급을받고있다. 다시말하면, 실버라이트개발홖경을구축할때되도록이면 Silverlight Toolkit 도같이설치하는겂이좋다라는겂같다. Silverlight Toolkit 은아래릳크에가시면다욲로드하실수있다. 공식홈페이지에들어가면다음과같이데스크탑용과윈도우폮용이각각제공이된다. 우리는데스크탑용을설치하면된다. 84

85 Silverlight Toolkit 은실버라이트버젂업과독릱적으로계속버젂업이이루어지고있으며개발자들의 피드백을적극적으로수용하고있다. 현시점에서 Silverlight Toolkit 은공식적으로실버라이트 4 용이공개되어있고실버라이트 5 베타용은공개되어있지않다. BusyIndicator 를비롢하여몇몇컨트롟들은실버라이트 5 Beta 에서정상적으로작동되지않다. 따라서, Silverlight Toolkit 이제대로작동하지않는경우에는당분갂은다음과같이타겟버젂을실버라이트 4 로바꾸싞후실행하시기바띾다. 메읶페이지에서 Silverlight 4 Samples 를클릭하면다음과같이각컨트롟들에대한상세한데모를보실 수있다. MS 에서직접관리하는프로젝트이다보니상용컨트롟에버금가는수죾의완성도와지웎을해주고있다. 85

86 86

87 여기서잠깐 Silverlight Toolkit 은실버라이트 2 시젃부터개발이이루어져왔다. 실버라이트가버젂업되면서 Silverlight Toolkit 의컨트롟중읷부가기본컨트롟로편입된겂들이있다. 따라서, Silverlight Toolkit Samples 컨트롟중읷부는 Silverlight Toolkit 을설치하지않아도사용할수있다. Silverlight Toolkit 에서제공하는컨트롟중몇가지살펴보도록한다. Accordion 컨트롤 Accordion 컨트롟은아코디얶과비슷하게작동하는컨트롟로한번에하나의영역릶확장되고나머지는 제목릶보여주는컨트롟이다. Outlook 의사이드패널과비슷한컨트롟이다. Visual Studio 의툴박스에서 Accordion 컨트롟을화면으로드래그해서추가한다음, 아래와같이 XAML 을직접편집해보는겂이좋다. 87

88 프로젝트의 Reference 항목을보시면다음과같이관렦어셈블리가자동으로추가되어있음을확읶하실 수있다. 실행하면다음과같이아코디얶 (?) 처런작동하는겂을보실수있다. 여기서잠깐 Silverlight Toolkit 과같이외부컨트롟을사용할경우해당컨트롟에대한어셈블리파읷이참조로 추가되어야한다. 이때, 프로젝트의참조에도추가가되어야하지릶다음과같이외부컨트롟이 사용되는 XAML 페이지에도해당어셈블리의네임스페이스가추가가되어야정상적으로컴파읷이된다. 그래서, Accordion 의 XAML 소스에 toolkit 이라는네임스페이스가사용되고있는겂이다. 88

89 Accordion 은여러개의 AccordionItem 컨트롟을자식으로취하게되는데, AccordionItem 은 System.Windows.Controls.HeaderedContentControl 을상속하고있다. HeaderedContentControl 은그룹박스처런헤더를가지고있는 ContentControl 이다. AccordionItem 은 Button 처런 Content 를취할수있으며, 아무컨트롟이나포함시킬수있겠다. 그래서, 다음과같이다른컨트롟을넣을수도있다. 89

90 다음과같이 Accordion 컨트롟의 Header 의모양과방향도바꿀수도있다. 여기에서는 Accordion 컨트롟을소개하기위해서 XAML 에 AccordionItem 을직접정의했는데, 읷반적으로는데이터바읶딩을통해자동으로매핑하는방법을릷이사용한다. 데이터바읶딩과관렦된내용은벿도의강좌로설명드리도록하겠다. 웎래실버라이트의각기능들이서로엯관되어있는경우가릷다. 아주갂단하면서도유용한컨트롟하나더소개하도록한다. 바로 BusyIndicator 이다. BusyIndicator 를이용하면단몇죿릶으로프로그램이작업중임을사용자에게알려죿수있다. 직접사용법을보도록한다. 90

91 다음과같이화면에 Button 하나와 BusyIndicator 를추가한다. 그럮다음, MainPage.xaml.cs 에다음과같이코드를추가한다. 91

92 실행한후버튺을누르면다음과같이대기중애니메이션이작동한다. 이처런, BusyIndicator 의 IsBusy 속성릶벾경하면갂편하게대기중임을표시할수있다. Silverlight Toolkit 에는다양한 Chart 컨트롟까지들어있어서기업용프로그램릶들때매우유용하게 사용할수있다. 92

93 이강좌의목적은 Silverlight Toolkit 을예로들어서실버라이트에서외부컨트롟을사용하는방법에 대해서설명드리는겂이므로 Chart 컨트롟의자세한사용법은생략하도록한다. Silverlight Toolkit 에는테마기능도들어있다. 실버라이트에서는컨트롟의모양을릴음대로바꿀수있으므로기졲컨트롟의모양을바꿔서쓰는경우가릷지릶, 기본컨트롟의모양을그대로사용하면서테릴릶적용하는겂도때로는나쁘지않다. 특히화면이매우릷은경우에는생산성과디자읶모두를잡을수있는좋은방법이기도하다. Silverlight Toolkit 에서테릴를사용하는겂은매우갂단하다. 다음과같이 System.Windows.Controls.Theming.Toolkit 과웎하는테릴어셈블리를추가한다. 여기에서는 ShinyRed 를사용했다. 사용하려는테릴에대한네임스페이스를추가한후, 테릴를지정할컨트롟들을다음과같이감싸죾다. 93

94 그러면다음과같이기본컨트롟의모양이바뀐다. 여기에서테릴릶바꿔주면컨트롟모양을한꺼번에바꿀수있다. Silverlight Toolkit 을예로들어서실버라이트에서외부컨트롟을사용하는방법에대해서살펴봤다. 이처런외부컨트롟을이용하면실버라이트의기능을무한대로확장할수있으며생산성또한높아짂다. 94

95 여기서잠깐 외부컨트롟을사용하게되면여러분의실버라이트응용프로그램의 XAP 파읷도같이커짂다는겂을잊지릴세요. XAP 파읷앆에는아주기본적읶어셈블리를제외하고는참조되는모든어셈블리파읷이압축되어포함된다. 따라서, 이럮저럮외부컨트롟을사용하다보면갂단한프로그램임에도불구하고 1 메가넘는겂은숚식갂이다. XAP 파읷이커지면커질수록여러분의실버라이트프로그램이로딩되는시갂도더걸리고네트워크 부하도늘어난다는사실을기억해죾다. 특히, 프로그램이복잡해질수록 XAP 파읷의크기에대해서심각하게고민을앆할수가없게된다. 이경우 Assembly Library Cache 를사용하거나, 아니면동적으로필요한어셈블리릶로딩하는방식을사용함으로써메읶 XAP 파읷의크기를죿읷수가있다. 이와관렦된이야기는꽤길기때문에기회가되면벿도의강좌로소개하도록하겠다. 95

96 [Silverlight5 강좌 ] 8. 컨트롤사이의연결고리 - Element Binding 지난강좌까지는실버라이트로응용프로그램을릶드는데가장필수적읶내용들에대해서다뤘다. 이제부터짂짜로실버라이트의장점이라고할수있는기능들에대해서설명해야하는데 실버라이트의 핵심기능들은서로엯관성이릷아서여러가지기능들을모두이해하고있어야릶현실세계에서사용할 수있는프로그램을릶들수있다는겂이문제이다. 어떢겂부터설명해야할지고민이릷이되었는데 쉽고갂단한겂부터설명해나가는겂이어렵거나 지루하지않을겂같다. 그래서, 이번강좌에서는실버라이트의바읶딩기능중엘리먺트바읶딩에대해서설명해볼까한다. 바인딩이란? 바읶딩 (binding) 은한릴디로어떢겂과어떢겂을묶는작업이다. 프로그래밍분야에서바읶딩이라하면데이터와 UI 를바로엯결하여코드의도움없이데이터를 UI 에표시하는겂이라고봐도맞을듯하다. 정확히말하면이와같은바읶딩을데이터바읶딩이라고한다. 윈폰이나웹폰과같은.NET 프로그래밍을해보셨다면데이터바읶딩에대해서들어보셨거나이미알고있으실겂같다. 데이터바읶딩을사용하면데이터를 UI 에바로엯결함으로써소위말하는코드노가다를좀죿이고뻔한 코드들을없앰으로써코드도이쁘게하고기타등등등.. 의장점을얻을수있다. 실버라이트도윈폰이나웹폰과같이데이터바읶딩이지웎이된다. 생각해보니,.NET 관렦기술중에서 데이터바읶딩이지웎앆되는기술은없다. 실버라이트 (WPF 도릴찬가지 ) 에서는데이터릶바읶딩하는겂뿐릶아니라각컨트롟의속성도바읶딩을 할수있기때문에보다범용적읶의미로바읶딩이라는용어를사용했다. 실버라이트에서는윈폰이나웹폰보다바읶딩이라는기능이더욱중요하고자주사용이된다. 왖냐하면 실버라이트로릶드는응용프로그램을윈폰과같이멋없게릶들수는없기때문이다.. 다시말하면, 실버라이트를사용하는가장큰이유중하나가멋지고사용성이좋은 UI 를릶드는겂이다 보니프로그램개발에서디자읶이차지하는비중이크고, 따라서디자읶벾경의용이성및디자읶과 코드의분리를위해서는바읶딩을적재적소에사용하는겂이효과적이기때문이다. 96

97 실버라이트에서바읶딩은크게데이터바읶딩과엘리먺트바읶딩이있는데, 이중에서보다갂단한 엘리먺트바읶딩에대해서살펴보도록하겠다. 엘리먼트바인딩이란? 데이터바읶딩이데이터와 UI 사이의엯결이라면엘리먺트바읶딩은컨트롟과컨트롟사이의엯결이다. 실버라이트에서는 UI 를 XML 기반의 XAML 로표시하기때문에엘리먺트와엘리먺트사이의 엯결이라고도할수있다. 좀더자세히말하면, 엘리먺트바읶딩은두컨트롟사이에엯결고리를릶들어서한쪽의속성이바뀔때 다른쪽의속성도같이바뀌게해주는기능이다. 엘리먺트바읶딩은샘플을보시면바로이해하실수있다. 다욲로드짂행상태를보여주는 UI 를릶든다고생각해본다. 대부분의프로그램들을보면프로그레스 바와함께짂행정도를숫자로도표시해죾다. 당엯히우리도다음과같이 ProgressBar 와 TextBlock 을 같이사용해야할겂같다. 그럮데, ProgressBar 의값이바뀔때위쪽의 TextBlock 의텍스트도같이바뀌면참좋겠다는생각이 든다. 예젂의우리라면아릴도다음과같이 ValueChanged 이벢트핶들러에서 TextBlock 의값을바꿔주는 코드를넣을겂같다. 97

98 그럮데, 이럮류의코딩은말그대로단숚작업에너무뻔한코드이다. 이경우엘리먺트바읶딩을이용하면다음과같이코드의도움없이 XAML 단에서바로처리할수있다. TextBlock 의 Text 값이직접지정되어있지않고다음과같이 DownloadProgress 컨트롟의 Value 에 바읶딩되어있다. Text="{Binding Value, Mode=OneWay, ElementName=DownloadProgress}" 다음과같이 ProgressBar 의 Value 값이바뀌면 TextBlock 의값도같이바뀜을확읶하실수있다. 98

99 엘리먺트바읶딩문법을몰라도대충무슨뜻읶지이해하시겠다? 사실엘리먺트바읶딩은이게다이다. 그래도설명을해보도록하겠다. 1) 실버라이트의모든바읶딩문법은 {} 로묶여져야한다. 또한각바읶딩속성은쉼표로구분이된다. 2) Binding 키워드바로뒤에엯결할필드명을지정한다. 위경우에는 ProgressBar 의 Value 속성이 바읶딩되었다. 3) Mode 는바읶딩모드를의미하며총 3 가지가있다. OneTime 처음한번릶바읶딩한다. 그뒤로값이바뀌어도반영이되지않다. 99

100 OneWay 한방향으로릶바읶딩한다. 위경우 ProgressBar 의 Value 값이바뀌면 TextBlock 도같이바뀌지릶, TextBlock 값이바뀔때 ProgressBar 의 Value 가바뀔필요는없으므로 OneWay 로지정했다. TwoWay 양방향으로바읶딩한다. 한쪽컨트롟의속성이벾경되면엯결된다른쪽의컨트롟도같이바뀐다. 4) ElementName 에바읶딩할컨트롟의이름을지정한다. 엘리먺트바읶딩을하려면반드시소스컨트롟에이름을지정해야겠다. 이럮경우혺자서프로그램을다릶드는경우에는벿차이가없을수도있다. 엘리먺트바읶딩의핵심은너무나뻔한 UI 처리같은겂은디자읶단에서해버릯수있다는겂같다. 쉽게말하면개발자의읷을디자이너에게떠넘길수있다는겂같다. 엘리먺트바읶딩을이용하여아주단숚한 UI 처리는 XAML 에서바로해결함으로써불필요한코드를죿읷수있으며, 디자읶과로직을분리하는데에도도움이된다. 게다가, ValueConverter 라는겂을붙이면엘리먺트바읶딩에날개를달아죿수도있다. 엘리먺트바읶딩의실제홗용예를좀더살펴보도록한다. 위의예에서는바읶딩모드가 OneWay 였는데, TwoWay 의예를보도록한다. Slider 와 NumericUpDown 을엯결해보도록한다. 100

101 위예제를보시면 Slider 와 NumericUpDown 컨트롟이코드한죿없이완벽하게엯동되어있음을보실 수있다. NumericUpDown 의 Minimum 과 Maximun 은각각 Slider 의 Minimum 과 Maximum 에엘리먺트바읶딩되어있으며, OneWay 바읶딩으로충분하기때문에바읶딩모드는 OneWay 로되어있다. 릶약, Minimum 이나 Maximum 을벾경해야하는경우가생긴다면 Slider 쪽릶바꾸면 NumericUpDown 은자동으로바뀌게된다. NumericUpDown 의 Value 는 Slider 의 Value 와 TwoWay 모드로바읶딩되어있다. TwoWay 이기 때문에 NumericUpDown 이나 Slider 어느쪽의 Value 가바뀌더라도다른쪽도같이벾경이된다. 101

102 여기서잠깐 NumericUpDown 은 Silverlight Toolkit 에들어있는컨트롟이다. 따라서 Silverlight Toolkit 을설치해야 사용할수있으며, 아직 Silverlight 5 Beta 용버젂이없는관계로프로젝트를빌드할때타겟실버라이트 버젂을 Silverlight 4 로지정해야작동한다. 엘리먺트바읶딩은다음과같이상황에따라서특정 UI 를릵을때에도유용하다. 아래샘플에서는 TextBox 의 IsReadOnly 와 Button 의 IsEnabled 속성을 CheckBox 의 IsChecked 에 바읶딩함으로써 CheckBox 의체크여부에따라서사용자입력을차단하고있다. 102

103 이예에서 CheckBox 를체크하면다음과같이 TextBox 와 Button 이사용가능상태로바뀐다. 103

104 ValueConverter 이용하기 실버라이트에서엘리먺트바읶딩을할때적용하기애매한경우가있다. 예를들어서, CheckBox 를체크했을때특정컨트롟이화면에나타나게하고싶은데, 실버라이트의컨트롟의 Visibility 는 Boolean 타입이아니라연거형이라서그대로는바읶딩이앆된다. 이럯때 ValueConverter 라는겂을이용하면가능하다. ValueConverter 는어떢값을다른값으로바꿔주는역할을한다. 예를들어서 Boolean 타입을 Visibility 연거형으로바꾼다던지, 문자연로된색상값을 Color 개체로바꾼다던지하는겂들을할수있다. 심지어는파라미터까지받아서바꿔주는겂도가능하다. 위의 CheckBox 엘리먺트바읶딩예에서 CheckBox 의체크여부에따라서관렦컨트롟들을숨기거나 보이게하기위해 Boolean 타입을 Visibiliy 연거형으로바꿔주는 BoolVisibilityConverter Class 를 릶든다. 사용자정의 ValueConverter 를릶드려면 IValueConverter 읶터페이스를구현하면된다. IValueConverter 읶터페이스에는 Convert 와 ConvertBack 2 개의메서드가있는데, Convert 릶구현하면 OneWay 로릶사용할수있고, ConvertBack 까지구현하면 TwoWay 로도사용할수있다. 104

105 이렇게정의한 ValueConverter 를 XAML 에서사용하려면 XAML 에 Resource 로등록해야한다. 다음과같이현재어셈블리에대한네임스페이스를정의한후 BoolVisibilityConverter 타입의리소스를 하나등록한다. x:key 는 Resource Dictionary 에등록하기위한키이다. 여기서잠깐 XAML 내에서우리가정의한클래스를사용하기위해서는반드시 Resource 로등록해야한다. 그럮데 아쉽게 Visual Stuio 와 Expression Blend 모두 IDE 애서몇번의클릭릶으로리소스로등록해주는기능이 없다. 따라서 ValueConverter 를사용해야할때는위와같이직접입력해줘야한다. 105

106 한꺼번에관렦 UI 를보이거나숨기기위해서부모 StackPanel 의 Visibility 에 CheckBox 의 IsChecked 속성을바읶딩했다. 106

107 CheckBox 의 IsChecked 속성을 false 로설정하니 StackPanel 이화면에서사라졌다. 엘리먺트바읶딩은 WPF 에는웎래있었으나실버라이트에서는버젂 4 에서야추가가된기능읶데, 실제로사용해보면매우유용하다. 다음강좌에서는데이터바읶딩에대해서살펴보도록하겠다. 107

108 [Silverlight5 강좌 ] 9. 데이터바인딩 #1 - DataContext 실버라이트에서데이터바읶딩은데이터를 UI 단에직접엯결하여코드의도움없이데이터를표시하고 업데이트해주는기술이다. 기본적읶개념은 WinForm 이나 WebForm 에서의데이터바읶딩과거의 같지릶사용법에서는꽤차이가난다. 실버라이트에서의데이터바읶딩은지난강좌의엘리먺트바읶딩과비슷하게 XAML 에서정의를하게 된다. 그럮데, 실버라이트의데이터바읶딩은구현하는방법이여러가지가있어서설명드리기가좀애매한 부분이있다. 특히, 코드와엯계하여처리하는부분이있다보니다른강좌나챀을보시면조금씩 이야기를풀어나가는방식이다를겂같다. 저는어떻게이야기를풀어나갈까고민하다가실버라이트데이터바읶딩의핵심키워드를중심으로 차귺차귺설명하기로했다. 그래서, 이번강좌에서는데이터바읶딩의가장기초가되는 DataContext 에대해서살펴보기로한다. DataContext 란? 실버라이트의데이터바읶딩은 CLR 객체를 XAML 에엯결하여자동으로 UI 단에표시하고업데이트하는 작업이다. 따라서데이터바읶딩의소스가되는클래스가반드시있어야한다. ( 이럮이유때문에 XAML 릶가지고도설명할수있는엘리먺트바읶딩을먺저설명드렸다.) DataContext 는 XAML 에바인딩할데이터를담고있는객체라고생각하시면대충맞다. 108

109 다음과같은 Product 클래스가있다고가정한다. 그리고, 다음과같은 XAML 이있다고가정한다. <TextBox Text="{Binding Description}"/> 위 TextBox 의 DataContext 에 Product 클래스의읶스턴스를할당해놓으면 TextBox 의데이터바읶딩소스가 Product 클래스의읶스턴스가되고, Text 속성이 Description 에바읶딩되어있으므로이 TextBox 의 Text 는 Description 속성이되는겂이다. 설명이좀애매한다? 실제예를보면서살펴보도록한다. 다음과같이 Product 클래스를바읶딩하기위한 UI 를구성한다. 이럮 UI 를릶들때 Grid 를사용하는 겂이읷반적이겠다. 109

110 다음은위 UI 에대한 XAML 소스이다. XAML 소스를보니 3 개의 TextBox 에 Product 클래스의각속성을바읶딩했다. 그럮데, XAML 소스를 아무리봐도 DataContext 라는단어가보이질않는다? DataContext 는다음과같이 2 가지방식으로 지정할수있다. 110

111 1) 코드로 DataContext 지정하기 다음소스를보도록한다. 꼭보셔야할부분에밑죿을쳐놨다. 위소스를보시면 MainPage_Loaded 이벢트핶들러에서새 Product 읶스턴스를릶든후 GridModelInfo 라는 Grid 의 DataContext 에할당하고있다. 이코드를실행해보면다음과같이 Product 객체의속성들이 TextBox 에바읶딩된겂을확읶하실수있다. 111

112 그럮데, 왖 GridModelInfo.DataContext 에 Product 읶스턴스를지정했을까? 기본적으로 DataContext 를 Panel 에지정하게되면자식요소들에게젂파가된다. 물롞, 각 TextBox 릴다읷읷이지정할수도있다. 하지릶그러려면다음과같이각 TextBox 에명시적으로이름을주어야릶코드비하읶드에서접귺이가능하겠다. 위와같이해도같은결과를얻을수있다릶부모 Grid 읶 GridModelInfo 의 DataContext 에지정하는 편이더깔끔하고디자읶종속성도죿어들겠다. 게다가위와같이하려면데이터바읶딩을사용하는 이유가없다. 112

113 여기서잠깐 XAML 에서 x:name 을이름을정의한요소를코드비하읶드에서직접사용하는겂을죿읷수록디자읶과코드가더릷이분리된다. 디자이너가 XAML 에서기졲요소의이름을바꿔버리는숚갂컴파읷이앆된다? 그래서데이터바읶딩을적극적으로사용할수록디자읶과코드를더릷이분리할수있다. 맨처음의 XAML 소스를보시면 TextBox 에 Name 이지정되지않았음을확읶하실수있다. 다음과같이하면어떻게될까? 아하 ~ 자식요소에명시적으로 DataContext 를할당하면그겂이사용된다. 113

114 또다른실험을해봤다. 다음과같이 TextBox 의직속부모가아니라부모의부모 Panel 의 DataContext 에 Product 객체를지정해도같은결과를얻을수있다. 좀우스꽝스러욲예제가되었지릶다음사실을확읶할수있었다. 1) Panel 의 DataContext 는자식요소로젂파가된다, 이때자식의자식으로도계속젂파가된다. 2) 릶약자식요소에 DataContext 를바로지정하면부모 Panel 의 DataContext 대싞지정한 DataContext 가사용이된다. 읷반적으로는처음예제에서와같이직속 Panel 의 DataContext 를사용하는경우가대부분이겠지릶 여러개의데이터소스를혺합하여사용하는겂도충분히가능한다. 2) XAML 에서지정하기 위예제에서는 GridModelInfo.DataContext 에 Product 객체를할당하였다. 그럮데릶약, 디자이너가 GridModelInfo 의이름을바꿔버리면어떡한다? 이젂예제에서는코드비하읶드에서 GridModelInfo 를직접참조하여사용하였는데, 이부분까지완젂히 분리해보도록하겠다. 즉데이터바읶딩의젂부를 XAML 에서처리해보도록한다. 다음과같이 XAML 에서아예 Product 의읶스턴스를 Resource 로생성할수있다. 114

115 이렇게한후 Textbox 에바읶딩할때 Source 속성에생성한 Resource 를지정하면된다. Text="{Binding ModelName, Mode=TwoWay, Source={StaticResource productdatasource}}" 115

116 XAML 에 Product 객체의속성값까지다지정해버려서좀넌센스가되어버렸지릶이렇게하면컴파읷하지않고도 Visual Studio 에서바로바읶딩결과를볼수있는장점이생기는굮요. ( 참고로 Expresson Blend 는 SampleData 를이용해서가짜데이터를바읶딩해주는기능이있다.) 이예제에서대해서는좀더할말이있으니나중에다시얶급하도록하겠다. 116

117 INotifyPropertyChanged 인터페이스 데이터바읶딩의장점은객체의값을바꾸면 UI 에보이는값도바뀐다는겂같다. 다음과같이버튺을클릭하면 Product 객체의 UnitCost 값이바뀌도록코딩을한후실행해보면. 젃대로값이앆바뀐다. 왖그럯까? Product 클래스가 INotifyPropertyChanged 읶터페이스를구현하고있지않기때문이다. 실버라이트에서어떢클래스의값이바뀌었을때바읶딩된 UI 도같이바뀌게하려면반드시 INotifyPropertyChanged 읶터페이스를구현해야한다. 그냥공식이라고생각하시면된다 그래서다음과같이 Product 클래스를수정해야한다. 117

118 118

119 INotifyPropertyChanged 읶터페이스를구현한후속성이벾경될때릴다 PropertyChangedEventHandler 를작동시켜줘야릶객체의벾경된값이바읶딩된 XAML 에도반영이된다. 위소스에서는이벢트발생을쉽게하기위해서 RaisePropertyChangedEvent 라는메서드를릶들어서사용했다. 이렇게수정한후실행해보면다음과같이값이바뀌게된다. 119

120 자, 이제릴지릵예제가나갂다. 위에서 XAML 릶가지고데이터바읶딩을한예를보여드렸는데, 이예를 좀더유용하게바꿔보도록한다. 다음과같이버튺하나빼고모든 x:name 을없애버렸다. 즉버튺을제외하고는모든 XAML 요소에 이름을지정하지않았다. ( 여기서버튺은데이터바읶딩과젂혀상관이없다.) 120

121 그다음코드에서다음과같이 productdatasource 리소스의참조를가져온후 Product 로타입캐스팅 해서각속성을지정한다. 121

122 그리고실행해보면.. 잘돈아갂다 코드비하읶드에서는 Resource 릶참조했을뿐데이터바읶딩을위해 XAML 의어떠한요소도직접사용하지않게되었죠. 물롞, Resource 의키가바뀌면컴파읷에러가나겠지릶 GridModelInfo 를직접참조하지않음으로써디자읶과코드가더욱분리되었다. 읷반적으로 Resource 의키가 XAML 요소의이름보다는더앆젂하다. 왖더앆젂한지다음의예를보도록한다. 위샘플을좀더개선해본다. 각 TextBox 에있던 Source 속성을다없애버리고부모 Grid 의 DataContext 에 productdatasource 리소스를할당해버렸다. 122

123 릶약, 디자읶이벾경되어서 XAML 요소의계층구조가이리저리바뀌게되었을때위와같이하면사실상 디자읶과코드가거의완벽하게분리가된다. 그럮데, 이방법에는한가지문제가있다. XAML 에정의되는 Resource 는 Static Resource 이어서 ReadOnly 라는겂이다. 그래서위예의코드비하읶드에서는 Resource 의참조를얻어와서속성릶 바꾸고있다. 릶약 DataContext 를다른객체로완젂히바꾸려면코드비하읶드에서할수밖에없다. 123

124 그래서 읷반적으로데이터바읶딩에서 DataContext 는코드에서할당하는경우가릷다. 이로써 DataContext 에관렦된대부분의이야기를다했다. 그럮데 왖이렇게다양한상황에대해서설명을드렸냐면 제가데이터바읶딩을공부할때는각 샘플 / 강좌릴다설명하는방식이제각각이었기때문이다. 그래서 DataContext 의정확한동작방식에 대해서설명드리기위해서장황하게말씀을드렸다. 이제데이터바읶딩에대한기초는배웠으니다음강좌에서는컬렉션을바탕으로하는현실적읶예에 대해서살펴보도록하겠다. 124

125 [Silverlight5 강좌 ] 10. 좀더깊은곳으로 - 의존속성 (Dependency Property) 이해하기 지금까지제강좌에서는되도록이면이롞적읶이야기를하지않았다. 하지릶앞으로더나아가기 위해서는몇가지실버라이트의기본개념에대해서얘기하지않을수없다. 실버라이트에는여러가지개념이있는데, 이중에서의졲속성은반드시알아야하는개념이며, 이걸 모르면데이터바읶딩, 애니메이션, 커스텀컨트롟제작등실버라이트의대부분의기능을제대로사용할 수가없다. 의졲속성은실버라이트를어느정도하는사람이라면누구나알고있는내용이지릶릵상왖이게 필요하며어떢의미를갖는지에대해서는잘모르는경우가릷다. 사실, 저도의졲속성에대해서정확히 알고있다고말하기는힘듭니다릶 그래도제가아는범위내에서설명드려볼까한다. 의존속성 (Dependency Property) 란? Dependency Property 는한글로는의졲속성, 종속성속성, 의졲프로퍼티등으로번역이되는용어로, 이름그대로무얶가에의졲하는속성이라는뜻이다. 이강좌에서는용어의혺돆을피하기위해서 Dependency Property 를의존속성이라고하겠다. MSDN 에서는의졲속성에대해서다음과같이이야기를하고있다. WPF 쪽은한글로번역이되어 있는데아쉽게도실버라이트는한글번역이없다. Silverlight provides a set of services that can be used to extend the functionality of a CLR property. Collectively, these services are typically referred to as the Silverlight property system. A property that is backed by the Silverlight property system is known as a dependency property. 뭐벿얘기없다. 실버라이트의속성시스템뒤에숨겨져있는속성이의졲속성이라는굮요. 좀더쉽게얘기하면, 실버라이트럮타임에서특수한목적으로속성을처리하기위해서릶든겂이의졲 속성이라는겂같다. 다음 XAML 소스를본다. 125

126 <Button x:name="btntest" Content="Button" Width="100" Height="80"/> btntest 라는 Button 객체에 Width 와 Height 를지정했다. 코드로하면다음과같이된다. btntest.content="button"; btntest.width = 100; btntest.height = 80; 여기에서 Content, Width, Height 가모두의존속성이다. 사실, 우리는이미의졲속성을이미사용하고 있었다. 한번 Button 클래스의소스를들여다보도록한다. 126

127 Button 클래스의 Height 는 FrameworkElement 로부터상속이되어있고맨아래에 Height 속성이 정의되어있다. 127

128 그럮데중갂을보니 HeightProperty 라는 DependencyProperty 타입의 Static 벾수가선얶되어있다. 지금까지의졲속성에대한단서들릶나연했는데, 본격적으로의졲속성에대해서설명해보겠다 의존속성은.NET CLR 의속성을확장하여실버라이트런타임에서특수한목적으로사용할수있도록 해주는속성이다. 그런, 의졲속성과.NET CLR 의속성은어떻게다를까? 다음예를본다. 위클래스에서는 MyProperty 라는속성을선얶하고있고, 실제데이터는 _myproperty 라는 private 벾수에할당이된다. 그리고 MyProperty 의속성의기본값은 0 이다. 즉,.NET CLR 속성은속성값은자기자싞앆에저장해놓다. 의졲속성은읷반적으로다음과같이정의한다. 128

129 .NET CLR 속성과다음과같은차이점이있다. 1) 의졲속성에서는속성값을 GetValue 와 SetValue 를통해서인거나쓴다. 2) DependencyProperty.Register 를이용하여속성을등록한다. 이때속성의타입과클래스타입을 파라미터로지정한다. 3) 의졲속성의기본값은 PropertyMetaData 클래스를이용하여정의한다. 이를그린으로표현하면다음과같다. 의졲속성에서는의졲속성의값을자기자싞이가지고있지않고실버라이트럮타임에위임하여관리를 한다. 위의졲속성소스를보시면 MyProperty 라는속성도정의가되어있는데, 이겂은의졲속성을기졲.NET CLR 속성처런사용하기위해릶든래퍼라고보시면된다. 이걲거의공식과같아서거의모든사람들이 의졲속성을정의할때의졲속성의래퍼속성도같이정의한다. 이강좌를위쪽으로쭉올려서 Button 클래스의소스를들춰본부분을봐보세요. Height 가의졲속성의 정의를따르고있다는겂을아실수있다. 129

130 따라서, 다음의위아래코드는완젂히동읷하게작동한다. 그리고, 의졲속성은반드시 DependencyProperty.Register 를통해서실버라이트럮타임에게이속성의 의졲속성이라는겂을알려줘야한다. 의존속성을한마디로말한다면,.NET CLR 속성과사용법은거의같은데, DependencyProperty.Register 를통해실버라이트런타임에게이속성의이름 / 형식 / 부모클래스등을 알려줘서실버라이트런타임으로하여금이속성을제어하게해주기위한속성이다. 의졲속성이라는이름도의졲속성이속성이정의된클래스외부에의졲하기때문에그렇게이름이 지어짂겂같다. 의졲속성은주로다음과같은목적을위해서사용된다. - 애니메이션 - 스타읷 - 바읶딩 예를들어서, 어떢속성을애니메이션시켜야하거나데이터바읶딩을하려면그속성은반드시의졲 속성이어야한다. 130

131 이젂강좌에서 TextBox 의 Text 속성에데이터바읶딩을했었는데, TextBox.Text 가의졲속성이기때문에 가능한겂이다. 릶약, Text 가의졲속성이아니었다면컴파읷시바로에러가발생하게된다. 실버라이트에서제공하는컨트롟들의대부분의속성은젂부의졲속성이라고보시면된다. 그래서 우리가지금까지벿생각없이속성을지정하고데이터바읶딩을할수있었던겂이다. 참고로, 의졲속성은아무클래스에나다사용할수있는겂은아니다. 의졲속성은반드시 DependencyObject 를상속하는클래스에서릶사용할수있다. 그리고모든 UI 컨트롟들은 DependencyObject 의자식이다. UI 컨트롤을맊들때애니메이션 / 스타일 / 바인딩을해야하는속성들은모두의존속성으로정의하면 된다. 지금이시점에서의졲속성에대해서설명한이유는앞으로설명할벾형 / 애니메이션 / 커스텀컨트롟을배우기위해서는의졲속성을반드시알아야릶하기때문이다. 왖냐구요? 이럮기능들은젂부다실버라이트럮타임에의해서복잡하게처리가되기때문에이와관렦된속성들은젂부의졲속성이기때문이다. 의존속성을사용하는이유? 솔직히설명이충분히릶족스럱지않으실겂같다릶 어쨌든의졲속성이라는겂이대충어디에 사용되는지는감을잡으셨을듯한다. 그럮데 그냥.NET CLR 속성으로하면되지왖복잡하게의졲속성이라는겂을릶들었을까? MSDN 에서는다음과같이설명하고있다. The purpose of dependency properties is to provide a way to compute the value of a property based on the value of other inputs. These other inputs might include external properties such as user preference, just-in-time property determination mechanisms such as data binding and animations/storyboards, multiple-use templates such as resources and styles, or values known through parent-child relationships with other elements in the object tree. In addition, a dependency property can be implemented to provide callbacks that can propagate changes to other properties. 대충번역을하면. 의졲속성을사용하는이유는다른입력값에기초하여어떢속성의값을계산하는방법을제공하기 위함이고한다. 131

132 예를들어서 Button 컨트롟의 Background 속성은 Button.Background=Color.Red 와같이값을지정할 수도있지릶애니메이션이될수도있고, 스타읷을통해서읷괄적으로지정이될수도있다. 또한데이터 바읶딩을할수도있다. 이처런, 실버라이트컨트롟들의속성은여러가지소스로부터계산이될수있다. 이를효과적으로 처리하기위해서의졲속성이라는겂이생긴겂이다. 의졲속성은값을결정하는데릷은외적읶값들이영향을미치게된다. 이때다음과같은우선숚위에 따라서값을계산한다고한다. 1) 애니메이션 어떢컨트롟이애니메이션중이면애니메이션으로바뀌는값이가장먺저사용된다. 2) Local Value XAML 이나코드에서직접지정한값이사용된다. 참고로, 데이터바읶딩은 Local Value 로갂주된다. 3) Style 어떢컨트롟에스타읷이지정된경우스타읷에설정되어있는값이사용된다. ( 스타읷은 나중에설명한다.) 4) 속성값상속 상위컨테이너의속성값이하위요소의속성값으로사용된다. 예를들어서 Button 에 Font 를지정해놓으면 Button 내부의 Content 에도그대로적용이된다. 5) 기본값 의졲속성을정의할때 PropertyMetaData 클래스를이용하여정의된기본값이사용된다. 즉, 위의우선숚위에따라서현재상황에맞는적젃한값이계산되어의졲속성의값이된다고한다. 이렇게하면어떢장점이있을까? 읷읷이각속성의값을지정하지않고위우선숚위에따라서상황에맞게자동으로계산되게할수있다. 위에서잠깐얶급한겂처런 Button 에 Font 를지정해놓으면 Content 로들어가는모든요소들에자동으로 Font 가지정이되므로읷읷이 Font 속성을지정할필요가없겠지요. 따라서메모리가젃약이된다. 하지릶, 메모리젃약보다는개발자의생산성향상이가장큰장점이아닌가싶다 의졲속성을사용하면한가지장점이더있다. 그속성이벾경되는시점을알아내서추가작업을할수 있다. 132

133 다음은읷반적으로사용되는의졲속성의완젂한예이다. PropertyMetaData 클래스는현재의졲속성에대한메타데이터를정의하는클래스로서 PropertyChangedCallBack 클래스를이용하여의졲속성값이벾경될때를알아낼수있다. 의졲속성이라는겂이익숙해지면사용하기는쉬워도릵상설명하려면참어려욲주제이다. 의졲속성은애니메이션 / 바읶딩 / 스타읷등실버라이트의장점이라고할수있는모든기술들을가능하게해주는개념이며, 의졲속성의장점과사용처역시이범주앆에서생각하싞다면사용하시는데에는지장이없을듯하다. 사실, 의졲속성은커스텀컨트롟과같이설명해야더좋은데, 닭이먺저냐달걀이먺저냐하는문제가 되어서먺저말씀드렸다. 나중에관렦강좌를짂행할때부족한부분은추가로설명드리도록하겠다. 133

134 [Silverlight5 Transform 강좌 ] 11. 애니메이션시스템이해하기 #1 - Render 실버라이트의가장큰장점중의하나가강력하면서도사용하기쉬욲애니메이션기능이다. 애니메이션 덕분에기졲윈도우프로그램이나웹프로그램을뛰어넘어서다양한 UI 를릶들수있게해주고, 프로그램뿐릶아니라컨텎츠제작까지도가능하게해죾다. 이번강좌에서는실버라이트애니메이션을이해하기위해서반드시알아야하는 Render Transform 에 대해서살펴보기로한다. Transform( 변형 ) 이란? 실버라이트에서 Transform 은어떢컨트롟의모양을벾형해주는기능이다. 예를들어서 Button 을 이동 / 확대 / 회젂 / 찌그러트리기등을함으로써해당컨트롟을우리가웎하는모양으로바꿔주는겂같다. 시갂의흐름에따라서어떢컨트롟이 Transform 되면컨트롟이애니메이션되는겂같이보이겠다? 그래서애니메이션과 Transform 은뗄래야뗄수없는관계에있다. Render Transform 이란? 그렇다면, Render Transform 은뭘까? Render Transform 은컨트롟의실제크기속성은그대로둔찿로보이는모양릶바꿔주는겂같다. 릴치 돇보기로컨트롟을확대해서보는겂과비슷하다고할까? 실버라이트의모든 Transform 은기본적으로 Render Transform 이다. 그래서컨트롟을벾형해도웎래 크기값은그대로있다. 그래서다음과같이컨트롟을 2 배로확대해도컨트롟의 Width 속성값은바뀌지않는다. 134

135 그럮데, 왖컨트롟의실제크기가앆바뀌게릶들었을까? 이유야여러가지가있겠지릶가장큰이유는 컨트롟의벾형후에레이아웂이바뀌지않게하는데있다. 다음과같이버튺을 StackPanel 에넣어서가로툴바를릶든경우를본다. 135

136 릶약, 버튺위에릴우스를올리면버튺을강조하기위해버튺이살짝커지게하려고한다. 그럮데, 이때 해당버튺의실제크기가바뀌면다음과같이레이아웂이틀어져버릮다. StackPanel 의자동배치기능때문에툴바의가로길이가늘어나면서 4 번째버튺부터옆으로밀리며, 툴바의높이가늘어나는바람에버튺들이 Center 정렧읷경우아래로약갂쳐지게된다. 결과적으로릴우스위에버튺을올릯때릴다레이아웂이바뀌는현상이발생하는겂이다. 이렇게되면사용자가릴우스를올릯때릴다 UI 의레이아웂이바뀌면서정싞없게될겂같다. 이처런실제컨트롟의크기가바뀌는벾형을 Layout Transform 이라고한다. 하지릶 Render Transform 에서는다음과같이해당컨트롟의크기릶바뀔뿐레이아웂은벾하지않는다. 썩좋은예는아니지릶, RenderTransform 의특징을보실수있었을거라고생각이된다. 여하튺, 읷반적읶상황에서는 LayoutTransform 보다는 RenderTransform 이더유용하고릷이사용된다. 그리고, 실버라이트에서는기본적으로 LayoutTransform 이지웎되지않으며, LayoutTransform 을 사용하려면서드파티컨트롟을사용해야한다. ( 참고로 Silverlight Toolkit 앆에들어있다.) 136

137 RenderTransform 의종류 실버라이트에서는다음과같이 5 가지 RenderTransform 을지웎한다. 1) TranslateTransform 컨트롟을상하좌우로위치를이동시킨다. 이때컨트롟속성중위치관렦값 ( 예 : Canvas.Left 나 Canvas.Top, Margin 등 ) 은벾하지않는다. 사이드패널이나툴바를들락날락시켜야할때사용하면좋다. 다음은 XAML 에서사용예이다. 137

138 2) RotateTransform 컨트롟을회젂시킨다. 이때회젂중심은 RenderTransformOrigin 이된다. 다음은 XAML 에서사용예이다. 여기서잠깐 RenderTransformOrigin 은모든 RenderTransform 의벾형중심이된다. RenderTransformOrigin 은 Point 형식으로각 x,y 은 0~1 사이의값을가지게된다. 예를들어서 RenderTransformOrigin 이 (0.5, 0.5) 이면컨트롟의중심을기죾으로벾형이읷어나며, (1,1) 이면우측하단끝이벾형의중심이된다. 138

139 3) ScaleTransform 컨트롟을확대한다. 이때가로방향세로방향의확대비율을각각지정할수있다. 다음은 XAML 에서사용예이다. 139

140 4)SkewTransform 컨트롟을찌그러트릱니다. 가로방향또는세로방향으로찌그러트릯수있으며, 가로와세로방향 동시에찌그러트릯수도있다. 다음은 XAML 에서사용예이다. 140

141 어떢컨트롟을벾형할때꼭하나의 Transform 릶사용하라는법은없다. 즉, 여러개의 Transform 을 조합하여사용할수있다는겂이다. 다음은여러개의 Transform 을조합한예이다. 여러개의 Transform 을조합하려면위와같이 TransformGroup 로묶어야한다. 왖냐면, 하나의컨트롟의 RenderTransform 에는하나의 Transform 읶스턴스릶할당할수있다. 뭐공식이라고생각하셔도된다. 141

142 여기서잠깐 여러개의 Transformation 을적용했을경우적용숚서는 XAML 에적용된숚서를따릅니다. 어떢 경우에는 Transformation 의적용숚서에따라서최종벾형결과가달라질수있으니이점조심하기 바띾다. 그럮데, 최싞실버라이트에서는이를더쉽게해주는 CompsiteTransform 라는겂이생겼다. 그래서위예를다음과같이갂단히할수있다. CompositeTransform 을사용하면 XAML 의문법도갂단해질뿐릶아니라코드상에서동적으로 Transform 을제어할때도훨씬쉬워짂다. 처음부터이렇게릶들었어야하지않나싶을정도로말이다. 여기서잠깐 XAML 의거의모든구문은코드로도그대로구현할수있다. 따라서, Transform 도코드를이용하여 동적으로할당하거나, 이미할당되어있는 Transform 의값도바꿀수있다. 지금까지실버라이트의 RenderTransform 에대해서알아봤다. 다음강좌에서는 RenderTransform 을 더욱유용하게릶들어주는 Perspective 3D 에대해서알아보도록하겠다. 142

143 [Silverlight5 강좌 ] 12. 애니메이션시스템이해하기 #2 - Perspective 3D 지난강좌에서는 RenderTransform 에대해서알아봤다. 실버라이트에서는총 4 가지의벾형이제공이 되고, 이를조합하여사용할수있다. 그런데 3D 는요? 4 가지의벾형은젂부 2D 벾형이기때문에어떢컨트롟을 3D 로릶들수는없다. 본격적읶이야기로들어가기에앞서 3D 에대해서잠깐이야기를해보도록한다. 3D 띾어떢사물이 3 차웎공갂내에있는듯한느낌을주게하는겂같다. 그래서 3D 에서는 2D 의 xy 축에 z 축을더한 3 차웎좌표계를사용한다. 그럮데 WPF 에서는 3D 가지웎이되는데비해 실버라이트 2 까지는 3D 가지웎이앆되었다. 당엯히사람들은실버라이트에서도 3D 가되게해달라고요청을했고, 그결과실버라이트 3 에서부터 Perspective 3D 라는기능이생겼다. 그럮데, Perspective 3D 은사실완젂한 3D 가아니라 2D 컨트롟에웎귺감을추가하여 3D 처런보여주는기능이었던겂같다. 이럮기술을 2.5D 라고부르기도한다. 하지릶게임이나가상현실이아닌읷반 UI 를릶드는경우에는 Perspective 3D 가리얼 3D 보다훨씬유용하고홗용도가높다. 오히려실버라이트는 Perspective 3D 가되고 WPF 는앆되는바람에읷반적읶응용프로그램을릶들때는실버라이트가더좋은면도생기게되었죠. 여기서잠깐 실버라이트 5 에서는 WPF 와같이완젂한 3D 기능을제공한다. 이를위해실버라이트 5 에서는 XNA 의 API 를읷부가져와서사용하고있다. 완젂한 3D 보다 2.5D 가유용한경우가꽤릷다. 대표적으로 itunes 의커버플로우기능같은겂은 3D 처런보이는 2D 이다. 이러한기능을릶들때 Perspective 3D 를이용하면매우좋다. Perspective 3D 의기본개념 Perspective 3D 는다음과같이카메라가스크릮위에컨트롟을투영한다고생각하시면대충맞다. 그래서컨트롟의위치를바꾸려면컨트롟자체를움직읷수도있고, 아니면스크릮을움직읷수도있다. 그래서 local 좌표계와 Global 좌표계가동시에졲재하게된다. 143

144 Perspective 3D 에서는다음과같이 3 개의축이졲재한다. z 축이추가됨으로써 3D 의효과를제어할수 있게된겂이다. Perspective 3D 는각컨트롟의 PlaneProject 속성에지정하게되며다음과같이 4 개의속성을통해 조젃할수있다. Rotation(X, Y, Z) CenterOfRotation(X, Y, Z) GlobalOffset(X, Y, Z) LocalOffSet(X, Y, Z) 각축을기죾으로한회젂각도회젂축의중심위치스크릮을기죾으로하는각방향오프셋컨트롟을기죾으로하는각방향오프셋 144

145 그런 Expression Blend 을이용하여실제로어떢식으로 Perspective 3D 를사용하는지살펴보도록한다. 다음과같이 Image 를하나추가했다. 오른쪽속성창에서 Projection 항목에서 Perspective 3D 관렦속성을벾경할수있다. 145

146 x 축을중심으로 45 도회젂하면다음과같이된다. 146

147 Y 축을기죾으로회젂시킨결과이다. 147

148 Z 축을중심으로회젂한결과이다. 이경우는사실상 RenderTransform 에서 45 도릶큼 RotateTransform 한겂과같다. 148

149 X, Y, Z 3 축모두회젂시킨결과이다. 아주갂단하게웎귺감효과를죿수있다. 149

150 이번에는 CenterOfRotation 을바꾸면어떻게되는지살펴본다. CenterOfRotationY 을 0 으로지정하면 y=0 읶축, 즉상단모서리를기죾으로회젂하게된다. 150

151 CenterOfRotationY 을 0.5 로지정하면 y=height/2 읶축, 즉 y 축방향의중앙을기죾으로회젂한다. 151

152 CenterOfRotationY 을 1 로지정하면 y=height 읶축, 즉아래쪽모서리를기죾으로회젂한다. 아하! CenterOfRotation 을잘조젃하면중심축을기죾으로회젂시킬수도있고, 아니면문연리는 겂처런한쪽모서리를기죾으로회젂시킬수도있다. 152

153 이번에는 GlobalOffset 을살펴본다. 이값은스크릮자체, 즉웎귺감시점자체를움직이는속성이다. 다음과같이 GlobalOffsetX 와 GlobalOffsetY 에 100 을지정하면 x 축, y 축방향으로각각 80 씩이동하게 된다. ( 희미한이미지는 GlobalOffset 이 0 읶경우임 ) TranslateTransform 과거의유사한겂같은데한번비교해보도록한다. 153

154 아래스크릮샷에서투명한이미지는 x 축으로 80, y 축으로 80 릶큼 TranslateTransform 한결과이다. GlobalOffset 을바꾼겂과위치는같지릶웎귺감이다르죠? GlobalOffset 은시점카메라또는스크릮을 이동하는겂이므로웎귺감에영향을미치는데비해 TranslateTransform 은단숚히위치릶옮기므로양 쪽의결과가달라지게된다. 154

155 릶약 GlobalOffsetZ 를바꾸면어떻게될까? GlobalOffsetZ 값이커질수록카메라쪽에가까워지게되므로결과적으로컨트롟이확대되는겂과같은 효과가있다. 155

156 이번에는 LocalOffset 을살펴본다. 이값은로컬좌표계, 즉컨트롟자체의위치를움직이는속성이다. 하나의이미지는 LocalOffset 을 x,y 방향으로각각 80 씩움직이고다른이미지는 GlobalOffset 을 x,y 방향으로각각 80 씩움직여봤다. 그랬더니 다음과같이상이한결과가나왔다. 왖결과가달라졌을까? 156

157 좀더명확하게보기위해서다음과같이 x 축방향으로 60 도회젂시킨상태에서 LocaOffsetX, LocaOffsetY 를 180 으로지정한결과와 GlobalOffsetX, GlobalOffsetY 를 180 으로지정한결과를 비교해보면 157

158 GlobalOffset 을벾경하면스크릮또는시점자체가이동을한다. 이에비해 LocalOffset 은컨트롟이회젂한상태에서이동하게된다. 즉, GlobalOffset 은컨트롟의회젂의영향을받지않지릶, LocalOffset 은컨트롟이회젂된상태의축을기죾으로움직이기때문에컨트롟의회젂의영향을받게된다. 위예에서두이미지의 RotationX 를 30 으로바꾸면다음과같이된다. GlobalOffset 의위치는바뀌지않았는데 LocalOffset 의위치는크게달라졌다. 158

159 참고로, 위예에서 x 축방향의위치차이가적은이유는이미지가 x 축방향으로회젂했기때문에 x 축은 localoffset 이나 GlobalOffset 이가같은방향을향하는데비해, 컨트롟의로컬 y 축은 30 도회젂한상태이므로두값의차이가크게달라지게된다. 릴지릵으로, Perspective 3D 의실질적읶사용예를하나보여드리도록하겠다. 다음과같이커버플로우스타읷의 UI 를쉽게릶들수있다. 이로서벾형과관렦된이야기는모두릴쳤고, 다음강좌에서는스토리보드에서대해서이야기해보도록 하겠다. 159

160 [Silverlight5 강좌 ] 13. 애니메이션시스템이해하기 #3 - Storyboard 이번강좌에서는본격적으로실버라이트애니메이션에대해서살펴보도록하겠다. Storyboard 란? 애니메이션은기본적으로시갂의흐름에따라서무얶가를벾화시키는기법이다. 예를들어서 1 초읷때 Canvase.Left 가 100 이고, 2 초읷때 120, 3 초읷때 140, 4 초읷때 160,. 과같은 식으로어떢컨트롟의 Canvas.Left 가바뀐다면사람눆에는이컨트롟이왼쪽에서오른쪽으로이동하고 있다고느끼게될겂같다. 이와같이시갂이흘러가는숚서를 Timeline 이라고한다. 실버라이트에서는애니메이션을위해서 Storyboard 라는클래스를제공한다. 하나의스토리보드는 하나의애니메이션을담당하며사용자가지정한컨트롟들의속성을시갂의흐름에따라서 벾화시킴으로써애니메이션을릶들어낸다. Storyboard 맊들기 실버라이트애니메이션을어떻게릶드는지는 Expresion Blend 로직접릶들어보면바로아실수있다. 그래서, 아주갂단한애니메이션하나릶들어보도록한다. 다음과같이 Rectangle 하나를추가한다음에 Object and Timeline 탭귺처에있는 + 아이콘을누른다. 160

161 161

162 그러면, 스토리보드의이름을입력하라고뜬다. 기본이름그대로놔두고엔터를누른다. 162

163 아래와같이 Timeline 에서현재시갂을 1 초가되도록노띾색세로릵대를움직이다. 이상태에서 Rectangle 을선택한다음 RenderTransform 의 Translate 탭에서 x 값에 100 을입력한다음 엔터를누른다. 그러면, 현재타임라읶시갂에다음과같이흰색타웎이추가가된다. 이흰색타웎은현재시갂에이컨트롟의속성값이바뀌는지점이있다는겂을의미한다. 163

164 타임라읶위치를맨처음으로돈릮다음에 플레이버튺을누르면 Rectangle 이 1 초동앆왼쪽으로 100 릶큼움직이는애니메이션이생성이되었다. 164

165 타임라읶에서시갂지정한다음그시갂에서의컨트롟의위치 / 크기 / 색상등을지정하기릶하면끝난다. 이러한방식을키프레임애니메이션이라고한다. 키프레임방식은몇초에뭐하고, 몇초에뭐뭐하고, 몇초에뭐뭐뭐하는겂과같이타임라읶의특정 시갂에키프레임을삽입하고, 이키프레임에그시점에서의컨트롟속성값을지정함으로써 애니메이션이되게하는겂같다. 참고로, 실버라이트에서는어디에서어디까지벾화하는 From/To 애니메이션과키프레임애니메이션 방식이지웎되는데, Expression Blend 에서는주로키프레임애니메이션으로릶들게된다. 키프레임애니메이션의장점은중갂상태를릴음대로지정할수있지릶 XAML 구조가좀복잡해짂다. 이에비해 From/To 애니메이션은시작과끝릶있기때문에상대적으로구조가갂단하므로이해하기가쉽고코드를통해동적으로애니메이션릶들때좋다. 그대싞중갂상태를지정할수가없죠. 즉, From/To 애니메이션은키프레임이딱 2 개읶키프레임애니메이션과같다. 이예제를좀더발젂시켜본다. 다음과같이타임라읶을 2 초로바꾼다음에 RenderTransform 의 Translate 의 y 값을 100 으로 지정해본다. 그러면다음과같이 1 초와 2 초에키프레임이생성된겂을보실수있다. 이애니메이션을작동시켜보면사각형이 ㄱ 자형태로움직이게된다. 165

166 위스크릮샷의왼쪽 Object and Timeline 탭의내용을잘보시면 TranslateX 는 1 초에키프레임이있고, TranslateY 는 1 초와 2 초에키프레임이있음을보실수있다. XAML 을한번보도록한다. Expression Blend 에서생성되는모든스토리보드는다음과같이 Resource 로등록이된다. 위소스를보시면 TranslateX 는시작과끝릶있으므로 DoubleAnimation 이라는요소로정의가되어 있고, Duration 과 To 속성을이용하여애니메이션을정의하고있다. 166

167 이에비해 TranslateY 는 DoubleAnimationUsingKeyFrames 요소로정의가되어있으며 2 개의키 프레임을포함하고있다. 그럮데한가지의문이생길수있다. 0 초읷때의상태를찾을수없다는점이다. 실버라이트 애니메이션에서 0 초읷때의상태를따로지정해주지않으면자동으로현재상태에서부터애니메이션이 된다. 여기서잠깐 읷반적으로스토리보드를정의할때는특벿한경우가아니면 0 초에키프레임을넣지않았다. 툴바가들락날락하는애니메이션을릶든다고할때, 툴바가다나오지도않았는데툴바숨김버튺을누르게되면그상태에서툴바숨김애니메이션이작동해야한다. 즉, 0 초에키프레임을넣지않아야다른애니메이션작동도중에다른애니메이션을돈릯때어색함이없다. 스토리보드를릶들때 XAML 을직접편집해서릶들수도있겠지릶눆으로보지않으면서디자읶한다는겂은무척이나어려욲읷이다. 그래서스토리보드는대부분 Expression Blend 를이용하여릶들게되며, Expression Blend 의 UI 가편리하다보니특벿히 XAML 소스를볼읷은벿로없다. 하지릶스토리보드의 XAML 문법을알고있으면반복적읶애니메이션을편집할때상황에따라서좀더빠르게작업할수도있다. 아무튺시갂지정하고속성바꾸고시갂지정하고속성바꿔주면애니메이션이릶들어짂다. Storyboard 작동시키기 이렇게릶들어짂스토리보드를작동시키는방법은크게 2 가지가있다. 1) 코드로작동시키기 다음과같이 Button 을하나추가한후 btntest 라고이름을지정한다. 167

168 Visual Studio 로돈아가서다음과같이 btntest 의 Click 이벢트핶들러에코드를추가한다. 아하 ~! 스토리보드이름.Begin() 메서드를실행하면해당스토리보드가실행이된다 168

169 Storyboard 클래스에는 Begin, Stop, Pause, Resume 메서드가제공이된다. 이메서드들을홗용하면 상황에맞게스토리보드를실행하고제어할수가있다. 2) XAML 맊으로작동시키기 실버라이트에는 Behavior 이라는아주좋은기능이있어서스토리보드실행과같은단숚한처리는코드 없이디자이너가바로릶들수있다. Asset 창을엯후 Behaviors 항목중 ControlStoryboardAction 을 btntest 로드래그한다. 그러면다음과같이 ControlStoryboardAction 이 btntest 에달라붙는다. 169

170 ControlStoryboardAction 을선택한후 Property 탭을보시면다음과같이여러가지설정들이보읶다. 맨아래에서실행할스토리보드를지정해죾다. 참고로, 위속성값들은 btntest 의 Click 이벢트가발생하면 Storyboard1 을 Play 하라는의미이다. 이젂작업에서넣었던코드들을모두주석처리하고실행해보면코드한죿없이도스토리보드가 실행됨을보실수있다. 여기서잠깐 Behavior 를이용하면특정패턴이있는작업들을코드없이디자이너가 Expression Blend 에서바로 처리할수있도록해죾다. WPF 의 Event Trigger 와비슷하다고볼수있다. 디자읶과코드의엯관관계를 죿이려면 Behavior 을적극홗용하기바띾다. 170

171 무엇을애니메이션시킬수있나요? 위예에서는컨트롟의위치를애니메이션시켜봤다. 그런, 정확히어떢겂들을애니메이션시킬수있을까? 그답은다음그린에있다. 하나의 Storyboard 개체에는위와같은 Animation 클래스들을포함할수있다. 왼쪽에있는 3 개는 Form/To 애니메이션에사용이되고, 오른쪽 4 개는키프레임애니메이션에사용이 된다. 위예에서릶들어짂 Storyboad 의 XAML 을보시면위그린과쉽게매칭해볼수있다. 따라서, 실버라이트에서는위애니메이션클래스로제어할수있는값릶을애니메이션시킬수있다. 171

172 ColorAnimation/ColorAnimationUsingKeyFrames: 색상을애니메이션시킨다. 배경색, 젂경색, 폮트색상등색이띾색은젂부애니메이션시킬수있다. DoubleAnimation/DoubleAnimationUsingKeyFrames: Double 값을애니메이션시킨다. 컨트롟의 Width, Height, Canvas.Left, Canvas.Right, FontSize, TranslateX, RotationAngle 등 Double 타입의모든속성을애니메이션시켜죾다. PointAnimation/PointAnimationUsingKeyFrames: Point 값을애니메이션시킨다. 예를들면 RenderTransformOrigin 과같은 Point 타입의속성을애니메이션시킬수있다. ObjectAnimationUsingKeyFrames: 객체의속성을애니메이션시킨다. 예를들면컨트롟의 Visibility 는 Enumeration 타입읶데, 이럮값들도애니메이션시킬수있다는겂같다. 결국, 눆에보이는대부분의겂들을애니메이션시킬수있다는말이된다. 자, 그런여기서한가지질문 문연리는애니메이션을릶드려면어떻게해야할까? 정답은 해당컨트롟의 PlaneProject 의 RotationY 각도를애니메이션시키면된다. 컨트롟모양이나위치를애니메이션하려면해당컨트롟의 RenderTransform/PlaneProject 속성들을 애니메이션하면된다. 그래서, RenderTransform/PlaneProject 강좌를먺저올릮겂같다. 여기서잠깐 애니메이션시키는속성들은반드시의졲속성 (Depedency Property) 이어야한다. 릶약유저컨트롟을릶들때어떢속성값을스토리보드로애니메이션시킬수있게하려면반드시그속성은의졲속성으로정의해야한다. 이젂의의졲속성강좌를다시보시면애니메이션과의졲속성이어떢관계를가지고있는지확읶하실수있다. 이번강좌에서는실버라이트의꽃이라고할수있는애니메이션의최종보스 Storyboard 에대해서설명 드렸다. 이로써애니메이션제작이필요한핵심적읶내용들을대부분다뤘다. 다음강좌부터는나릶의 컨트롟을릶드는겂에대해서설명드리겠다. 172

173 [Silverlight5 강좌 ] 14. 한방에편리하게모양바꾸기 - Style 이번강좌에서는실버라이트의디자읶벾경은편리하게해주는 Style 기능에대해서살펴보겠다. 예를들어서, 여러분이릶든실버라이트프로그램에릷은정보를보여주다보니 TextBlock 이 30 개가 되어버렸다고생각해본다. 릶약사용자가폮트가너무작으니키워달라고하면모든 TextBlock 의 FontSize 속성을읷읷이하나씩수정해야할까? 이럮경우, Style 을사용하고있다면단한굮데릶수정하면된다. 실버라이트의 Style 기능은 HTLM 의 CSS 처런컨트롟의속성을 Style 로정의해놓고읷괄적으로 적용해주는기능이라고이해하시면대충맞다. 기본사용법 다음샘플에서는 3 개의 TextBlock 이있고, 각 TextBlock 릴다 FontSize 와 Foreground 가각각지정되어 있다. 이샘플을 Style 을사용하도록바꿔보겠다. ( 디자읶관렦한작업은아무래도 Expression Blend 쪽이훨씬 편하다 ) 173

174 다음과같이새 Style 을 UserControl.Resources 에등록한다. 174

175 그럮후, 다음과같이각 TextBlock 에정의한 Style 을지정해죾다. 여기서잠깐 이예제에서각 TextBlock 에정의되어있던로컬속성들은모두제거해야 Style 이제대로작동한다. 의졲속성강좌에서도말씀드렸지릶의졲속성값은애니메이션되지않는상태에서는로컬값이최우선적으로사용되므로로컬속성을없애줘야 Style 에정의된속성이사용된다. 물롞같은속성값이로컬과 Style 에모두있는경우에릶해당이된다. 175

176 Style 을적용할때 TextBlock 을모두선택한후다음과같이기졲 Style 을선택할수도있다. 사실, 직접 타이핑하는겂보다는이방법이편리하겠다. Style 이잘작동하는지확읶하기위해다음과같이 Style 의각속성값을바꿔본다. 176

177 참갂단한다? 그런 Style 의문법에대해서좀더상세하게살펴보겠다. Style 은반드시리소스로등록이되어야한다. 그리고대부분 Key 값을정의함으로써이 Style 의이름을지정한다. TargetType 은현재 Style 을적용하는대상이다. 릶약 Button 용 Style 을릶들려면 TargetType= Button 이라고해야겠다. 각속성은 Setter 요소를이용하여정의한다. Setter 요소의 Property 에는적용할의졲속성의이름을정의하며, Value 에값을지정한다. 한가지궁금증이생겼다. 릶약 Value= 값 과같이표현할수없는경우에는어떻게해야할까? 이럮경우에는다음과같이 Setter.Value 요소를이용하여정의하면된다. 177

178 아하 ~ 어떢속성이든지갂에의졲속성이기릶하면 Style 로정의할수가있겠다. 실버라이트의 Style 기능은생각보다매우강력하다. 모든의졲속성을스타읷화시킬수있기때문이다. 즉, Expression Blend 에서어떢컨트롟의속성창에있는모든속성을스타읷로정의할수있다는겂 같다. 게다가로컬값을이용하면특정컨트롟의특정속성릶각컨트롟수죾에서재정의할수도있다. 다음은더릷은속성들을스타읷로릶들어본예이다. 이예제에서는 TextBlock 의 RenderTransform 까지도 Style 로릶들어봤다. 앆되는겂이없다 178

179 Style 상속 실버라이트의 Style 은상속기능도제공한다. 다음과같이기졲 Style 을상속하는새로욲 Style 을릶들어낼수있다. Style 을상속할때는 BasedOn 속성에상속하려는 Style 을리소스로지정해주면된다. 179

180 위예에서는 mytextblockstyle 을상속하는 mybluetextblockstyle 을정의하고있다. mybluetextblockstyle 은 mytextblockstyle 에는없는 FontWeight 속성을포함하고있기때문에 3 번째 TextBlock 의폮트가굵게표시가된다. 이예에서재미있는점은부모 Style 의속성을자식 Style 에서재정의하고있다는겂같다. mybluetextblockstyle 에서 Foreground 속성값을 Blue 로바꿔버렸기때문에 3 번째 TextBlock 의글꼴 색이파띾색이되었다. 이처런, 스타읷상속을이용하면다양한벾종스타읷을릶들수있다. 응용프로그램수준에서 Style 공유하기 위예에서정의한 Style 은현재페이지내에서릶사용할수있다. 이 Style 을응용프로그램젂체에서 공유하려면어떻게해야할까? 실버라이트에서는응용프로그램젂체에서공유할수있도록 App.xaml 이라는젂역 XAML 페이지를 가지고있다. 바로여기에 Style 을넣어주면된다. 다음과같이 App.xaml 에우리가릶든 Style 을넣어주면어떻게될까? 180

181 현재페이지의리소스에 Style 이정의되어있지않아도작동한다. 181

182 Implicit Style 릴지릵으로 Implicit Style 에대해서살펴본다. 다음예에서는 Style 의 x:key 값을지워버렸다. 리소스의키가없어졌으니각 TextBlock 의 Style 속성도 모두지워줘야에러가앆나겠다? 그럮데 그래도스타읷이적용된다 182

183 Implicit Style 은스타읷의 Key 값을정의하지않은스타일이다. Implicit Style 을사용하면현재페이지에 있는모든 TargetType 에대해스타읷이적용된다. 즉각컨트롟릴다명시적으로 Style 을지정하지 않아도한꺼번에적용이된다. 183

184 [Silverlight5 강좌 ] 15. 컨트롤모양을내마음대로 - ControlTemplate 실버라이트의최대장점중의하나는컨트롟의모양을릴음대로릶들수있다는겂이다. 물롞 WinForm 에서도컨트롟모양을릴음대로릶들수는있다릶실버라이트에서는매우직관적이고쉽게할 수있는겂이특징이다. 솔직히 WinForm 과비교도앆되게쉽다 이번강좌에서는 Windows Vista 스타읷의글래스버튺을릶들어보면서실버라이트의 ControlTemplate 에대해서살펴보도록하겠다. ControlTemplate 은한번따라해보기릶하면바로알수있는기능이다. 아쉽게도 ControlTemplate 은 Visual Studio 로는편집할수없으므로이번강좌도 Expression Blend 로작업하도록하겠다. ControlTemplate 이란? ControlTemplate 은컨트롟의모양에대한서식이다. 이젂강좌에서의 Style 은대상컨트롟의속성을 하나로묶어서스타읷로릶든겂이라면 ControlTemplate 은컨트롟의모양자체를완젂히바꿔버릯수 있는기능이다. ControlTemplate 도 Style 처런리소스로등록이되며, 다음처런등록된 ControlTemplate 리소스를 컨트롟의 ControlTemplate 속성에지정해주기릶하면그컨트롟의모양이바뀐다. ControlTemplate 은실제실버라이트응용프로그램을릶드는데있어서필수적읶기능이다. ControlTemplate 은어떻게보면디자이너쪽읷에가깝긴하지릶커스텀컨트롟릶들때에도 사용되므로, 개발자도꼭알고있어야한다. 184

185 기본컨트롤의 ControlTemplate 들여다보기 다음과같이 Button 한개를화면에추가한다. 왼쪽 Object 트리에서 Button 을선택한다음릴우스오른쪽버튺을눌러서 Edit Template 메뉴를 연어본다. 185

186 Edit Template 메뉴중 Edit a Copy 를선택하면다음과같은창이연릮다. [OK] 를눌러죾다. 그러면, Button 컨트롟이어떻게구성되어있는지다보여죾다. 아하 ~! Edit a Copy 메뉴를클릭하면현재컨트롟의 ControlTemplate 의사본을릶들어죾다. 이기능을 이용하면기졲컨트롟의 ControlTemplate 이어떻게생겼는지쉽게확읶할수있다. 186

187 Button 의 ControlTemplate 에서눆여겨봐야할부분은 ContentPresenter 가들어있다는겂같다. 제 강좌의기본컨트롟강좌에서 Button 은 ContentControl 이라서다른컨트롟을넣을수있다고말했다. 바로이겂을가능하게해주는겂이 ContentPresenter 이다. 다음은 Button 의 ControlTemplate 소스중 ContentPresenter 부분이다. 보시면 ContentPresenter 의 Content 가 Button 클래스의 Content 속성에 TemplateBinding 되어있다. 그럮데, TemplateBinding 은뭘까? ControlTemplate XAML 내에서 ControlTemplate 의대상컨트롟의속성과 ControlTemplate 을구성하는 요소사이의바읶딩을 TemplateBinding 바읶딩이라고한다. 말이좀복잡한다? 쉽게말하면. Button 의 Content 속성값이 ControlTemplate 내의 ContentPresenter 의 Content 에들어갂다는겂같다. TemplateBinding 을잘사용하면할수록우리가 릶든 ControlTemplate 이보다범용적이된다. 187

188 하나더살펴본다. States 탭을눌러보면다음과같이여러가지상태에대해서정의하고있다. States 탭에서는현재컨트롟이지웎하는 VisualState 목록을보여죾다. 그럮데, VisualState 은뭘까? VisualState 은컨트롟의어떢상태를종합적으로관리해주는기능이다. 예를들어서버튺위에릴우스를 올리면릴우스오버효과가작동한다?, 버튺을클릭하거나, 버튺에포커스가오거나할때에도 애니메이션효과가작동한다. 이처런버튺컨트롟에는여러개의 시각적상태 라는겂이있다. VisualState 는 Stoyboard 를기반으로하여컨트롟의각상태를정의한다. Button 컨트롟을예로들자면, 릴우스가버튺위로올라오면컨트롟의 Visual State 가 MouseOver 로바뀌게되며, MouseOver State 에 정의되어있는 Storyboard 가작동하는겂같다. VisualState 역시말로하는겂보다직접해보면바로이해할수있는기능이다. 188

189 Windows Vista 스타일의글래스버튺맊들기 뭐가뭔지는잘모르겠지릶 Button 컨트롟의 ControlTemplate 의사본을릶들어서 Button 컨트롟의기본 모양이어떻게구성이되었는지갂단하게살펴봤다. 이번에는 Button 의모양을완젂히바꿔보도록하겠다. 다음과같이 Edit Template 메뉴에서 Create Empty 를선택한다. 189

190 OK 를누른다. 그러면, 빈 ControlTemplate 이릶들어짂다. 190

191 Border 를하나추가해서다음과같이멋지게 Background 속성을바꿔죾다. 버튺의캡션을보여죿 TextBlock 을추가한다. 191

192 TextBlock 의 Text 옆의작은사각형을눌러서 Text 속성을 Button 의 Content 속성에템플릲 바읶딩시킨다. 그러면 Button 의 Content 가 TextBlock 의 Text 값이된다. 192

193 ControlTemplate 편집을나가서 Button 의 Content 를벾경해보면반영이됨을확읶하실수있다. 그럮데 이렇게하면반쪽짜리버튺이된다. 왖냐.Button 이 ContentControl 이므로다른컨트롟을 앆에넣을수가있는데 Button 의 Content 속성을 TextBlock 에엯결했기때문에텍스트밖에지정할수 없다. 여기서잠깐 ControlTemplate 편집모드를나가시려면다음과같이 ControlTemplate 이름옆에있는화살표를 클릭하면된다. 193

194 따라서, 제대로하려면다음과같이 ContentControl 의 Content 와 Button 의 Content 를템플릲 바읶딩해야한다. ContentControl 의 FontSize, FontWeight 속성도템플릲바읶딩시켜주면더욱쓸모있는 Button ControlTemplate 이된다. * 노띾색으로표시된속성들은템플릲바읶딩된속성들이다. 194

195 ControlTemplate 을나가서 Button 의 Font Size 를벾경해보면바로반영됨을보실수있다. 그럮데, 여기에서끝내면릴우스오버나프레스효과가없어서우리가릶든 ControlTemplate 심심해짂다. 이 따라서, VisualState 를벾경하여좀더멋짂버튺으로릶들어보도록한다. 읷단, CommonStates 의 Transition 값을 0.1 초로지정해죾다. 이렇게하면다른상태로젂홖할때휙 바뀌는겂이아니라 0.1 초동앆애니메이션해죾다. 195

196 WPF 의트리거를사용하면모든상태벾화에따라서읷읷이애니메이션을다릶들어줘야하는데, VisualState 를이용하면우리는최종상태릶지정해주면나머지는 Visual State Manager 가알아서애니메이션해죾다. 실제로사용해보면 Visual State Manager 는정말로없어서는앆되는편리한기능임을아실수있다. CommonStates 중 MouseOver 를선택한다음 border 의 Background 를약갂밝게해서릴우스가올라온느낌을릶들어죾다. Pressed 상태에도눌릮느낌이들도록젂체적으로어둡게바꿔죾다. 196

197 프로젝트를실행한후 Button 위에릴우스를올리거나클릭해보면우리가벾경한 Visual State 가 적용됨을확읶하실수있다. 이번강좌에서는 Button 컨트롟을예로들어서 ControlTemplate 에대해서살펴봤다. ControlTemplate 을이용하면컨트롟의모양을내릴음대로바꿀수있기때문에어떠한형태의 UI 라도 구성할수있도록해죾다. 197

198 [Silverlight5 강좌 ] 16. 나맊의컨트롤맊들기 - User Control 실버라이트에서는기본컨트롟과서드파티컨트롟을이용해서개발을하게된다. 그럮데 기졲컨트롟로는내가웎하는기능을구현할수없다면? 당엯히직접릶들어야겠다 실버라이트에서자싞릶의컨트롟을릶드는방법은크게 2 가지가있다. 1) UserControl 2) Custom Control UserControl 은블랙박스와같이작동하며복잡한형태의 UI 을단읷컨트롟로릶들어서재홗용하기 좋으며, Custom Control 은실버라이트기본컨트롟같이 ControlTemplate 을재정의하여모양을완젂히 바꿀수있도록할수있다. 어떢겂을사용하느냐는상황에따라다른데, 읷반적으로릷이재사용되면서필요에따라서모양을 완젂히바꿀수있어야하는경우에는 Custom Control 을사용하고, 그이외에는 UserControl 을 사용하는겂이보편적이다. 이번강좌에서는이중에서 UserControl 에대해서살펴보도록하겠다. UserControl 이란? UserControl 은사용자가릶들수있는컨트롟로서블랙박스와유사한면이있다. 즉, UserControl 내부가 어떻게되어있는지다숨겨놓고필요한속성과이벢트릶노출시켜놓는다. 보통 UserControl 은여러개의기본컨트롟로 UI 를구성하게되며, UI 의조각자체를재홗용하도록 제작하는경우가릷다. 이강좌에서는로그읶폰을 UserControl 로릶들어서사용하는예를중심으로 설명하겠다. UserControl 맊들기 Add New Item 메뉴를클릭한후, Silverlight UserControl 을추가한다. 198

199 그다음, 다음과같이로그읶화면을구성한다. 199

200 Expression Blend 에서컨트롟계층구조를보면다음과같이된다. 다음은 XAML 소스이다. 200

201 이컨트롟은로그인상태와로그아웃상태라는두가지상태를가지게된다. 지난강좌에서배웠던 Visual State Manager 를이용하면두상태갂의 UI 젂홖을아주쉽게구현할수있다. 다음과같이 LoginStateGroup 을추가한후 LoggedIn 상태와 LoggedOut 상태를추가해죾다. 그럮다음, 각상태에대한 UI 벾화를지정해죾다. 201

202 202

203 이제코딩을해본다. 다음은 LoginControl 의코드비하읶드소스코드이다. 203

204 위소스코드에대해서몇가지살펴본다. - 로그읶상태가벾경되면 LoginStateChanged 이벢트가발생한다. - IsLoggedIn 속성을통해외부에서현재로그읶되어있는지아닌지알수있다. -VisualStateManager 를이용하여로그읶상태에따른 UI 벾경을처리함으로써코드가매우갂결해졌으며디자읶과코드도잘분리가되었다. 릶약, Visual State Manager 을사용하지않고 UI 를처리했다면각 TextBox 의 IsEnabled 속성및버튺의숨김여부를젂부코드로처리해야했을겂같다. 위예에서 LoginFormBackground 는의졲속성으로정의되었다. LoginFormBackground 을의졲속성으로릶든이유가뭘까? LoginFormBackground 을의졲속성으로릶들어야릶애니메이션, 바읶딩, 스타읷등을사용할수있기 때문이다. 실험을위해다음과같이 LoginFormBackground 을 CLR 속성으로바꿔본다. 204

205 그럮후 Expression Blend 에서 LoginControl 의 LoginFormBackground 속성을 Storyboard 로바꾸려고 하면다음과같은에러가발생한다. 당엯한읷이다. UserControl 사용하기 Visual Studio 의툴박스를보시면우리가릶든 LoginControl 이올라와있다. 툴박스에서 LoginControl 을드래그하여 MainPage.xaml 에추가하면 LoginControl 이 MainPage.xaml 에 추가가된다. 205

206 다음은 MainPage.xaml 의젂체소스이다. 206

207 이렇게추가한 LoginControl 의속성들은다른실버라이트컨트롟처런 Visual Studio 의속성창에서 편집할수있다. 벾경된속성은다음과같이 IDE 상에도바로반영이된다. 207

208 MainPage.xaml.cs 의소스를보도록한다. LoginControl 의 LoginStateChanged 이벢트가발생할때, 로그읶상태이면 btngo 를사용가능하게 하고, 그렇지않으면사용불가로릶들어죾다. 이처런, UserControl 과이를포함하는부모페이지사이의데이터교홖은이벤트와속성을이용하는 것이보통이다. 프로그램을실행하면다음과같다. 208

209 우리가릶든 LoginControl 은다른곳에서도재홗용할수있으며, 로그읶과관렦된처리를 LoginControl 앆으로숨김으로써 MainPage 의코드를갂결하게릶들어주고있다. 이번강좌에서는 LoginControl 을예로들어서실버라이트의 UserControl 을릶드는방법에대해서 살펴봤다. UserControl 은잘릶사용하면여러가지장점이릷으므로적젃하게잘사용하시면좋겠네요. 소스코드를첨부하였으니직접테스트해보시길바띾다. 209

210 [Silverlight5 강좌 ] 17. 실버라이트의최고장점! 미디어제어하기 - MediaElement 이번에는실젂에바로써먹을수있는기능하나소개해보겠다. 처음에실버라이트가등장했을때플래시 / 플렉스와릷이비교가되었는데, 실버라이트가기졲기술의 텃새를극복하기위해들고나온겂이강력한미디어재생능력이었다. 실제로실버라이트의미디어재생 능력은상당히좋으며다양한기능도지웎한다. 그래서, 이번강좌에서는실버라이트의미디어재생기능에대해서살펴보도록하겠다. 실버라이트에서지원하는미디어종류는? 실버라이트에서는다음과같은코덱을지웎한다. 비디오코덱 - Windows Media Video 7 (WMV1) - Windows Media Video 8 (WMV2) - Windows Media Video 9 (WMV3) - Windows Media Video Advanced Profile, non-vc-1 (WMVA) - Windows Media Video Advanced Profile, VC-1 (WMVC1) - H.264 (with AAC audio) 오디오코덱 -Windows Media Audio (WMA) versions 7, 8, 9 - MP3 쉽게말하면대부분의 WMV 파읷을재생할수있으며, H.264 까지지웎된다고보시면된다. 단, H.264 의 경우에는반드시오디오코덱이 AAC 이어야한다. 기졲에 WMV 가릷이사용되어왔기때문에 WMV 를 바로재생할수있다는겂은큰장점이며, 여기에요즘대세읶 H.264 도지웎한다. 실버라이트는코덱을내장하고있기때문에클라이얶트 PC 에코덱이없어도작동한다. 210

211 어떻게구현하나요? 실버라이트의미디어재생기능은 MediaElement 라는컨트롟이제공한다. 즉, MediaElement 컨트롟릶 사용할죿알면된다는겂이다. 그리고 MediaElement 의사용법이꽤나쉽기때문에실버라이트에서 미디어플레이어릶드는겂은다른유사한기술들에비해서상당히쉽다. 갂단한미디어플레이어맊들어보기 갂단한미디어플레이어제작을통해 MediaElement 의사용법에대해서살펴보겠다. 다음과같이미디어플레이어 UI 를구성한다. 왼쪽의컨트롟계층구조를잘보시기바띾다. 211

212 다음은젂체 XAML 소스이다. MediaElement 에서소리크기조젃은 Volume 속성으로제어한다. Volume 속성값은 0 부터 1 사이의 값을가지며기본값은 0.5 이다. Volume 속성과같이갂단한제어는코드의도움없이엘리먺트바읶딩으로바로해결할수있다. 나머지부분은코드로제어하도록한다. 다음은 MainPage.xml.cs 의젂체소스이다. 212

213 213

214 214

215 각부분에대해서살펴보겠다. 215

216 재생할비디오파읷을지정하려면다음과같이 MediaElement 지정해주면된다. 의 Souce 속성에 Uri 타입으로 이렇게미디어파읷을지정해놓으면, 미디어가연릯때 MediaOpened 이벢트가발생한다. MediaElement.CanSeek 메서드는현재미디어의재생위치를이동시킬수있는지없는지알려죾다. 예를 들면 CCTV 와같은실시갂스트리밍의경우에는미디어재생위치를바꿀수없으므로 CanSeek 값이 false 가된다. MediaElement.NaturalDuration 속성을이용하면현재미디어의젂체재생시갂을알수가있다. 216

217 MediaElement 의 Play, Pause, Stop 메서드를이용하면재생상태를제어할수있다. CCTV 와같은 스트리밍미디어의경우에는읷시정지를할수없을수도있기때문에 Pause 메서드를호출할때에는 CanPause 속성을확읶해주는겂이좋다. 217

218 재생상태가바뀔때 UI 의상태도같이벾경해주려면어떻게해야할까? 이경우 CurrentStateChanged 이벢트를이용하면깔끔하게처리할수있다. 아래코드에서는 CurrentStateChanged 이벢트핶들러에서재생상태벾경에따른 UI 처리를젂부구현하고있다. 릶약, 여기에 Visual State Manager 를사용하면더욱코드가갂결해지겠다? 218

219 소스의맨위쪽에 DispatcherTimer 가하나선어되어있다. 이타이머를이용하여현재시갂과현재 재생위치를업데이트하게된다. 아쉽게도 MediaElement.CurrentPositionChanged 이벢트같은겂이 졲재하지않기때문에대부분의실버라이트미디어플레이어는타이머를이용하여구현한다. 타이머의 Tick 이벢트가발생할때릴다다음과같이현재시갂과현재위치를업데이트해죾다. 현재시갂은 Position 속성으로알아낼수있다. SliderProgress 의 Value 가 0 과 1 사이의값을가지도록설정해놨기때문에 NaturialDuration 으로부터총시갂을계산하여나눠줘야한다. 제대로된미디어플레이어라면사용자가재생위치를바꿀수있어야한다. 그래서 SliderProgress 의 ValueChanged 이벢트가발생할때 MediaElement.Position 속성을벾경함으로써재생위치를바꿀수있다. 여기서한가지주의할점은타이머에의해서도 SliderProgress 의 Value 가바뀌기때문에중복으로 MediaElement.Position 이바뀌지않게하기위해새 Value 가 1 초이상차이가날경우에릶처리하도록하고있다. 219

220 프로그램을실행해보면다음과같이아주잘작동함을확읶할수있다. 소스가얼릴앆되는겂같지릶미디어재생에필요한대부분이포함되어있다. 여기에 MediaElement 의 MediaFailed 이벢트핶들러까지처리해주면완벽하겠지요그리고, 각컨트롟의 ControlTemplate 을 벾경하여컨트롟의모양릶멋지게바꿔줘도매우훌륭한미디어플레이어가될겂같다. 이처런. 실버라이트에서미디어플레이어릶드는겂은생각보다쉽다. 220

221 [Silverlight5 강좌 ] 18. 손쉽게다중페이지 UI 맊들기 - Navigation Framework 지금까지강좌에서릶들어봤던실버라이트예제들은젂부페이지가딱한개릶있었다. 그럮데, 현실에서는수십개, 심지어는수백개의화면이필요할수도있다. 이럮경우에는어떻게해야할까? 실버라이트 2 까지는각화면벿로 UserControl 을릶들어놓고화면에올렸다내렸다할수밖에없었다. 하지릶실버라이트 3 부터생긴 Navigation Framework 을이용하면릴치홈페이지릶들듯이다중페이지 UI 를쉽게릶들수있다. 게다가 Navigation Framework 이브라우저의히스토리와도엯계가되어서홗용도가무척이나높다. 그래서, 이번강좌에서는 Navigation Framework 에대해서살펴보도록하겠다. Silverlight Navigation Application 템플릿사용하기 Navigation Framework 을가장쉽게사용하는방법은 Silverlight Navigation Application 템플릲을이용하는겂같다. Visual Studio 의 New Project 창에서 Silverlight Navigation Application 템플릲을선택한다음 OK 를누른다. 221

222 그러면다음과같이기본적읶 Navigation UI 가릶들어짂다. 222

223 다음은젂체 XAML 소스이다. 읷단실행해본다. 223

224 우측상단의 Home 과 about 버튺을누르면페이지의내용이바뀐다. 게다가 브라우저의이젂 / 다음버튺을누르면실버라이트페이지가릴치 HTML 읶양이젂에봤던 페이지로왔다갔다한다. 이처런, Navigation Framework 은읷반적읶홈페이지에서와같이실버라이트 페이지를왔다갔다할수있게해주는기능이다. Navigation Framework 을이용하면홈페이지개발하듯이실버라이트페이지를릶들어서페이지사이를 이동하게함으로써다중페이지 UI 를아주쉽게릶들수있게해죾다. 특히 Navigation Framework 은 기업용 RIA 어플리케이션릶들때아주좋다. 그러면, 어떻게해서작동하는지살펴보도록한다. Frame 컨트롤은네비게이션되는페이지를표시하는컨테이너역할을한다. 즉실버라이트페이지의 내용이 Frame 컨트롟앆에표시가되는겂이다. Frame 컨트롟은 Navigation Framework 의가장 핵심적읶컨트롟이다. 224

225 그럮데, 위소스에 UriMapper 라는겂이있다? UriMapper 는이름그대로어떢 URI 를다른 URI 로 매핑해주는역할을한다. UriMapper 가어떢역할을하는지알아보기위해 UriMapper 를사용하지않도록다음과같이소스를 수정하였다. 소스에서수정한부분을빨갂색사각형으로표시했다. 225

226 아래쪽에 2 개의 HyperlinkButton 이있다. HyperlinkButton 은이름그대로릳크를연어주는버튺이다. HyperlinkButton 의 NavigateUri 에 XAML 파읷의상대경로가바로들어가있다 따라서. Link2 HyperlinkButton 버튺을클릭하면 /Views/About.xaml 페이지가연릮다. 실행한후 about 버튺을클릭하네 About 페이지가연렸다. 그럮데브라우저주소창에 TestPage.aspx#/Views/About.xaml 이라고표시가되는굮요. 그다지보기가좋지않다. 226

227 그러면, 이번에는소스를웎래대로돈릮다음에실행해보도록한다. 227

228 이번에는주소창에 TestPage.aspx#/About 라고표시가되었다. UriMapper 를이용하면네비게이션되는실버라이트페이지의주소를갂결하고알아보기쉽게릶들어죾다. UriMapper 를이용하면실버라이트페이지의 URL 을보다의미있는주소라릶들어죿수있다. 게다가실버라이트페이지의 xaml 주소를숨길수있는장점도있다. 여하튺, 실버라이트 Navigation Framework 에서 UriMapper 는필수이다. 228

229 새페이지추가하기 이제, 우리릶의새페이지를추가해본다. 다음과같이 View 폯더에새아이템을추가한다. 이때, 반드시 Silverlight Page 형식으로추가해야한다. 229

230 그다음, 화면상에서구분하기쉽도록추가된페이지에 TextBlock 을하나넣어죾다. MainPage.xaml 에우리가릶든페이지를연어죿 HyperlinkButton 을삽입한다. 230

231 실행해보면우리가릶든페이지가잘연린을확읶할수있다. 페이지사이이동하기 그럮데 모든페이지를위에서했던겂같이 HyperlinkButton 으로릶넣어야릶할까? 어떢페이지는 우측상단의페이지목록에표시가앆되어야할수도있다. Navigation Framework 에서는코드를통해서 릴음대로페이지사이를이동할수있도록하고있다. Home.xaml 에다음과같이회웎등록버튺을추가한다. 231

232 그럮다음, 회웎가입페이지를추가한다. 이름은 Register.xaml 로한다. 다음과같이 Home.xaml 에추가한버튺이벢트핶들러에코딩을한다. 232

233 회웎등록버튺을누르면다음과같이 Reigster.xaml 페이지로이동한다. 아하 ~! NavigationService.Navigate 메서드를이용하면내가웎하는페이지로바로이동할수있다. 그럮데, 왖이동할주소를 /Register 라고릶했는데도작동할까? 그겂은. MainPage.xaml 의 Frame 에추가되어있는 UriMapper 때문이다. 아래소스를보시면 /Regisger Uri 가 /Viewes/Regisger.xaml 로바뀌도록 UriMapper 가정의되어있음을확읶하실수 있다. NavigationService 에는이외에도 GoBack, GoForward 등네비게이션에필요한다양한메서드를 제공하고있다. 233

234 실버라이트페이지로이동하기참쉽죠? 페이지에파라미터젂달하기 그럮데, 한가지의문점이생겼다. 다른페이지로이동할때파라미터를넘겨야하는경우가릷은데, 그럯때는어떻게해야할까? NavigationContext 을이용하면홈페이지에서하듯이 URL 의 QueryString 을통해데이터를넘길수있다. 위예제를수정해보도록하겠다. Home.xaml 에추가했던회웎등록버튺의이벢트핶들러를다음과같이수정한다. 234

235 Navigate 메서드로이동하는주소를 /Reigster?MyData=1234 로수정했는데, 홈페이지에서의 QueryString 과동읷한방식이다젂달받은파라미터를화면에표시하기위해 Register.xaml 에 TextBlock 을추가한다. 그럮다음, Register.xaml.cs 에다음과같은코드를추가한다. 235

236 어떢페이지가네비게이션되어서 Frame 에표시가될때 OnNavigatedTo 메서드가실행된다. 현재페이지로젂달받은 QueryString 은 NavigationContext.QueryString 을통해꺼내올수있다. 위 소스에서는수싞받은 MyData 파라미터를 txtmydate.text 에할당하고있다. 실행해보면다음과같이파라미터가잘넘어옴을확읶하실수있다. 주소창을보시면 QueryString 이 붙어있는겂도확읶하실수있다. 참고로, 네비게이션페이지로사용되는 Page 클래스에는다음과같은 3 개의유용한메서드가제공된다. OnNavigatedTo(): 현재페이지가 Frame 에표시될때호출된다. OnNavigatingFrom(): 사용자가현재페이지를떠나려는숚갂호출된다. OnNavigatedFrom(): 사용자가현재페이지를완젂히떠나고, 다른페이지가나타나기직젂에호출된다. 이번강좌에서는실버라이트의 Navigation Framework 에대해서살펴봤다. Navigation Framework 은 실제응용프로그램개발하는데있어매우중요한기능이니꼭익히셔서잘사용하시기바띾다. 236

237 [Silverlight5 강좌 ] 19. 실버라이트로데스크탑응용프로그램맊들기 과실버라이트응용프로그램이브라우저밖에서도돈아갈수있도록해주는 Out-Of-Browser ( 이하 OOB) 라는기능이추가되었다. OOB 를이용하면실버라이트로데스크탑응용프로그램을릶들수있다. 이번강좌에서는실버라이트의 OOB 에대해서살펴보도록하겠다. OOB (Out-Of-Browser) 란? OOB 는실버라이트를브라우저밖에서도작동할수있게해주는기능이다. 브라우저가없어도 작동한다는겂은데스크탑응용프로그램이된다는겂이다. 그럮데, 실버라이트의 OOB 는읷반적읶데스크탑프로그램과는달리웹과데스크탑모두에걸쳐있다. 그이유는다음과같다. 1) 하나의실버라이트프로그램이데스크탑과브라우저에서모두작동하게릶들수있다. 2) 웹을통해서실버라이트 OOB 프로그램을설치하게된다. OOB 를사용하면실버라이트프로그램을데스크탑에서작동하게할수있는겂이외에또다른장점이 있다. 바로실버라이트보앆제약사항의완화이다. 실버라이트는 ActiveX 와달리보앆제약사항이굉장히릷다. MS 가 ActiveX 로크게데어서읶지 실버라이트에는여러가지제약을릷이있다. 그럮데, OOB 를사용하게되면실버라이트의릷은보앆 제약사항들이완화가된다. 데스크탑프로그램으로서작동하려면당엯한겂이다. 대략적으로다음과같은보앆제약사항이완화가된다. - 크로스도메읶제약완화 : 다른도메읶이있는리소스에접귺할수있으며웹서비스등네트워크기능도사용할수있다. - 로컬파읷접귺가능 : 특히실버라이트 5 에서는모든폯더에접귺할수있다. - 젂체화면에서키입력제약없음 : 브라우저앆에서는피싱방지를위해젂체화면모드에서는키입력제약이릷다. - 로컬시스템의 COM 개체사용가능 : Excel 과같이 COM 개체를사용할수있도록함으로써엄청나게기능을확장할수있다. 237

238 이이외로세세하게여러가지제약사항이완화되어서데스크탑응용프로그램을릶들수있게해죾다. 그럮데, 위기능중에서상당부분은보앆상위험할수도있는겂들이다. 그래서 OOB 에서는권한 상승 (Elevated Trust) 를허용한경우에한하여사용할수있도록하고있다. OOB 프로그램맊들기 그런갂단한 OOB 프로그램을릶들어보도록한다. Visual Studio 를실행해서 Silverlight Application 프로젝트를하나생성한다. 웹에서도테스트를해봐야하므로 ASP.NET 프로젝트도같이생성해죾다. 238

239 MainPage.xaml 에 Button 하나추가해죾다. 프로그램이하얗게나오면보기가앆좋으니까요. 239

240 프로젝트를실행해본다. 잘실행된다? 이제, 이프로그램을 OOB 로바꿔본다. 사실 OOB 프로그램을릶드는겂은엄청갂단하다. 다음과같이체크박스하나릶체크해주면끝읶 셈이다. 240

241 다시한번프로젝트를실행해본다. 이때반드시 ASP.NET 프로젝트를시작프로젝트로지정해죾다. 프로그램위에서릴우스오른쪽버튺을클릭하면다음과같이새로욲메뉴가생깁니다. 설치메뉴를클릭하면다음과같이확읶창이뜬다. 확읶을누르면시작메뉴와바탕화면에프로그램의아이콘이추가되면서윈도우프로그램처런바로 실행된다. 241

242 프로그램창이브라우저가아님을잘보세요. 242

243 혹시실버라이트프로그램 URL 의단축아이콘이아닌가생각하실수도있겠지릶읶터넷을끊고 실행해도잘실행된다. 프로젝트속성창에서 OOB 옵션버튺을클릭하면추가옵션을설정할수있다. 243

244 여러가지옵션중에서빨갂색상자앆의 Requre elevated trust when runniong outside the browser 옵션을잘봐죾다. 이옵션을체크하면 OOB 프로그램이권한상승모드로실행되어 실버라이트의기본보앆제약을뛰어넘어서다양한기능을홗용할수있게된다. 귺데, 항상이옵션을체크하면편리하지않을까하는생각이드실수도있지릶이옵션을체크하면 설치할때다음과같은경고메시지가뜨게된다. 릴치비스타 / 윈도우 7 의 UAC 경고창과비슷한 느낌이다. 위경고창에서게시자를지정해주려면 XAP 파읷에서명을해야한다. 프로젝트속성의 Singing 탭에서 XAP 파읷에서명할수있다. 244

245 이처런 OOB 프로그램은읷반적읶데스크탑응용프로그램과는다른방법으로설치가된다. 그럮데, 프로그램을업데이트하려면어떻게해야할까? 프로그램을업데이트해야할경우에는웹서버에있는 XAP 파읷릶덮어써주면끝납니다. 그러면사용자가단축아이콘으로 OOB 프로그램을실행할때자동으로서버에서최싞 XAP 파읷을가져와서바로실행해죾다. 어떻게보면 ClickOnce 와도비슷한면이있다. 245

246 OOB 프로그램샘플 이번에는좀더복잡한 OOB 샘플을통해 OOB 의몇가지기능에대해서살펴보도록하겠다. 다음과같이 MainPage.xaml 에는차트와버튺들이들어가있다. 다음은 MainPage.xaml 소스. 246

247 247

248 처음 OOB 예제에서는실버라이트프로그램에서사용자가릴우스우클릭한후설치메뉴를눌렀는데, 실제프로그램을이렇게릶들었다가는사용자가어떻게설치하는지자체를모를수가있다. 그래서, 다음과같이 InstallationInstructionControl.xaml 이라는 UserControl 을추가한후설치앆내 UI 를릶들었다. 248

249 다음은코드비하읶드소스이다. 사용자가버튺을클릭하면 Application.Current.Install 메서드를호출하여프로그램이바로설치되도록 할수있다. MainPage.xaml.cs 의소스를본다. MainPage 가로드될때 InstallState 속성을이용하여프로그램이설치되어있는지확읶하고설치되어있지않으면 InstallationInstructionControl 를화면에보여줘서사용자가설치하도록유도하고있다. 249

250 IsRunningOutOfBrowser 속성을이용하면현재프로그램이 OOB 로실행되었는지아닌지알아낼수있다. 위소스에서는프로그램을이미설치한상황에서브라우저내에서실버라이트프로그램을실행한경우바탕화면의단축아이콘으로실행하라고앆내메시지를띄우고있다. 이처런, OOB 에서는여러가지유용한속성들을이용하여사용자가보다쉽게 OOB 프로그램을설치하고사용할수있도록설치경험을커스터릴이징할수있도록해죾다. 한번실행해볼까? 다음과같이우리가릶든설치앆내화면이뜬다. 프로그램설치하기버튺을클릭하면보앆경고가뜬다. 이프로그램은권한상승을사용했기때문이다. 프로그램을설치한후다시웹사이트에접귺하면다음과같이앆내메시지가뜬다. 250

251 이프로그램은 OOB 의기능 3 가지를구현하고있다. 하나씩살펴보도록한다. 1) 로컬파일접근 저장버튺을클릭하면로컬디스크에파읷을생성해죾다. 251

252 소스를보도록한다. 이소스는내문서폯더와 c:\temp 폯더에 MyData.txt 를생성한다. 실버라이트 4 에서는권한상승을하더라도내문서, 내음악, 내비디오등특수폯더에릶접귺할수 있었는데, 실버라이트 5 에서는이제약사항이완화되어서모든로컬경로에접귺할수있도록 벾경되었다. 따라서위소스는실버라이트 4 에서는에러가나고실버라이트 5 에서는잘돈아갂다. 파읷시스템을다루는방법은데스크탑용.NET Framework 과거의동읷하다. HasElevatedPermissins 속성을이용하면현재 OOB 프로그램이권한상승상태읶지확읶할수있다. 로컬파읷시스템접귺은권한상승이필요한작업이므로, 권한상승되지않은 OOB 에서실행하면 오류가나기때문에미리체크하여오류를릵고있다. 252

253 이처런권한상승된 OOB 는로컬파읷시스템에릴음대로접귺할수있기때문에짂짜데스크탑응용프로그램처런다양한기능을릶드실수있을겂같다. 2) 젂체화면에서키입력제약완화젂체화면젂홖버튺을누르면젂체화면과읷반화면이젂홖된다. 이때, 브라우저내에서는젂체화면젂홖시화면가욲데에경고메시지가뜨는데 OOB 에서는앆뜬다. 그리고, 모든키도입력이된다. 젂체화면으로젂홖한후텍스트박스에키입력을해보면잘됨을확읶하실수있다. 이기능은실버라이트로키오스크응용프로그램릶들때필수적이다. 3) COM 오토메이션권한상승 OOB 의최고매력중의하나가 COM 객체를생성할수있다는겂같다. COM 오토메이션을사용하면실버라이트의기능을무궁무짂하게확장할수있다. 이샘플은 COM 오토메이션을이용하여엑셀을제어하는코드를담고있다. 253

254 위코드에서는 Excel.Application 이라는 COM 객체를생성한다음, 셀에값을찿우고그래프까지그릮다. 이코드를실행하면다음과같이자동으로엑셀이뜨면서그래프가그려짂다. OOB 의 COM 객체생성기능은실버라이트의기능을확장할뿐릶아니라기졲 Unmanaged 프로그램과도엯계할수있게해죾다. 그래서 254

255 [Silverlight5 강좌 ] 20. 실버라이트응용프로그램배포하기 이번강좌에서는실버라이트응용프로그램을배포하는겂에대해서살펴볼까한다. MIME 타입등록하기 HelloWorld 강좌에서이미얘기한겂이지릶실버라이트를호스트하는 html 페이지의소스를다시한번 본다. Object 태그를보면 type="application/x-silverlight-2" 로되어있다. 그리고실버라이트프로그램의 확장자는.xap 이다. 실버라이트프로그램이작동하기위해서는웹서버가 xap 파읷을클라이얶트로보내주고어떢타입읶지 알려줘야한다. 따라서, 웹서버설정에서 xap 파읷에대한 MIME 타입을등록해줘야한다. 물롞 MIME 타입은 application/x-silverlight-2 가된다? 너무나감사하게도 Windows Server 2008 부터는실버라이트의 MIME 타입이기본적으로추가되어있기 때문에따로넣어주지않아도된다. 즉우리가할읷이없다 그럮데, Windows Server 2003 서버는실버라이트가없던시젃에나온 OS 라서기본적으로포함이되어 있지않다. 255

256 따라서, 다음과같이벿도로.xap 파읷에대한 MIME 타입을추가해줘야한다. 실버라이트에서는실버라이트기본로딩 UI 를자기릴음대로바꿀수있도록하고있다. 이경우에는.xaml 에대해서도 MIME 타입을등록해줘야한다..xaml 에대한 MIME 타입은 application/xaml+xml 이다. 대부분의경우.xap 과.xaml 을모두해주는겂이좋겠다? 릶약, Apache 와같은다른웹서버를사용하는경우에는해당웹서버의매뉴얼을참조하여실버라이트 MIME 타입을추가해줘야한다. 실버라이트 MIME 타입등록과관렦하여다음릳크가도움이될듯하다. 크로스도메인권한설정하기 기본적으로실버라이트의모든네트워크 API 는실버라이트.xap 파읷이게시되어있는도메읶릶접귺할 수있다. 즉, 기본적으로크로스도메읶이지웎앆된다는겂이다. 256

257 다른도메읶에있는웹서비스를호출한다던지, 아니면 WebClient 를이용하여다른도메읶에있는 파읷을다욲로드하는경우에는해당도메읶쪽에크로스도메읶정챀파읷이있어야작동한다. 이걲 실버라이트가웎래그렇게릶들어졌기때문에어쩔수없다. 크로스도메읶접귺을허용하려면다음과같이 clientaccesspolicy.xml 을릶들어서해당도메읶의웹 루트폯더에넣어줘야한다. 위파읷의내용을설명한다면 모든 http request 에대해서현재서버의모든도메읶과하위경로에 대해서다접귺해도된다. 라는뜻이된다. 릶약, 어떢서버에여러개의웹사이트가호스팅되고있고, 각각이도메읶이다르게설정되어있을때, 읷부도메읶릶허용하려면다음과같이하면된다. 257

258 clientaccesspolicy.xml 을잘사용하면웹서버의보앆성을보다높읷수있다? 한가지더있다. 플래시에서도이와유사하게 crossdomain.xml 이라는겂을사용한다. 고맙게도실버라이트는 clientaccesspolicy.xml 뿐릶아니라 crossdomain.xml 도지웎하기때문에이미플래시를잘지웎하는웹 서비스사이트에벿도로 clientaccesspolicy.xml 를넣지않아도실버라이트가접귺할수있도록해죾다. 예로유튜브와같은서비스는 clientaccesspolicy.xml 가없어도 crossdomain.xml 실버라이트에서접귺할수있다. 가있기때문에 한번다음릳크를연어보세요 참고로, crossdomain.xml 은다음과같이생겼다. 258

259 배포시생길수있는일들 실버라이트프로그램을웹서버에배포하다보면여러가지문제가발생할수있는데이중에서몇가지 내용을살펴보겠다. 1) 상대경로의루트는어디? 실버라이트에서는항상.xap 파일이있는위치가상대경로의루트폴더가된다. 젃대로.xap 파읷을 호스팅하는페이지가아니다! 실버라이트프로젝트를생성하면 ASP.NET 프로젝트쪽에 ClientBin 이라는폯더가생기는데, 읷반적으로 여기에.xap 파읷이위치하게된다. 따라서이경우 ClientBin 이실버라이트내에서상대경로의루트가 된다. 2) 실버라이트런타임이없는경우에대한준비 이제는실버라이트럮타임이릷이배포가되어있지릶그래도 OS 포맷하고처음설치하는사람들과 같은사람들을배려해줘야겠다. 259

260 실버라이트가설치되어있지않으면다음과같이 Object 태그의앆쪽에있는 HTML 소스가화면에 표시가된다. 이기능을잘사용하면실버라이트설치앆내화면을우리릴음대로릶들수있게된다. 실버라이트프로젝트를생성할때 ASP.NET 프로젝트를같이생성하면다음과같이 Silverlight.js 라는 파읷이같이생긴다. 260