처음부터 꼼꼼히 읽어보기 보다는 실습 예제를 통해서 하나하나 배워나가는 중입니다만,, 재미있는 예제가 있어서 포스팅 해봅니다.
소개하기를 윈도우 비스타 스타일의 버튼을 만들어 본다는 것인데,, 아무리 만들어도 비스타 스타일에서는 2%부족한 느낌이 드는건, 역시 제 실력이 부족해서가 아닐까요??;;
실제로 방법은 간단한데, 간단한 예제인데도 삽질을 해야했습니다. 부족함 때문, 좌절하지 않겠습니다.
개발환경은 다음과 같습니다. - Blend 2.5 June Preview - Visual Studio 2008 team suite
프로젝트 생성시 Silverlight2 개발을 선택해 주어야 합니다. 저는 맨 처음에 Silverlight1버전으로 개발 프로젝트를 선택을 했었는데 -_ - ;; 좌절했습니다. 버튼을 열심히 만들고 이벤트를 등록해주기 위해서 C#코드를 입력하려고 보니, 아,, 1.0버전이구나, 싶더군요.
1.0 버전은 스크립트 언어를 이용한 개발만이 가능합니다. 2.0버전으로 오면서 C#언어과 같이 VS에서 사용하는 C#이나 VB를 이용한 개발이 가능해졌다고 합니다. -_ ㅠ 깜박했네요; 이벤트를 못 만들 이유는 없겠지만,, 1.0에서 Event를 만들어줄 방법을 모르겠습니다. 그래서 2.0으로 개발~ ;;
Silverlight2 개발을 클릭후 버튼을 만듭니다. 버튼을 이쁘게 만드는 것은 책의 내용과 동일했기에 올리지 않겠습니다.
다만, 버튼의 불빛이 비추고 비추지 않고의 Event를 걸어주기 위해서 Story보드를 두개 사용 했습니다. 하나는 MouseOver와 다른 하나는 MouseOut 스토를 보드를 만들어서 MouseOver의 경우에는 불빛이 들어오고, 반대의 경우 불빛이 살아지는 스토리보드를 만들어 주었죠.
그리고 불빛과, 버튼 모두를 Canvas로 Group지정 해줍니다. Canvas의 경우 Clip 옵션을 사용해 보았는데 꽤 괜찮더군요. Clip으로 잘라진 구역 만들 화면상에 보여주게 되는데, 버튼 이외에서 불빛이 비추는 것을 모두 잘라내어주죠.
다음과 같이 Canvas.Clip 태그를 이용해서 사각형 모양으로 잘라내었는데.
속성값은 다음과 같습니다. Rect="Start X, Start Y, End X, End Y" 이때 좌표값은 캔버스 기준에서의 좌표값입니다.
만약
빨간 네모칸만을 Clip하고 싶다면, Rect의 속성값으로는 Rect = "20,20,180,50"이 됩니다. 캔버스의 좌표의 기준은 왼쪽 상단의 점이 0,0이고 아래와 오른쪽으로 값이 증가합니다.
그 이후에 기본적으로 제공되는 Page.cs 코드에 Mouse Event를 추가해줍니다.
EventHandler함수에서는 각각의 마우스 이벤트 발생시 미리 작성해 두었던 스토리 보드가 실행되게끔 연결을 해주면 됩니다.
스토리 보드명.begin() 입니다.
마우스 이벤트를 등록 후에 버튼 클릭시 다음 페이지를 이동하기 위한 Event를 등록해주죠. 이벤트 등록시 NextPage를 만들어 주어야 했기에 또다른 Page Content를 제작하였습니다.
실버라이트 공식 페이지 : http://www.SilverLight.net 의 Lecture - Basic 친절히 동영상을 통하여 공개되어있습니다. 영어로 설명을 열심히 하고 있으나, 과감히 소리를 끄고 따라하기만 해도 됩니다. (어짜피 못 알아 듣는건가?)
이름은 거창하게 MultiPageSwitch 부분이라고 하지만, 버튼을 이용한 두개의 페이지를 이동하는 간단한 예제입니다.
특징적인 부분의 Step은 다음과 같습니다.
개발 환경은 - Blend 2.5 June preview - Visual Studio2008 team suite
1. Blend에서 Project 설계시 SilverLight1-site 개발, SilverLight2-Application개발 의 선택 SilverLight2의 개발을 선택하고, 개발 언어는 C#을 선택하였습니다.
2. 이동하는 페이지 수는 2페이지에 불과하지만 실제 생성할 페이지는 3페이지입니다. 첫번째 페이지와 두번째 페이지는 정말로 페이지를 만들어주고, Button을 생성합니다. 여기서 Button의 x:Name 태그의 속성을 기억해 두어야 하는데 이는 Button이 프로그래밍 할 때 사용될 이름입니다.
3. 두 페이지를 제외한 한 페이지는 실제 Page를 Switch할 때 수행되어야 할 함수를 구현.
코드는 예를 들었을 때
this의 초기화를 해주는 것이 제일 먼저 선언이 되어야 합니다.
this의 첫번째 사용은 PassSwitch의 클래스의 생성자 부분에서 사용이 되었고, 이때에는 this가 사용된 클래스이며, 클래스를 타입으로 갖는 개체에 대한 참조 값입니다. 따라서 PageSwitch 클래스 개체에 대한 참조값으로 스스로의 Content를 제어하는 초기화하는 부분입니다.
this.Content (PageSwitch클래스 인스턴스).Content는 맨 처음 비워졌을 경우에는 Page라는 클래스의 인스턴스로 채워집니다.
this의 두번째 사용-Navigate함수에서의 사용- 역시 PageSwitch클래스의 변수를 나타내는데 Navigete함수 호출시 넘어오는 NextPage로 Content내용을 바꾸어 줍니다.
실제로 보이는 페이지 1과 2에서는 Button의 Click Event에 대한 함수를 등록 해주어야 하죠.
다음과 같이 페이지 1과 2에서 Event Handler를 등록해주어야 합니.
Pageswitch 의 변수 ps를 생성하는데
// this.Parent as Pageswitch; 이 구문은 참으로 모르겠군요; Parent Attribute의 Pageswitch클래스의 캐스트란; 아마도 this.Parent 는 this(Page)를 호출한 PageSwitch 클래스의 인스턴스 일겁니다. 따라서 이 인스턴스로 접근하여 Navigate를 호출하는가 봅니다. ^^ 그 이후,, Navigate함수를 호출하면서 또 다른 Page의 인스턴스를 생성하면서 그것을 파라메터로 넒겨줍니.
마지막으로 프로젝트 실행시 먼저 실행되는 부분을 수정하므로, PageSwitch 클래스의 인스턴스 생성과 함께 시작되게 해야합니다.
App.cs 코드를 수정을 해주어야 하는데, OnStartup 함수에서
this.RootVisual = new Pageswitch();
수정해 주면, Pageswitch 클래스 생성이 제일 먼저 이루어 지며, 화면으로는 Page 클래스 인스턴스가 화면에 뿌려지게 됩니다.
The_Millennium_Development_Goals_Report.pdf
MakeButton.zip
