얼마전 윈도우 폰 개발 툴 베타 버전( Windows Phone Developer Tools Beta )이 배포되기 시작했습니다.


http://www.microsoft.com/downloads/details.aspx?FamilyID=c8496c2a-54d9-4b11-9491-a1bfaf32f2e3&displaylang=en


이번 개발 툴 버전의 가장 큰 특징 중 하나는
'Microsoft Expression Blend for Windows Phone Beta'의 포함입니다.
지난 버전까지는 별도의 애드인 작업을 거쳐야 했는데, 이번 버전부터는 포함되어 있습니다.

윈도우폰7 개발에 많은 관심이 있으신 분들 중에는
Expression Blend( 이하 블렌드 ) 라는 소프트웨어에 대해서 굉장히 생소할 수 있습니다.
이 소프트웨어는 마이크로소프트에서 개발되었으며,
실버라이트나 WPF 와 같은 마이크로소프트 플랫폼에서 손쉬운 그래픽 디자인을 위해서 탄생했습니다.
처음 공개적으로 배포된 것이 2007년 1월이니, 정말 최신 소프트웨어라고 할 수 있습니다.
( 현재는 4.0까지 출시되었으며, 이것이 2010년 6월의 일입니다. )

알려진 바와 같이 윈도우폰7 개발 방법은 크게 2가지로 나누어져 있습니다.
실버라이트를 기반으로 한 일반 애플리케이션 분야와
XNA 를 기반으로 한 게임 분야입니다.



아주 불행하게도 XNA와 블렌드는 연동되지 않습니다.
( 이것은 블렌드를 조금이라도 아는 분들이라면, 정말 불행한 일이라고 생각하실 것입니다. )

무슨 말이 더 필요하겠습니까?
지금 당장 윈도우폰 개발 베타 버전을 설치하신 후에 Visual Studio가 아닌,
Microsoft Expression Blend for Windows Phone Beta 실행하시기 바랍니다.




아마 위와 같은 화면이 실행되어졌을 것입니다.
실행 후에는 이 블렌드를 통해서 윈도우폰7 프로젝트를 생성합니다.







적당한 경로에 자신이 원하는 프로젝트 명칭으로 설정해주면 됩니다.
그리고 OK를 클릭하면, 프로젝트가 생성됩니다.




기존의 디자인툴에 익숙하신 분들이라면, 친숙한 모습일 것입니다.
블렌드는 사실 기능이 너무 많습니다.
개인적인 생각이지만, 포토샵 + 플래시 + 드림위버 같은 느낌이였습니다.
여러분들은 어떠신가요? ^^

그러면 코딩은 어디서 해야 할까요?
의구심이 드시겠죠? ^^
실제 코딩은 블렌드 내부에서도 가능하고, Visual Stduio를 별도로 띄워서도 가능합니다.
이것이 제가 Visual Studio 가 아닌, 블렌드를 실행시키라는 진정한 의미입니다.
즉, 개발과 그래픽 디자인이 모두 하나의 툴에서 이루어지는 것입니다.

'Projects' 탭에서 아래 그림처럼 해보시기 바랍니다.
트리 메뉴에서 MainPage.xaml.cs 에서 마우스 오른쪽을 누르시면 됩니다.



위와 같이 실행하면, 별도로 Visual Studio가 실행됩니다.
물론 Visual Studio에서 수정하면, 즉시 블렌드쪽에 결과가 반영이 됩니다.

*.cs 파일을 더블 클릭하면, 블렌드 상에서 바로 수정할 수 있는 창이 실행됩니다. ( 완전 좋다는.... )
*.xaml 파일을 더블 클릭하면, 다시 디자인 폼 수정 상태로 이동할 수 있습니다.



실행은 다음과 같이 수행합니다.








이번 베타버전에서는 빌드 성능도 꽤 많이 좋아졌습니다.
에뮬레이터 모양도 굉장히 예뻐졌습니다..^^


신고
크리에이티브 커먼즈 라이선스
Creative Commons License


이번 시간에는 간단하게 페이지 간의 전환을 해보려고 합니다.
그러기 위해서는 최소 2개 이상의 페이지가 존재해야 합니다.
그래서 첫 작업은 페이지를 추가하는 작업입니다.
역시나 이번에도 VisualStudio가 아닌, 블렌드를 실행합니다.

그리고 프로젝트에서 아래 그림과 같이 새로운 아이템을 추가합니다.








이렇게 하면 새로운 페이지가 추가되어져 있을 것입니다.
그리고 첫번째 페이지에 간단히 버튼을 추가합니다.
버튼은 Asset 패널에 컨트롤 메뉴에 있습니다.
버튼을 배치하면, 각종 속성을 제어할 수 있도록 화면 우측에 여러 윈도우가 활성화 되는 것을 볼 수 있습니다.





버튼만 화면에 있으니깐 너무 단순한 것 같아, 이미지를 화면에 배치시키겠습니다.
이미지를 위해서 프로젝트 내부에 폴더를 만듭니다.



그렇게 폴더가 만들어진 후에는 'Add Existing Item...' 메뉴를 통해서 이미지를 추가합니다.



이 때, 이미지 파일 어느 곳에 있든 상관이 없습니다.
왜냐하면, 현재 작업중이 프로젝트로 이미지 파일을 새롭게 복사를 해오기 때문입니다.
현재 작업 중인 프로젝트를 열어서 확인해 보시기 바랍니다.
이미지 파일이 자동적으로 생성되어서 복사되었음을 확인할 수 있을 것입니다.

이제 이미지를 배치해 보겠습니다.
이미지 역시 컨트롤이기 때문에 Assets 탭에서 Image 컨트롤을 선택해서 적당히 배치하시기 바랍니다.
같은 방법으로 두번째 페이지에도 추가해 주시면, 결과 확인이 쉽겠죠? ^^



이미지의 경우에는 컨트롤만 연결되었지, 아무런 변화가 없을 것입니다.
즉, 이미지 리소스를 연결해 주어야 합니다.
아래 그림처럼 현재 연결 가능한 리소스 리스트에서 하나를 선택해서 연결해 주시면 됩니다.




각 페이지마다 이미지가 잘 등장했으리라 예상이 됩니다.

혹시나 컨트롤이 잘 선택이 안되어지는 경우에는 아래와 같은 패널을 이용하시기 바랍니다.
이 패널은 컨트롤을 가장 확실하게 선택할 수 있습니다..^^





이제는 속성 창에 대한 설명을 뒤로 한채 간단하게 저 버튼들에 이벤트를 연결해 보겠습니다.
아래 그림에서 빨간색 타원 영역이 보이십니까?
그 영역에서 번개 모양의 아이콘을 클릭하면 이벤트를 연결할 수 있습니다.
버튼이 선택되어진 상태에서 해야, 버튼에 관련한 이벤트를 연결할 수 있습니다.





번개 모양의 아이콘을 클릭하면 다음과 같은 이벤트 속성 창이 등장합니다.



저는 Click 속성에 Next 를 입력한 후에 엔터키를 쳤습니다.
그러면 Next 라는 이벤트용 함수가 만들어 집니다.
각각의 상황을 모두 제어하고 싶다면,
바로 이렇게 이벤트 속성에서 함수명을 입력하고 제어하면 되는 것입니다.
아래와 같이 친절하게 함수를 만들어 줍니다.^^




페이지 전환을 위해서 저는 아래와 같이 코드를 추가했습니다.



두번째 페이지에서도 동일한 방법으로 페이지 파일명만 교체해서 추가해 주었습니다.
제가 만든 결과는 다음과 같습니다.^^



버튼을 클릭할 때마다, 페이지 이동이 발생합니다.^^
실행 프로젝트는 첨부를 하니, 참고해 주시기 바랍니다.^^
이번 시간에 Uri가 무엇인지, NavigationService 가 무엇인지 등 코드에 대한 설명하지 않습니다.^^
실제 코드 개발 관련 내용은 다른 분들이 다루어 주실 것입니다.



신고
크리에이티브 커먼즈 라이선스
Creative Commons License

MIX10에서 다양한 정보가 쏟아지고 있는데 실버라이트4 RC와 블렌드4 베타도 공개되었습니다.

Visual Studio 2010 RC에서 사용이 가능하도록 업데이트되었고 블렌드 4에서는 윈도우폰7 관련 지원도 추가되었습니다.

<프리뷰 버전과는 다르게 SketchFlow까지 포함된 완전한 버전입니다.>

<윈도우폰 애드인을 설치해야 윈도우폰 프로젝트가 추가됩니다.>


<윈도우폰 프로젝트를 만들면 다음과 같이 구성됩니다.>

다운로드 가능한 링크는 아래에 있으니 지금 바로 사용해보세요!

Silverlight 4 Tools for Visual Studio 2010 RC

Expression Blend 4 Beta

Blend Add-in Preview for Windows Phone

Blend SDK Preview for Windows Phone

신고
크리에이티브 커먼즈 라이선스
Creative Commons License
Visual Studio 2008과 Expression Blend 3를 사용 할 때 Visual Studio의 프로젝트/솔루션의 xaml 파일에서 마우스 오른쪽 버튼 클릭 후 Open in Expression Blend 메뉴를 클릭하면 Blend 3가 열리면서 디자인 작업 하는 방법을 많이 사용하실겁니다.

이번에 PDC09에서 Silverlight 4가 발표되면서 VS2010과 Blend Preview for .NET 4를 설치 하신 분들이 많을텐데 VS2010에서 Open in Expression Blend 메뉴를 클릭하면 Blend Preview for .NET으로 열리는게 아니고 Blend 3로 열리는것을 경험 할 수 있습니다.

기존에 설치된 Blend 3 때문에 그런 줄 알았는데 VS2010과 Blend Preview for .NET 4만 클린 설치 해도 Blend가 실행 되지 않는다고 합니다. 이 경우에는 Open in Expression Blend 메뉴가 나타나지 않는다고 하네요.


결론적으로 Blend 3가 함께 설치된 경우에만 메뉴가 나타나며 그것도 Blend 3로만 연결되어 실행되는 결과가 나타납니다.
이 문제를 해결하기 위해서는 레지스트리를 수정해서 해결 할 수 있습니다.

레지스트리 편집기에서 HKLM\Software\Microsoft\Expression\Blend 항목에서 VS키에서 String 이름을BlendLaunchPath 로 해주고 Expression Blend의 경로를 입력해주면 됩니다.

 1: [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Expression\Blend\VS]
 2: "BlendLaunchPath"="\"c:\\Program Files\\Microsoft Expression\\
     Blend Preview for .NET 4\\Blend.exe\""

x64 시스템의 경우 경로가 조금 다릅니다.
HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Expression\Blend\VS

Wow6432Node 아래에 있으니 주의하시고 수정하시기 바랍니다.

수정하기 번거로우면 첨부 파일을 열어서 시스템에 맞는 파일로 실행시켜주면 됩니다.



※ 원문은 Microsoft의 Tim Heuer 블로그에 있습니다.
신고
크리에이티브 커먼즈 라이선스
Creative Commons License


 

티스토리 툴바