[예제로 배우는 Expression Blend] Chapter 4. 웨이브 효과 - 2 (유저컨트롤 사용하기)
Expression Blend 2008/11/30 22:55 |
Chapter 4. 웨이브 효과 - 2 (유저컨트롤 사용하기)
28. Project > Build Solution 을 선택합니다.
29. 빌드가 성공하면 유저컨트롤의 패스가 물결처럼 막 움직입니다.
30. 너무 정신이 없으니 일단 UserControl1.xaml.cs 파일을 에디터에서 열어서
아래와 같이 sb_wave.Begin(); 을 주석처리 할게요..
저장하고 닫습니다.
31. Project > Build Solution 을 선택하면 물결처럼 움직이던 것이 멈춥니다.
일단 이상태로 작업을 하겠습니다.
32. Asset Library
를 선택합니다.
아래와 같이 창이 열리면 Custom Controls 탭을 선택합니다.
그러면 사용자가 만든 컨트롤들을 보여주는데.. 우리가 만든 UserControl1도 이 안에 들어가 있는걸 알수있어요.
UserControl1을 선택합니다.
그러면 툴바의
안에 UserControl1이 들어가게 되요~
33.
를 선택하고 화면에 사각형을 그리듯 하여 넣어줍니다.
자연스러운 물결이 되려면
처음에 있었던 물결과 비슷한 크기로 그리고 약간 왼쪽으로 이동시킨 위치에 놓아주면 좋아요..
34. 물결하나만 더 넣어줘 볼까요...
유저컨트롤을 선택하고 Ctrl + C 하고 Ctrl + V 합니다.
아래와 같이 복사되었습니다.
35. 복사된 UserControl을 선택한 상태에서 아래와 같이 Object > Flip > Horizontal 합니다.
좌우를 바꾸는 것이에요~
36. 좌우를 바꾼 후 약간 위쪽으로 올려주고 왼쪽으로 빼주었습니다.
37. 아까 주석처리 해놨던 sb_wave.Begin(); 를 풀어줍니다.
저장하고 닫습니다.
38. 블랜드로 와서 F5를 눌러 실행합니다. (소스는 첨부하였습니다.)
모두 수고하셨습니다.
이해가 안되는 부분이 있으면 언제라도 알려주세요..
소스는 아래에 첨부합니다.
[ 응용예제 ]
27. Page.xaml로 왔더니 아래와 같은 화면이 되어버렸습니다.
걱정하지 마세요 정상적인 메시지입니다. 하얀코코가 해석을 해드릴게요..
 |
| This control has been modified. 이 콘트롤은 수정되어졌습니다. Please rebuild the project for the changes to show in Design view. 제발 다시 빌드해 주세요 이 프로젝트를... 디자인뷰 안에 보여지는 것을 변화시키기 위해서~~ ㅋㅋㅋ |
28. Project > Build Solution 을 선택합니다.
 |
29. 빌드가 성공하면 유저컨트롤의 패스가 물결처럼 막 움직입니다.
 |
30. 너무 정신이 없으니 일단 UserControl1.xaml.cs 파일을 에디터에서 열어서
| public partial class UserControl1 : UserControl { public UserControl1() { // Required to initialize variables InitializeComponent(); //sb_wave.Begin(); } } |
31. Project > Build Solution 을 선택하면 물결처럼 움직이던 것이 멈춥니다.
일단 이상태로 작업을 하겠습니다.
32. Asset Library
 |
아래와 같이 창이 열리면 Custom Controls 탭을 선택합니다.
 |
그러면 사용자가 만든 컨트롤들을 보여주는데.. 우리가 만든 UserControl1도 이 안에 들어가 있는걸 알수있어요.
UserControl1을 선택합니다.
 |
그러면 툴바의
 |
33.
|
 |
자연스러운 물결이 되려면
처음에 있었던 물결과 비슷한 크기로 그리고 약간 왼쪽으로 이동시킨 위치에 놓아주면 좋아요..
34. 물결하나만 더 넣어줘 볼까요...
유저컨트롤을 선택하고 Ctrl + C 하고 Ctrl + V 합니다.
 |
아래와 같이 복사되었습니다.
 |
35. 복사된 UserControl을 선택한 상태에서 아래와 같이 Object > Flip > Horizontal 합니다.
좌우를 바꾸는 것이에요~
 |
36. 좌우를 바꾼 후 약간 위쪽으로 올려주고 왼쪽으로 빼주었습니다.
 |
37. 아까 주석처리 해놨던 sb_wave.Begin(); 를 풀어줍니다.
| public partial class UserControl1 : UserControl { public UserControl1() { // Required to initialize variables InitializeComponent(); sb_wave.Begin(); } } |
38. 블랜드로 와서 F5를 눌러 실행합니다. (소스는 첨부하였습니다.)
모두 수고하셨습니다.
이해가 안되는 부분이 있으면 언제라도 알려주세요..
소스는 아래에 첨부합니다.
waveMotion.zip[ 응용예제 ]
댓글을 달아 주세요
강의 잘 보았습니다.
펜툴로 그린 패스 아래 쪽에만 필을 줄려면 어떻게해야하죠?
저는 위 아래로 번갈아가면서 색이 채워지더라구요..^^;
아.. 우선 답변 늦어서 정말 죄송합니다.
우선 제가 한 것은 익스프레션 디자인에서 그려서 가져온 것입니다.
블렌드에서 하기가 불편했기 때문입니다.
블렌드에서 하시려면 펜툴을 이용해서 위는 물결로 아래는 사각형으로 해서 그려주시면 됩니다