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

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

이어서 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로 실행 해 봅니다!
잘 돌아가고 있나요?


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

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

'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

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

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


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



1. Silverlight Application Project를 하나 만들고,
ListBox를 아트보드위에 하나 그려줍니다.




Sample Data Source

2. Item Collection을 먼저 만들어 볼께요.
Data패널에서 Define New Sample Data 를 클릭해서 새로운 Data Source를 생성해 줍니다.



FoodItem이라고 제목을 지어 줬습니다.



3. Collection의 Item들의 이름을 각각 FoodImage와 Name으로 바꿔주고, 
오른쪽 화살표 달린 버튼을 클릭해서 타입을 바꿔 줍니다.



4. Image Type으로 변경하고 Browse 버튼을 클릭해서, 저장해놓은 이미지의 폴더를 선택해주겠습니다.
제가 예쁘게 오려(!?) 놓은 이미지들을 샘플로 첨부합니다.




5. Collection을 ListBox에 Drag & Drop 해서 바인딩 해줍니다.
아트보드위에 맛난간식들 이미지와 모르는 영어들이 List를 가득채우고 있을껍니다!



6. Food Collection 오른쪽 Edit Sample Data 버튼을 클릭하여 이미지에 맞게 이름을 바꿔 줍니다.




Tip. Sample Image는 알파벳순으로 차례차례 나오고, 이미지 수가 Number of records의 숫자보다 작을때는 다시 첫번째 이미지 부터 반복됩니다.
(제가 첨부한 Sample이미지는 9장이므로 9를 적어주면되겠습니다.)


Edit Generated Item Container

Item Container에 디자인을 적용하고 이벤트 발생시 인터렉션을 설정해보겠어요.


7. Edit Additional Templates > Edit Generated Item Container > Edit a Copy



8. Style Resource의 이름을 적당히 정해줍니다.




9. Edit a Copy 를 선택해서 Style을 만들었기때문에 기본 컨트롤의 구조가 그대로 Copy되어 있는 모습입니다.
 컨트롤 구조에 조금 익숙해지면, Create Empty를 선택하여 디자인을 하면 되겠지만 아직 익숙해지기 위해 Edit a Copy하여 수정해서 쓰도록 합니다!
제가 만든 냠냠 아이들은 기족 구조가 필요없으므로 Ctrl + 좌클릭하여 다중선택하고 > 우클릭하여 Delete 선택하여 없애버립니다!



Grid의 Column을 3개로 나눠서
Normal상태에 보일 FoodImage, Food Name, Select 되었을 때의 Food Image순으로 넣어줄 겁니다.

Grid, Columns



10. Grid를 선택하고 Select툴을 사용해서 그리드를 적당히 나눠줍니다.
Grid위의 하늘색바 부분을 클릭하면 Column을 나눌 수 있습니다.



11. Layout 패널을 확장하면 나오는 ColumnDefinition 항목의 오른쪽 버튼을 클릭하면 통해
Column을 추가, 삭제 크기 설정등을 따로 할 수도 있습니다.


<Column Definition Collection Editor>



12. FoodImage를 Binding할 Image를 추가 해봅시다.
툴바 제일 아래쪽 Asset Library를 클릭하여, Image를 추가합니다.

Tip. Asset Library는 search가 쉽게 되니, 컨트롤의 앞글자 조금 적어주면 좀 더 빠르게 원하는 컨트롤을 찾아서 추가 할 수 있겠죠~




13. Normal 일 때의 작은 이미지, Select일 때의 큰이미지를 각각 하나씩 추가하고 이름을 붙여 줍시다.



14. SmallImagedml 사이즈를 42*42 정도로 지정해줍니다.
Horizontal Alignment는 왼쪽으로 정렬해줍니다.
그리고 Common Properties에서 Source 항목의 오른쪽 조그만 아이콘을 클릭해서 Data를 Binding합니다.



이렇게 생긴 Context menu에서 아래 노란 Data Binding을 선택합니다.



15. Create Data Binding 창이 뜹니다.
Data Field나 여러가지 Element의 Property라던지 선택하여 바인딩 할 수 있는 창이 뜨는 데,
Explicit Data Context를 선택하면 생성해 두었던 Sample Data Source의 Item Collection 의 리스를 볼 수 있습니다.
그중 FoodImage를 선택하고 OK를 눌러줍니다.



16. BigImage도 마찬가지로 Size를 80*80 지정해주고,
Grid의 Column위치를 2로 잡아주고, 
Alignment를 설정해준 다음,

Source > Data binding > Explicit Data Context > FoodImage 를 선택하여, FoodImage를 바인딩 해줍니다.

Tip. Grid에서의 Row와 Column은 1,2,3...의 순서가 아니라. 0,1,2,3... 의 순서로 첫번째 칸이나 줄은 0입니다.


17. 냠냠 아이들의 제목이 Binding 될 TextBlock을 추가 해 줍니다.



1) TextBlock의 위치는 Column 1, 적당한 Fontfamily와 FontSize를 잡아주고- 디자인에서와 같이 Bold도 넣어줍시다.
2) Common Properties의 Text 항목의 오른쪽 네모 버튼을 클릭해서 이미지들 Binding 한 것과 같은 방법으로
Data binding을 선택해줍니다.



18. Explicit Data Context > Name을 선택합니다.

준비물은 다 갖춰 졌네요.
이어서 State설정과 Storyboard등을 살펴보도록 하겠어요.

------------------------------------------------------------------

1. Grid의 Column과 DataBinding
2. State와 StoryBoard, Opacity Mask
3. ScrollBar Template
저작자 표시 동일 조건 변경 허락
신고
posted by K8

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

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로 실행 해보면, 버튼을 확인 할 수 있겠죠?!



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


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


티스토리 툴바