Silverlight 응용 프로그램에서 스토리보드를 제어하는 단추 만들기

Microsoft Silverlight 1.0 응용 프로그램에서 단추를 만드는 작업에는 단추를 구성하는 요소를 그리고, 복사하기 쉽도록 레이아웃 패널에서 요소를 줄 바꿈하고, 단추 이벤트(예: 사용자의 단추 클릭)가 발생할 때 특정 액션을 수행하는 JavaScript 코드를 작성하는 작업이 포함됩니다.

[!참고]

여러 개의 단추 이벤트를 사용하는 완전한 예제를 보려면 ButtonGallery 예제를 참조하십시오. 도움말 메뉴에서 시작 화면을 클릭한 다음 예제 탭에서 ButtonGallery를 클릭하여 열 수 있습니다.

단추의 요소 그리기

도형, 선, 텍스트 및 이미지를 포함한 모든 요소를 사용하여 단추의 모양을 만들 수 있습니다. 다음 절차에서는 사각형 및 텍스트 블록을 그리는 방법을 보여 줍니다. Silverlight 프로젝트의 XAML 문서에 요소 추가 항목에 나와 있는 절차 중 하나를 참조할 수도 있습니다.

단추의 요소 그리기

1. Microsoft Expression Blend 2에서 Silverlight 1.0 프로젝트를 열고 도구 상자에서 사각형 도구를 선택합니다.

   

   사각형 도구가 보이지 않으면 찾을 도구 컨테이너를 마우스 오른쪽 단추로 클릭하고 사각형 도구를 선택합니다.

   

2. 포인터를 끌어 아트보드에 사각형을 그립니다. 그리기 시작하면 포인터가 십자선 으로 바뀝니다.

   

3. 개체 및 타임라인 아래에서 새 사각형 요소를 선택하고 모양을 변경합니다. 예를 들어 속성 패널의 브러시에서 그라데이션 브러시 탭의 채우기를 클릭한 다음 그라데이션 중지점의 색을 정의합니다.

   

   [!참고]

   모양 및 변형에 나와 있는 절차를 사용하여 사각형의 모양을 추가적으로 변경할 수 있습니다.

4. 도구 상자에서 TextBlock 컨트롤을 선택합니다.

   

5. 사각형 위에 텍스트 블록 요소를 그립니다. 사각형 또는 텍스트 블록 요소의 크기를 조정하거나 이러한 요소를 이동하려면 도구 상자에서 선택 도구 를 선택하고 아트보드에서 요소 주위에 나타나는 파란색 표시기를 끕니다.

   

6. 개체 및 타임라인 에서 새 텍스트 블록 요소를 선택하고 F2 키를 눌러 텍스트 편집 모드로 전환한 다음 Button을 입력하여 요소에 표시되는 텍스트를 변경합니다. 텍스트 편집 모드를 끝내려면 텍스트 블록 요소의 바깥쪽을 클릭합니다.

   [!참고]

   텍스트 블록의 모양을 수정하는 방법에 대한 자세한 내용은 텍스트 및 입력 체계의 항목을 참조하십시오.

7. 단추의 모양을 마무리하려면 Silverlight 프로젝트의 XAML 문서에 요소 추가에 나와 있는 절차를 참조하여 아트보드에서 요소를 추가적으로 그릴 수 있습니다.

맨 위로 이동

레이아웃 패널에서 단추 요소 줄 바꿈

한 레이아웃 패널(Canvas 요소)에서 단추 요소를 줄 바꿈하여 단추를 간편하게 복제할 수 있습니다. 단추를 구성하는 요소를 모두 선택하고 복제하는 대신 레이아웃 패널을 복사하고 붙여 넣으면 됩니다. 또한 Canvas(캔버스) 레이아웃 패널에서 단추 요소를 줄 바꿈하면 단추의 이벤트 처리기를 손쉽게 만들 수 있습니다. 예를 들어 포인터가 단추의 일부분을 거쳐 이동할 때 응답하는 대신 레이아웃 패널 전체를 거쳐 이동할 때 응답하는 이벤트 처리기를 만들 수 있습니다.

레이아웃 패널에서 요소 줄 바꿈

1. 개체 및 타임라인에서 Ctrl 키를 누른 상태에서 단추를 구성하는 요소를 모두 선택합니다.

2. 선택한 요소를 마우스 오른쪽 단추로 클릭하고 그룹으로 묶기를 가리킨 다음 Canvas를 클릭합니다.

   

3. 개체 및 타임라인에서 새 캔버스 요소를 마우스 오른쪽 단추로 클릭하고 이름 바꾸기를 클릭한 후 단추의 새 이름(예: MyButton)을 입력하고 Enter 키를 누릅니다.

   이제 단추를 복제할 때 MyButton 요소를 복사하여 붙여 넣을 수 있습니다.

맨 위로 이동

애니메이션 스토리보드를 만들어 단추의 모양 변경

일반적으로 사용자가 응용 프로그램에서 단추를 클릭하면 변경 내용이 단추에 표시됩니다. 다음 절차에서는 단추 요소를 확장하는 애니메이션 스토리보드를 만드는 방법을 보여 줍니다.

[!참고]

단추에 속하는 요소를 비롯한 응용 프로그램 안의 모든 요소에 애니메이션 효과를 적용할 수 있습니다. 예를 들어 단추를 클릭하면 주위에 작은 이미지가 원을 그리도록 할 수 있습니다.

애니메이션 스토리보드 만들기

1. 개체 및 타임라인에서 새로 만들기 단추 를 클릭합니다.

   

   스토리보드 만들기 대화 상자가 열립니다.

   

2. 스토리보드의 기본 이름은 Storyboard1입니다. 다음 절차의 코드에서 이 이름을 사용하므로 이름을 Storyboard1로 유지합니다.

3. 또한 기본적으로 스토리보드로 만들기 확인란이 선택되어 있습니다. 브라우저 창에 응용 프로그램이 로드되는 즉시 애니메이션을 실행할 것이 아니므로 확인란의 선택을 취소하지 마십시오. 대신 코드를 통해 애니메이션을 완전히 제어(시작, 중지 등 포함)할 것입니다.

4. 확인을 클릭합니다.

   Expression Blend에서 스토리보드가 만들어지고 애니메이션 모드로 전환됩니다.

   

   [!참고]

   F6 키를 눌러 인터랙션 패널의 위치를 변경할 수 있습니다(선택 사항). 인터랙션 패널이 아트보드 아래에 있으면 타임라인을 좀 더 많이 볼 수 있습니다.

5. 개체 및 타임라인에서 MyButton 요소를 선택합니다.

6. 타임라인 위에서 키 프레임 기록 단추 를 클릭합니다.

   새 키 프레임이 단추 요소의 현재 모양을 기록하도록 설정됩니다.

7. 타임라인 플레이헤드 를 0.5초 표시(애니메이션의 종료 시간)로 이동하고 키 프레임 기록 단추 를 다시 클릭합니다.

   새 키 프레임이 단추 요소의 현재 모양을 기록하도록 설정됩니다. 애니메이션의 끝에 있는 단추와 유사한 모양입니다.

   

8. 타임라인 플레이헤드 를 0.25초 표시로 이동합니다. 여기에서 단추의 모양을 변경합니다.

   [!참고]

   타임라인을 정확히 0.25초 표시(0:00.250)로 이동할 수 없으면 맞춤 해상도가 너무 낮기 때문일 수 있습니다. 맞춤 해상도를 높이려면 맞추기 옵션 단추 를 클릭하고 초당 맞춤 해상도를 20으로 설정한 다음 확인을 클릭하십시오.

9. 타임라인 플레이헤드를 0.25초 표시에 놓고 MyButton 요소를 선택한 후 아트보드에서 단추의 크기를 변경합니다. 아트보드에서 단추 크기를 변경하려면, 중심점을 유지하도록 Alt 키를 누른 상태에서 오른쪽 아래의 크기 조정 핸들을 끄십시오.

   

   새 키 프레임이 타임라인의 0.25초 표시에 자동으로 추가되어 단추의 새 크기와 위치를 기록합니다. 개체 및 타임라인에 RenderTransform 요소가 추가되어 단추의 새 크기(Scale) 및 새 위치(Translation)가 지정되고 이들 요소에 대한 키 프레임이 앞서 MyButton의 키 프레임을 설정한 위치에 추가되었습니다. Expression Blend는 MyButton에 설정된 시작 키 프레임과 끝 키 프레임에서 애니메이션을 적용한다고 가정합니다. 따라서 RenderTransform 요소의 시작 키 프레임과 끝 키 프레임이 자동으로 설정됩니다.

10. 재생 단추를 클릭하여 애니메이션을 테스트합니다.

11. 스토리보드 닫기 단추 를 클릭하여 애니메이션 모드를 끝냅니다. 이제부터 요소에 수행하는 어떤 변경도 애니메이션 스토리보드에 적용되지 않습니다.

12. 파일을 모두 저장합니다.

맨 위로 이동

단추를 클릭할 때 애니메이션 스토리보드를 트리거하는 이벤트 처리기 만들기

이벤트 처리기 등록 및 이벤트 처리기에 대한 코드 작성은 모두 코드 숨김 파일에서 수행할 수 있습니다. 따라서 프로그래머와 개발자가 각자 작업을 한 후 완료되면 코드와 응용 프로그램의 프레젠테이션을 쉽게 결합할 수 있습니다. 또한 프로그래머가 이벤트 처리기에 코드를 추가하여 단추를 클릭할 때 발생할 다른 액션(예: 웹 페이지 탐색)을 추가할 수 있습니다. Silverlight 응용 프로그램에서 하이퍼링크 만들기에서 예를 참조하십시오.

이벤트 처리기 만들기

1. 편집할 수 있도록 프로젝트 탭에서 코드 숨김 파일 Page.xaml.js를 두 번 클릭하여 엽니다.

   Page.xaml.js 파일에는 이미 다음과 같은 JavaScript 코드가 포함되어 있습니다.

   • Page 개체에 대한 정의

   • MouseLeftButtonDown 이벤트 등록

   • MouseLeftButtonDown 이벤트에 대한 이벤트 처리기의 정의

   if (!window.UntitledProject10)
       UntitledProject10 = {};
   
   UntitledProject10.Page = function()
   {
   }
   
   UntitledProject10.Page.prototype =
   {
       handleLoad: function(control, userContext, rootElement)
       {
           this.control = control;
   
           // Sample event hookup:
           rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
       },
   
       // Sample event handler
       handleMouseDown: function(sender, eventArgs)
       {
           // The following line of code shows how to find an element by name and call a method on it.
           // this.control.content.findName("Storyboard1").Begin();
       }
   }
   

   [!참고]

   Microsoft Silverlight의 JavaScript 및 개체의 구조에 대한 자세한 내용은 스크립팅 및 마우스 이벤트를 참조하십시오.

2. 왼쪽 마우스 단추를 클릭할 때 스토리보드를 호출하는 코드는 이미 있지만 이중 슬래시(//)를 사용하여 주석 처리되어 있습니다.

                   // this.control.content.findName("Storyboard1").Begin();
   

   이중 슬래시를 제거하여 코드의 주석 처리를 제거합니다.

   this.control.content.findName("Storyboard1").Begin();
   

3. 파일을 모두 저장합니다.

4. 프로젝트 메뉴에서 프로젝트 테스트를 클릭하거나 F5 키를 눌러 프로젝트를 테스트합니다.

   빌드 테스트가 성공적으로 끝나면 Microsoft Expression Studio에 포함된 로컬 개발 서버를 사용하여 기본 웹 브라우저에 프로젝트가 자동으로 열립니다. Silverlight 프로젝트를 테스트하는 방법에 대한 자세한 내용은 Expression Blend에서 Silverlight 프로젝트 테스트를 참조하십시오.

   단추를 클릭하여 스토리보드가 트리거되는지 여부를 확인합니다. 브라우저 내부의 아무 지점이나 클릭하면 스토리보드가 트리거됩니다. 이벤트 처리기가 루트 요소(Page)의 범위에 등록되어 있기 때문입니다.

5. 다음과 같이 줄 앞에 이중 슬래시를 추가하여 이벤트 처리기가 등록된 코드 줄을 주석 처리합니다.

                   //rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
   

6. 주석 처리된 줄 뒤에 다음 코드 줄을 추가합니다.

                   this.control.content.findName("MyButton").addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
   

   이 두 코드 줄은 이벤트 처리기가 등록되는 요소만 다릅니다. 주석 처리한 줄에서는 이벤트 처리기가 rootElement에 등록되었고, 붙여 넣은 줄에서는 요소를 찾는 findName 메서드를 사용하여 이벤트 처리기가 MyButton 요소에 등록되었습니다.

7. 다시 파일을 모두 저장합니다.

8. 프로젝트 메뉴에서 프로젝트 테스트를 클릭하거나 F5 키를 눌러 프로젝트를 테스트합니다.

   단추를 클릭하고 단추 바깥쪽을 클릭하여 애니메이션 스토리보드가 단추를 클릭한 경우에만 트리거되는지 확인하십시오.

맨 위로 이동

참조

개념

Expression Blend에서 Silverlight 프로젝트 테스트