세티의 Lonely Star ::

[엘리의 실버라이트 2.0] Silverlight 시계 만들기 (1)

Silverlight(Tools, Tech.) 2008/10/21 17:48

안녕하세요. 엘리 입니다.

10월 8일에 Microsoft UX/RIA Partner Workshop에 참석했었습니다. 파트너는 아니지만 그냥 Silverlight에 관심 있는 개발자 입장으로요. ^^; REMIX08에서도 거론되고 Silverlight의 좋은 기능으로 많이 소개되었던 II7-Bit Rate Throttling (UXKOREA), 쉽게 구현할 수 있는 미디어 플레이어 (훈스닷넷), Cross Domain 설정, Silverlight Deep Zoom 기능 등 여러 기능들이 소개되었습니다. 각 기능들에 대해서 링크를 걸어두었으니 관심을 가지시고 읽어 보시기 바랍니다. Deep Zoom 소개는 영어로 소개하지만 영상도 있으니 가볍게 동영상을 보셔도 좋을 것 같습니다. ^^

세미나 후기라도 써보려고 오래된 똑딱이 디카도 가져가서 사진도 찍고 그랬는데 벌써 10월 말이니…-ㅅ-; 마지막에 경품을 받지 못해서 그런가 봅니다. 속으로는 ‘오~오~오~ 드뎌 경품 추첨이다.’ 라고 기대는 매번 하는데…표정은 티 안내고 앉아 있지만. ㅋㅋ 이번에도 아쉬움을 갖고 돌아왔습니다.

이번 시간에는 Expression Blend를 이용하여 간단한 Silverlight 시계를 만들어 보겠습니다. 먼저 개발을 위해 아래 파일들을 설치하시기 바랍니다. (Silverlight 다운로드 페이지)

- Microsoft Silverlight 2

- Visual Studio 2008 (평가판)

- Microsoft Silverlight Tools for Visual Studio 2008 SP1

- Microsoft Expression Blend 2.5

우선 아래 그림과 같이 시계의 표면 및 이음 홈, 테두리, 그림자를 포함한 그래픽을 디자인해보겠습니다.

아래 절차를 따라 Expression Blend에서 새 프로젝트를 만듭니다.

1. Expression Blend를 실행합니다.

2. 메뉴의 파일, 새 프로젝트를 차례로 클릭하여 새 프로젝트 대화 상자를 띄웁니다.

3. 이름 상자에 원하는 Silverlight 애플리케이션 이름을 입력합니다.

4. 언어 상자에 Visual C#을 선택합니다.

5. Silverlight 2 애플리케이션을 선택하고 확인을 클릭합니다.

여기서 F5키를 한번 눌러볼까요? 이걸 누르면 브라우저 창이 하나 열리면서 웹 페이지가 열립니다.

이 때 확인하실 것이 하나 있습니다. 제가 현재 Silverlight 2 RTW를 설치해놓고 Expression Blend June Preview 버전을 사용하고 있는데, 필요한 Silverlight 버전은 베타 2 버전입니다. 저와 같은 환경을 가지고 있으시면 이전 버전의 파일을 삭제하시고 베타 2 버전을 설치하시기 바랍니다. 살짝 귀찮긴 하네요~^^;

Silverlight 2 애플리케이션 새 프로젝트를 만들었고 다음으로는 시계의 그림자 부분을 디자인해보겠습니다.

1. Blend의 도구 상자에서 타원 (Ellipse)을 선택합니다. (처음은 사각형만 보이지만 마우스를 길게 클릭하거나 오른쪽 마우스 버튼을 클릭하면 다른 도구도 추가로 표시됩니다.)

2. 하얀 캔버스에 타원을 드래그 & 드롭을 하여 대략 330픽셀 너비와 높이의 원을 그립니다.

3. Blend 우측 상단에 속성 탭을 선택하여 Fill을 선택합니다. 단색 브러시를 확인한 후 검정색으로 채우고 Opacity를 30%로 변경합니다. ②, ④번은 싱크되어 있습니다. ④번에 black으로 입력하시면 16진수 값으로 변경이 되고 ②번 Fill 부분도 함께 변경이 됩니다. (아래 그림 참고)

4. 개체 및 타임라인 창에서 타원 이름을 shadowEllipse로 변경합니다.

이제 그림자는 완료하였습니다. 아주 간단하지요? 그럼 다음으로 시계 테두리를 그려 보겠습니다.

1. 그림자 원 shadowEllipse를 복사하여 동일한 크기의 원을 하나 더 만듭니다. shadowEllipse를 선택하여 CTRL+C와 CTRL+V (copy & paste)합니다. 이 원의 이름은 outerRimEllipse로 지정합니다.

2. 테두리 원에는 그라데이션을 지정합니다. 먼저 개체 및 타임라인 창에서 outerRimEllipse를 선택합니다. 모양 창에서 Opacity는 100%로 지정하고 브러시 창에서 Fill을 선택하고 그라데이션 브러시를 선택합니다.

3. 좌에서 우로 그라데이션 방향을 변경합니다. 먼저 도구 상자에서 브러시 변형을 선택합니다.

그리고 타원에 생긴 화살표를 드래그 & 드롭하여 그라이데이션 방향을 설정합니다.

4. 그라데이션 좌측 지점 색상을 #FFE4E5F4로 변경하고 우측 지점 색상을 #FFC0C0C0로 변경합니다.

5. 테두리 원 outerRimEllipse를 선택 도구를 사용하여 우측 상단으로 조금 이동하여 그림자 원을 살짝 보이게 합니다.

다음은 현재 까지의 그림입니다.

다음은 이음 홈을 만들어 보겠습니다. 이음 홈은 테두리 보다 좀 작을 뿐이지 디자인하는 방법은 비슷합니다.

1. 테두리 원 outerRimEllipse를 선택하고 CTRL+C, CTRL+V하여 동일한 원을 추가합니다. 이름은 bevelEllipse로 변경합니다.

2. 개체 및 타임라인 창에서 bevelEllipse를 선택하고 속성 탭을 열어 290 픽셀 정도로 outerRimEllipse보다 작게 크기를 변경합니다.

3. outerRimEllipse의 복사본이라 bevelEllipse 그라데이션이 적용되어 있을 것입니다. bevelEllipse의 좌측 지점을 #FF2F2F32, 우측 지점 색상을 #FFE4E5F4로 변경합니다.

이제 서서히 뭔가가 되어 가는 것 같네요. ^^ 다음은 bevelEllipse를 이용하여 시게 표면을 만들어 보겠습니다.

1. bevelEllipse의 복사본을 만들고 새로운 이름으로 faceEllipse로 지정합니다.

2. faceEllipse를 선택하고 bevelEllipse보다 좀 작은 270 픽셀 정도로 크기를 변경합니다.

3. faceEllipse의 색상을 단색 브러시를 이용하여 검정색으로 변경합니다. 그럼 아래와 같은 그림입니다.

다음은 시계 바늘들을 고정하는 중앙 원을 만들어 보겠습니다. 이게 없으면 바늘이 굴러 댕길 겁니다. -ㅅ-;

1. 도구 상자에서 타원 도구를 선택하고 시계 표면 (faceEllipse)에 원을 하나 그립니다.

2. 새로운 원의 이름을 centerEllipse로 변경합니다.

3. centerEllipse의 너비와 높이를 30으로 설정합니다.

4. stroke thickness를 8로 설정하고 stroke를 원하는 색상으로 설정합니다.

5. centerEllipse 원을 faceEllipse 정중앙 (정준하 아님~;;)에 위치시키기 위해 개체 및 브라우저 창에서 faceEllipse를 선택한 후 정중앙을 확인하고 centerEllipse를 이동시킵니다.

다음은 시계 바늘들을 만들어 보겠습니다.

1. 도구 상자에서 사각형 도구를 선택합니다.

2. 먼저 초침을 만듭니다. 세 개 침 중에 가장 얇게 하고 원하는 색상으로 설정합니다. 방향은 12시를 향하게 하고 StrokeThickness를 5로 설정하고. 이름은 secondHand로 변경합니다.

하얀색 점 이동 시 정중앙으로 설정이 잘 되지 않으면 CTRL+= 키 또는 메뉴 보기, 확대를 사용하여 좀 더 세밀하게 이동 시켜 보시기 바랍니다.

3. 분침도 마찬가지로 초침의 2단계를 따라하여 만듭니다.

4. 시침도 동일하게 만들고 분침보다 StrokeThickness와 길이를 좀 더 길게 만듭니다.

세 개 바늘 모두 12방향을 향하고 있을 테니 바늘 위치를 조정하면 아래와 같은 그림일 것입니다.

다음 시간에는 RotateTransform을 사용하여 이번 시간에 만든 시계를 실제로 작동해보도록 하겠습니다. 비가 오니 이제 정말 시원해질 것 같습니다. 환절기 감기 조심하세요. ^.^

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Silverlight(Tools, Tech.)' 카테고리의 다른 글

[Expression Media] 2. EM을 이용한 HTML 갤러리 생성 (0)	2009/07/05
[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

Posted by -세티-

Blend2.5, Silverlight, Silverlight 2 Beta2, Silverlight 2.0, 실버라이트, 실버라이트 2.0, 엘리의 실버라이트 2.0

0 | 2

[3] 안드로메다 - 안드로메다 은하

Astronomical Observation 2008/10/14 01:46

날   짜 : 2008년 10월 11일 토요일
시   간 : 03시 50분?
날   씨 : 박무(시정 6km)
기   온 : 13.9도(체감 13.9도)
습   도 : 94%
풍   향 : 정온
풍   속 : 0.2 m/sec
이슬점 : 12.9도
관측지 : 경기도 파주시 탄현면 문지리 304-1

관측대상 : Andromeda Galaxy(M31, NGC224)
                    24,202 광년

관측자 : 김재진, 박종현

장   비 : Pronto 70mm(F6.8) 굴절 망원경
                 PLOSSL 9mm, UltraWide 20mm, TELE VUE 21mm 아이피스
                 Televue Panoramic Mount

소   감 : 먼저 페가수스 별자리를 찾는다. 페가수스 별자리는 서쪽 하늘을 보면 보인다.
              페가수스 자리에서 알페라츠를 찾는다. 알페라츠를 따라서 위로 올라가면 안드로메다 자리를
              구성하는 첫 번째 별인 델타 안드로메다가 보인다. 약 1시 방향으로 계속 올라가다보면 두번째
              별인 미라크(Mirach)가 보인다. 거기서 약 4시~5시 방향 아래로 내려가면 MU 안드로메다가 보이고
              그 라인을 쭉 이어서 가다보면 NU안드로메다가 보인다. NU안드로메다를 파인더로 왼쪽 상단에 두고
              주변을 찾으면 안드로메다 은하가 보인다.
              9mm 아이피스로 관측했을 때 안드로메다 은하는 매우 작고 선명하게 보였으나, 20mm 아이피스로
              볼때 보다는 감흥이 덜 했다.
              (Seeing을 그릴려고 했으나, 대각선 타원을 그리지 못해서, 그건 다음에...^^;)

(Starry Night 6.0으로 찾은 페가수스와 안드로메다 그리고 카시오페이아)

[참고 사이트]
1. http://en.wikipedia.org/wiki/Andromeda_Galaxy
2. http://www.solstation.com/x-objects/andromeda.htm
3. http://server6.wikisky.org/starview?object_type=1&object_id=256&object_name=43+And&locale=KO
4. http://encarta.msn.com/encyclopedia_761587746/mirach.html

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Astronomical Observation' 카테고리의 다른 글

[3] 안드로메다 - 안드로메다 은하 (2)	2008/10/14
[2] 카시오페이아 - Iota Cassiopeiae (2)	2008/10/12
[1] 카시오페이아 - Eta Cassiopeiae (5)	2008/10/08

Posted by -세티-

Andromeda, 카시오페이아, 페가수스

0 | 2

[2] 카시오페이아 - Iota Cassiopeiae

Astronomical Observation 2008/10/12 15:10

날   짜 : 2008년 10월 11일 토요일
시   간 : 02시 40분 ~ 03시 10분
날   씨 : 박무(시정 6km)
기   온 : 13.9도(체감 13.9도)
습   도 : 94%
풍   향 : 정온
풍   속 : 0.2 m/sec
이슬점 : 12.9도
관측지 : 경기도 파주시 탄현면 문지리 304-1

장   비 : Pronto 70mm(F6.8) 굴절 망원경
               PLOSSL 9mm, UltraWide 20mm, TELE VUE 21mm 아이피스
               Televue Panoramic Mount

관측대상 : Iota Cassiopeiae(ι Cas / ι Cassiopeiae)
                   141.6광년, 사중성

관측자 : 김재진, 박종현

소   감 : 북쪽 하늘에서 W자 모양의 카시오페이아를 찾으면 왼쪽에서 1-2-3-4-5 순으로 넘버링 한다.
               2번을 시작점으로 1번을 끝점으로 하여 선을 하나 만든다.
               그 선을 쭈우욱 이어서 1번을 통과하고, 2번과 1번을 연결한 길이 만큼 진행하다보면
               매우 희미하게 빛나는 Iota Cas 를 찾을 수 있다.
               울트라와이드 21mm(24배율)로 관찰, 하나의 주황색 별처럼 보임.
               20mm 아이피스로는 분해능이 떨어져 PLOSSL 9mm(53배율)로 교체하였으나 분해되서 보이지 않음.
               (동행했던 김재진 선생의 망원경, 200배율로 확대하여 분해해서 확인 가능했음, 총 4개의 별로 이루어져 있으나
               고배율 망원경으로는 3개까지 확인이 가능함, 주성이 부풀어져 오른 모양(별이 겹침)으로 보이고, 왼쪽 9시에서
               10시 사이에 또 다른 별이 하나 보임.)

(Starry Night으로 찾은 Iota Cas)

[참고 사이트]
1.http://www.astro.uiuc.edu/~kaler/sow/iotacas.html
2.http://www.speedylook.com/Iota_cassiopeiae.html
3.http://www.fvastro.org/beginners/exploring_cassiopeia.htm
4.http://www.kasi.re.kr/sub4_study/sub4.asp?id=B&sm_id=constart&depth=constart

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Astronomical Observation' 카테고리의 다른 글

[3] 안드로메다 - 안드로메다 은하 (2)	2008/10/14
[2] 카시오페이아 - Iota Cassiopeiae (2)	2008/10/12
[1] 카시오페이아 - Eta Cassiopeiae (5)	2008/10/08

Posted by -세티-

iota, 가을철 별자리, 이오타, 카시오페이아

0 | 2

[1] 카시오페이아 - Eta Cassiopeiae

Astronomical Observation 2008/10/08 02:17

날   짜 : 2008년 10월 8일 수요일
시   간 : 0시 30분 ~ 01시 30분
날   씨 : 대체로 맑음
기   온 : 15.4도(체감 15.3도)
습   도 : 72%
풍   향 : 북동
풍   속 : 2.4 m/sec
이슬점 : 10.3도
관측지 : 서울마포 우성아파트 주차장

장   비 : Pronto 70mm(F6.8) 굴절 망원경
               PLOSSL 9mm, UltraWide 20mm, TELE VUE 21mm 아이피스
               Televue Panoramic Mount

관측대상 : Eta Cassiopeiae(η Cas / η Cassiopeiae)
               19.4광년, 이중성

관측자 : 박종현

소   감 : 북쪽 하늘에서 W자 모양의 카시오페이아를 찾으면 왼쪽에서 1-2-3-4-5 순으로 넘버링 한다.
            3번과 4번 사이의 별 중간에 꽤 밝게 빛나는 에타Cas가 보임.
            파인더로 에타Cas 찾은 후 울트라와이드 20mm(24배율)로 관찰, 하나의 주황색 별처럼 보임.
            20mm 아이피스로는 분해능이 떨어져 PLOSSL 9mm(53배율)로 교체한 후 에타Cas를 분해 관찰할 수 있었음.

(출처: http://www.ne.jp)

카시오페이아 정보
1. 이름 : Cassiopeia(약어 : Cas)
2. 적경 : 0h52m, 적위 60°18′
3. 남중 : 11월 20일 오후 9시

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Astronomical Observation' 카테고리의 다른 글

[3] 안드로메다 - 안드로메다 은하 (2)	2008/10/14
[2] 카시오페이아 - Iota Cassiopeiae (2)	2008/10/12
[1] 카시오페이아 - Eta Cassiopeiae (5)	2008/10/08

Posted by -세티-

Eta, 가을철 별자리, 에타, 카시오페이아

0 | 5

2009 세계천문의 해를 맞이합시다.

Thinking 2008/10/05 22:50

어릴 적 아버지 손을 잡고 길을 걷다가 밤 하늘을 가로지르던 별똥별을 보게 되었습니다. 국민학교(지금은 초등학교) 때 가장 즐겨보던 만화가 계몽사에서 출간된 '우주와 개발' 이라는 만화 였지요. 너무 재미있었고, 잠을 자기 전에 꼭 이 책을 읽고 자주 봤으면 책이 다 너덜너덜 해져있었던 기억이 납니다. 이 만화의 내용은 아폴로 11호가 달에 가는 현실을 반영한 과학만화 였습니디.

고등학교 시절엔 천문학과에 진학해서 밤하늘을 마음껏 바라보고 싶었고, 하늘에 나를 맡겨두고 싶었습니다. 현실적인 선택 보다는 내 자신이 원하는 것을 찾아 더 큰 꿈과 희망을 위해서 살고 싶었고, 속세에 물들기 보다는 더 큰 자아를 발견하면서 그렇게 넉넉하진 않더라도 진정 원하는 것을 꿈꾸며 살고 싶었습니다.

그런 생각, 그리고 나를 맡길 수 있는 하늘이 좋았고, 별이 좋았고, 그것을 바라보는 그 자체가 좋았었습니다.

현실에서 원하는 것을 모두 이룰순 없었지만, 이상과 타협을 할 순 있었으니 그래도 전 꽤 운이 좋은 사람입니다.
주중엔 일하고, 주말엔 제가 좋아하는 대상을 보기 위해 즐거운 마음으로 그것들을 찾아갈 수 있기 때문입니다. 좋아하는 것을 함께하는 사람들이 있어서 즐겁고, 또 그렇게 즐거운 밤하늘 보기를 계속하다보니 조금씩 아는 것도 늘어나게 되고, 이렇게 한발자국씩 예전에 이루지 못했던 꿈을 다시 맛보고 있습니다.

밤하늘을 볼 때면 맨눈으로 별자리를 보기도 하지만 그 반짝이는 대상을 조금더 가까이 보고자 한다면 망원경을 필요로 하게 됩니다. 그래서 망원경은 우리의 또 다른 눈의 역할도 하면서 내 마음을 별에게 전달하는 마음의 창 역할을 하기도 합니다.

내년은 갈릴레오 갈릴레이가 우리 마음의 창 역할을 하는 망원경을 만든지 400주년이 되는 해 입니다. 그래서 국제천문연맹(IAU, International Astronomical Union)은 2009년을 '세계 천문의 해(IYA2009, International Year of Astronomy 2009)로 지정했습니다. 이 행사는 지구촌 축제이며, 1년간 다양한 이벤트와 체험의 기회를 제공하게 됩니다.

(세계천문의 해 배너 - 출처 : 한국천문연구원 IYA 2009 웹 사이트)

(자료 출처:IYA 2009 한국 공식 사이트)

세티도 2009년에는 마음가짐을 새롭게 할려고 합니다.
지금까지 제가 익혀온 기술을 너무 현실적인 도구로만 이용했던 건 아닌가 하는 생각을 하게 되었습니다.
이것을 처음 배울 때 느꼈던 설레임과 성취감은 어느새 사라지고, 새로운 기술이 나오면 단지 뒤처지지 않기 위해 배우고 익혔던 어찌보면 영혼 없는 행동을 한듯 싶기도 합니다. 설레임과 성취감이 없어진 지금, 제가 알고 있는 모든 지식을 동원하여, 우주천문분야에 접목할 부분을 찾고, 개발해 나갈 계획입니다. 또 다른 성취감을 위해서 말입니다.(살면서 이 세상에 흔적하나 정도는 남겨봐야죠.^^)
저와 컴퓨터 기술과 우주천문분야로의 접목을 통해 성취감을 함께 얻고 싶은 컴퓨터 엔지니어는 언제든 저에게 연락을 주세요.^^

많은 관심과 애정으로 세계 천문의 해를 맞이했으면 합니다.

[참고 사이트 ]
1. IAU 공식 사이트 : http://www.iau.org/
2. IYA 공식 사이트 : http://www.astronomy2009.org/
3. IYA 2009 한국 공식 사이트 : http://www.astronomy2009.or.kr/
4. 한국천문연구원 : http://www.kasi.re.kr/Default.aspx
5. 한국아마추어천문학회 : http://www.seoulkaas.net

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'Thinking' 카테고리의 다른 글

좋은 기운, 나쁜 기운 (0)	2008/11/21
진실 (0)	2008/11/20
2009 세계천문의 해를 맞이합시다. (4)	2008/10/05
보현산 천문대에 다녀왔습니다. (0)	2008/09/30
인지과학의 군사적 응용에 대한 기사를 보고... (0)	2008/08/17
▶◀ 삼가 고인의 명복을 빕니다. (2)	2008/07/31

Posted by -세티-

IAU, IYA2009, 세계 천문의 해, 세티, 한국아마추어천문학회, 한국천문연구원

0 | 4

[엘리의 실버라이트 2.0] Silverlight 시작

Silverlight(Tools, Tech.) 2008/10/02 10:43

원본: http://msdn.microsoft.com/en-us/library/bb404703(VS.95).aspx

본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.

안녕하세요. 엘리 입니다.

이번 시간은 Silverlight-기반 응용 프로그램 개발에 대한 주요 기능과 예제 코드를 사용하여 Silverlight 기반 응용 프로그램을 만드는 일반적 절차를 소개하려고 합니다.

이번 시간에는 다음 항목들을 개략적으로 알아보는 시간을 갖습니다.

· 전제 조건

· 응용 프로그램에 Silverlight 통합

· XAML

· 레이아웃

· 컨트롤

· 코드 로직 추가하기

· 동적 언어

· 그래픽

· 미디어와 애니메이션

· 데이터

· 네트워킹

· Silverlight Base Class Library

· 관련 항목

전제 조건

예제 실행에는 Silverlight 2 베타 2 런타임만 설치해도 되지만 우리는 직접 개발을 하는 임무이므로 아래 항목들을 모두 설치하도록 합니다. ^^

· Silverlight 2 베타 2

· Silverlight 2 베타 2 SDK

· 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

Ctrl + F5 키를 눌러 실행하거나 미리보기 창에서 빠르게 아래와 같은 결과를 확인합니다.

UI를 만들기 위해 XAML 파일을 직접 작성하거나 Microsoft Expression Blend를 사용할 수 있습니다. Expression Blend는 Silverlight-기반 응용 프로그램을 만들 수 있는 WYSIWYG 디자인 툴입니다. Expression Blend는 직접 편집할 수 있는 XAML 파일을 생성하고 Expression Blend로 코드-비하인드 파일을 작성하고 이벤트를 연결할 수도 있습니다. 좀 더 자세한 정보는 Microsoft Expression Blend를 사용한 Silverlight 퀵스타트를 참고하시기 바랍니다.

레이아웃

Silverlight는 UI 레이아웃에 해당하는 3가지 패널을 제공합니다. 그 중 기본적 패널인 Grid는 가장 확장성이 있는 강력한 레이아웃 패널입니다.

컨테이너	설명
Canvas	x,y 공간에 절대적 자식 엘리먼트를 위치시킵니다.
StackPanel	수평이나 수직 스택에 관련 자식 엘리먼트를 위치 시킵니다.
Grid	행과 열에 자식 엘리먼트를 위치 시킵니다.

기존의 Page.xaml 파일에 아래 코드를 사용하여 수정합니다. 아래 예제에서 Rectangle 엘리먼트는 grid의 1,1 셀에 위치 되어 있습니다. Grid는 제로-베이스 (0부터 시작하는 인덱스)를 사용하므로 rectangle은 우측 하단 셀에 나타납니다.

XAML

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</Grid>

아래 그림은 위 코드가 어떻게 표현되는지 보여줍니다.

레이아웃에 좀 더 자세한 정보는 개체 위치 및 레이아웃 (Silverlight 2)를 참고하시기 바랍니다.

컨트롤

Silverlight 컨트롤은 컨텐트나 다른 컨트롤을 호스트하는 것과 상태가 변경되는 디스플레이를 나타내는데 사용합니다. 컨트롤은 Button이나 TextBox같은 사용자 상호 작용이 가능한 엘리먼트에서 DataGrid같은 정보의 복잡한 레이아웃 엘리먼트까지 기능적으로 사용 가능합니다. 모든 컨트롤의 목록은 컨트롤 갤러리에서 보실 수 있습니다.

Silverlight는 컨트롤이 어떻게 보여져 영향을 주는 각 컨트롤을 위한 기본 템플릿으로 나타납니다. 그러나 여러분은 모든 컨트롤의 외관과 시각 움직임을 변경하여 사용자 지정 템플릿을 만들 수 있습니다. 좀 더 자세한 정보는 컨트롤 사용자 지정화를 참고하시기 바랍니다.

아래 예제는 이 전 예제에서 grid의 0,0 셀에 button 하나를 추가하여 만듭니다.

XAML

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</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

코드-비하인드 파일에서 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.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

아래 그림은 위 코드가 어떻게 표현되는지 보여줍니다.

미디어 및 애니메이션

정적 그래픽뿐만 아니라 좀 더 동적이고 상호적인 여러분의 응용 프로그램을 만들기 위해 여러분은 애니메이션과 오디오, 비디오를 추가할 수 있습니다. 좀 더 자세한 정보는 애니메이션 개요 (Silverlight 2)와 오디와 비디오 개요 (Silverlight 2)를 참고하세요.

다음 예제는 Stop 버튼이 클릭되기까지 늘었다 줄었다하는 이전 예제로 사각형을 만듭니다.

XAML

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.Resources>

</Storyboard>

</Grid.Resources>

<Rectangle.Fill>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

</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로 시계 만들기

Silverlight 퀵스타트 문서

Silverlight 아키텍쳐

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

'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

Posted by -세티-

Silverlight, Silverlight 2.0, 실버라이트, 실버라이트 2.0, 엘리의 실버라이트 2.0

0 | 6

세티의 Lonely Star

카테고리

태그목록

공지사항

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

링크

글 보관함

달력

102008 이전 다음

'2008/10'에 해당되는 글 6건

[엘리의 실버라이트 2.0] Silverlight 시계 만들기 (1)

'Silverlight(Tools, Tech.)' 카테고리의 다른 글

Trackback : http://www.setisigns.net/trackback/218

[3] 안드로메다 - 안드로메다 은하

'Astronomical Observation' 카테고리의 다른 글

Trackback : http://www.setisigns.net/trackback/216

[2] 카시오페이아 - Iota Cassiopeiae

'Astronomical Observation' 카테고리의 다른 글

Trackback : http://www.setisigns.net/trackback/215

[1] 카시오페이아 - Eta Cassiopeiae

'Astronomical Observation' 카테고리의 다른 글

Trackback : http://www.setisigns.net/trackback/214

2009 세계천문의 해를 맞이합시다.

'Thinking' 카테고리의 다른 글

Trackback : http://www.setisigns.net/trackback/213

[엘리의 실버라이트 2.0] Silverlight 시작

'Silverlight(Tools, Tech.)' 카테고리의 다른 글

Trackback : http://www.setisigns.net/trackback/210