원본: http://msdn.microsoft.com/en-us/library/bb404703(VS.95).aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.
안녕하세요. 엘리 입니다.
이번 시간은 Silverlight-기반 응용 프로그램 개발에 대한 주요 기능과 예제 코드를 사용하여 Silverlight 기반 응용 프로그램을 만드는 일반적 절차를 소개하려고 합니다.
이번 시간에는 다음 항목들을 개략적으로 알아보는 시간을 갖습니다.
· 전제 조건
· 응용 프로그램에 Silverlight 통합
· XAML
· 레이아웃
· 컨트롤
· 코드 로직 추가하기
· 동적 언어
· 그래픽
· 미디어와 애니메이션
· 데이터
· 네트워킹
· Silverlight Base Class Library
· 관련 항목
전제 조건
예제 실행에는 Silverlight 2 베타 2 런타임만 설치해도 되지만 우리는 직접 개발을 하는 임무이므로 아래 항목들을 모두 설치하도록 합니다. ^^
· Visual Studio 2008 (90일 평가판)
· Visual Studio 2008용 Silverlight Tools 베타 2
|
참고: 응용 프로그램을 구축하기 위해 Visual Studio 2008을 사용하고 있다는 것으로 가정합니다. MSBuild를 사용하여 Visual Studio 없이도 Silverlight-기반 응용 프로그램을 만들 수 있습니다. 좀 더 자세한 정보는 Silverlight 응용 프로그램 어셈블리 개발을 참고하세요. |
Silverlight-기반 응용 프로그램을 만들기 위해 Silverlight 응용 프로그램 만들기의 설명을 참고하시기 바랍니다.
응용 프로그램에 Silverlight 통합
Silverlight-기반 응용 프로그램은 HTML 페이지에서 Silverlight 플러그-인에 의해 로드됩니다. HTML 페이지를 Silverlight 플러그-인으로 전체를 채우거나 페이지의 일부에만 사용할 수도 있습니다. 기본적으로 Visual Studio 프로젝트에서는 페이지의 width와 height 값을 100%로 차지하는 플러그-인을 만들 것입니다. 좀 더 자세한 내용은 Silverlight 플러그-인 예시 (Silverlight 2)를 참고하시기 바랍니다.
응용 프로그램의 일부에만 Silverlight를 적용한다면, Silverlight 코드와 관리되는 코드에서 HTML 페이지로 호출할 수 있습니다. 이를 수행하는 방법의 자세한 사항은 HTML 연결: HTML과 관리되는 코드에서 상호 작용를 참고하시기 바랍니다. ASP.NET 페이지가 있다면, 여러분의 페이지에 MediaPlayer 컨트롤 또는 Silverlight 서버 컨트롤을 포함시킬 수 있습니다. 이에 대해 자세한 정보는 ASP.NET 웹 페이지와 Silverlight 통합을 참고하시기 바랍니다.
XAML
XAML은 Silverlight 기반 응용 프로그램의 UI를 정의하는 선언적 마크업 언어입니다. 새로운 Visual Studio 프로젝트를 만들 때, Page.xaml 파일이 동적으로 만들어집니다. XAML 파일에 XML을 사용하여 특성들을 정의하고 개체를 만들 수 있습니다. XAML에 대한 좀 더 자세한 정보는 XAML 개요 (Silverlight 2)를 참고하세요.
Silverlight 응용 프로그램 추가 창의 옵션을 이 프로젝트 안에 Silverlight를 호스팅할 HTML 테스트 페이지를 동적으로 생성으로 선택하고 Silverlight 프로젝트를 생성합니다. 그리고 Page.xaml 파일을 열어 Grid 엘리먼트 안쪽에 아래 코드를 작성합니다.
|
XAML |
|
<Rectangle Fill=”Red” Width=”150” Height=”100”/> |
Ctrl + F5 키를 눌러 실행하거나 미리보기 창에서 빠르게 아래와 같은 결과를 확인합니다.
 |
UI를 만들기 위해 XAML 파일을 직접 작성하거나 Microsoft Expression Blend를 사용할 수 있습니다. Expression Blend는 Silverlight-기반 응용 프로그램을 만들 수 있는 WYSIWYG 디자인 툴입니다. Expression Blend는 직접 편집할 수 있는 XAML 파일을 생성하고 Expression Blend로 코드-비하인드 파일을 작성하고 이벤트를 연결할 수도 있습니다. 좀 더 자세한 정보는 Microsoft Expression Blend를 사용한 Silverlight 퀵스타트를 참고하시기 바랍니다.
레이아웃
Silverlight는 UI 레이아웃에 해당하는 3가지 패널을 제공합니다. 그 중 기본적 패널인 Grid는 가장 확장성이 있는 강력한 레이아웃 패널입니다.
|
컨테이너 |
설명 |
|
x,y 공간에 절대적 자식 엘리먼트를 위치시킵니다. | |
|
수평이나 수직 스택에 관련 자식 엘리먼트를 위치 시킵니다. | |
|
행과 열에 자식 엘리먼트를 위치 시킵니다. |
기존의 Page.xaml 파일에 아래 코드를 사용하여 수정합니다. 아래 예제에서 Rectangle 엘리먼트는 grid의 1,1 셀에 위치 되어 있습니다. Grid는 제로-베이스 (0부터 시작하는 인덱스)를 사용하므로 rectangle은 우측 하단 셀에 나타납니다.
|
XAML |
|
<Grid ShowGridLines=”True”> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinitions/> <RowDefinitions/> </Grid.RowDefinitions> <Rectange Fill=”Red” Width=”150” Height=”100” Grid.Column=”1” Grid.Row=”1”/> </Grid> |
아래 그림은 위 코드가 어떻게 표현되는지 보여줍니다.
 |
레이아웃에 좀 더 자세한 정보는 개체 위치 및 레이아웃 (Silverlight 2)를 참고하시기 바랍니다.
컨트롤
Silverlight 컨트롤은 컨텐트나 다른 컨트롤을 호스트하는 것과 상태가 변경되는 디스플레이를 나타내는데 사용합니다. 컨트롤은 Button이나 TextBox같은 사용자 상호 작용이 가능한 엘리먼트에서 DataGrid같은 정보의 복잡한 레이아웃 엘리먼트까지 기능적으로 사용 가능합니다. 모든 컨트롤의 목록은 컨트롤 갤러리에서 보실 수 있습니다.
Silverlight는 컨트롤이 어떻게 보여져 영향을 주는 각 컨트롤을 위한 기본 템플릿으로 나타납니다. 그러나 여러분은 모든 컨트롤의 외관과 시각 움직임을 변경하여 사용자 지정 템플릿을 만들 수 있습니다. 좀 더 자세한 정보는 컨트롤 사용자 지정화를 참고하시기 바랍니다.
아래 예제는 이 전 예제에서 grid의 0,0 셀에 button 하나를 추가하여 만듭니다.
|
XAML |
|
<Grid ShowGridLines=”True”> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinitions/> <RowDefinitions/> </Grid.RowDefinitions> <Button Height=”25” Width=”100” Grid.Column=”0” Grid.Row=”0”/> <Rectange Fill=”Red” Width=”150” Height=”100” Grid.Column=”1” Grid.Row=”1”/> </Grid> |
아래 그림은 위 코드가 어떻게 표현되는지 보여줍니다.
코드 로직 추가하기
기본적으로 여러분의 Visual Studio 프로젝트는 코드 파일 하나를 포함하고 있는데, 코드-비하인드 파일이라 부릅니다. 그 코드 파일은 C#이나 Visual Basic같은 공통 언어 런타임 (CLR)을 통해 Silverlight에 의해 지원되는 관리되는 언어 중 하나입니다. CLR과 Silverlight의 좀 더 자세한 정보는 공통 언어 런타임 개요를 참고하세요.
코드-비하인드 파일 이름은 Page.xaml에 해당하는 Page.xaml.cs 같이 생성됩니다.. 코드-비하인드 파일은 XAML 개체에 로직을 적용할 수 있습니다. 코드에 UI 개체를 만들 수 있고 여러분의 시각 엘리먼트 트리에 그것들을 추가할 수 있습니다. 그리고 코드-비하인드 파일에서 (또한 프로젝트에 포함된 어떤 코드 파일에도) 만들어진 클래스는 XAML로부터 액세스될 수 있습니다. 예를 들어, 자신의 컨트롤을 정의하고 그 다음 XAML에 그 인스턴스를 만들 수 있습니다. 좀 더 자세한 정보는 XAML Namescopes (Silverlight 2)와 XAML and Mapping Custom XML Namespace Values (Silverlight 2)를 참고하시기 바랍니다.
다음 예제는 파란색 사각형의 색을 변경하는 Click 이벤트 처리기를 추가합니다.
XAML에서 Button에 Click 이벤트와 Rectangle에 x:Name 속성을 추가합니다. x:Name은 코드-비하인드 파일에서 rectangle을 참조할 때 사용합니다.
|
XAML |
|
<Button Height=”25” Width=”100” Grid.Column=”0” Grid.Row=”0” Click=”Button_Click”/> <Rectangle x:Name=”rect1” Fill=”Red” Width=”150” Height=”100” Grid.Column=”1” Grid.Row=”1”/> |
코드-비하인드 파일에서 Click 이벤트 처리기를 정의합니다. 이벤트를 사용하는 것에 대한 좀 더 자세한 정보는 이벤트 개요 (Silverlight 2)를 참고하시기 바랍니다.
|
C# |
|
private void Button_Click(object sender, RoutedEventArgs e) { rect1.Fill = new SolidColorBrush(Colors.Blue); } |
아래 그림은 위 코드가 어떻게 표현되는지 보여줍니다.
 |
동적 언어
Silverlight는 Silverlight-기반 응용 프로그램을 작성하기 위한 파이썬 (Python)과 루비 (Ruby) 같은 동적 언어의 사용자를 가능하게 하는 동적 언어 런타임 (DLR)을 포함합니다. 동적 언어는 어셈블리로 컴파일하지 않는 소스 코드로 패키지화 되어 있고 코드는 실행 때 컴파일 되고 생성될 수 있습니다. 그것들은 확장성, 상호적 개발 형식이 적절합니다. Silverlight는 3개의 동적 언어를 포함합니다: IronPython과 IronRuby, 관리되는 Jscript. 좀 더 자세한 정보는 Silverlight 2 동적 언어를 참고하세요.
그래픽
Silverlight는 여러분의 응용 프로그램에 재미있는 기능을 추가하기 위해 많은 옵션을 제공합니다. 여러분은 drawing과 shapes, paths, 복잡한 도형들을 사용할 수 있습니다. 도형으로 정의된 영역은 brushes를 사용함으로서 images나 color gradients, video clips 같은 효과로 채워질 수 있습니다. 좀 더 자세한 정보는 Shapes and Drawing (Silverlight 2), Geometries (Silverlight 2), Brushes (Silverlight 2)를 참고하시기 바랍니다.
여러분은 여러분의 응용 프로그램에 이미지와 이미지 효과들을 추가할 수 있습니다. Silverlight는 또한 쉽게 줌을 사용하고 크게 상세한 이미지를 회전을 허용하는 Deep Zoom을 포함합니다. 좀 더 자세한 정보는 이미지 (Silverlight 2)와 Deep Zoom을 참고하시기 바랍니다.
아래 예제는 선형 그레디언트 브러쉬로 사각형을 채웁니다.
|
XAML |
|
<Rectangle x:Name=”rect1” Width=”150” Height=”100” Grid.Column=”1”, Grid.Row=”1”> <Rectangle.Fill> <LinearGradientBrush> <GradientStop Offset=”0” Color=”LightBlue”/> <GradientStop Offset=”0.4” Color=”Blue”/> <GradientStop Offset=”0.8” Color=”Purple”/> <GradientStop Offset=”1.0” Color=”Lavender”/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> |
아래 그림은 위 코드가 어떻게 표현되는지 보여줍니다.
미디어 및 애니메이션
정적 그래픽뿐만 아니라 좀 더 동적이고 상호적인 여러분의 응용 프로그램을 만들기 위해 여러분은 애니메이션과 오디오, 비디오를 추가할 수 있습니다. 좀 더 자세한 정보는 애니메이션 개요 (Silverlight 2)와 오디와 비디오 개요 (Silverlight 2)를 참고하세요.
다음 예제는 Stop 버튼이 클릭되기까지 늘었다 줄었다하는 이전 예제로 사각형을 만듭니다.
|
XAML |
|
<Grid ShowGridLine=”True”> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Grid.Resources> <Storyboard x:Name=”AnimateRectangle”> <DoubleAnimation Storyboard.TargetName=”rect1” Stroyboard.TargetProperty=”Height” From=”0” To=”100” AutoReverse=”True” Duration=”0:0:02” RepeatBehavior=”Forever”/> <DoubleAnimation Storyboard.TargetName=”rect1” Stroyboard.TargetProperty=”Width” From=”0” To=”100” AutoReverse=”True” Duration=” </Storyboard> </Grid.Resources> <Button Height=”25” Width=”100” Grid.Column=”0” Grid.Row=”0” Content=”Stop” Click=”Button_Click”/> <Rectangle x:Name=”rect1” Width=”150” Height=”100” Grid.Column=”1” Grid.Row=”1” Loaded=”OnLoaded”> <Rectangle.Fill> <LinearGradientBrush> <GradientStop Offset=”0” Color=”LightBlue”/> <GradientStop Offset=”0.4” Color=”Blue”/> <GradientStop Offset=”0.8” Color=”Purple”/> <GradientStop Offset=”1.0” Color=”Lavender”/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <Button Height=”25” Width=”100” Grid.Column=”0” Grid.Row=”1” Content=”Start” Click=”Button_Click_1”/> </Grid> |
|
C# |
|
private void OnLoaded(object sender, RoutedEventArgs e) { AnimateRectangle.Begin(); } private void Button_Click(object sender, RoutedEventArgs e) { AnimateRectangle.Pause(); } private void Button_Click_1(object sender, RoutedEventArgs e) { AnimateRectangle.Resume(); } |
데이터
많은 Silverlight-기반 응용 프로그램은 데이터와 함께 작동합니다. 여러분은 DataGrid와 ListBox 같은 컨트롤을 사용하여 데이터 셋을 나타낼 수 있습니다. UI를 두기 위해, 여러분은 Data Binding을 사용할 수 있습니다. 여러분의 데이터 개체에 여러분의 UI를 바인딩한다면, 동적으로 개체에 업데이트는 여러분의 UI에 전달됩니다.
데이터는 RSS 피드 같은 다양한 소스로부터 여러분의 응용 프로그램으로 나타날 수 있지만 대개 그것은 XML 포맷에 있습니다. Silverlight는 XML 데이터 파싱을 위해 XmlReader와 LINQ를 포함하고 있습니다. LINQ는 여러분이 작게 데이터 조각을 파싱한다면 장점을 가지고 있습니다. 좀 더 자세한 정보는 Silverlight에 XML 데이터 파싱을 참고하세요.
네트워킹
Silverlight는 네트워크에서 통신을 위해 몇몇의 기능을 제공합니다. WebClient 클래스는 클라이언트에 다운로드 되는 컨텐트를 처리합니다. 여러분은 또한 Plain XML 메시지를 보내고 받기 위해 WebClient를 사용할 수 있습니다. 또한 여러분의 Silverlight-기반 응용 프로그램은 Windows Communication Foundation (WCF)와 SOAP, ASP.NET AJAX 같은 웹 서비스를 액세스할 수 있습니다. 좀 더 자세한 정보는 네트워킹과 통신을 참고하세요.
Silverlight Base Class Library
Silverlight는 문자열 처리와 컬렉션 작업, 예외 처리 같은 핵심 프로그래밍 업무를 위한 .NET Framework 부분 집합으로 나타납니다. 그것은 모든 기본 데이터 형식을 위한 클래스와 예외 처리, 이벤트와 이벤트 처리, 컬렉션, 쓰레딩, 동기화를 포함합니다. 좀 더 자세한 정보는 Silverlight에서 Common Language Runtime 및 Base Library를 참고하세요.
참고 항목
'Silverlight(Tools, Tech.)' 카테고리의 다른 글
| [Expression Media] 1. Expression Media란? (0) | 2009/07/04 |
|---|---|
| [엘리의 실버라이트 2.0] Silverlight 시계 만들기 (1) (2) | 2008/10/21 |
| [엘리의 실버라이트 2.0] Silverlight 시작 (6) | 2008/10/02 |
| [엘리의 실버라이트 2.0] 관리되는 코드에서 HTML DOM에 액세스 (3) | 2008/09/21 |
| [엘리의 실버라이트 2.0] Syndication Feeds 액세스 (0) | 2008/09/11 |
| [엘리의 실버라이트 2.0] Plain XML 보내기 • 받기 (0) | 2008/09/06 |
