Chapter 2. 화면이 나오지 않는 TV - 1



이번 강좌는 간단하면서도 재미있는 예제입니다. 뭐가 재밌냐구요?
티비를 켜보세요 아무것도 안나오죠? ㅋ

( __) 시작합니다.

1. 블랜드를 켜고 tv 라는 이름으로 솔루션을 생성합니다.


2. 분홍상자 안의 [UserControl]을 선택 후 오른쪽의 Properties 탭을 선택하여 아래 Layout 항목에서
   Width : 380 / Height : 550 으로 줍니다.


3.위에 첨부한 tv_images.zip을 다운받아 압축을 풀어 전체선택 후 Ctrl + C 합니다.


4. tv 에서 마우스 우클릭 > Add New Folder 합니다


5. Images 라고 입력후  마우스 우클릭 > Paste 합니다.


6. Images 폴더 안의 tv.png 파일을 화면으로 끌어온 후 이름을 tv로 변경 합니다.


7. tvZz0.png 파일을 화면으로 끌어온 후 이름을 zz0으로 줍니다.


zz0을 선택한 후 Width : 193 / Height : 155로 줍니다.

*  tvZz1.png, tvZz2.png 파일도 화면으로 끌어온 후 이름을 zz1, zz2로 준 후 Width : 193 / Height : 155로 줍니다.

8. Ctrl을 누른채로 zz0, zz1, zz2 를 선택합니다.


다중선택을 유지한 채로 Object > Align > Horizontal Centers를 해줍니다.
]

다중선택을 유지한 채로 Object > Align > Vertical Centers를 해줍니다.

9. 분홍색 상자안의 세 개체 (zz0, zz1, zz2)를 모두 선택한 채로 마우스 우클릭 > Group Info > Canvas 합니다.
   (새 개체를 캔버스로 감싼것입니다.)


10. 캔버스를 선택하고 티비 이미지에 맞게 이동시킵니다.


11. tvHighlight.png 를 끌어옵니다.


티비 화면에 맞게 크기를 줄입니다.


Opacity를 40으로 줍니다.


12. 잠시 아래 분홍색 상자와 같이 캔버스의 눈을꺼서 안보이게 하면 tvHighlight.png의 모양을 잘 보면서 줄일 수가 있지요...


13. tvShadow.png를 화면으로 끌어옵니다.


티비에 맞게 크기를 줄입니다.


14. 이제 tv와 tvHighlight.png,  tvShadow.png는 안건드릴꺼니까 아래처럼 자물쇠로 잠궈 놓을게요~ ㅋ


15. 이제 티비를 켜고 끄는 버튼을 만들 차례입니다.
도구에서 사각형을 선택합니다.


16. 티비의 적당한 위치에 사각형을 그리고 노란상자의 Fill을 선택한 후 #FFCCCCCC을 입력합니다.

Stroke를 선택 후 #FF868686으로 지정합니다.
RadiusX : 3 / RadiusY : 3으로 지정합니다.
Width : 33 / Height : 17 로 지정후 잘 위치 시킵니다.


17. 버튼안에 ON이라는 글자를 써 넣기 위해 텍스트블록을 선택합니다.


18. 화면에 대고 한번 클릭후 드래그 한후 TextBlock글자를 선택 후 ON으로 바꿉니다.


크기를 잘 맞춘후 사각형 위에 위치 시킵니다.


19. Ctrl을 누르고서 사각형과 텍스트를 두개를 선택 후 마우스 우클릭 > Group Info > Canvas 를 선택합니다.


캔버스를 선택 후 마우스 우클릭 > Rename을 선택합니다.


btn_On으로 이름을 바꿔줍니다.


20. 위와 같은 방법으로 아래와 같이 btn_Off도 똑같이 만들어줍니다.



이제 화면 설정은 모두 완료 되었습니다.
동작 부분은 다음에 이어서 할게요...