오늘은 위와 같은 웨이브 효과를 만들어 보고요...
유저컨트롤 이라는 것을 어떻게 만들어서 어떻게 활용하면 좋은지도 알아보겠습니다.
시작합니다.

1. waveMotion 이라는 이름으로 프로젝트를 생성합니다..

2. UserControl을 선택하고


Width : 640  / Height : 200 으로 변경합니다.


3. LayoutRoot 를 선택하고


백그라운드를 그라데이션으로 준 뒤 속성을 변경합니다.
그라데이션의 시작지점을 #FF01407E로 끝지점을 #FF00CCCC로 설정합니다.


4. 아래와 같이 배경이 만들어졌습니다.


이제 웨이브의 선을 만들어 볼 차례입니다.

5. 펜툴을 선택하고 아래와 같이 그립니다.

아래처럼 펜으로 한 점을 찍고요~
 

적당한 거리를 두고 한점을 또 찍어요~
(여기서 Shift 키를 눌르고 찍으면 앞에 찍은 점과의 수평의 위치에 찍을 수가 있지요..)
찍은 점을 놓지 마시고 누른 상태를 유지해 주세요..


그리고 아래 3번 처럼 주욱~ 당겨서 볼록한 언덕 모양을 만듭니다.


셀렉션 툴을 선택하여 펜툴을 해제합니다.

6. 우리가 그린 언덕모양을 선택하고


Brush속성의 Fill을 NoBrush 로 줍니다.


아래와 같이 선만 남게 됩니다.


7. 언덕모양을 선택하고 Ctrl + Shift 를 누르고 오른쪽으로 아래와 같이 끌어당깁니다.
    (Ctrl은 개체를 복사하는것이고, Shift는 수평이동을 하게 해주는 부분입니다~ )


8. 끌어서 복사한 개체를 선택하고


Object > Flip > Vertical 을 선택하여 뒤집어줍니다.


아래와 같은 모양이 됩니다.


9. 잘 움직여서 아래와 같이 두 선이 잘 이어지도록 맞춥니다.


아래처럼 확대를 해서 맞추면 유리합니다.


10. 선이 잘 이어지도록 잘 맞추었으면..
두 개체를 같이 선택하고 마우스 우클릭 > Path > Make Compound Path를 선택합니다.


아래처럼 두 패스가 하나로 이어졌습니다.


11. 잘 이어진 패스를 선택하고 앞에서 한것을 반복합니다.
Ctrl + Shift 를 누르고 오른쪽으로 아래와 같이 끌어당깁니다.


두선이 잘 이어지도록 맞춘후 마우스 우클릭 > Path > Make Compound Path를 선택합니다.
하나로 다시 어어졌습니다.


12. 잘 이은 패스의 속성을 아래와 같이 변경합니다. (흰색을 주고 약간 투명하게 해준것이지요~)


아래처럼 선의 색이 변했습니다.

* 여기까지 하고 잠깐!!!  지금까지 파도 모양의 패스를 만들었습니다.  이제 파도가 움직이는 스토리보드를 만들건데요...  그냥 스토리보드를 만드는게 아니라 유저컨트롤이라는 것을 만들어서 그안에서 스토리보드를 생성할거에요~  우리는 지금까지 스토리 보드를 그냥 Page.xaml에서 만들었는데요.  여기서는 유저컨트롤이라는 것을 만들어서 필요할때마다 재사용할 수 있게 해주려고 합니다.  플래시의 무비 클립과 같은 것이고, HTML로 비교해서 설명해 보자면  .js 파일을 만들거나 .css 파일을 만들어서 필요한 페이지에서 참조해서 사용하는 것과 비슷한 개념으로 보면됩니다.  아래를 이어서 계속 하얀코코를 따라하시면 정확히 무엇인지 알게 되실거에요~  자! 힘내세요~ >>ㅑ~~~~

13. 파도 패스를 선택하고.

Tools > Make Control 을 선택합니다.


아래와 같은 팝업창이 나오는데요

음~ 간단히 설명을 붙이자면.
체크를 하면 기존 화면에 있던거는 놔두고 유저컨트롤을 생성하구요.
체크를 하지 않으면 화면에 있던거 자체를 유저컨트롤로 만들어요.

여기서는 UserControl1이라는 네임으로 하고 체크는 하지 않고 그냥 OK하겠습니다.


14. UserControl1.xaml의 화면이 오픈되었습니다.


파일트리를 봐도 UserControl1.xaml이 생성 된 것을  알수가 있지요.


15. 패스를 선택하고


아래와 같이 화면을 19%로 축소하고 원래 크기의 3배정도로 넓이를 늘려줍니다.


16. 늘려준 패스를 선택하고 Ctrl + C 하고 Ctrl + V 합니다.


변화가 없는듯하지만 아래의 분홍색 상자처럼 패스가 복사된 것을 알수가 있습니다.


17. 위의 패스를 선택하고 자물쇠로 잠궈줍니다.


18. sb_wave 라는 이름으로 스토리보드를 생성합니다.


19. 잠그지 않은 패스를 선택하고 타임라인을 2초의 위치로 이동시킵니다.


20. 화면을 축소하고 패스를 선택 한 후

왼쪽으로 이동시킵니다.


그런데 어디까지 이동시켜야 하냐면~~
아까 우리가 잠궈놨던 패스를 보면서 이동시켜주셔야 해요.

21. 화면을 확대해서

아래처럼 아까 잠궜던 패스의 위치와 정확하게 맞춥니다.


22. 플레이를 눌러보면  패스가 이동 하는 것을 확인 할 수가 있어요..


23. 스토리보드의 네임을 선택하고


RepeatBehavior를 Forever로 줍니다.


24. 아까 잠궜던 패스를 없애겠습니다.
자물쇠를 클릭하여 해제 하고 Delete키를 눌러 삭제합니다.


아래와 같이 없어졌습니다.


25. UserControl1.xaml에서 마우스 우클릭 > Edit in Visual Studio 를 선택합니다.
또는 UserControl1.xaml.cs 파일을 에디터에서 엽니다.


26. 소스를 열면 아래와 같이 초기화 부분이 있고 (개발자들은 생성자라고 부릅니다.)

public partial class UserControl1 : UserControl   {        public UserControl1()        {             // Required to initialize variables               InitializeComponent();        }  }

아래와 같이 sb_wave.Begin(); 을 넣어줍니다.

public partial class UserControl1 : UserControl   {        public UserControl1()        {             // Required to initialize variables               InitializeComponent();               sb_wave.Begin();        }  }

저장하고 닫습니다.

너무 길어서 다음장에 이어서 해야 겠습니다.
바로 올릴테니 조금만 기다려 주세요~~~