2008/06/29 15:45
[세티의 실버라이트] 11. Expression Blend 2.5를 이용한 그리기(1) Silverlight2008/06/29 15:45
원글출처: http://silverlight.net/quickstarts/blend_quickstart/part1_drawing_painting_and_text.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.
안녕하세요~ 세티 입니다.
이번 시간에는 Expression Blend2.5를 이용하여 버튼을 만들어 보겠습니다. 버튼을 만들면서 Expression Blend2.5 에 대한 적응력도 키우고, 버튼을 만드는 것과 같은 간단한 작업을 함께 함으로써 실버라이트에 대한 이해력도 더욱 늘려보는 계기로 삼을까 합니다.
지난 강좌에서 Expression Blend 2.5를 설치해 봤습니다. 설치된 도구를 실행합니다.
네에~ 아주 실행이 잘 되는군요~ Expression Blend 2.5를 실행하면 Project를 실행할거냐? Help 파일을 볼거냐? 아니면 Sample 파일을 볼거냐 하고 묻는 창이 하나 뜹니다. 우리는 여기 Project를 선택하고 New Project를 선택해 봅니다.
와~ 선택했더니 New Project 팝업에서 Project type을 선택하라고 합니다. 여기서 언급되는 Project type에 대해 간략하게 설명하고 넘어가겠습니다.
WPF Application(.exe) - 실행 가능한 WPF 응용 프로그램을 생성할 때 선택합니다.
WPF Control Library - 단독 실행이 불가능한 dll과 같은 WPF 컨트롤을 만들 때 선택합니다.
Silverlight 1 Site - JS를 이용한(닷넷이 아닌) 실버라이트 웹 사이트를 만들 때 선택합니다.
Silverlight 2 Application - 닷넷언어를 이용한 실버라이트 애플리케이션을 만들 때 선택합니다.
자아 우리는 여기서 Silverlight 2 Application을 선택합니다. 그리고 OK를 누릅니다.
그러면 가운데에 아무것도 없는 하얀판이 하나 있고, 오른쪽에는 SetisSilverlight라는 솔루션과 프로젝트 그리고 기타 폴더와 xaml 파일이 나타나게 됩니다.
여기서 F5키를 한번 눌러볼까요? 이걸 누르면 브라우저 창이 하나 열리면서 웹 페이지가 열립니다.
데스크탑에 IIS(웹서버,Internet Information Server)가 없다면 가상 IIS를 만들어서 웹 애플리케이션을 실행할 수 있도록 도와줍니다. 이 가상 IIS 기능은 웹 개발의 편리성을 위해 Visual Studio 2005 에서 처음 소개 되었으며, 제작중인 웹 애플리케이션을 테스트 하는데는 더할나위 없을 만큼 편리한 도구 입니다. 물론 FTP나 기타 고급 기능은 제공하지 않고 있습니다.^^
이제 웹 브라우저를 닫고, Expression Blend 2.5 를 다시 봅니다.
언제나 그렇듯 이런 낯선 도구를 만나면 한숨부터 나옵니다. 휴우~ 뭔가를 또 알아야 한다는 그 부담감...
그 부담감을 즐거움으로 승화시키는 것이 어렵긴 하지만 우리는 엔지니어 이거나 디자이너 이거나 배우는 학생이거나 하기 때문에 어쨋든 이 고비를 넘어야 합니다. Expression Blend 2.5 라는 도구와 친해지는 것만이 낯설음을 친숙함으로 변화시키는 지름길인 것 같습니다. 전체적으로 한번 쭉 훝어보기 보다는 천천히 한 부분씩 잘라서 살펴보는게 좋을 것 같습니다.
왼쪽부터 한번 살펴볼까요?
옆의 그림처럼 가장 왼쪽에 있는 것이 Toolbox(도구상자) 입니다.
위에서 Expression Blend 2.5 를 실행했을 때 가운데 하얀판 보이던거 있죠?
그게 Artboard라고 하는 겁니다. 그 Artboard에 Toolbox에 있는 것(객체, object)을 선택해서 올려놓을 수 있는 것이죠.
그런데 이 Toolbox가 기존 Visual Studio 에 있는 Toolbox 보다 조금 더 강화된 사용자 경험(여기서의 사용자는 개발자와 디자이너 입니다.)을 포함한 것 같습니다. Toolbox에 있는 ">>" 이걸 클릭하면 Asset Library라는 팝업이 하나 열리는데요~ Expression Blend 2.5에서 지원하는 컨트롤들을 Gallery type,Detail type으로 분리해서 보여주거나 Search 기능을 두어 쉽게 찾아볼 수 있도록 한 점, 그리고 객체들의 네임스페이스를 Detail에서 제공하고 있는 점 등이 매우 맘에 듭니다.
그 바로 옆에는 객체와 타임라인 Inspector가 보입니다. 이 패널은 artboard 상의 모든 객체를 보여주며, 애니메이션을 위한 타임라인도 생성할 수 있게 해줍니다.
그 다음 가운데로 이동하여 하얀판을 봅니다 이 하얀판은 Artboard라고 하며 Design View라는 이름으로 부를 수도 있습니다.
이 Artboard는 우리가 생성할 웹 애플리케이션의 디자인 UI를 보여줍니다. Artboard의 오른쪽에 보면 Design, XAML, Split라는 탭이 있으며, 그것을 클릭하면 선택된 형태로 결과를 보여줍니다.
이것은 탐색기라고 해도 좋을 것 같은데 Table이라고 불러도 좋을 것 같습니다.
전 탐색기라는 표현이 더 좋기 때문에 그냥 탐색기라고 부르겠습니다. 탐색기의 위에 보면 3가지의 탭이 있습니다. Project Tab을 클릭하면 솔루션 탐색기가 짜잔~ 하고 열립니다.
그리고 Property를 클릭하면 객체의 Property를 설정할 수 있는 화려한 도구가 나타납니다. 그리고 Resource를 클릭하면 현재 Artboard상에서 사용되는 객체중에서 마우스로 선택된 객체의 리소스를 확인할 수 있습니다.
[세티의 실버라이트] 11. Expression Blend 2.5를 이용한 그리기(2) 에서 이어서 다루겠습니다.
'Silverlight' 카테고리의 다른 글
| [엘리의 실버라이트 2.0] 첫 인사 (0) | 2008/07/11 |
|---|---|
| [세티의 실버라이트] 11. Expression Blend 2.5를 이용한 그리기(2) (0) | 2008/07/11 |
| [세티의 실버라이트] 11. Expression Blend 2.5를 이용한 그리기(1) (0) | 2008/06/29 |
| [세티의 실버라이트] 10. Expression Blend 2.5 설치하기. (0) | 2008/06/25 |
| [세티의 실버라이트] 9. 애니메이션(animations) (0) | 2008/06/11 |
| [세티의 실버라이트] 8. 미디어 (2) | 2008/06/09 |
