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