질문원본 URL :  http://cafe.naver.com/expressionstudio/2873

어떻게 사용하느냐에 따라 틀리겠지만,
사용하고 싶은 도형이 간단한 State를 가지면 아래와 같은 방법을 사용 할 수도 있습니다.

Control의 Template를 사용하여 사용할 Object를 Contents Presenter로 보여주고,
Control의 Template에서 사용할 State를 추가해서 사용하는 방법입니다.

아래는 간단한 예제입니다.
Button control에 새로운 State를 추가해서 사용해 보겠어요.


1. Silverlight Application을 먼저 생성합니다.


2. 간단하게 Button Control을 하나 추가해줍니다.


3. 버튼 컨트롤안에 바꿔 사용할 Object인 Rectangle을 넣어줍니다. 위 표시된 그림과 같이 Recactangle은 Button의 자식객체로 들어갑니다.


Button Template

4. Button > Edit Template > Create Empty 를 차례로 선택하여 Button Template 설정을 해보겠습니다.



5. Template Name은 간단히 지어주고,


6. 새로운 Template을 생성하면 위 그림과 같은 구조를 볼 수 있습니다.


7. 6의 표시된 영역에 ContentPresenter를 추가합니다.
순서와 같이
1) Toolbar에서 화살표를 클릭한 후
2) content라고 검색해주면
3) 쉽게 Content Presenter를 찾을 수 있습니다.

+ 위 ContentPresent의 Content는 Button의 자식객체와 자동으로 Binding 됩니다.


8. 위 그림과 같이 Grid의 자식 객체로 ContentPresenter를 추가합니다.



Add Visual State Group

9. 새로운 State Group을 추가합니다. 
1) States 패널을 선택후
2) Add State Group 버튼을 클릭해 새로운 State Group을 추가합니다.


10. 새로 추가한 State Group에서 Add state 버튼을 클릭해 설정할 State를 추가합니다.


11. 위 그림과 같이 간단하게 Scale200과 Scale100 State를 추가해 보았습니다.



12. Scale200 State에서 Content의 Scale이 두배로 커지게 설정 하고,
Scale100 State에서는 원래 크기를 가지는 State를 설정 할꺼에요.

1) Scale200 State를 선택하고,
2) grid를 선택한후
3) Transform 패널의 Scale 부분에서 X 와 Y를 각각 2로 설정해줍니다.

+ grid의 Scale을 설정해주었지만, Content 부분만 각스테이트별로 속성을 변경하려면 ContentPresenter의 Properties를 설정 해주시면 됩니다.

+ Content Presenter는 Content를 보여주는 컨트롤이므로 Content Presenter 자체의 Properties(크기, 회전 등)은 설정해줄수 있지만, Content 자체의 Properties에는 관여하지 않습니다.



13. Scale100은 원본크기이니 따로 설정할 필요가 없습니다.
그림의 Button 부분을 눌러 Template 수정에서 빠져나갑니다.



14. 편의를 위해 Button의 사이즈를 조절해주겠습니다.
위 그림과 같이 width, height를 Auto로 해두면 자식객체의 크기에 따라 자동으로 Size가 변경됩니다.



15. Button을 copy하여,



16. Layout Root에 붙입니다.
1) 위 방법말고도 버튼을 추가한뒤 방금 생성한 template을 적용해도 되고,
2) 아트보드에서 버튼을 copy n paste 하셔도 됩니다.



17. 새로 붙여넣은 버튼의 Rectangle에 Ellipse로 바꿔줍니다.

위와 같은 방법으로 Control Template에 새로운 Custom State를 추가해서 사용할수 있습니다.

+ Button Control은 하나의 자식객체만 가질 수 있으므로, 여러개의 Object를 Content로 사용하고 싶다면,
Grid를 자식객체로 쓰고 그 Grid안에 Object들을 추가하여 사용합니다.


State가 잘 작동하는지 보기 위해, 버튼과 GoToStateAction을 사용하여 State들을 확인해보도록 하겠습니다.



18. 위 그림은 두번째 Button의 Content를 Ellipse로 변경한 모습입니다.



GoToStateAction

19. 위 그림과 같이
1) 100, 200 이라는 Button을 추가해줍니다.
2) Asset panel을 선택하여
3) goto 라고 검색해주면,
4) 쉽게 GoToStateAction을 찾을 수 있습니다.
5) GoToStateAction을 100과 200 Button에 Drag n Drop 해서 각각 붙여줍니다.



20. 편의를 위해 버튼들의 이름을 바꿔주었습니다.
100, 200 Button과
Rectangle이 Content로 들어있는 Shape1과
Ellipse가 Content로 들어 있는 Shape2입니다.



21.
1) 100 Button에 붙여 놓은 GotoStateAction을 선택하고
2) TargetName의 2 버튼을 클릭하여,
3) Shape2를 대상으로 선택합니다.
4) State Name의 Select Box를 클릭하면 Shape2 가 가진 State들이 나옵니다.
5) 그중 Scale100 State를 선택해 줍니다.

+ GoToStateAction
SourceName (_200)에 어떤 EventName(Click)이 발생했을때, TargetName(Shape2)의 State를 StateName(Scale200)으로 변경해주는 Behavior입니다.



22. 21번 방법과 마찬가지로 200 Button의 GoToStateAction의 Properties를 Shape2의 Scale200 State로 가게 변경 시켜 줍니다.

23. F5키를 눌러 Run Project 합니다.
아래와 같은 결과를 얻을 수 있습니다.




도움이 되었나요?? :D
저작자 표시 동일 조건 변경 허락
신고
posted by K8
MS에서 Windows Phone Application Design을 위한 UI 가이드를 제공하고 있습니다.
windows design system을 코드네임 metro라고 부르고 있는데,
크게 벗어나지 않고 템플릿으로 뚝딱 뚝딱 뭔가 만들어 낼 수 있는 여러가지들을 제공하고 있습니다.

아니! 이것은 몹시 생산성은 높지만, 디자이너 입장에서는 어려운 과제가 아닐 수 없군요 :-/
감히 말해보자면, 디자이너 없이도 windows design system을 따르는 application을 만들기가 가능하다는 것-
(아래 링크중 windows phone 7 design templates의 프로젝트 파일을 열어보면... )

한편으로는 디자이너의 역할이 줄어들수도 있겠지만, 한편으로는 디자이너의 역할이 매우 중요한 부분이 될 수도 있겠네요.
각설하고-

파란색 표시된 링크들은 개인적인 소견으로 필수 링크입니다.


참고
자료 :

UI Design and Interaction Guide for Windows Phone 7 (PDF)

http://bit.ly/d9Xiey

 

Windows Phone 7 Design Templates

http://wp7designtemplates.codeplex.com/

Guide 따른 Design Templates for WP7 프로젝트 파일

 

Design Templates for Windows Phone 7 (87.6 MB)

http://go.microsoft.com/fwlink/?LinkId=196225

Guide PSD파일과 PDF문서, Font 포함되어있다.

PDF파일은 Application 쓰이는 Check Box, Radio Box, Button 등의 컨트롤 들의 Design Guide.


참고 사이트 :

MSDN - Design Resources for windows phone http://msdn.microsoft.com/en-us/library/ff637515(VS.92).aspx


Windows Phone Design Day Recordings

http://blogs.msdn.com/b/jaimer/archive/2010/08/13/windows-phone-design-day-recordings.aspx


shazaml design, LLC - Windows Phone UI templates

http://www.shazaml.com/archives/windows-phone-7-ui-templates


루현의 Expression Blend - http://ruhyun.tistory.com/

Kirupa.com http://www.kirupa.com/windowsphone/index.htm

Innovative Singapore http://innovativesingapore.com/2010/08/experession_phone/

 

Microsoft Expression Forum http://social.expression.microsoft.com/Forums/en-US/blend/threads
Silverlight Expression Studio Cafe http://cafe.naver.com/expressionstudio


그리고 기타 참고 사이트들 입니다.

저작자 표시 동일 조건 변경 허락
신고

'Blend4 > Window Phone 7' 카테고리의 다른 글

Windows Phone 7 Design Guide and...  (0) 2011.03.18
Windows Phone Application 만들 준비!  (0) 2011.03.16
posted by K8

Silverlight의 Visual States Data State BehaviorData Binding으로 간단한 메뉴 네비게이션을 동작 시켜 볼께요.
Sample Data Source로 부터 DataBinding된 ListBox로 된 네비게이션을 클릭하면,
각 메뉴에 맞게 state가 변경되어 Contents가 바뀌는 실습입니다.


몹시 간단한 실습이지만, project 파일 첨부하겠어요 LOL

 


1. 먼저  Silverlight Application Project를 만들어 줍니다.

 
2. New Sample Data… 버튼을 클릭하여,Menu Item을 넣어 줄Sample Data를 생성해 줍니다.

 
3. Add Collection Property 를 클릭하여, MenuSample이라 이름 붙인 Sample Data Source에 Menu명이 들어갈 Collection을 추가 해줍니다.

 
4.  새로 만들어진 Collection에 Add simple property 버튼을 클릭해서 menu명이 될 string type property 를 추가 해줍니다.

 
5. Collection1의 Edit sample values 버튼을 클릭해서 Menu  명을 임의로 바꿔볼께요.

 


위 그림과 같이 간단하게 Menu1, Menu2, Menu3 으로 메뉴명을 설정해주고 Number of records  는 3으로 설정하여 메뉴가 3개가 나오게 만들어 줍시다.


 
6. Collection1 을 아트보드위에 drag n drop하여, Menu  네비게이션이 될 ListBox를 생성해 줍니다.

 
*.  예제가 약간 그럴싸하게 보이기 위해 Header, Lnb, Contents 영역이 들어간 전형적인 Layout 을 급히 만들어 주었습니다.


 
7. 각 메뉴별 Contents 를 다르게 표현하기 위해 Contents영역에 Rectangle을 넣어서 Contents별로 색이 바뀌게 해보겠습니다.
TextBlock이나 각 메뉴마다 다른 UserControl 이 보이도록 할 수도 있겠죠.

 


Objects 들이 위 그림과 같이 구성되었습니다.

 
8. 이제 각 메뉴별  States를 추가 해 보겠습니다.
States panel을 열어 Add State Group > Add State 버튼을 차례로 클릭해 줍니다.
State Group 의 이름을  MenuStates로 바꿔 줬어요.

 
State를 3개 추가해서 위 그림과 같이 State 이름을 넣어줍니다.
*. 이 실습에서는 Menu이름과  State이름을  Binding 시킬것이기 때문에 둘을 똑같이 이름붙여줘야합니다.

 
 
 

 

9. Base 부터 각각 State 를 클릭하여, Contents 영역에 추가해 두었던 Rectangle의 Fill 속성을 그림과 같이 각각 다르게 설정해 줍니다.


 


10. Contents변경 확인용의 TextBlock을 Grid와 함께  Contents 영역에 넣어줍니다.

 


11. 위 그림처럼 Rectangle중앙에 위치시켜놓은 10번의 TextBlock에 Detail Mode의 Data 의 메뉴이름을 설정 해둔 Property1을 Drag n Drop하여 Binding 시켜줍니다.

 
12. 지금 추가시킬 Grid는 Menu 네비게이션의 Selected Item의 Text값에따라 같은 이름의 State로 보내줄 역할을 하게 만들어 줄 부분입니다.
Grid를 아트보드 구석에 하나 추가 해줍니다. Layout에 시각적요소로 영향을 미칠 object가 아니니 안보여도 되겠죠.

 


13. 만든  Grid에 Detail Mode > Collection1 > Property1 을 Drag n Drop해서 Binding 시켜줍니다.
Create a [TextBlock] and bind its Text property to …  라는 메세지가 뜨는데, Property type에 맞게 Databinding 된 TextBlock이 자동으로 생성됩니다.

 


XAML소스코드를 살며보면  위와 같이  Text=”{Binding Property1}” 텍스트 부분에 Property1이 binding 된것을 볼 수 있고,
이TextBlock의 부모객체인Grid에도 DataContext에 Collection이 binding  되어있습니다.


 


14. Asset Library > Behavior를 열어 13에서 만들어진 TextBlock에 메뉴에 따라 State 로 보내줄 DataStateBehavior를 Drag n Drop하여 붙여 줍니다.
(사실  이 Behavior는 대상의 Data를 설정해줄것이기 때문에Object 의 아무곳에 붙어도 상관이 없습니다)

 

 


15. 14에서 붙인 DataStateBehavior 를 선택하고 Properties panel을 열어
1) Binding Property의 Artboard element picker버튼을 클릭하고
2) 아트보드위의 13에서 만들어진 TextBlock 을 클릭해줍니다.


 


16. Value Property의 작은 사각형 버튼인  Advanced option > Element Property Binding 을 차례로 선택하고, 아트보드 위의13번  TextBlock을 선택해 줍니다.

 


17. Property를 선택하는 창이뜨면 Text를 선택해 줍니다.
Value에 13번  TextBlock의 Text 가 binding시켜줬습니다.
18. True state Property에도 Value와 같이 Advanced option > Element Property Binding 을 선택하여 TextBlock의 Text와 Binding 시켜 줍니다.
Menu이름의 Text를 State 이름에 넣어줌으로, 메뉴이름과 같은 State로 보내지게 Binding 됩니다.

 
DataStateBehavior의 Properties가 위 그림과 같이 설정됩니다.

 


19. F5를 눌러 Run Project를 실행 합니다.

원하는 결과가 나왔나요?
위 실습과 같이 간단한 메뉴 네비게이션을 가진 레이아웃을 state를 사용하여 구성 할 수도 있으며,
DataStateBehavior의 TrueState와 FalseState를 사용하여 좀 더 다양한 기능의 네비게이션을 구현 할 수도 있습니다 :D

신고
posted by K8

Data Panel의 List Mode와 Detail Mode를 살펴보면서 완전(!) 간단한 예제 하나 만들어 보겠습니다.

List mode와 Detail mode를 사용하면 간단하게 ListBox의 selected item의 data를 binding해 줄 수 있어요.

 

1. Silverlight Application 을 하나 만들어 줍니다.

 



2. ListBox 에 Binding할 Sample Data를 추가해서 준비를 해봅니다.

 



3. Collection 에서 Add simple property 버튼을 클릭해서 Property 하나 더 추가 해줍니다.

 



4. 새로 추가한 Property 의 Type을 Image로 바꿔 줍니다.




5. Layout Root , Grid를 Selection 툴을 사용해서 칸을 나눠 줍시다.
왼쪽에는 ListBox를 넣고 오른쪽에는 Select된 Item을 보여 줄 Layout panel을 넣을꺼에요.

 



6. Sample data source의 collection을 Grid왼쪽칸으로 Drag n drop하여 ListBox를 간단하게 추가 해줍니다.


 

Data 패널에 data binding이 활성화되어 노란테두리가 생깁니다.

 

 

7. 오른쪽 Selected Item을 보여줄 Layout panel로 StackPanel을 추가 해줍니다.

 

 

8. Stack Panel 안에 Asset Library 를 열어서 Selected Item중에 Image부분이 Binding 될 Image 컨트롤을 추가해 줍니다.


 

위 그림과 같이 layout을 적절히 조절해 줍니다.

 

 

9. Stack Panel안에 Selected Item 중에 Text 가 Binding 될 TextBlock을 추가해 줍니다.

 

 

TextBlock도 위 그림과 같이 Layout을 적절히 설정해 줍니다.

 

 



10. Data Panel을 두개의 탭을 살펴 볼께요

  • List Mode : 항목목록 (일반적인 데이터 컬렉션)을 표시하는 마스터 보기.

    ListBox, DataGrid, TreeView 컨트롤로 항목을 끌 수 있고, 아트보드로 collection항목을 끌면 자동으로 ListBox가 만들어 집니다.

  • Detail Mode : 목록의 선택된 항목에 대한 세부 정보를 표시하는 세부정보보기

    Grid, Canvas등 LayoutPanel에 항목을 끌 수 있고, 아트보드로 Collection항목을 끌면 Grid와 자식객체로 세부정보보기를 만들 수 있습니다.

    *. 이때 Expression Blend는 Grid 개체의 DataContext속성을 마스터 보기를 표시하는 개체의 SelectedItem 속성으로 설정하여 마스터 보기와 세부 정보보기의 관계를 자동으로 구성합니다.

 

쉽네요. 자동으로 된답니다.

그럼 Detail Mode에서 Item들에 Binding만 시켜주면 되겠어요.

 


11. Detail Mode 선택하면, Collection앞의 아이콘이 바뀌죠! Property 3(Image type)을 추가해둔 Image Control로 Drag n Drop해서 Binding 시켜 줍니다.

 

 

12. Property1(string type)은 TextBlock으로 Drag n Drop해서 Binding 시켜 줍니다.

 


13. F5 눌러서 Run Project해봅니다.

 

원하는 결과물이 나왔나요?

응용하기 위해선 XAML코드를 열어 Detail항목과 List항목이 Binding될때 코드들을 잘 살펴 보세요 :D

신고
posted by K8

 


지난해말과 올해초에 걸쳐 디자인 정글 아카데미에서 툴테크닉 워크샵을 8강과정과 3일 과정- 해서 총 4번 진행했었는데요~
실습부분자료요청도 있고 해서-
실습내용 몇가지를  강좌로 공유할께요.

먼저
1탄 : 눈물의 에드워드와 벨라!
나의 롸버트와 그의 여자의 사진을 향한 저의 마음을 표현해보는 실습을 통하여-
Blend와 친숙해지는 실습을 해보도록 하겠어요 ㅠㅠ


사용한 이미지를 첨부합니다.
롸버트와 그녀의 다정한 폴라로이드 사진위에 눈물이 떨어지고 사진이 번지는 ...
(어쩌다가 이런 예제를 생각해 냈는지?)
예제를 만들어 볼께요.

학습목표
1. Effect
2. Transform
3. Storyboard
4. Behavior
사용해보기.


1. Silverlight 3 Application + Website 프로젝트를 하나 만들어 줍니다.



2. Add Existing Item... 을 선택해 프로젝트에 사용할 이미지를 추가해 보겠습니다. 
(상단에 압축파일로 추가 해 두었어요!)



3. 압축파일안의 sample01~03.png를 아트보드위에 드래그 앤 드롭해서 꺼내 줍니다.
sample.png파일은 grid의 배경으로 쓸것이므로 잠시 내버려 두고!



4. 세 이미지의 이름을 적당히 정해 준다음에 세 이미지를 Group into > Grid로 잡아 넣어줍니다.
이제 이부분이 사진 부분이 될 거에요.




5. 4번에서 묶은 Grid의 제목을 Photo로 정해 주었습니다.
Photo grid의 프로 퍼티를 설정해보겠어요.
1) Background를 선택하고 4번째 탭 Image Brush를 선택합니다.
2) Strech 속성은 Grid의 크기와 상관없이 이미지 원본 크기 그대로 뿌려지는 None 선택
3) Image Source는 배경으로 쓸 Sample.png선택
4) Layout에서 이미지 원본 사이즈로 Width와 Height를 잡아주고
5) Alignment를 중앙 정렬로 잡아 줍니다.



6. FaceBel과 FaceEd는 눈물이 Blur Effect를 줄 부분입니다.
두 이미지를 위 그림과 같이 정확한 위치로 잡아 줍니다.



7. 그리고 두이미지가 같이 번지고 보이고- 할 수 있게  Grid로 묶어 줍시다.
(묶으면서 위치가 좀 틀어질 수도있으니 잘 살펴 봅시다~)



8. 7에서 묶은 Grid의 제목을 BlurPhoto로 정해 주었습니다. 요 BlurPhoto를 선택하고,
1)  Appearanc > Effect > New 버튼을 선택해줍니다.
2) Effect선택창이 뜨면  Blur를 선택하고 OK를 눌르면 Effect 속성에 옵션이 생깁니다. 적당한 수치로 조절해줍시다.
3) 그리고 평소에는 보이지 않아야 하므로 Opacity를 0%로 바꿔서 숨겨둡시다.



9. 이제 추가한 물방울 모양 이미지!(나의 눈물!!!)를 좀 자연스러운 모양으로 만들기 위해 opacity mask 를 적용해 보겠어요.
Drop의 뾰족한 부분이 0% - 둥근아래부분이 100%이 되게 설정 해줍니다.

Tip) OpacityMask는 컬러와 상관없이 Opacity만큼 대상을 보이게 해줍니다.
100%이면 다보이고 0%면 안보이는 식.
때문에 Gradient Brush 로 대상을 점점 안보이거나 점점 보이게 만들때 사용하기 적합합니다.



10. 그리고 Drop의 위치를 UserControl밖으로 빼버려서 평소에는 안보이게 해둡니다.



11. 이제 폴라로이드 모양의 포토의 프레임부분을 만들어 볼께요.
Photo Grid를 Group into > Border 로 묶어 줍니다.



12. 11에서 묶은 Border의 제목을 Polaroid로 정해주고 Photo의 Width와 Height를 다시 확인해주세요.
Border로 묶으면서 마음대로 변했지도 모릅니다!



13. 이제 Polaroid의 속성을 정해줍니다.
1) 먼저 Background를 Gradient Brush로 색을 그럴싸하게 정해주고-


2) BorderBrush의 색을 지정해주고
3) BorderThickness로 테두리 굵기를 지정합니다.
4) CornerRadius로 테두리의 둥글기를 지정합니다.
5) Effect의 New버튼을 클릭해서 Effect선택창에서 DropShadow를 선택해줍니다.



Effect - DropShadowEffect 관련 상세 속성들이 등장합니다.
순서대로
블러의 크기 - 색 - 위치 - 투명도 - 거리



6) Layout 에서 Width와 Height를 Auto로 만들어주고
7) 폴라로이드 프레임부분처럼 보이게 Padding을 상좌우 25, 하 50정도 지정해줍니다.



8) 폴라로이드가 약간 기울어져 보이게 만들어 줄겁니다.
Transform > Scale > y Scale을 조금 줄여주고,
Projection 에서 X Scale을 조금 돌려서 기울어져있는 듯한 폴라로이드로 만들어 줍니다.
아트보드를 보면서 그럴싸한 값으로 만들어 주면 되겠죠~

이제 눈물이 떨어지고 사진이 번지는 애니메이션을 만들어 보겠어요.


14. Objects and Timeline 패널에서 New... 버튼을 클릭해 새 스토리보드를 추가 합니다.



SbDrop이라고 간단하게 제목을 지어 줬어요!



15. Objects 에서 Drop을 선택하고 Keyframe 추가하여 Drop의 Animation을 만들어 줍니다.
0초에 keyframe을 하나 추가하고, 0.3초로 노란 시크바를 옮겨 keyframe을 추가 합니다.



0.0 ~ 0.3초 동안 일어날 animation을 추가 하는것이죠.
노란바가 0.3초에 있고 Drop이 선택되어있는지 확인을 한 뒤 바뀔 속성들을 설정해봅시다.



16. Drop이 거의 떨어졌을 때, opacity 를 30% 설정해주고, Y좌표를 옮겨 사진위로 적당히 떨어지게 설정합니다.



17. 0.4초 지점에 keyframe을 하나 더 추가하고 이제 Drop이 완전히 없어지게 만들겁니다.


Opacity는 0%
그리고 Scale은 바닥에 떨어지면 물방울이 번지는 효과가 조금 그럴싸하게- x  scale은 약간 키워주고,  Y scale은 약간 줄여줍니다.


Tip) keyframe조절
Animation을 실행해보기 위해 타임라인의 플레이 버튼을 눌러봅시다.
현재 Drop의 Animation이 매우 빠르게 움직입니다.
이렇게 전체 비율에 맞게 Animation을 만들었으나 - 더 천천히 진행되게 하기위해서는


위 그림과 같이 keyframe전체중의 끝부분 파란 핸들을 잡고 Drag해주면
현재 만들어 둔 Animation의 타임 비율이 유지된채 전체 시간이 늘어나게 됩니다.

한 keyframe의 시간만 조절하기위해선 한 keyframe을 선택해서 옮겨주고,
다중 keyframe을 선택해서 조절할 때는 Ctrl + keyframe 각각 선택으로 다중선택이 가능합니다.
Ctrl 누른채로 Drag 하여 다중 선택을 할 수도 있습니다.



19. 이제 Drop이 바닥으로 떨어졌으니, 사진이 번질 차례입니다.
위 그림과 같이 BlurPhoto를 선택하고 0.0, 0.9, 1.3초 부분에 Keyframe을 추가해줍니다.
그림의 A구간(0.9~1.3) 동안 BlurPhoto의 Animation이 동작하게 할거에요. 
BlurPhoto의 1.3초 구간이 선택되어 있는지 확인을 하고,



Opcity를 100%로 변경해 줍니다.



20. StoryBoard가 다 만들어 졌으면, Objects and Timeline 패널의 SbDrop 스토리보드 제목옆의 X (Close StroryBoard) 버튼을 클릭하여, StoryBoard Recording을 끝냅니다.


StoryBoard를 생성했으니,
이제 StoryBoard를 실행할 이벤트를 설정해줍니다.



21. Asset Library를 열어 Behavior > ControlStoryboard Action 을 Drag 하여 이벤트가 일어날 대상에게 Drop해 줍니다.



Polaroid를 클릭하면 스토리보드를 실행하게 할 것이므로 Polaroid에 붙여줍시다.



22. Objects 패널에서 ControlStoryboardAction  이 선택한뒤 속성을 설정해줍니다.
SourcName은 Polaloid에 붙였기 때문에 자동적으로 Polaroid가 선택되어있고,
EventName도 기본으로 MousLeftButtonDown이 선택되어 있습니다.

Common Properties의
ControlStoryboardOption 도 기본으로 Play가 선택되어져 있고
Storyboard 속성에서 어떤 Storyboard를 실행할지만 정해주면 끝!
SbDrop을 선택해 줍시다.




자- 이제 Run Project를 눌러 실행 해 볼까요?

말로하는 것보다 글로 쓰니까 훨씬 어렵네요- 휴으으-
만든 파일 첨부합니다!

다음은 Behavior 설명하면서 만들었던 예제 올려드리겠습니다.


저작자 표시 동일 조건 변경 허락
신고
posted by K8


1월 25 ~ 27일 정글아카데미 강의 중-
Day1 , ppt 파일 공유합니다.

관련기술에 대한 잡담
노트채우기
레이아웃 패널
컨트롤
실습이 있었습니다!

개발자분들도 많이 계셔서 기술에 대한 설명 앞에
몹시 식은땀 흘리던 날이었습니다!


저작자 표시 변경 금지
신고
posted by K8
 


1. Asset Library에서 DataGrid를 선택하고 추가해줍니다.




Add Column > DataGridCheckBoxClumn
or DataGridTemplateColumn or DataGridTextColumn

2. Column 추가는 DataGrid를 선택하고, 오른쪽 마우스 버튼 클릭하여 3가지의 Column을 추가할수있습니다.



 
3. 추가된 Column을 선택하면 Common Properties 창에서 Header 넣을 수 있습니다.
 
 

Define New Sample Data

4. Sample Data를 생성합니다.
Data 패널에서 Define New Sample Data를 선택해서 Sample Data를 추가한다음
 
 

 
5.추가된 Sample Data의 Collection을 DataGrid에 Drag and Drop해주면 끝.
 
 


저작자 표시 동일 조건 변경 허락
신고
posted by K8
11월에 아카데미 정글에서 강좌를 진행하게 되었습니다.
주제는 크로스미디어 커뮤니케이션 Expression Blend3 for RIA/WPF 이고 유료에요.

Expression Blend의 기초 툴테크닉 위주로 Expression Design, Expression SketchFlow도 살펴 볼 꺼에요.
수강신청과 자세한 내용은 이 곳 에서 할 수 있어요.

강의개요 :


커리큘럼 :

1강
bulletSilverlight와 WPF 그리고 RIA
bulletSilverlight, WPF 그리고 RIA는 무엇인가?
bulletExpression Blend의 역할과 이해
bulletBlend를 다루기 위한 기초지식과 준비
2강
bulletExpression Blend 둘러보기
bulletExpression Blend의 인터페이스
bulletToolbar와 Panel
bulletBlend의 기능 살펴보기
3강
bulletExpression Blend로 UI구성
bulletLayout Panel
bulletControl과 UserControl
bulletAsset Library 살펴보기
4강
bulletExpression Blend의 그래픽과 Expression Design
bullet도형, 칠, 변형, path
bullet미디어
bulletExpression Design
5강
bulletExpression Blend의 애니메이션
bullet스토리보드 작성과 컨트롤
bullet모션 - x.y.z축, 가속도 등
6강
bulletControl Template과 Style
bulletControl Template과 Style - 버튼, 체크박스
bullet리소스 등록 관리와 Theme
bulletSilverlight의 VSM
bulletWPF의 Trigger
7강
bulletExpression Blend advanced
bulletListBox 커스터마이징 - Sample Data + Data Binding + ListBox
bulletBehavior 사용
bulletTFS사용
8강
bulletBlend와 Sketch Flow
bulletSketch Flow의 용도와 사용방법
bulletSketch Flow의 활용

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

WPF Trigger

Blend3/WPF 2009.05.14 14:37



WPF에서는 기본적으로 트리거를 사용하고요 - 
 
트리거 사용방법은 간단하게
WPF 프로젝트에서 Button 컨트롤을 예로 들자면,
 

 
버튼 컨트롤 템플릿에 수정에 들어가보시면
 

 
인터렉션 패널에 위와 같은 트리거 창이 보이실겁니다.
실버라이트의 VSM과 비슷하지만, 좀 더 상세한 설정이 가능합니다.
 
1 ->  + Property를 트리거를 추가, - trigger를 통해 삭제 가능하고,
+ Event는 마우스이벤트 키보드 이벤트등 이벤트 트리거의 추가가 가능합니다.
 
2 -> 추가한 트리거가 활성화 되었을때의 동작들에 대해 설정, 표시되는 부분이고 컨트롤마다 차이가 있습니다.
-, + 아이콘으로 여러가지 프로퍼티를 다중 설정할 수 있습니다.
 
3 -> 활성화 되었을 때 실행될 스토리보드를 설정할 수 있습니다.
활성화 될 때의 스토리보드와 비활성 될 때 실행될 스토리보드를 각각 따로 설정 가능합니다.
 
 
WPF 의 트리거는 silverlight의 VSM보다
보기에도 글씨크기도 작고(!) 어려워 보이지만,
이벤트나 동작들에대해 상세하게 설정가능하니, 적절하게 잘~ 사용하면 좋겠지요.
 
각 컨트롤별로 첫번째 그림의 Edit a Copy를 클릭하여 어떤 구조로 어떤동작들이 일어나게 기본적으로 설정되어있는지,
잘 분석해 보시면 컨트롤 템플릿을 생성하실 때 도움이 되실 꺼에요-


라고 쓴,
Hoons닷넷의 Q&A 답글!

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

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

Tip. WPF 테마 다운로드받아 적용하기  (0) 2009.12.02
WPF Trigger  (0) 2009.05.14
TFS support in Blend 3  (1) 2009.05.11
WPF Toolkit - March 2009 Release  (2) 2009.04.08
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
라스베가스에서는 MIX09가 한창이고- ..아니지 지금쯤 끝나가는건가?
부러워하면지는거다부러워하면지는거다

Expression Blend3 preview 가 공개가 되었군요!
궁금한 마음에 후딱 설치를 해보고 살짝 무엇이 변하였나 인터페이스만 둘러 보았습니다.

Expression Blend3 preview 다운로드 - http://www.microsoft.com/expression/try-it/blendpreview.aspx



당연히, Blend2 와는 별도로 실행 할 수 있습니다.



New project를 클릭해서 새 프로젝트를 하나 생성해 보았습니다.



프로젝트 생성창이 바뀌었군요!!
silverlight 3 개발툴을 깔아 봐도 알 수 있겠지만, Visual Studio에서도 Silverlight Project에
Silverlight Navigation Application(누구냐 넌!)이라는게 추가 되었더군요.


위 이미지는 - 비쥬얼스튜디어 새프로젝트 생성- 창입니다.

뭔가, 새로운 것들을 또 해볼 수 있게 되겠군요.
더불어 공부할것도 많아지고? (나안해나안해)

새프로젝트로 Silverlight 3 Application + Website 를 생성해보았습니다.



미묘하게- 인터페이스가 깔끔해진 모습입니다.
사실, 이전 버전까지는 왠지 professional해 보이지 않는 느낌의 인터페이스라고 생각했었는데 ( 저만 그런거?)
미묘한 차이이긴 하지만, 저는 마음드는 군요!
역시, 개발자분은 인터페이스는 전이랑 똑같네!! 라고 말해 주었습니다. || 분명히 틀려!

인터페이스는 프로젝트패널이 왼쪽으로 가서 붙었습니다.
위치만 옮긴게 아니라 TFS (Team Foudation Server) 도 사용 할 수 있다니, Blend로 수정하고 Visual Studio를 열어 체크인하는 귀찮은 짓을 하지 않아도 되겠군요.
Visual Studio를 열지않고 TFS 기능을 사용할 수 있는 방법이 있다고 하나,

난... 몰랐을 뿐이고! XAML 한줄 고치고, 또 Visual Studio 열고 있고!
벌써 프로그램 종료했는데 또, 수정 할게 보이고!!
그래서, Blend에서 TFS사용하는것과 함께 다음기회에 ~

툴바를 살펴보니,
여기도 왠지 미묘하게 바뀌었습니다.

   


이 상단에 땡땡땡이 들은 움직일 수 있다는 거군요!!!
다짜고짜 패널을 더블클릭 해보니 분리되어 툭떨어져 나오고, 다시 더블클릭하면 원래 자리로 돌아갑니다.



다른 자리에도 찰싹찰싹 잘 갖다 붙네요.
사소하지만, 나름 유용한 업데이트 같습니다.

제가 제일 관심있었던 부분은 컨트롤입니다.
그래서 Asset Library를 살펴보았습니다.



Blend2의 Silverlight 의 asset library에서는 볼 수 없었던, 아이들을 표시 해 보았습니다.
반가운 컨트롤들이 보이는군요! WPF 프로젝트에서만 보이던 컨트롤들도 있고-
주만간 주물주물 해줘야 할 것들 -
아무쪼록 친하게 지내보자꾸나! ㅠ_ㅠ

하지만, 그 중 제일 반가운것은!!!



바로 이것, Intellisense!!
Blend 2 에서도 Add in을 설치하여 쓰는 방법도 있지만 ,
이 것은 친절하게 설명도 나옵니다!
자자- Intellisense가 얼마나 작업에 효율적이며, 얼마나 우리를 바보로 만들 수 있는지 직접적으로 쉽게 체험해 볼 시간이 왔네요. (ㅎㅎ) 코드 따위! 시작하는 알파벳만 외워주는겁니다!!! ( ㅠ_ㅠ )

인터페이스 구경은 이걸로 대충 끝-

조금 아쉬워 - File 메뉴를 살짝 열어보니


이런 것들이...
Import Adobe Photosop File?
아니 이게 도대체 뭐란 말인가!!
PSD파일을 이미지, 텍스트 채로 불러오는 굉장한(!;;) 기능 같아 보입니다.
블렌드랑 포토샵이랑 친하게 지내게 만들기?
이 것도 다음기회에...
궁금하면 설치하여 한번 해보는겁니다!!
물론, 좋은 팁있다면 제게도 주시는게....

자세한것과 Silverlight 3.. 등등은 내일 또 해봐야겠습니다. @_@
저작자 표시 비영리 변경 금지
신고
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


티스토리 툴바