Roaming from the Earth

Title Bar없는 Window만들기 3. 이미지버튼 템플릿

자, 이제 거의 다 됐습니다.
이제 버튼에 디자인을 입히고, 마무리를 해보겠습니다.

 
닫기 버튼의 이미지들을 불러오기 위해 프로젝트 오른쪽 마우스를 클릭하여 Add New Folder를 선택하고
Images 폴더를 추가합니다.

  



닫기 버튼 normal과 rollover용으로 쓰기 위해 이미지를 png로 저장해 두었습니다.

 
Images폴더에 오른쪽 마우스를 클릭하여 Add Existing Item을 선택합니다. Image를 프로젝트에 추가합니다.

 




closeButton은 사용할 버튼 이미지 사이즈에 맞춰 layout에서 width, height 조절해줍니다.

 



closeButton에 마우스 오른쪽 버튼 클릭해서 Edit Control Parts(Template) > Create Empty 선택합니다.

 



버튼 컨트롤 템플릿의 이름을 설정할 수 있습니다.
Define in으로 템플릿을 지금 문서에서만 쓰는지 프로젝트의 application 에서 쓰는지 선택할 수 있습니다.
Application을 선택하면 템플릿이 app.xaml파일에 저장되므로,
이번엔 그냥 This document로 설정합니다.

 




아까 프로젝트에 추가해 뒀던 버튼에 쓰일 이미지(buttonClose_normal.png와 buttonClose_rollover.png) 들을 드래그앤드롭하여 추가합니다.

버튼에 마우스가 롤오버되면 하늘색으로 스륵 변하는 애니메이션을 추가할거에요.
 

Default에서 rollover이미지의 Opacity를 0%로 해둡니다.

이제 마우스 오버를 만들어봅시다.
 
Triggers 패널에서 +Property를 클릭하고 디폴트로 잡혀있는 IsCancel을 클릭하여 IsMouseOver를 선택합니다.

롤오버되었을때의 애니메이션을 만들어줍니다.
 
Actions when activating 의 오른쪽 + 버튼을 누르면 활성화 되었을 때 플레이 될 애니메이션의 Storyboard 를 생성할 수 있습니다. OK버튼을 누르면 Objects and Timeline 패널이 확장됩니다.

 




스토리보드 이름을 mouseover라고 붙여줬습니다.
Rollover 이미지를 선택하고 Record Keyframe 버튼   을 눌러 Keyframe을 하나 생성해주고 1초쯤 으로 스크롤을 옮겨서 다시 Record Keyframe 버튼을 눌러줍니다.

 
1초에 생성된 키프레임에서 rollover 이미지의 Opacity를 100%로 변경해줍니다.

다시 Triggers패널로 돌아가서
 
활성 되었을 때 mouseover 스토리보드를 Begin,
비활성에 Add new action버튼을 클릭해서 mouseover 스토리보드를 Remove 해줍니다.

이제 Window에 이름을 써주고 마무리를 해봅시다.
버튼 템플릿에서 빠져나옵니다.

 
Window의 Edit Control Parts > Edit Template을 클릭합니다.

 



TextBlock으로 윈도우타이틀을 쓰고!

 




컨텐츠 배경을 Rectangle 로 그려주고,
ContentPresenter를 Rectangle사이즈에 맞춰주고 Rectangle을 ContentPresenter 아래로 옮겨줍니다.

 



Project > Test Solution을 클릭해서 프로젝트를 테스트 해보면 끝!!

Title Bar없는 Window만들기 1. 프로젝트 생성과 Title Bar없는 윈도우 만들기
Title Bar없는 Window만들기 2. 윈도우 드래그와 닫기버튼
-------------------------------------------------------------------------------------------------------
Title Bar없는 Window만들기 3. 이미지버튼 템플릿 - 끝 -

Title Bar없는 Window만들기 2. 윈도우 드래그와 닫기버튼


이제 윈도우를 움직이게 할 부분과 윈도우 닫기 버튼을 만들어봅시다!

( 닷넷엑스퍼트 안재우수석님의 “WPF에서 Title Bar없는 윈도우/비정형 윈도우 만들기” 포스트를 참조했습니다. http://blog.naver.com/saltynut?Redirect=Log&logNo=120060516078 )
 

템플릿 수정에서 빠져 나와서,
윈도우를 잡고 움직일 핸들 부분을 Rectangle 툴로 그려주고, titlebar라고 이름을 붙입니다.
저는 잘~ 보이라고 다른색으로 그려줬어요. (나중에 opacity를 0%으로 바꿔주세요-  그럼 안보이겠죠!)

 


닫기 버튼이 들어갈 위치에 Button을 추가하고 closeButton이라고 이름을 붙입니다.
 


윈도우 옮기기와 닫기를 동작하게 하기 위해 MouseLeftDown 이벤트와 DragMove 메서드를 사용합니다.
위 titlebar와 closeButton XAML에 위 이벤트 핸들러를 추가합니다.

이제 윈도우 동작을 위해 .cs 파일을 조금 건드려 보겠습니다!!!



 
프로젝트를 생성한 폴더에 가보면 위 같이 여러가지 파일들이 생겨 있습니다.
그중 Window1.xaml.cs 파일을 open합니다.

저는 캡쳐 그림처럼 드림위버가 연결 되어있으나, Visual studio로 열어도 되고 notepad로 열어도 됩니다!

 


 
Open된 Window1.xalml.cs에 위 파란박스 안의 코드를 추가합니다.
(상세내용은 http://blog.naver.com/saltynut?Redirect=Log&logNo=120060516078 참고)




Title Bar없는 Window만들기 2. 윈도우 드래그와 닫기버튼 - 끝 -
-------------------------------------------------------------------------------------------------------
Title Bar없는 Window만들기 1. 프로젝트 생성과 Title Bar없는 윈도우 만들기
Title Bar없는 Window만들기 3. 이미지버튼 템플릿

안녕하세요, 로밍(Roaming)입니다.
겁도 없이 Blend WPF 디자인 강좌를 시작하고 있습니다.
ㅇㅅㅇ)/
다 쓰고 보니 너무 길어져서 3편으로 나누었습니다.

Title Bar없는 Window만들기 1. 프로젝트 생성과 Title Bar없는 윈도우 만들기

간단히 디자인을 먼저 해보았습니다.
 
이렇게 생긴 “어두운 마음의 윈도우”입니다.
상단 클릭 드래그하면 윈도우를 옮길 수 있고,
x버튼을 클릭하면 윈도우가 닫히는 기능이 있는 간단한 윈도우랍니다.

먼저,

New project 를 클릭해서 새프로젝트를 생성합니다.

 

WPF application을 선택하고 적당한 이름을 지어주고, OK클릭!

 
이런 윈도우 어플리케이션이 생겼습니다.

 



타이틀바가 없는 윈도우- 이기 때문에 타이틀 바를 없애 주기 위해 objects패널에서 window를 선택하고 properties 패널 Appearance에서 AllowsTransprency를 체크 해줍니다.
XAML코드가 추가 된 것이 보입니다!

디자인 해둔 윈도우가 480*360이므로 사이즈를 조절합니다. Layout 패널에서 Width와 Height를 조절해줍니다.

자 이제 윈도우 까만둥근 윈도우바닥을 만들껍니다!
 



Window의 컨트롤 파트 템플릿을 수정해서 디자인을 바꿉니다.
상단에 Window 클릭하면 Edit Control Parts (Template) > Edit a Copy 선택!
(오른쪽 마우스버튼 눌러서 해도 되고 다른 방법도 있지만, 이 방법을 쓰도록 하겠어요.)

 



Rectangle 툴을 써서 컨트롤 사이즈에 맞춰 까만 바탕을 그려줍니다.

 




까만 바탕은 자세히 보면 아주 진한 회색에 까만 border 들어가 있는 모양이므로,
Brushes 패널에서 Fill 의 컬러를 아주 진한 회색인 #ff1c1c1c으로 설정해줍니다.
Appearance 에서 Radius 값을 X, Y 각각 디자인대로 5씩 설정해줍니다.

 




Tip, 레이어 순서 설정.
특별히 위치를 정해서 그리지 않았다면, 현재 Rectangle이 가장 아래에 보이지만, 실제로는 가장 아래에 있는 object가 위쪽에 보이는 순이 Default로 되어있습니다.
Object패널 왼쪽아래 화살표를 누르면 우리에게 익숙한 순서 – object순서대로 리스트가 보이는 순서 – 로 바꿀 수 있습니다.
바뀐 순서에서 Rectangle을 아래로 드래그앤드롭 해주면 배경이 되겠군요!

 




이대로 두면 Border의 배경 컬러가 흰색으로 되어있기 때문에 Border 컬러를 Reset해주면
그럼 Background 가 No brush로 바뀝니다.
물론 다른 방법도 있습니다!!



Title Bar없는 Window만들기 1. 프로젝트 생성과 Title Bar없는 윈도우 만들기 - 끝 -
-------------------------------------------------------------------------------------------------------
Title Bar없는 Window만들기 2. 윈도우 드래그와 닫기버튼
Title Bar없는 Window만들기 3. 이미지버튼 템플릿