Part1. Creating "Hello World" with Silverlight 2 and VS 2008
u Visual Studio 2008을 이용한 Silverlight 기반 솔루션 만들기
1. 파일/새로 만들기에서 프로젝트를 선택합니다.
2. 새 프로젝트 대화 상자에서 개발 언어 선택 후, Silverlight 를 선택합니다. (Microsoft Silverlight Tools for Visual Studio 2008 SP1이 설치되어 있어야 Silverlight 프로젝트 형식이 나타납니다.)
3. 템플릿 항목에서 Silverlight 응용 프로그램을 선택 한 후, 프로젝트 이름 입력 후, 확인합니다. (대상 플렛폼이 .NET Framework 3.5 로 선택되어 있어야 합니다.)
4. Silverlight 응용 프로그램 추가 대화상자에서 Silverlight 응용 프로그램 호스팅 방법을 선택합니다.
- Silverlight 응용 프로그램과 Silverlight 컨트롤을 호스팅하는 ASP.NET 기반의 웹 사이트를 구분하여 프로젝트를 구성하는 경우 "솔루션에 Silverlight를 호스팅할 새 ASP.NET 웹 프로젝트 추가"를 선택하고, 웹 프로젝트의 타입과 이름을 추가로 입력합니다.
- 솔루션에 Silverlight 기반 응용프로그램 프로젝트만을 구성하는 경우, “빌드할 때 Silverlight를 호스팅할 테스트 페이지를 자동으로 생성” 항목을 선택합니다.
u Silverlight 응용 프로그램 이해하기
1. XAML 파일
- Silverlight 및 WPF 응용 프로그램의 UI를 지정하기 위하여 이용 될 수 있는 XML 기반의 파일입니다.
2. App.xaml 파일
- Sivlerlight 응용 프로그램의 시동과 구동을 위한 메인 클래스입니다. 이 클래스는 패키지 파일(.xap)이 다운로드 되면 Silverlight 플러그-인에 의하여 관리됩니다.
3. Page.xaml 파일
- Page 클래스는 응용프로그램에서 메인 UI를 표시하는 역할을 하며, UserControl로 부터 상속을 받고 XAML 마크업 파일과 .cs, .vb의 코드비하인드 파일의 쌍으로 구성되어 있습니다.
4. Xap 파일
- Silverlight 응용 프로그램의 패키지 파일로, 표준 .zip compression 압축 산법을 극소화하기 위하여 클라이언트 다운로드 크기를 이용합니다.
5. Silverlight 응용 프로그램을 호스팅하는 웹사이트의 구성 요소
- .aspx, .html 로 구성된 두 개의 페이지로 구성되어 있으며, Silverlight 응용 프로그램 프로젝트 이름에 TestPage라는 이름이 붙어 있습니다.
- .html 페이지는 Silverlight 응용프로그램을 호스팅하기 위해 <object> 태그를 사용합니다.
- .aspx 페이지는 .html 과 유사한 결과물을 얻기 위해 ASP.NET Silverlight 서버 컨트롤을 사용합니다.
u Sample Code
1. 기본 컨트롤(버튼) 추가
- 버튼 컨트롤을 아래와 같은 코드를 추가합니다.
Code
|
<UserControl x:Class="DemoSample.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Grid x:Name="LayoutRoot" Background="DarkOrange"> <Button x:Name="MyButton" Content="버튼" Width="100" Height="50"></Button> </Grid> </UserControl> |
Description
Button 컨트롤을 보시면 x:Name라는 Attribute 값에 MyButton이라고 지정하였고, Content에 “버튼”이라는 텍스트를 넣었습니다.
ð x:Name를 설명드리자면 코드 숨김 또는 일반 코드에서 인스턴스화된 개체에 액세스하기 위해 개체 요소를 고유하게 식별할 때 쓰입니다. (ASP.NET으로 보시면 개체 ID로 보시면 됩니다.)
ð Content는 ASP.NET 버튼컨트롤의 Text 라고 보시면 됩니다. (컨트롤의 속성은 ASP.NET 컨트롤과 비슷하므로 금방 이해할 수 있습니다.)
Result
2. 이벤트 핸들러 추가
- Click 이벤트를 추가해 보겠습니다. Click=” 입력시, 아래 이미지와 같이 나타납니다.
엔터 키 또는 Tab 키를 누르면, Click 이벤트 핸들러 함수명을 x:Name에 해당 이벤트명이 붙어 자동 지정되며, Code Behide 클래스에도 이벤트 핸들러 함수가 자동으로 추가됩니다. (ASP.NET 과 유사함)
- 버튼 클릭시, 버튼 컨트롤 Text를 “Hello World” 로 변경하는 이벤트 추가해 보겠습니다.
3. ToolTips
- xaml 파일에서 Code Behide 클래스로 가는 단축키 : F7
- Code Behide 클래스에서 xaml 파일로 가는 단축키 : Shift + F7