[Silverlight 3] 음악 플레이어를 만들어보자 !

안녕하세요? 정진희 입니다.
홈페이지를 만들다보면 배경음악 깔고 싶을때가 있는데요.
html에서는 embed를 이용해서 간단하게 했었는데,
실버라이트에서는 어떻게 해야할까요? 디자이너분들은 많이 궁금해 하실 것 같은데요. (저만그런가요?-_-a)

이번시간에는 버튼 on/off를 이용하여 on버튼이 클릭이 되었을 때 실행되고 off를 클릭했을 때
실행이 멈추도록 만들어보겠습니다.

1) 익스프레션 블랜드에서 실버라이트 프로젝트로 파일을 하나 만듭니다. 이름은 임의로 정해줍니다.

2. 프로젝트가 생성이 되었습니다.
 Usercontrol의 사이즈를 좀 작게 줄여보도록 하겠습니다.
저는 300x200으로 하겠습니다.

 3. 그리드 레이아웃의 백그라운드를 조금 다르게 바꿔보겠습니다.
그라데이션 브러쉬를 선택하시고
그라데이션 포인트를 하나 추가한 다음 위치를 밑의 그림처럼 배열해 주시기 바랍니다.

4. 재생시킬 음악을 불러와야겠죠? 프로젝트에서 우클릭 하시고 기존항목을 추가합니다.
그래서 자신이 저장한 음악 파일경로를 찾습니다.
아니면 직접 드래그 해서 가져오는 방법도 가능합니다
저는 배경만 있으면 심심할 것 같아서 이미지도 하나 어울리는 것을 추가시켰습니다.

5. 이미지를 가운데 배치 해 놓고 제공하는 버튼을 두개 배치합니다.
버튼 이름에 각 btnOn / btnOff 네임을 주었습니다.

6. 다음은 MediaElement를 Asset library에서 서치한 다음, 더블클릭을 하여 레이어에 추가시킵니다.

7. MediaElement를 추가시켰으면 속성에서 ① 네임을 myMusic 이라 주고,
동영상이 아니기 때문에 ② width값과 Height값을 각각 0으로 줍니다.
③은 화면이 빌드되었을 때 자동으로 플레이 할 것인지 체크하는 것인데요.
저희는 on버튼을 클릭해야 실행되도록 해야하기 때문에 uncheck 해주시길 바랍니다.
④는 소스를 찾는 것인데요
화살표를 클릭하면 현재 프로젝트의 모든 Media가 나오는데, 방금 추가한 음악파일을 선택합니다.

8. 다음으로는 버튼에 각 클릭했을시에 이벤트를 걸어주도록 하겠습니다.
버튼 btnOn을 선택하시고 속성 이벤트 창에 Click 이벤트를 더블클릭하면
이벤트가 생성되면서 cs파일이 열리게 됩니다.

9. 다음과 같이 코드를 적어주시길 바랍니다.

private void btnOn_Click(object sender, System.Windows.RoutedEventArgs e)
  {
   switch (myMusic.CurrentState)
            {
               case MediaElementState.Paused:
               case MediaElementState.Stopped:
               case MediaElementState.Closed:
                    myMusic.Stop();
                    myMusic.Play();
                    break;
            }

10. btnOff 네임을 가진 버튼도 정지 기능을 넣어야겠죠?
마찬가지로 버튼의 이벤트를 생성하신 후 다음과 같이 적어줍니다.

private void btnOff_Click(object sender, System.Windows.RoutedEventArgs e)
  {
   myMusic.Stop();
   }

11. 빌드를 하여 확인합니다 - 잘 되시나요?

음악의 출처는 http://iso50.com/ 입니다

버튼의 스타일 수정 및 visualstategroup의 애니메이션 기능을 추가하여
좀 더 화려하게 플레이어를 만드실 수 있으시리라 생각합니다.

그럼 다음시간때 뵙겠습니다.