2008/07/29 15:42
[세티의 실버라이트] 14. 전문 컨트롤 만들기 Silverlight2008/07/29 15:42
원글출처 : http://silverlight.net/quickstarts/blend_quickstart/part4_duplicate_objects.aspx
본 강좌는 위의 원글을 참고 및 번역해서 작성했으며, 글 중간중간 제 개인적인 표현이나 의견을 넣어서 각색했습니다.
이번 강좌에서 우리는 play, pause, stop 과 같은 미디어 플레이어에 필요한 버튼을 만들어 보겠습니다.
앞의 강좌에서 사용했던 버튼을 이용해서 우리는 마우스오버나 클릭과 같은 행위에 응답하는 버튼을 생성할 것 입니다. 이전에 만들어 두었던 버튼을 이용하고자 한다면 Make Control...을 이용해서 간단하게 선택할 수 있습니다.
저는 새롭게 만들어 보겠습니다.^^
먼저 사용자 컨트롤을 하나 생성합니다.
그리고 Rectangle객체를 선택하고, 그려 넣습니다.
그러면 모서리가 둥글게 처리 됩니다.
이제 버튼 모양이 만들어 졌습니다.
버튼에 보기 좋게 배경색을 넣겠습니다. 앞의 강좌에서도 설명했지만 그레데이션을 선택하고, 팔레트에서 두 개의 포인트를 이용하여 색상을 선택합니다.
그러면 위의 그림과 같은 버튼이 만들어지게 됩니다.
이렇게 만들어진 객체를 복사해서 새로운 버튼으로 만들겠습니다.
먼저 제일 상단 메뉴에 보면 Tool 이라는 것이 보일 것 입니다. 그곳에서 Make Control... 을 선택합니다.
그러면 다이얼로그 상자가 열리면서 컨트롤의 이름을 넣으라고 합니다.
저는 그곳에 btn_play 라는 이름을 넣었습니다.
이름을 넣고 OK를 클릭하면 솔루션 탐색기에 btn_play.xaml 파일이 생성된 것을 확인할 수 있습니다.
이제 플레이 모양을 넣기 위해 Pen 을 선택합니다.
100%로 축소 했더니 버튼이 콩알만 합니다. 그래서 이것을 확대할 필요가 생겼습니다.
그래서 확대 했습니다. 확대하고 나니깐 아까 모서리 둥글게 처리한게 거의 보이지 않네요.^^;
그래서 다시 모서리를 둥글게 처리 했습니다. 그랬더니 버튼 아래로 하얀 그리드가 보이네요.
그래서 아래의 그림처럼 화살표 방향으로 하얀 그리드를 마우스로 드래그 했습니다.
그랬더니 버튼까지 같이 늘어나네요. 이런 낭패가...ㅎㅎ
다시 버튼 객체를 선택하고 하얀 그리드 안에 알맞게 맞춰 넣습니다.
위에서 선택한 Pen 을 이용하여 3개 의 점을 찍었더니 삼각형이 그려졌습니다.
그런데 삼각형이 똑바르게 그려지지 않았네요.^^;
그래서 이것을 보정하고자 합니다.
Pen을 이용해서 그림을 그릴 경우 직선이나 포인트가 원하는 위치에 제대로 찍히지 않아서 원하는 모양이 나오지 않을 경우에는 아래 그림처럼 Direct Selectcion 메뉴를 이용해서 그것을 보정할 수 있습니다.
아래의 그림은 Direct Selection을 이용해서 삼각형 모양을 변형시켜 본 예 입니다.
여러분도 아래의 그림처럼 포인트를 잡고 노란 화살표 방향으로 포인트를 이동시켜 보시기 바랍니다. ^^
버튼이 너무 작아서 똑바로 그릴려고 해도 잘 되었는지 확인하기 힘드네요~
그래서 Artboard 를 400%로 확대했습니다. 우와~ 댑따 잘보이는군요.ㅋ
삼각형을 잘 그렸으나 Rectangle 객체 위에 올바르게 놓여진 것 같지는 않습니다.
그래서 Expression Blend 2.5의 왼쪽에 있는 Toolbox에서 Selection을 선택하고, Rectangle객체를 선택해서 원하는 곳으로 약간 자리 이동했습니다.
미디어 플레이어에는 단지 play 버튼만 존재하는 것이 아니므로 다른 버튼도 만들어 보겠습니다.
기존에 이미 만들어 놓은 버튼이 있으므로 역시 복사해서 사용하도록 하겠습니다.
앞에서는 그냥 생성해서 사용했으므로 컨트롤을 복사하는 방법에 대해 조금 자세하게 설명해 보겠습니다.
먼저 왼쪽의 Object and TimeLines에서 LayoutRoot 를 선택하고 상단메뉴에서 Tool을 선택하고 Make Control...을 선택합니다.
그러면 아래의 그림처럼 다이얼로그 상자가 열립니다. 가운데 Name 부분에 버튼 컨트롤의 이름을 입력합니다.
저는 아래의 그림처럼 이름을 btn_pause로 정했습니다.
그리고 다시 Rectangle 객체를 이용해서 일시정지 마크를 만들어서 넣었습니다.
이후 작업은 위에 설명한 것과 동일합니다.
아래의 정지 버튼도 위와 동일한 방법으로 생성합니다.
그럼 이제 원하는 버튼이 모두 생성되었겠죠? ^^
다음 시간에는 위에서 생성한 버튼을 이용하여 아주 간단한 미디어 플레이어를 만들어 보겠습니다.
'Silverlight' 카테고리의 다른 글
| [엘리의 실버라이트 2.0] Visual Studio의 개체 브라우저에 대해 알아보자. (0) | 2008/08/06 |
|---|---|
| [엘리의 실버라이트 2.0] Silverlight 디자이너 미리보기 (0) | 2008/07/30 |
| [세티의 실버라이트] 14. 전문 컨트롤 만들기 (0) | 2008/07/29 |
| [엘리의 실버라이트 2.0] Silverlight 클래스 라이브러리 만들기 (0) | 2008/07/23 |
| [세티의 실버라이트] 13. 애니메이션 (2) | 2008/07/21 |
| [엘리의 실버라이트 2.0] Silverlight 응용 프로그램 만들기 (0) | 2008/07/18 |
