정글아카데미 마지막 강의시간에 한 분이 유명한 곳 몇군데 알려달라고 요청하셔서,
제가 알고 있고 써봤거나 회사에서 구입해 본 몇 곳만(!) 알려드립니다.
물론 검색해보시면- 더 다양한 곳을 찾으실 수 있겠지만 ^^

Telerik 
Demo : http://demos.telerik.com/silverlight/

Infragistics
Sample Browser :   http://labs.infragistics.com/silverlight/lobsamples/2009.2/

Component one
Studio for Silverlight Control Explorer : http://demo.componentone.com/Silverlight/ControlExplorer/

상세한 컴포넌트의 장단점에 대해선 말씀드릴수가 없네요-
각 프로젝트의 성격에 맞는 녀석을 설명을 잘~ 보고 선택하시면 될 듯.


그리고 써보진 않았지만, 컴포넌트와 차트로 유명하다는

SoftwareFX
Chart FX for WPF : http://www.softwarefx.com/sfxNetProducts/ChartFX/wpf/
Chart FX Silverlight Add on : http://www.softwarefx.com/sfxNetProducts/ChartFX/silverlight/

가 있습니다.

Silverlight, WPF등 프로젝트에서 컨트롤 커스터마이징이나 기능구현등을 직접하기도 하지만,
개발 공수에 따라 필요한 기능이 구현되어있는 컴포넌트를 구입해서 사용하는 경우도 많죠.

디자이너인 저는 프로젝트 들어가기 전에 벤치마킹을 위해 종종 들러 데모들을 둘러보곤 합니다.
아직 Silverlight, WPF Application에 익숙하지 않은 디자이너에게는
시각적으로나 컨트롤의 구조이해에 제법 도움이 되니 참고하세요.
저작자 표시 동일 조건 변경 허락
신고
posted by K8

 
Expression Blend3 preview - 1.인터페이스 에 이어서 Photoshop import - 테스트를 해봤습니다.

이슈는 Photoshop ans Illustrator import였는데,
illustrator랑은 친하지도 않고 라이센스도 없으며 있어도 거의 사용하지 않기 때문에~
(쓸 일 있으면, 요즘은 왠지 간단한 Expression Design으로 해결!)

저와 친한 Photoshop만 ~ (사이좋게 지내자 - ㅠ_ㅠ)



Photoshop은 *.psd, Illustrator는 *.ai 파일이 import가능하군요.

1. PSD파일을 하나 import 해봤습니다.
먼저, 어디에서든 import해도 문제가 많이 생길것만 같은 레이어 많은 psd를 선택해 보겠습니다.



원본은 이런모습의 ! (CodeSafe 홈페이지 시안입니다! _ 어어;; 이거 맘대로 썼다고 혼나면....? ;;)
layer가 100개이상 들어있고 group도 10개 이상, Mask, Layer style, path까지 들어있는 10MB가 넘는 덩치 큰 시안 입니다.
얼마나 어떻게 Import될지 두근두근합니다-



File 메뉴에서 Import Adobe Photoshop File 을 클릭하고 import할 파일을 선택하면,



오우- 노!!!!
이제, import를 어떤 경우에 쓸 수 있을지... 잘 살펴보겠습니다.



CodeSafe 시안이 엉망이 되어버렸군요!!
먼저 , 예상했듯..

1. 메인네비게이션 - clipping mask 가 사라졌군요.
2. 블랜딩이미지의 - 화살표는 opacity와 fill로 투명도를 조절해뒀는데 opacity는 잘 따라오는데, fill의 값은 import 못 했군요.
3. Hosting, ALM, TFS 색들이 짠- 나타난 것을 보니 Layer blanding 옵션도 안되는 군요.

4. 위의 세개는 예상했지만, Text들의 글자간격, 줄간격 값이 변했고,
5. 전체 포지션들도 어긋나는것을 볼 수 있습니다!

object패널을 보면-



group들도 적용이 되고 - 마스크등등으로 얽혀있던 레이어들을 깔!끔 - 하게 모조리 이미지로-
그리고 text들은 살려서 text block으로-
(이런 모습은 훌륭하군요!!)



그리고 생성된 이미지들은 (전부다 png ! - 다른 포맷으로 설정하는것은 안보이네요.)
import한 'psd파일이름_Images' 에 자동 저장되네요.

생성된 이미지 폴더의 속성을 보면 156개의 이미지가 생성되었고, 총 용량은 2.56MB 정도 되네요 - .

이번엔, 좀 간단한 psd파일을 import해보겠습니다.



얼마전 이미지 탭메뉴에서 사용했던 고양이들의 psd 입니다.
깔끔하게 불러왔습니다.
레이어도 그룹별로 나누어져 있습니다.
이런 기능이 전에도 있었으면 고양이들을 하나하나 따로 잘라내는 작업은 줄일 수 있었겠군요.

+ TIP :

Import 창에서 Compatibility Layer에 체크를 하시면 ~
레이어와 상관없이 -
PSD원본 그대로 View의 PNG 하나만 생성됩니다. 말그대로 합체!
(포토샵에서 디자인의 사본 이미지를 png로 저장해서 blend에 불러온것과 같은 느낌!)

결론 >>
프로젝트에 사용해야할 이미지들이 한가득이고, 라이브러리를 포토샵으로 이미지 작업 했을 경우 - 한번에 레이어 별로 프로젝트에 추가할 때는 유용하게 쓸 수 있겠군요.

image set를 psd로 만들어서 정리만 한 뒤, 프로젝트에 import한다던지...

아무튼 좋은 수단이 되어 주었으면 좋겠습니다. (뭐든 유용하게 쓰면 좋은 수단!)
저작자 표시 비영리 변경 금지
신고
posted by K8
WPF관련 자료를 찾다보니 ' WPF 툴킷 2009 3월 릴리즈- ' 를 찾아버렸네요-



먼저, DataGrid, DatePicker, Calendar에 관련된 제일 많이 나오던 버그들을 고쳤다하고- 
아래와 같은 내용이 포함 ~


- Fixes for top priority issues and frequent pain points, including:
- DataGridColumn * width designer crash issue
- Un-clickable popups in DataGrid RowDetails
- DatePicker crash when setting IsEnabled to False
- DatePicker SelectedDate binding is not TwoWay by default
- And many more!
- The same components as the January 2009 release, including:
- V1 of the WPF DataGrid
- V1 of the DatePicker/Calendar
- Preview of VisualStateManager (VSM)

VSM 을 프리뷰 - !!
Blend 3을 프리뷰 해봤더니, WPF 프로젝트에서 State 패널이 있던데 -
그 외 컨트롤들이 새로워졌고, 개선되었고...

설치 하실때는 당연히, 이전 버젼 툴킷을 삭제 하셔야 합니다-



소스들어있는 녀석을 다운 받아 압축을 풀면 ~ 이런 것들이 ~
-_- 저도 언젠가는 툴킷을 더 유용하게 사용 할 수 있는 사람이 되면 좋겠네요.




저작자 표시 비영리 변경 금지
신고

'Blend3 > WPF' 카테고리의 다른 글

TFS support in Blend 3  (1) 2009.05.11
WPF Toolkit - March 2009 Release  (2) 2009.04.08
이미지 체크박스 만들기  (0) 2009.03.17
이미지 탭메뉴 만들기  (8) 2009.02.19
posted by K8
안녕하세요, 로밍(Roaming)입니다.
무조건 따라하기 류 - (마음대로) Expression Blend, WPF 디자인 강좌 세 번째를 시작하고 있습니다 ㅇㅅㅇ)/

이번에는 이미지 체크박스 를 만들어 보겠어요.



1. 먼저 디자인을 해보았습니다.
이렇게 생긴 체크 박스를 만들어 볼까해요. 기존 체크 박스와 유사(!) 하지만, 
연필로 그린 듯한 박스와 체크 하면 빨간색 색연필이 스르륵 - 체크를 하는 애니메이션이 들어가는 체크 박스입니다.


 


2. 새 프로젝트를 생성 합니다.




3. CheckBox 컨트롤을 더블 클릭 해서 추가합니다.




4. CheckBox의 템플릿을 변경하기위해,
CheckBox를 선택하고 Edit Control Part (Template) > Create Empty 를 클릭합니다.




5. Template의 적당한 이름을 지어 주고 OK




6. CheckBox의 Default를 먼저 정의 합니다.
CheckBox에서 Content를 받아올 Content Presenter를 추가해 봅시다.
Toolbar에서 Asset Library 버튼을 클릭합니다.




7. 여러가지 자산!(Asset)이 있군요!
ContentPresenter를 선택합니다.




8. Toolbar에 새로 나타난 ContentPresenter를 Double-click 해줍니다.
 컨트롤들은 Double-click 으로 간단히 추가가 가능합니다.




9. Double-click 으로 추가된 ContentPresenter는 기본적으로 Width와 Height가 0 이군요!




10. ContentPresenter를 선택하고 Layout 패널에서 Width와 Height 옆 아이콘을 클릭하여 Auto로 사이즈를 변경해 줍시다.




11. 이제, 디자인해서 잘라둔 이미지 파일들을 불러 옵니다.
프로젝트에서 오른쪽 마우스를 눌러 Add New Folder를 클릭하면, 새로운 폴더가 생성됩니다.




12. Image들을 담아둘 폴더 이므로 Images라고 이름을 지어줬습니다.




13. Images 폴더에 Image들을 불러오기위해 폴더에서 마우스 오른쪽클릭을 하고,
Add Existing Item... 을 클릭합니다.




14. 이미지의 이름들은 미리 정해 두었어요.
img_check - 빨간 체크이미지
img_checked - 체크박스가 체크되었을때 배경
img_default - 체크박스가 Default일때 배경
img_enabled - 체크박스가 비활성일때 배경







15. 추가된 이미지를 Grid에 Drag & Drop 하면 이미지들이 추가 됩니다.
헷갈리지 않게, 이미지에 맞게 프로젝트에서도 이름을 붙여주었습니다.




16. ContentPresenter와 이미지들이 나란히 나오기 위해 StackPanel을 만들꺼에요.
ContenPresenter와 '이미지들'의 묶음이 나란하기 위해 이미지들을 Grid로 Group을 지어줍니다.




17. Grid가 사이즈가 마음대로 들쭉날쭉 거리지 않기 위해 Width와 Height를 잡아줬어요.




18. 이제, 이미지 묶음들인 Grid와 ContentPresenter가 나란히- 하기 위해 ,
이 둘이 속해 있는 Grid를 StackPanel로 바꿔 줍니다.




19. 나란한데, 뭔가 제가 의도하는 나란- 이 아니군요!
StackPanel을 선택하고 Layout 패널에서 OrientationHorizontal로 변경해줍니다.




20. 그리고 CheckBox와 ContentPresenter가 찰싹 붙어 있지 않게 왼쪽 Margin을 5 정도 주겠습니다.




21. Defaul의 모양을 정의 하고 있었습니다!!
Check를 선택하고 Check가 나와야할 적절한 위치를 잡아줍니다.

이 Check는 ClippingPath를 써서 가려뒀다가, 쓱싹 그리는 듯한 애니메이션을 줄겁니다.



22. ClippingPath 를 만들기 위해 Check를 가릴 영역을 Rectangle툴로 그려줍니다.
물론, 이미지들 이 들어 있는 Grid안, Check 이미지 위에 있어줘야겠습니다.




23. 저는 Rectangle이 잘~ 보이기 위해 노란색으로 바꿔주었습니다.
Check이미지와 Rectangle이 겹치는 부분만 눈에 보이는 Clipping Path 이므로,
Default에서는 Rectangle을 Check와 겹치지 않게 그림처럼 위치를 옮겨줍니다.




24. Ctrl 키를 누르고 Check와 Rectangle을 클릭하면 다중 선택이 가능합니다.
이 두 아이들에 마우스 오른쪽버튼을 클릭하여 Path > Make Clipping Path를 만들어 줍니다.




25. ClippingPath가 생성되면서, 둘은 합쳐지고-
그림과 같이 Rectangle이 보라색 테두리로 변하고 Check가 더이상 우리 눈에 보이지 않게 됩니다.




26. Default 모양을 이어서 정의해 봅시다.
Default에선 CheckedBg가 보일 필요가 없으므로 checedBg를 선택하고 Apperance패널에서 Opacity를 0%로 지정해 줍니다.

마찬가지로, enabledBg도 Opacity를 0%로 바꿔주세요.



27. 이제 Property를 추가해서 CheckBox가 Select되었을때와 비활성화 일때의 모양을 정의 해 보겠습니다.
Triggers패널에서 Add property trigger버튼을 클릭하여 trigger를 추가해줍니다.




28. trigger가 생겼네요!
target! element! IsChecked! 우리가 영어에 약하다 한들- 이 정도 쯤은 알아볼 수 있습니다.
트리거는 매우 쉽군요. target이 checked되었을때!
Actions when activating , 액션이 엑티브될때!
Add new action 버튼을 클릭하여, 빨간체크를 쓱싹하는 애니메이션 StoryBoard를 추가해 봅시다.




29. Storyboard가 추가 되었습니다.
이 Storyboard를 알아보기 쉽게 이름을 바꿔 주겠습니다. sbCheck -




30. 이제 check이미지를 빨간체크가 쓱삭 그리는 애니메이션을 만듭니다.
check를 선택하고 Record Keyframe 버튼을 클릭해서 0초 일때 프레임을 하나 만들어 줍니다.




31. 0초에 만들었으니, 움직이기 시작하는 0.2초 쯤에 프레임을 하나 더 추가 해주고,
Clipping Path을 움직여 주기 위해-  Toolbar 에서 Direct Selection 을 선택합니다.

보라색 테두리가 왠지 활성화 된 느낌으로 변합니다.



32. 보라색 테두리들의 꼭지점을 ctrl 키를 누른채 하나씩클릭하여 전부 선택해 줍니다.
그림처럼 선택된 꼭지점은 파랗게 변합니다!




33. 왼쪽 획은 슥- 하고 그려질 것이므로 한번에 다 보이게 Check위에 보라색 테두리를 겹쳐 줍니다.




34. 같은 방법으로 0.4초지점으로 옮겨 프레임을 하다 더 추가한후 오른쪽 획을 반쯤 보여주게 움직여봅시다.




35. 같은 방법을 0.6초지점에서 체크의 모두가 보이게 만들어 줍니다.




36. 그리고 checked되었으니 아까 0%로 만들어 두었던 checkedBg를 선택하고 0.6초 지점에서 프레임을 추가한뒤,
Opacity를 100%로 변경해서 보이게 해줍시다.




37. 같은 방법으로 defaultBg는 안보이게 Opacity를 0%로 변경해줍니다.

sbCheck는 다 만들어진듯합니다.
trigger로 돌아갑니다.



38. Triggers패널의 IsChecked로 돌아가서
Actions when Deactivating에 Add Action 버튼을 눌러 액션을 추가합니다.
checked상태가 아닐때는 Default상태로 돌아가기 위해 sbCheck를 Remove해줍니다.




39. IsChecked가 True일때! 여야 하기 때문에  False를 True로 바꿔 주겠습니다.
옆에 화살표를 눌렀는데도 True 옵션이 뜨지 않아 곤란해 하시는 분을 봤는데,
그냥 타이핑 해 주시면 됩니다 !

checked는 다되었군요.
이제 enabled일때의 모양을 정의 해 보겠습니다.



40. checked 추가 했을 때와 같은 방법으로 Add Property 버튼을 클릭합니다.
target-element ! IsEnabled를 선택해 줍니다.




41. Enabled 일 때는 DefaultBg가 보이지 않아야 하므로,
defaultBg를 선택하고 opacity를 0%로 변경해줍니다.
Properties when active에 뭔가 추가 된게 보이는 군요!




42. 마찬가지로 0%로 보이지 않았던 enabledBg는 보여야 하므로 opacity를 변경해줍니다.
저는, 처음 디자인한 의도 와는 달리 좀 더 희미- 하게 보이고 싶어서 Opacity를 80%로 변경해줬습니다.




43. 비활성화 되어있는 CheckBox 의 content도 역시 희미- 하게 보이는 것이 좋을 듯 하여,
Opacity를 60%로 변경 해 주었습니다.

properties when active! active 되었을 때 특성들! 세줄이 생겼습니다.
이제, 체크되었을때와 비활성화 되었을때가 다 되었네요.



44. Return scope to Window 버튼을 클릭하여, Template edit에서 빠져나가 봅시다.




45. 이것저것 체크할수 있는 항목들을 만들어 보기 위해  CheckBox컨트롤을 3번! 더블클릭하여,
CheckBox를 세개 더 추가해 보겠습니다.




46. 추가 된 CheckBox들을 나란히- 나란히 하기 위해 모두 선택한 다음 StackPanel로 Group을 지어줍니다.




47. 이제, 템플릿이 적용되어 있지 않은 CheckBox들에게 템플릿을 적용합니다.
CheckBox에서 마우스 오른쪽 버튼을 클릭한 다음 
Edit Control Parts ( Template) > Apply Resource > CheckBoxPencilTemplate 을 선택하여,
모두 템플릿을 적용해 줍니다.




48. CheckBox 들이 너무 찰싹 붙어 있군요. Margin을 조절해서 거리를 좀 두는게 좋겠습니다.




49. 저는 문구 친구들을 선택하고 싶어서 이름들을 바꾸어 주었습니다.
CheckBox를 선택하면 Property패널에서 이름을 넣어줄수도있고,
CheckBox를 선택하고 마우스 오른쪽 버튼을 클릭하여 이름을 넣어 줄 수도 있습니다.
(XAML 에서 Content="연필" 이렇게 넣어줘도 됩니다)




50. 특별히, '자' 는 선택하지 못하게 하고 싶으므로... 자를 비활성시켜주겠습니다.
자 CheckBox를 클릭하고 Common Properties패널에서 InEabled의 체크를 해제하여 False로 만들어 버리겠습니다!

이제, 다되었군요!!!



51. Project > Test Solution을 클릭하여 테스트 해 볼까요?
Test Solution은 자주 쓰는 메뉴이므로 단축키 F5 쯤은 외워버리는게 좋겠습니다.




짠- 빨간체크 쓱삭 체크박스가 완성 되었습니다.
제 체크박스들 png 파일과 소스 첨부할께요.

저작자 표시 비영리 변경 금지
신고

'Blend3 > WPF' 카테고리의 다른 글

WPF Toolkit - March 2009 Release  (2) 2009.04.08
이미지 체크박스 만들기  (0) 2009.03.17
이미지 탭메뉴 만들기  (8) 2009.02.19
Title Bar없는 Window만들기 3. 이미지버튼 템플릿  (2) 2009.02.19
posted by K8

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. 이미지버튼 템플릿 - 끝 -

신고
posted by K8

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. 이미지버튼 템플릿

신고
posted by K8

안녕하세요, 로밍(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. 이미지버튼 템플릿

신고
posted by K8


티스토리 툴바