자신에 대한 고찰

드디어 Blend for windows 로 Template을 수정하는 마지막 강의입니다. 여기서는 ViewState를 변경시켰을 때 환경이 변하는 것에 대해서 어떻게 대처할 수 있는지를 다뤄보겠습니다. Windows 8 탭란에도 소개해드렸지만 저는 현재 EPL이라는 APP을 만들고 있습니다. 그런데 여기서 snapped View를 적용하면 다음과 같은 현상이 발생합니다. 바로 배경이 줄어드는 Shrink 현상이 발생합니다. 보는 사람한테는 조금 걸리는 것이지요. 제가 예제로 진행했던 프로젝트에서도 그런 문제가 발생합니다. 기존의 삽입했던 이미지가 정해진 공간에서 표현되다보니 이미지가 커지고 조금 커집니다. 이걸 snapped View에서는 배경을 없애주는 것이 좋겠지요. blend에서는 다음과 같이 처리..

이제 blend for windows에서 다루는 강의도 이걸 포함해서 2개정도 남았습니다. 이것만 완성된다면 그래도 디자인 템플릿을 수정하는데 있어서 어려움은 거의 없을 거라고 생각합니다. 이번에 할 내용은 Windows 8 개발툴에 내장되어 있는 애니메이션 효과를 이용해서 조금더 앱을 풍성하게 만드는 방법을 알아보고자 합니다. 물론 이전에도 말했다시피 저는 제가 만든 프로젝트로 합니다.( 참고로 샘플 프로젝트가 있긴한데 실행이 안되는 거 같습니다. 그냥 이런 기법이 있다 라고만 아시면 좋을 거 같네요. 자 우선은 State 탭은 지난번에도 보신거지요? 거기서 Base 위에 있는 버튼중 왼쪽 버튼을 누르시면 새로운 VisualStateGroup이 생성됩니다. 이름은 BackgroundState라고 지어주..

어김없이 블랜드로 하는 윈도우 8 디자인을 진행하고 있습니다. 참고로 이 자료들은 Expression Blend 공식 팀블로그에서 게시되고 있는 내용을 제 나름대로 정리해서 올리는 자료입니다. 혹시 영어로 보는게 더 편하다 하시는 분은 해당 동영상을 참고하시기 바랍니다. 생각해보니까 이 프로젝트에서 실습할 수 있도록 ContosoCookbook예제가 해당 페이지에 올라가 있습니다. 제가 만든게 마음에 안드시는 분이라면 해당 링크(http://code.msdn.microsoft.com/windowsapps/Cookbook-Sample-App-for-22e11395)로 가셔서 다운로드 받으시기 바랍니다. 저는 지금까지 한게 아까워서 계속 제 프로젝트로 진행해보고자 합니다. 이번에 해볼 일은 GroupStyl..

한창 윈도폰 공부를 할때 프로토타입을 만든다고 해서 많이 썼던 내용이 바로 이 Blend & SketchFlow인데, 이번 Windows 8이 나오면서 같이 Release되었습니다.Preview 버전으로 8/15에 공개되었고( 그러고보니까 VS 2012와 같이 공개되었네요.) 기존에 나왔던 플랫폼과 대응됩니다. 한번 보시죠. 당연히 Windows store app을 개발하기 위해서는 기존의 VS 2010이 아닌 VS2012에서 지원할 것이고 나머지는 기존 Blend 4에서도 작업할 수 있는 것을 동일하게 Sketchflow에서도 처리할 수 있게 되었습니다. 참고로 이번 Preview 버전은 2013년 7월까지 사용할 수 있기 때문에 한번쯤 궁금하신 분은 써보셔도 좋을 거 같습니다.( 물론 Preview ..

지난 포스트에 이어서 Blend for Windows에서 ItemTemplate을 수정하는 방법을 다뤄봅시다. 위에처럼 ContosoCookbook이 있으면 좋겠지만 시간적인 여유가 없는 분은 지난 시간에 했던 프로젝트를 그대로 써봅시다. 저도 그대로 따라가보고자 합니다. 우리가 하고 있던건 Grid App 프로젝트를 생성하면 자동으로 만들어지는 템플릿을 사용해서 자기 마음대로 수정하고 있던 것이었습니다. 일단 지금 열린 페이지는 GroupedItemPage.xaml에 들어 있습니다. 그런데 뭔가 Item을 담는 네모가 너무 투박하고 크기를 자기 마음대로 수정하고 있습니다. 하지만 Object창에서 개체를 다 열어봐도 Item을 선택할 수 없습니다. 여기서 item들이 담겨있는 itemGridView를 ..

찾다보니까 Windows 8에 관해서 유용한 사이트를 찾았습니다. 바로 BlendInsider라는 사이트입니다. 이름은 BlendInsider라고 되어 있는데 여기가 Expression Blend의 TeamBlog인거 같습니다. 여기에 다양한 교육자료들이 올라와 있으니 참고하시면 좋을 것 같습니다. 이번에는 여기 내용중 유용한 팁이 있어서 소개해드리고자 합니다. 바로 배경에서 그래디언트 효과를 주는 겁니다. 한번 해봅시다! 기존 예제는 Visual Studio 2012에서 진행되었지만 저는 Blend for windows에서 해보고자 합니다. 어차피 성격은 같으니까요. 만든 앱이 있다면 그걸 여셔도 되고 저는 아직 그런게 없으니까 임의의 앱인 Grid App을 하나 생성했습니다. 그리고 이미지 배경으로 ..

기존 포스트들은 예제들을 가지고 했었는데 간단한 기능에 대해서 소개해보는 것을 해보고자 합니다. 그중 이번에 소개할 내용은 이미지를 3D화 시키는 내용입니다. 블랜드 상에서는 ViewPort3D라는 이름으로 포함되어 있습니다. 우선은 WPF로 프로젝트를 아무거나 만들어 봅시다. 그리고 사진을 하나 첨부시켜봅시다. 사진을 첨부하다보면 위와 같은 메세지가 뜨게 됩니다. 경고 메세지는 아닌데 무슨 내용일까 싶은데 내용은 즉 이미지가 250kb이상의 크기가 되기 때문에 나중에 실행파일로 만들때 포함시킬 수 있도록 복사하겠느냐를 물어보는 겁니다. 물론 하는 것이 좋습니다. 다들 아시겠지만 블랜드 상에서는 미리보기, 즉 섬네일이 지원됩니다. 그래서 프로젝트 창에서 해당 사진에 마우스를 올리면 와 같이 미리보기가 되..

계속된 예제 복습입니다. 이번 포스트에서 다룰 내용은 Button을 StackPanel상에 집어넣어서 애니메이션 효과를 줘보려고 합니다. 우선 애니메이션을 사용하려면 Storyboard를 잘 다룰줄 알아야 합니다.물론 이전 포스트들을 계속 지켜봤다면야 금방할 겁니다. 이번 시간의 주제는 버튼을 눌렀을 때 포인트가 되는 원이 자신이 원하는 방향으로 움직이게끔 하는겁니다. 하나씩 따라해봅시다. 일단 Wpf Applicaiton으로 Animation이란 프로젝트를 하나 생성합니다. 그리고 Grid를 하나 임의로 생성한 후 그 안에 Rectangle과 TextBlock을 하나 삽입해줍니다. 뭐 쉬운 방법으로 Rectangle과 TextBlock을 Grid로 묶는 방법이 되겠지요. Object 창에서는 다음과 같..

6월 30일에 진행되었던 Windows 8 코딩 캠프에 나온 Expression Blend 예제입니다. 한번 예제를 통해서 다시 들어가 보겠습니다. 저번과 마찬가지로 WPF Application으로 KeyPad라는 이름의 프로젝트를 생성합니다. 우선은 휴대폰에서 뜨는 키패드를 만들어보고자 합니다. 그런데 그러기에는 기본 MainWindow가 커보입니다. 그래서 Object 창에서 Window를 선택한 상태에서 크기를 적당히 조절해봅니다. 키패드니까 Height이 큰 방향으로 지정해주면 좋겠지요. 그러고 나서 해당 LayoutRoot안에 Grid를 삽입합니다. 방식은 화면 우측에 보이는 ToolBox내에서 위와 같은 Grid를 선택한 후 더블클릭을 해주면 Object 창에 삽입이 됩니다. 다만 크기가 처음..

6월 30일에 진행한 첫번째 예제는 바로 Grid Splitter를 사용한 Grid 분리입니다. 예시를 통해서 따라가도록 하겠습니다. 우선 Splitter라는 말에서 알 수 있듯이 Grid Splitter란 Grid간의 분리를 쉽게해주는 하나의 컨트롤입니다. 가장 큰 특징이 바로 사용자가 어플상에서 Grid 간격을 다시 해줄 수 있다는 것이지요. 우선 Blend상에서 WPF Application으로 Grid Splitter라는 이름으로 프로젝트를 하나 생성합니다. 가운데에 이런 MainWindow가 있을 겁니다. 우리는 이 것을 하나의 표라고 볼 수 있습니다. 즉 Row가 1 Column이 1인 하나의 표인 겁니다. 여기에 어떤 도구를 사용한다면 한개의 표를 분리할 수가 있습니다. 상단과 좌측에 있는 두..

Expression 시리즈의 마지막, 웹으로 보내는 작업입니다. 기존에 작업을 했으니 이제 클라이언트에게 우리는 이정도 만들었다 확인해달라고 할만한 결과물을 보여줘야겠지요. 그때 웹으로 하면 어떨까요? 그래서 이번 강의는 Expression Web으로 진행됩니다. 일단 기본 폼은 지지난 포스트에서 했던 비디오 플레이어입니다. 기억은 하시죠? 동영상도 같이 삽입한 형태입니다. 제걸 올리려 해도 용량제한때문에 기존 파일로 대체하겠습니다. 자 이렇게 만들었는데 이걸 웹으로 올리려면 어떻게 할까요? 우선 지금 생성한 파일의 원본은 여기에 있습니다. 바로 그 프로젝트가 있는 폴더의 Bin-Debug로 들어가시면 위와 같은 파일들이 있습니다. 이중 Default.html을 실행시키면 실제 실행시켰을 때와 똑같은 동..

지난 포스트에서 동영상을 인코딩하는 방법을 다룬데 이어서 이번에는 블랜드를 활용하여 코드로 이벤트를 만드는 작업을 조금더 보완하고자 합니다. 물론 이번에도 기존의 프로젝트가 있어야 진행이 되기 때문에 다음과 같이 첨부해드립니다. 받으셔서 블랜드로 실행시키면 됩니다. Interaction이라는 게 뭘까요? 제가 생각하기에는 사용자가 어떤 개체에 Action을 가했을 때 그 개체가 상호적으로 나타내는 Action이 아닐까 하는 생각을 해봅니다. 요새 많은 관심을 끌고 있는 UI나 UX의 분야가 바로 이 인터렉션의 상위 개념이고 이런 행동양식을 설계하는 것을 보통 인터렉션 디자인이라고 일컫는 것 같습니다. 아무튼 제일 효과적인 반응은 사용자가 목적으로 하는 개체를 선택했을 때 뭔가 깜빡이고 이동하는 애니메이션..

이번에는 지난 시간에 만든 동영상 파일을 활용하여 Encoder를 써보는 작업을 해보겠습니다. encoder는 보통 팟인코더 많이 사용하시지요? 그런 것과 마찬가지로 Expression Studio 상에도 Encoder가 있습니다. 물론 역할은 파일의 포멧을 변경해서 용량을 효율적으로 압축해주는 기능을 수행합니다. 우선 Encoder 4를 실행해봅니다. 기존 동영상과는 다르게 처음으로 프로젝트를 실행하게 되면 다음과 같은 Start Page가 활성됩니다. 우리가 선택할 것은 파일의 포멧을 변경해야 하므로 가장 맨위에 있는 Transcoding Project를 선택합니다. 아시는 분은 계시겠지만 ms에서 공식적으로 지원하는 동영상 포멧은 바로 wmv(Windows Media Video)형식입니다. 그렇기 ..

지난 시간에 다뤘던 Video Player을 더욱 풍성하게 해보는 작업을 하고 있습니다. 우선 첨부 파일을 받고 Expression Blend로 실행시켜주시기 바랍니다. 지금 이렇게 만든 Video는 실제로 돌아갑니다. 동영상 파일만 있다면요. 일단은 프로젝트에 동영상 파일을 하나 넣어봅시다. 프로젝트른 선택한 후 마우스 우클릭을 통해서 기존 파일을 포함시키는 작업을 해봅니다. 동영상 파일이 없으시다고 하는 분은 개인 계정 폴더내의 비디오 폴더를 들어가면 Sample 비디오가 있습니다. 그걸 포함시키면 됩니다. 자 이렇게 포함시켰습니다. 이제는 화면상의 까만 창에 삽입을 해야 되는데 일단 Object and timeline상에서 vPlayer_media를 선택한 후 Project창의 동영상을 마우스 우측..

이번 포스트에서 다룰 내용은 블랜드를 켰을때 가장 좌측에 있는 Object and Timeline의 기능에 대해서 알아보고자 합니다. 지난 시간에 한 내용과 조금 다르니 첨부파일을 여신 후 프로젝트를 실행시키면 되겠습니다. 계속 봐오던 것이지만 User Control이라고 하는 것은 페이지 상에 나타나있는 개체들 전부가 포함된 것을 의미합니다. 그리고 그걸 선택하면 그냥 전체 네모 하나만 선택되는데 이는 지금까지 만든 개체가 하나의 유저컨트롤로 사용될 수 있다는 겁니다. 그래서 다른 웹페이지에서 이런 개체를 불러다가 또 하나의 요소를 쓸 수 있다는 것이지요. 그다음으로 나오는 것이 바로 LayoutRoot인데 이건 하나의 Grid입니다. 그런데 User Control을 둘러싸는 grid라는 점에서 여타의..