자신에 대한 고찰

프로젝트시 발표에 필요한 프로그램을 만드는데 XNA를 잠깐 활용해봤습니다. 들어간건 Kinect의 관절 정보 / GifAnimation 재생 / 화면 Fade in / out 입니다.

2012/03/19 - [About WP7] - [WP7 개발 기초] ScrollViewer 오랜만에 WP7 관련 포스팅을 합니다. 물론 잡지에 기고하는 것으로 간단한 WP7에 대한 이야기를 했었지만, 다시 공부해볼 필요성을 느끼고 조금씩 나아가렵니다. 지난 포스트에서는 단순히 xaml코드상에 자신이 원하는 문구를 삽입해서 scrollViewer로 내용을 확인할 수 있는 것을 시연했습니다. 이번에는 xaml은 쓰지 않고 cs상에서 문구를 받아와서 표현하는 것을 구현해보고자 합니다. 우선 평상시에 하던 것처럼 윈도우폰 프로젝트를 생성합니다. 이번 프로젝트의 이름은 PublicClasses입니다. 물론 단순한 폰 화면이 디자인뷰를 나타나겠지만 이번에는 xaml상에서 개체를 삽입할 것이 아니라 외부의 어셈블리..

이번 시간에 다뤄볼 내용은 작년 9월에 있었던 Build Windows Conference에서 언급된 내용입니다. 이때 MS ATG부서의 PM Chales Cox 씨가 나와서 자신이 아주 단기간에 게임을 만들어보겠다고 합니다. 아마 그때 사람들은 이말을 믿었을까요? 그런데 그게 현실로 나타났네요. 원본은 여기서 확인할 수 있고, 자료는 없습니다. 뭐든 자신이 직접 만들고 결과를 보는게 낫겠지요. 그전에 윈도폰에서 게임이 어떻게 돌아가는지에 대한 언급이 필요한 것 같네요. 윈도우폰에서의 게임이란 어떻게 보면 잘 차려진 밥상위의 먹음직스런 반찬일 수 있습니다. MS는 이미 Xbox라는 플렛폼을 통해서 콘솔게임에 대한 노하우가 갖춰진 상태였고, 여기에 윈도우폰 게임의 환경을 구축하기 위해서 Cross Plat..

앱을 만들다보면 넣고자 하는 내용이 화면의 크기를 넘어가는 경우가 발생합니다. 이때 사용하는 개념이 바로 이번 시간에 소개할 ScrollViewer입니다. 이것도 역시 이전에 다뤘던 StackPanel처럼 정해진 공간을 독립적으로 차지하게 됩니다. 사실 윈도우폰에는 스크롤바라는 개념이 있기는 하지만 우리 눈에는 보이지 않습니다. 그냥 화면을 누른 상태로 위나 아래를 드래그한다면 그 자체가 스크롤바가 되는 겁니다. 역시 만들어보면서 실험해보겠습니다. 이렇게 하면 제목 부근이 색다르게 바뀌겠지요? 이제 저희의 이야기를 풀어나가고자 합니다. 그전에 어떤 폰트를 쓸지는 이전에 배운 Style 개념을 사용하면 좋겠지요. 안그러면 일일이 폰트를 삽입해야 되기 때문입니다. 이렇게 지정해준 style을 ScrollVi..

지난 포스팅에서 Grid와 StackPanel에 대한 걸 잠깐 다뤄봤었는데 이번에는 그 중 StackPanel에 대한 내용을 조금 여러가지 실험을 통해서 확인해보고자 합니다. 이 StackPanel에도 Orientation이 있습니다. 보통은 폰 전체의 Orientation을 언급하기도 하지만 stackPanel에서는 폰 전체에서와 다르게 방향과는 전혀 무관하고 내부 컨텐츠의 방향을 결정해줍니다. 물론 이 속성에는 Horizontal과 Vertical이 있겠구요. 그래서 예제로 든 내용이 바로 화면을 건드릴때마다 컨텐츠의 방향이 바뀌는 내용입니다. 우선 StackPanel을 선택한 상태에서 Properties 창의 Event 항목을 보면 중간에 ManipulationStarted가 있습니다. 이 항목을 ..

이번 시간부터는 폰의 레이아웃에 대해서 다뤄보고자 합니다. 첫번째로 말할 개념은 Grid라는 겁니다. MainPage.xaml을 보면 가장 상위에 있는 개념이 바로 Grid라는 건데 이건 그냥 하나의 셀이라고 보시면 됩니다. 지금 디자인뷰상에서 선택된 화면이 바로 LayoutRoot라는 이름의 grid입니다. 지금 이 grid 안에 StackPanel이 들어 있고 contentPanel이란 이름의 Grid가 하나더 삽입이 되어 있습니다. 이렇게 하나의 Grid안에 여러개의 개체를 넣을 수 있습니다. 한번 이 grid를 삭제하고 ContentPanel로만 이뤄진 Grid를 생성해봅니다. 지금과 같이 쓴것이 바로 Grid가 생성된 겁니다. 디자인뷰와 병행해서 보시면 아시겠지만 이렇게 설정만 해줬을 뿐인데 화..

지난 포스팅에서는 Border라는 개념을 알아봤습니다. 그러면 어떤 걸 가지고 TextBlock을 꾸밀 수 있는 지에 대한 고민이 필요하겠네요. Properties를 유심히 보신 분이라면 아시겠지만 Font를 수정할 수 있는 속성은 총 5개가 있습니다. - FontFamily : 글자체 - FontSize : 글자의 크기 - FontStretch : 글자의 수축 확장 표시 - FontStyle : 글자의 비스듬함 설정 - FontWeight : 글자의 볼딕 처리 설정 이중에서 몇가지는 값이 고정되어 있는 것도 있고, 수정해도 값이 변하지 않는 수치들이 있습니다. 이를 직접 해보고자 합니다. 저는 이렇게 글을 써봤습니다. 하지만 결과물은 분명히 짤릴겁니다. 가로에서 표현할 수 있는 글자 수는 제한되어 있으..

오랜만에 다시 윈폰 개발에 뛰어들었습니다. 이번 시간에는 TextBlock의 테두리를 설정할 수 있는 border란 요소에 대해서 언급해보고자 합니다. 일단 예시부터 보겠습니다. 지금 보고 계신건 그냥 단순하게 Content Panel 상에 TextBlock하나만을 삽입한 겁니다. 여기서 어떤 효과를 줄 수 있을까요? 뭐 글자체를 변경시킬 수도 있는 것이고, 아니면 지난 포스팅에서 했던 내용처럼 글씨 자체에 그라데이션 효과를 줄 수도 있는 겁니다. 그러면 테두리를 어떻게 할 수도 있지 않을까요? 그것에 대한 내용이 바로 border 속성인 겁니다. 다음과 같이 짜봅니다. Border속성은 이렇게 줄 수 있습니다. 그 내에 들어가는 요소를 child처리를 해줘서 항상 들어가게 할 수 있습니다. 그런데 책에..

이번에는 터치이벤트에 대해서 다뤄보고자 합니다. xna에선 touch라는 클래스가 따로 있었지만 실버라이트에서는 Manipulation이라는 이벤트를 통해서 터치를 구현할 수 있습니다. 우선 새로운 프로젝트를 열고 Ellipse를 하나 삽입합니다. 물론 안에 색깔을 채우는 건 Fill이나 stroke 항목을 건드리면 되겠지요. 이제 Manipulation Event를 삽입해야 합니다. 뭐 일일히 이름을 쳐도 되지만 Properties창을 통해서 간단하게 이벤트를 삽입할 수 있습니다. ellipse를 선택한상태에서 Events를 들어가 Manipulation항목을 검색하면 3개가 뜨는데 그중 Manipulation 항목을 선택해 더블클릭해주면 코드가 자동으로 생성됩니다. 그런 후에 Ellipse의 안을 R..

지난 포스팅에선 DispatcherTimer를 사용해서 1초마다 초침이 움직이는 것을 확인할 수 있었습니다. 하지만 시계가 1초에 한번씩 움직이는 시계만 있을까요? 어쩌면 1초에 6도씩 부드럽게 움직이는 시계도 있을 수도 있겠지요. 이런 효과를 다른 말로는 애니메이션이라고도 합니다. xna를 개발해보신분이라면 잘 아시겠지만 윈도우폰 7의 화면 갱신 속도는 1초에 30번씩 깜빡입니다. 다른말로는 1초에 30frame 씩 표현할 수 있다는 것이지요. 보통 영화의 fps가 24프레임임을 감안한다면 30프레임정도가 나와도 충분히 부드러울 겁니다. 실버라이트상에서는 이 갱신 주기와 동기화된 타이머가 하나의 이벤트로 존재합니다. 같이 예제를 하면서 보시지요. 일단 RotatingText라는 이름으로 WP7 프로젝트..

TextBlock과 Image에 대한 정보를 봤으니 이번에는 도형을 만드는 법과 그 도형을 변형하는 방법에 대해 알아보겠습니다. 우선 기본 프로젝트에 포함된 Reference중에는 System.Windows.Shapes라는 네임스페이스가 이런 도형을 생성할 수 있게끔 도와줍니다. 그 클래스중에는 Ellipse와 Rectangle 등이 있지요. 우선 ContentPanel안에 다음과 같이 삽입해봅니다. 그럼 아래와 같이 큰 타원형이 생깁니다. 그럼 Ellipse안에 HorizontalAlignment와 VerticalAlignment를 설정하는 걸 집어넣어봅시다. 사라지는군요. 그런데 지금 디자인뷰에서도 아주 조그맣게 보이다시피 이 타원이 수축된겁니다. 왜냐하면 이 Ellipse라는 것 자체가 최소크기라는..

한참만에 실버라이트로 돌아오는 것 같습니다. 지난 포스팅에서 공유 브러시에 관해서 언급했으므로 이제 이걸 하나의 스타일로 묶는 방법에 대해서 언급해보고자 합니다. 우선 이를 다루기에 앞서서 실버라이트 내에 x:key와 x:Name이라는 개념을 알아야 합니다. 보통 처음에 보이는 xaml파일에는 모두 .cs라는 c#기반의 코드가 숨겨져 있습니다. 그런데 이런 코드에서 xaml상에 위치한 리소스를 불러올 일이 있다면 this.Resources["..."] 라는 식으로 자신이 원하는 리소스를 불러올 수 있습니다. 물론 brush라는 Resources가 필요하다면 코드내에 this.Resource["Brush"]로 적용하면 되겠지요. 그러면 우리가 할일은 앞에서 다룬 공유 브러시(예를 들면 LinearGradi..

자 그럼 공유 브러시를 효율적으로 사용해봅시다. 일단 목적은 TextBlock을 여러개 삽입하고 각각의 Foreground에 같은 LinearGradientBrush를 적용하기를 원하는 겁니다. 기존에는 각각의 TextBlock에 일일이 설정해줘야 했지만 공유 브러시를 쓴다면 코드의 줄은 급격히 줄어들겁니다. 우선 첫번째 해야 할 일은 App의 구동시 LinearGradientBrush를 미리 정의해놓는 겁니다. 이에 관한 항목은 MainPage.xaml상에 Resource라는 Collection을 만들어서 정의합니다. PhoneApplicationPage내에서 정의되면 됩니다. 저는 맨처음 폰트 정의가 된곳 바로 밑에 이렇게 작성했습니다. 지금 나온중에 x:key라고 정의되어 있는 부분이 있는데 이는 ..

지난 시간에 했던 내용을 계속 이어서 나가겠습니다. 이와 관련된 TextBlock의 속성을 주기 위해서는 다음과 같이 구성했습니다. 멀리서 보면 저 GradientStop을 표현하기 위해서 조금 길게 쓴거 같은 느낌이 듭니다. 그런데 Xaml의 특성상 컬렉션 내에 지금처럼 여러개의 특성이 들어가면 컬렉션에 대한 태그는 삭제해줘도 된답니다. 말로 표현하면 다음과 같이 되는거죠. 그리고 여기서 한 줄 더 줄일 수 있습니다. GradientBrush안에 속에 파생되어있는 클래스라면 따로 태그를 붙일 필요가 없는겁니다. 지난 시간에도 잠깐 언급이 되었지만 GradientBrush안에 Radial 이나 Linear에 관한 클래스가 있고 그안에 또 GradientStops에 관한 클래스가 나와 있는 것을 알 수 있..

이번에 다룰 이야기는 색상에 관한 속성입니다. 다시 기본으로 돌아가서 이번에는 ContentPanel의 배경을 수정해봅시다. 아주 간단하게 위처럼 표현한다던가 지난 시간에 언급했던 속성 엘리먼트 구문을 적용시켜보면 와 같이 쓸 수 있겠습니다. 물론 결과는 ContentPanel의 배경색이 Blue로 나오겠지요. 여기다가 역시 지난 시간에도 나왔던 Foreground를 입혀보겠습니다. 여기서 주목해야 될점이 있다면 바로 Foreground와 Background 입니다. 지금 ContentPanel의 Backgound와 textBlock의 Foreground가 서로 독립적으로 보이는 겁니다. 전전 포스팅에서 FontStyle 속성이 지역인지 전역인지에 따라서 영향이 미친다고 했었는데 그건 같은 속성을 공유할..