안녕하세요? 정진희입니다. 오랫만에 강좌를 쓰게 됩니다.

데스크탑 어플리케이션이나 디자인 된 윈도우 창을 보면 [닫기] [최대화] [최소화]의 모양이 디자인 된 것을 볼 수 있습니다. 이렇게요.



7) 이번엔  Unchecked 녹화상태에서 반대로 visibility를 설정합니다.




8) 토글버튼의 상태작업까지 완료를 하였습니다. 템플릿에서 빠져나옵니다.
내가 맞게 했는지 확인하려면 속성에서 기본속성의 IsChecked를 클릭해보면 알 수 있습니다.





9) 이렇게 만든 토글버튼 컨트롤! 이제 실제로 기능을 넣어보도록 하겠습니다.
체크 되었을 시 (Checked) : 창이 최대화 되게
체크가 안되어있을 시 (Unchecked) : 창이 원래 상태로 돌아오게 할텐데요.



토글버튼에 네임을 주고 속성의 이벤트화면으로 전환 후 Checked일 때의 이벤트를 제작하기 위해 더블클릭합니다.



10) 더블클릭하면 화면의 cs파일이 열리게 됩니다. 다음과 같이 코드를 입력해 주도록 합니다.





11) 마찬가지로 UnChecked되었을 때도 마찬가지로 이벤트에서 더블클릭 한 후에 코드를 입력해주도록 합니다.



12) 빌드하여 실행하면 기능이 제대로 실행되는것을 알 수 있습니다.
참고를 위해 실행 프로그램을 올려드리겠습니다.





그럼 많은 곳에 활용하실 수 있기를 바랍니다! 다음 강좌때 뵙도록 하겠습니다.

안녕하세요, 정진희입니다.
이어서 진행하도록 하겠습니다. 이어서 진행하려니 시간이 많이 흘렀네요...:-)
저번시간에는 사전을 만든 후 버튼을 리소스 사전에 저장하고 어떻게 편집하는지에 대해서 알아보았습니다.




7) 새롭게 프로젝트를 생성합니다. 1)번과 같은 방식입니다.




8) 프로젝트 우클릭 > 기존항목 추가를 클릭합니다.
기존항목 추가는 이미 존재하는 파일을 불러들이는데요.
자신이 만들었던 리소스 사전의 위치를 찾아가서 추가를 시키도록 합니다.
리소스 사전이 추가 되었습니다.




9) 다른 페이지에서 한번 버튼을 만들어보고 스타일을 씌워보도록 하겠습니다.
버튼을 생성하고 우클릭 > 템플릿 편집 > 리소스 적용을 합니다.
기본속성으로 리소스 사전을 불러들이면 사전이 바로 연결이 됩니다.


리소스 사전이 연결되지 않으면 다음 화면과 같이 비활성화가 되어있는 것을 보실 수 있습니다.


현재 페이지에서 ① 리소스 패널을 활성화 한 후 > 유저컨트롤 우클릭 > 리소스 사전 연결 > 리소스 이름 선택을 합니다.




10) 다시 버튼의 우클릭을 하면 활성화 되신 것을 보실 수가 있으며 적용이 가능해지는 것을 확인하였습니다.





12) 프로젝트가 크면 클 수록 이렇게 리소스 프로젝트를 따로 만들어 프로젝트로 관리하시는 게 바람직 합니다.
다음과 같이 솔루션에서 프로젝트를 추가합니다. 그리고 마찬가지로 리소스 패널에서 > 리소스 사전 연결을 하여
다른 프로젝트의 사전을 불러들입니다.





이번 강좌에서는 저는 아주 미니멀 하게 하나만 불러들여 오는 것만 해보았습니다.
그럼 도움이 되었길 바랍니다 :-D
파일 첨부하도록 하겠습니다.

익스프레션 블랜드 중에서 WPF로 제작한
Button / ComboBox / TextBox / PasswordBox / ListBox / TabControl
Package로 묶어서 올립니다.

안녕하세요, 정진희입니다.


지난 버전에는 실버라이트가 리소스 사전이 없었는데 이번에 생겼네요.

들어가기 전에 리소스 사전이란 무엇일까요?

1) 이번 강좌는 WPF이든 Silverlight이든 둘 다 상관은 없습니다.
컨트롤 라이브러리를 생성합니다.



2) 컨트롤 라이브러리로 생성해도 별로 변한 건 없어보입니다.
생성된 xaml파일의 이름만 MainCotrol이네요.


리소스 사전을 프로젝트에 만드는 방법은 다음과 같습니다.
프로젝트를 Right Click > New Item추가를 클릭합니다


창이 뜨면 Resource Dictionary를 선택하고 이름을 임의로 지은 다음 선택을 합니다.
이렇게 리소스 사전이 만들어졌는데요.



2) 버튼을 하나 만들어보도록 하겠습니다.
버튼모양을 할 사각형을 그리고 Tool에서 > Make Into Control을 클릭합니다.
버튼에 대한 강좌는 블로그에 있으니 참고하시길 바랍니다.



3) 이렇게 버튼을 하나 만들 당시에 저장 위치가 3군데가 나오게 됩니다.



버튼이 꼭 아니더라도 다른 컨트롤들을 만들 때 이렇게 물어봅니다.
버튼이름을 임의로 정하고 리소스 사전에 저장을 하고 클릭을 합니다.


4) 버튼이 리소스 사전으로 저장이 되었습니다. 한번 리소스 사전에서 버튼을 찾아보도록 할까요?
리소스 사전은 블랜드에서 미리보기 지원을 하지 않습니다.
다만 Panel중에 Resource 패널을 활성화 시켜 보시면 방금 만들었던 버튼의 이름이 보여지게 됩니다.



5) Xaml파일에서 보시면 이렇게 보실 수 있습니다. 라이브러리 사전 밑에 버튼 스타일 이름이 보이시죠?


6) 이 리소스를 편집하려면 리소스 패널에서 우측의 버튼같이 생긴 것을 클릭하시면 수정할 수 있습니다.



다음 강좌에서 계속 진행됩니다.

이어서 진행하도록 하겠습니다.
저번 강좌까지 했던 작업은 메뉴버튼 클릭 시 접혀있던 서브메뉴가 나오도록 하기 위한 형태를 만들었고요.

1) 저번시간까지 준비한 작업을 가지고 옵니다. 
① 상태에서 그룹 State를 클릭하여 그룹을 만들고
② 다시 폴더 모양을 클릭하여 그룹안에 State를 두개를 추가합니다
③ 두가지의 상태를 만들어줍니다. 하나는 Menu로 돌아오기 위한 애니메이션과 SubMenu로 가기 위한 애니메이션입니다. 그룹이름은 자신이 임의로 지정해주어도 됩니다. 저는 MenuGroup으로 했습니다.




2) ① SubMenu State을 클릭하고
② 움직일 대상 Stack Panel을 선택한다음
③ 속성에서 Projection의 속성값을 다음과 같이 지정하여 줍니다. 완전히 접혀져 있던 서브가 '0'이라는 값을 주면서 펴지는 것을 녹화를 했습니다. ④번과 같이 보여져야 합니다.
(State에 대한 애니메이션을 더 자세히 알고 싶으시면 예전강좌에 나와있습니다, 참고하시길 바랍니다)


3) 이번에는 btnMenu란 이름을 가지고 있는 메뉴 버튼을 접어줄 차례입니다.
① 마찬가지로 subMenu라는 State에 녹화를 하시고
② 메뉴버튼 레이어 선택 ③ Projection의 Y축 회전값을 지정해 줍니다. 그러면 메뉴가 접혀지는 모습이 보이는데요
아예 안 보일때까지 값을 주도록 합니다. 저는 94.5까지 하니까 아예 안보이게 됩니다.
이렇게 해서 SubMenu의 State를 설정해주었습니다.
다음으로는 이제 돌아가기 위한 State를 설정해주도록 하겠습니다.




4) ① 이번에는 Menu State를 선택하시고, ②메뉴 레이어 버튼을 선택하시고 ③ 회전의 X축을 0->1->0으로 설정값을 찍어주어 오른쪽의 고급속성 박스가 하얗게 나오도록, ④번처럼 키 프레임이 찍히도록 합니다.
이렇게 하는 이유는 키프레임을 찍어주어야 State를 실행하면 돌아오기 때문입니다.



5) 마찬가지로 Stack Panel의 애니메이션도 키 프레임을 남기기 위해 정해주도록 합니다.
화면상에서는 아무런 변화가 없는 것 같지만 키프레임을 찍어줌으로 돌아올 위치를 정해주는 것이기 때문에
Y축 값을 반드시 ③번 처럼 고급속성이 흰색이 칠해지도록 해줍니다.
이렇게 해서 상태는 다 만들었습니다.



6) 상태에서 상태로 바뀔 때 변환 시간과 가,감속의 설정을 하단의 그림처럼 설정해줍니다.
저는 1초동안 State가 변하도록 했고 실버라이트에서만 제공하는 Easing Function을 Circle inout을 설정했습니다.



7) Base를 클릭하여 녹화상태에서 벗어나시고,
btnMenu를 클릭하였을 때와 StackPanel 안의 btnBack 버튼을 클릭하였을때 이벤트가 실행되도록 코드를 작성해줍니다. (State이벤트 강좌 참조하시면 더욱 자세한 설명이 있습니다)


8) 이벤트를 설정해 주시고 다음과 같이 코드를 적어줍니다. btnMenu를 클릭하였을 때는 -> SubMenu State를 걸어야 합니다. Menu State를 걸어주면 아무런 적용이 되지 않을 것입니다.



9) 잘 실행이 되시나요?
하단에 예제로 만든 결과물에 버튼 스타일과 배경색만 넣어서 바꾸어보았습니다.
이렇게 실버라이트에서 Projection이라는 속성 기능을 통해 원근감처럼 보이게 메뉴가 접히는 것을 확인하셨습니다.
그럼 다음강좌때 뵙도록 하겠습니다.

안녕하세요, 정진희입니다.
요새는 계속 실버라이트에 대한 강좌를 쓰고있는데요.
같은 익스프레션 블랜드로 작성하지만 WPF랑 실버라이트가
보이는 메뉴얼이 좀 다르다보니 왔다갔다 하니 헷갈리기도 하네요, ㅎㅎ

 
at First, What's mean perspective 3D?
중학교 시절 미술시간에 이런 것 많이 그려봤을 텐데요.
원근감 있는 사각형, 혹은 물체를 그리기 위해 1점 투시, 2점투시, 3점 투시로 하여 밑의 그림처럼 그립니다. 
전 이런 거 디자인 제도 할 때 했었는데요, 제품을 입체적으로 보이기 위해서 이렇게 그리곤 했었습니다.
(잘 못그려서 문제지만)


마찬가지로, Expression Blend 특히 실버라이트에서는 이런 기능을 지원해주고 있습니다.
(WPF 프로젝트에서는 이러한 기능이 없네요.)
마치 종이위에 그리긴 하지만 그럴싸하게 3D 입체처럼 보이기 위한 기능입니다.

구글링을 해서 몇 가지 찾은 예인데요.


조금 다른 적용의 예이지만 멀리서 봤을때 마치 글자가 3D처럼 보이는 효과입니다.
오늘 작업할 예제를 미리 보여드리도록 하겠습니다.

안녕하세요? 정진희 입니다.
홈페이지를 만들다보면 배경음악 깔고 싶을때가 있는데요.
html에서는 embed를 이용해서 간단하게 했었는데,
실버라이트에서는 어떻게 해야할까요? 디자이너분들은 많이 궁금해 하실 것 같은데요. (저만그런가요?-_-a)


1) 익스프레션 블랜드에서 실버라이트 프로젝트로 파일을 하나 만듭니다. 이름은 임의로 정해줍니다.


2. 프로젝트가 생성이 되었습니다.
 Usercontrol의 사이즈를 좀 작게 줄여보도록 하겠습니다.
저는 300x200으로 하겠습니다.


 3. 그리드 레이아웃의 백그라운드를 조금 다르게 바꿔보겠습니다.
그라데이션 브러쉬를 선택하시고
그라데이션 포인트를 하나 추가한 다음 위치를 밑의 그림처럼 배열해 주시기 바랍니다.


4. 재생시킬 음악을 불러와야겠죠? 프로젝트에서 우클릭 하시고 기존항목을 추가합니다.
그래서 자신이 저장한 음악 파일경로를 찾습니다.
아니면 직접 드래그 해서 가져오는 방법도 가능합니다
저는 배경만 있으면 심심할 것 같아서 이미지도 하나 어울리는 것을 추가시켰습니다.



5. 이미지를 가운데 배치 해 놓고 제공하는 버튼을 두개 배치합니다.
버튼 이름에 각 btnOn / btnOff 네임을 주었습니다.


6. 다음은 MediaElement를 Asset library에서 서치한 다음, 더블클릭을 하여 레이어에 추가시킵니다.


7. MediaElement를 추가시켰으면 속성에서 ① 네임을 myMusic 이라 주고,
동영상이 아니기 때문에 ② width값과 Height값을 각각 0으로 줍니다.
③은 화면이 빌드되었을 때 자동으로 플레이 할 것인지 체크하는 것인데요.
저희는 on버튼을 클릭해야 실행되도록 해야하기 때문에 uncheck 해주시길 바랍니다.
④는 소스를 찾는 것인데요
화살표를 클릭하면 현재 프로젝트의 모든 Media가 나오는데, 방금 추가한 음악파일을 선택합니다.


8. 다음으로는 버튼에 각 클릭했을시에 이벤트를 걸어주도록 하겠습니다.
버튼 btnOn을 선택하시고 속성 이벤트 창에 Click 이벤트를 더블클릭하면
이벤트가 생성되면서 cs파일이 열리게 됩니다.


9. 다음과 같이 코드를 적어주시길 바랍니다.

10. btnOff 네임을 가진 버튼도 정지 기능을 넣어야겠죠?
마찬가지로 버튼의 이벤트를 생성하신 후 다음과 같이 적어줍니다.


11. 빌드를 하여 확인합니다 - 잘 되시나요?

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

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 파일에 클릭이벤트가 적혀있는데요.
다음과 같이 작성하여 줍니다.




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



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


 

안녕하세요? 정진희 입니다.
이번 시간에는 정~말 오랫만에 실버라이트로 제작을 할까 하는데요.