Roaming from the Earth

질문원본 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

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

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

 

Windows Phone 7 Application 을 Expression Blend로 만들어 봅시다.
(based on Blend)

 

Windows Phone 7 Application을 만들어 보겠어! 라며 Blend를 켜서 샅샅히 뒤져보지만,

관련 프로젝트는 만들 수 없군요.

 

 

없어 - !

 

그래서 오늘은 준비!!

 

먼저, 개발 도구들이 필요합니다.

내 그냥 그냥 쉽게는 안되는 겁니다. :D

 

준비물 (개발을 위해 설치 할 것들) :

 

• Expression Blend 4.0
• Silverlight for windows phone toolkit - Feb 2011
  http://silverlight.codeplex.com/releases/view/60291
• Visual C# 2010 express
• Windows Phone Developer Tools
  http://create.msdn.com/en-us/home/getting_started

 

<codeplex - silverlight for windows phone toolkit - feb 2011>

<windows phone developer tools - 툴 종합세트! +ㅁ+>

준비물들을 모두 설치 한 후, Blend를 실행하면-

 

짜잔 -

 

이제 뭔가 할 수 있을 것 같은 기분입니다.

확인차 Build 하기 위해

 

TextBlock에  'Hello :D' 를 타이핑하고,

Build 합니다. (F5)

 

Windows Phone Developer Tools 종합 세트에 포함 되어있던,

Window Phone Emulator 가 실행 되면서 'Hello :D' 를 볼 수 있습니다.

 

준비 끝!

Silverlight의 Visual States와 Data State Behavior와 Data 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

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

 

지난해말과 올해초에 걸쳐 디자인 정글 아카데미에서 툴테크닉 워크샵을 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로 잡아 넣어줍니다.
이제 이부분이 사진 부분이 될 거에요.

System Requirements

• Supported Operating Systems: Windows 7; Windows Vista; Windows XP Service Pack 3

Recommended system:

• 2 GHz or faster processor
  
• 1 GB RAM or more
  
• 10 MB of available hard-disk space
  
• 1024 x 768 or higher-resolution monitor running at 24-bit color depth or higher
  
• Microsoft Windows® XP with Service Pack (SP) 2 or later, or Windows Vista (all editions) or Windows 7 (all editions)
  

먼저, Expression Studio 4 beta trial 을 다운 받고,

Expression Studio 4 beta
http://www.microsoft.com/downloads/details.aspx?FamilyID=6f014e07-0053-4aca-84a7-cd82f9aa989f&displaylang=en

추가로 .net framework 4 와 silverlight 4 runtime 을 설치해주면 >_< b

.net framework 4.0.30128.0
http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=a9ef9a95-58d2-4e51-a4b7-bea3cc6962cb
Silverlight 4 runtime (window)
http://go.microsoft.com/fwlink/?LinkID=167220


설치를 한번 해봅시다-

설치파일을 실행하면 -
제품키를 한번 물어봅니다-
To obtain a product key, pleas click here.
의 here 부분을 클릭해주면 trial용 key를 생성할 수 있는 페이지로 연결됩니다.

type the two words : 의 인풋박스에 그림으로 보이는 문자 두 단어를 써주면 끝!

계속 진행 하면- 몇가지 부가적인 것들과  blend 4 beta가 설치되는군요!!
+ㅁ+ 그럼 이제 신나는 blend 4 beta 탐구로 떠날 준비가 다되었습니다!

이어서 ScrollBar 에 디자인을 적용해 볼께요.

2까지는 ListBox Template안의 ScrollViewer의 Template을 Edit 하고있었죠-

ScrollBar Template
이 ScrollViewer의 Template에서 디자인을 적용할 VerticalScrollBar를 선택합니다.

1. VerticalScrollBar > Edit Template > Edit a Copy...



2. VerticalScrollBar의 Template에서 구조를 보면 그림과 같이 Vertical, Horizontal  Scroll모두 가지고 있는 모습을 볼 수 있습니다. 현재 디자인으로는 ScrollBar의 Small Decrease와 Small Increase만 필요하기때문에 나머지 엘리먼트들은 지워버려도 됩니다.



3. 이 Small ~ 부분은 우리가 어디서나 볼 수 있는 ScrollBar의 화살표가 있는 버튼 부분과 같은 기능을 하며, 이 부분 하나로 또 하나의 컨트롤을 구성하고 있기때문에 Template을 수정 할 수 있습니다.
VerticalSmallIncrease > Edit Template > Create Empty...
기본 컨트롤의 구조와는 전혀 다른 버튼을 만들어 보기 위해 Create Empty를 선택해 봅니다.



4. 위 그림과 같이 Control에 Grid하나만 달랑 들어 있는 구조로 Template 이 새로 만들어 졌습니다.
여기에 버튼의 바탕 부분이 될 Eclipse를 하나 그려줍니다.



5. Brushes 속성의
1) Fill 선택
2) Gradient Brush선택
3) Radial Gradient선택
해주고 컬러바에서 그림처럼 컬러를 지정 해 봅니다.



6. 버튼에 빛나는 부분을 만들어 주기 위해서  Eclipse를 하나 더 그려주고 Fill 속성의 컬러에 alpha값을 지정해줍니다.



7. Pen tool을 이용하여 화살표를 그려 줍니다.

이제 이 버튼의 State를 설정 해볼께요.


8. MouseOver State를 선택하고 Grid의 Scale x,y를 1.1 정도로 설정 해줍니다.

Tip. 위 상황과 같이 버튼의 현재크기와 상관없이 일정비율로 늘어나거나 줄어드는 Transform일 때는 Scale을 넣어주고,
Size가 특정크기로 커지거나 줄어들때는 Width, Height값을 조정 해줍니다.



9. Pressed State를 선택하고 Grid의 Scale을 0.9로 설정 해 줍니다.
이제, 버튼에 Rollover가 됐을때 버튼이 약간 커지고 Press를 선택했을때 눌러지는 효과처럼 약간 작아지게 되었습니다.



10. 좀 더 자연스러운 press 느낌을 주기 위해 화살표 부분 path의 컬러를 조금 진하게 만들어 줍니다.

EasingFunction
Silverlight에서만 사용 할 수 있는 이 Easing Function은 StoryBoard나 Visual State의 Transition에서 자연스러운 애니메이션을 쉽게 설정 할 수 있게 해줍니다.
미리 설정 되어있는 가속,감속 그래프들이 제공되며 그래프를 선택을 하면 적용됩니다.



11. Common States의 Transiton에서 각 State들이 쫀득(!) 하게 움직이게 해주기 위하여 EasingFunction을 설정해 주겠어요.
EasingFunction  버튼을 눌러 봅니다.



12. 위 그림과 같이 여러가지의 그래프가 미리 설정되어 있고 이 중 원하는 그래프를 선택해줍니다.
이 디자인에서는 탄성이 있는 버튼 처럼 보여지기 위해 Back의 Out그래프를 선택해줍니다.



13. 그리고 Transition 타임을 0.2s 정도 설정 해주고-



14. Object panel의 Return버튼을 눌러 Template 에서 빠져 나가 봅시다.

현재 decrease버튼과 increase버튼이 똑같이 생기고 화살표 방향만 틀리기 때문에 방금 만든 Template을 적용하고 화살표 Path의 모양만 바꿔줄꺼에요.



15. Tempate이 지정되지 않은 나머지 버튼을 선택하고 Edit Template > Apply Resource > RepeatButtonControlTemplate1(방금작업했던 Template)을 선택합니다.



16. 그리고 화살표를 수정할 버튼을 선택하고 > Edit Template > Edit a Copy...를 선택합니다.



17. 수정을 화살표 path 를 선택하고 Transform에서 Flip > Flip Y axis를 선택하여 path를 Y축으로 반전 시켜 줍니다.

버튼들의 Template 은 다 되었으니 Object panel의 Return 버튼을 눌러 ScrollBar Template 으로 돌아가서,
VerticalRoot Grid의 필요없는 Row 를 삭제하여 레이아웃을 바로 잡아 봅니다.



18. VerticalRoot 를 선택하고 Properties panel의 Layout 의 아래 화살표 버튼을 눌러 확장하여,
RowDefinitions(Collection) 의 오른쪽 버튼을 클릭합니다.



19. 위 그림과 같이 Grid의 Row를 한번에 관리 할 수 있는 창이 뜹니다. small~버튼들이 들어있는 0, 4 Row는 빼고 나머지는 다 Remove item 버튼을 클릭하여, 삭제 해줍니다. (다중선택 안됩니다.)



20. Small ~ 친구들의 사이즈를  60*60정도로 설정해주어 적당하게 레이아웃을 설정 해주면 끝.


History Scope에서 ListBox를 선택하여 Template 에서 빠져 나온다음,

Run Project로 실행 해 봅니다!
잘 돌아가고 있나요?


띄엄띄엄썼더니, 흐름이 원활한지 모르겠네요!
잘안되는부분있으면 질문주세요 +ㅁ+

'1. Grid의 Column과 DataBinding' 에 이어서 '2. State와 StoryBoard, Opacity Mask'를 살펴 볼께요.

Visual State
Visual State를 설정하는 State패널을 봅시다.

1. Base가 선택되어 있습니다.
Base 상태의 디자인 설정합니다.



2. Base 상태에선 보이지 않을 BigImage 를 선택하고 Visibility 프로퍼티를 Collapsed시켜둡니다.
 


3. 보여지고 있는 TextBlock과 SmallImage의 레이아웃을 설정해줍니다.



4. Silverlight 프로젝트의 VSM 에서는 각 State 간의 Transition을 손쉽게 설정 할 수있습니다.
Common States간의 Transition 값을 0.2초 가량 설정 해줍니다.



5. MouseOver State를 설정해 봅시다.
MouseOver가 되었을 때 TextBlock의 Foreground Color를 조금 진한 색으로 변경하여,
MouseOver시 글씨의 색이 진해지게 설정합니다.

Storyboard
State별로 애니메이션, 모션 등을 작성 할 수 있는  StoryBoard를 설정 해 봅니다.


6. Selected State를 설정해봅니다.
List의 Item이 Select 되었을 때의 플레이될 스토리보드를 만들어 주기 위해
Objects and Timeline panel에서 Selected 오른쪽의 Show Timeline 버튼을 눌러 줍니다.


7. TextBlock을 선택하고 타임라인의 0.2초 지점을 선택한 후 keyframe을 추가 해준 뒤
TextBlock의 font size 프로퍼티를 32px정도로 커지게 조정 해 줍니다.



8. SmallImage의 Opacity는 0%로 변경해줍니다.



9. BigImage는 0% 에서 서서히 보이기 위해 0초의 keyframe에는 opacity 를 0%, Visibility를 Visible로 -



10. 0.2초의 keyfram에서는 작아졌다가 커져 보이기 위해 BigImage의 Scale을 x,y 0.5초로 설정해줍니다.


11. 그리고 0.4초에 KeyFrame을 추가하고 Opacity를 100%, Scale을 1, 1로 설정해 줍니다.



12. 이제 아트보드위의 ListBox버튼을 클릭하여 Template을 빠져나갑니다.

ListBox자체의 디자인과 ScrollBar등의 디자인을 적용하기 위해 ListBox 의 Template를 설정해줍니다.


13. ListBox > Edit Template > Edit a Copy... 로 기본컨트롤로 부터 복사된 ListBox Template를 만듭니다.



14. FoodListBoxStyle이라고 이름을 지어주고 OK



15. Border안에 ScrollViewer가 들어있는 구조의 ListBox에서 Border 속성을 Reset시켜버리면 ListBox의 테두리가 없어집니다.


처음 디자인의 스크롤들이 스르륵 없어지는 모양을 만들어 주기위해 ScrollViewer의 Presenter 부분에 Opacity Mask를 줄거에요.
16. 그래서 ScrollViewer > Edit Template > Edit a Copy... 를 선택하여 ScrollViewer의 Template을 만듭니다.



17. FoodScrollViewerStyle이라고 이름을 지어 주었습니다.

Opacity Mask
색과는 상관없이 표시 Color의 Alpha값의 %에 따라 엘리먼트를 Mask해주는 기능을 설정해봅니다. 


18. ScrollViewer의 Template는 그림과 같은 구조를 가지고 있고
그 중 제목 그대로 ScrollContentPresenter라는 부분이 Scroll할 Content를 보여 주는 부분입니다. 

1) 이 ScrollContentPresenter를 선택하고
2) 오른쪽 Brushes에서 OpacityMask를 선택하고
3) Editor의 하늘색 표시된 컬러바 위를 클릭해주어 색을 추가 해줍니다.



19. 컬러의 양쪽 끝을 선택하여 각각 alpha값을 0%로 설정 해줍니다.



20. Gradient tool을 선택하면 아트보드위의 엘리먼트에서  Gradient의 영역, 방향을 조절 할 수 있습니다.
동그라미들을 선택하여 적당하게 Opacity Mask를 설정해줍니다.


이제 ,  ScrollBar에 디자인을 적용하고 약간의 설정을 해 주면 끝입니다.
3번에서 이어서!

------------------------------------------------------------------------------
1. Grid의 Column과 DataBinding
2. State와 StoryBoard, Opacity Mask
3. ScrollBar Template

Horizontal Scroll ListBox 만들기를 통해 ListBox의 구조를 약간 파악하셨고- 조금 친해졌다면!!
ListBox와 친해지기 2탄!!!
'냠냠냠 Food ListBox'를 만들어 보도록 하겠습니다.
먼저 디자인을 해주었습니다.

이번엔 조금 틀리죠 –
Horizontal Scroll ListBox에서는 Item의 레이아웃과 Item Collection를 구성할 수 만 있었지만,
Item Template대신 ItemContainer에서 Item의 Data를 Binding 해서 Rollover나 Press이벤트에 따라 따로 노는 Item을 만들어볼께요.

어제 세미나때 요청하신 분이 계셔서
간단히, 이미지로 버튼을 만들어보도록할께요.

Normal, Over, Press 이미지를 만들어 보았습니다.



토끼죠- 네 ~
토끼입니다!


1. WPF application 프로젝트를 하나 만들어 줍니다.



2. 프로젝트에 Add Existing Item 메뉴를 이용하여, 만들어 둔 버튼 디자인 토끼를 프로젝트에 추가 해줍니다.



3. Normal이미지 하나를 아트보드 위에 떨어트려줍니다.



4. 이미지를 Button Control로 만들어주기위해 마우스 우클릭해서 Make Into Control 메뉴를 선택합니다.



5. Button Control을 선택하고 OK 를 누릅니다.



6. 제가 만들 버튼에서는 ContentPresenter가 필요없기 때문에 Content Presenter를 없애버립니다.
(Content Presenter가 필요할때는 적당한 위치에 Content Presenter를 레이아웃해주면 되겠죠.)



7. 프로젝트에 추가 해둔 Over와 Press이미지도 아트보드위에 추가 해줍니다.



8. Normal상태에서는 Over와 Press이미지는 보이지 않게 -  둘을 선택하고 Opacity를 0으로 바꿔줍니다!


9. Triggers 패널을 봅시다!!
이 Triggers 를 이용하여 MouseOver, Press, Enable등등을 설정 할 수 있습니다.



11. MouseOver 상태를 설정하기위해 IsMouseOver=True를 클릭하고. MouseOver이미지의 Opacity를 100%로 바꿔줍니다.
Trigger패널의 Properties when active부분에 image.Opacity=1 이 추가 된 것을 볼 수있습니다.
MouseOver상태가 되었을 때 Property가 변경된다는 내용입니다.



12. 그리고 저는 투명부분을가지고 있는 PNG이미지를 썼기 때문에, MouseOver상태에서는 Normal 이미지는 보이지 않게 Opacity를 0%로 바꿔줍니다.



13. 같은 방법으로  Press의 상태도 설정해줍니다. IsPressed=True를 선택하고 Press 이미지의 Opacity를 0 으로 만들어 줍니다.



14. Press는 마우스 오버된 상태에서 일어나는 이벤트 이기 때문에, Over이미지와 Normal이미지 둘다 Opacity를 0으로 바꿔 줍니다.



15. Properties when active에 이미지 opacity에 관한 프로퍼티들을 확인 할 수 있습니다.


16. F5를 눌러 Run Project로 실행 해보면, 버튼을 확인 할 수 있겠죠?!



프로젝트 파일 추가합니다!