본문 바로가기

Epxression Blend/WPF / Silverlight

[Silverlight 3] Visual State Group으로 사진 갤러리 만들기 - 2


이어서 진행하도록 하겠습니다.

1.  State를 4개 추가한 상태에서 ① 첫번째 상태를 클릭하여 녹화상태로 합니다.
이미지를 ②처럼 전체 선택 하신다음 Width ③ 값을 0으로 줍니다.
 


2. 이렇게 이미지 4장 모두 width값을 0을 주었는데요.
gotopage1을 클릭할 때 나타나는 이미지는 다시 원래 사이즈로 640 을 입력해 줍니다.



3. 나머지 state에도 같은 방법으로 적용시켜줍니다.
gotoPage2 선택-> 전체 이미지 width사이즈 0 -> 해당 이미지 사이즈(Page2) 다시 640으로 설정
gotoPage3 선택-> 전체 이미지 width사이즈 0 -> 해당 이미지 사이즈(Page3) 다시 640으로 설정
gotoPage4 선택-> 전체 이미지 width사이즈 0 -> 해당 이미지 사이즈(Page4) 다시 640으로 설정

4. state를 다 만들었습니다. 이제 버튼에 VisualStateGroup을 링크 시켜주도록 하겠습니다.
① 처럼 base를 클릭하여 녹화에서 빠져 나온 후, 첫번째로 링크 걸 btn1 버튼을 ② 선택합니다.
그리고 속성에서 ③ 번개버튼이 있는 이벤트 버튼을 선택하면 속성창이 바뀌는데요.
버튼이 클릭되었을 때 상태가 바뀌어야 되기 때문에 Click이벤트를 걸어주도록 합니다. ④번에 마우스를 갖다대고
더블클릭을 하면 이벤트가 생성되며 MainPage.xaml.cs 파일이 열리게 됩니다.



5. 이렇게 cs 파일에 클릭이벤트가 적혀있는데요.
다음과 같이 작성하여 줍니다.

VisualStateManager.GoToState(this,"gotoPage1",true);



6. 다른 버튼들도 마찬가지로 버튼마다 클릭이벤트를 생성하여 적어줍니다.



7. 자 완성되었습니다 :-)
자료를 첨부하도록 하겠습니다