Shooter's Blog

윈도우폰 7 개발환경 공개

2010-03-16T15:00:00.000+09:00

오늘부터 3일 동안 미국 라스베가스에서 MIX10 컨퍼런스가 열리는데 알려진대로 첫날 키노트에서 윈도우폰7 관련 정보가 공개되었습니다.
실버라이트 기반으로 어플리케이션 개발이 가능하고 게임은 XNA Game Studio 4.0으로 가능합니다.
http://developer.windowsphone.com/windows-phone-7-series/ 에 가보시면 윈도우폰7 SDK를 포함한 다양한 정보에 접근이 가능합니다.
발표되자마자 빠르게 설치를 해보았는데 설치되는 요소는 다음과 같습니다.

기본적으로 윈도우폰 7 개발 관련 애드인과 기반이 되는 실버라이트 4와 SDK가 설치됩니다.
여기서 설치되는 실버라이트 4의 버전은 RC버전입니다.
그리고 XNA Game Studio 4.0과 윈도우폰 에뮬레이터 등이 설치되고 Visual Studio 2010 Express for Windows Phone도 함께 설치되는데 Visual Studio 2010 RC버전에서도 마찬가지로 개발 환경이 구성됩니다.

설치를 하고 Visual Studio 2010을 실행 해 보면 개발 환경에 윈도우폰과 XNA 4.0 템플릿이 추가된것을 볼 수 있습니다. 일반적인 어플리케이션을 개발 할 때는 실버라이트로 하면되고 게임은 XNA를 선택해서 개발하면 됩니다.

윈도우폰 어플리케이션을 선택하고 프로젝트를 생성하면 다음과 같은 작업창이 나타납니다.

기존의 익숙한 환경에 윈도우폰 UI의 모습과 실버라이트 기반이기 때문에 XAML 코드가 나타나는것을 알 수 있습니다. 개발 언어는 역시 C#으로 하면 되어서 기존의 지식을 살려서 따로 학습을 하지 않아도 바로 적용할 수 있습니다.

빌드를 하면 윈도우폰의 에뮬레이터가 실행되면서 윈도우폰의 경험을 그대로 살려 볼 수 있습니다.

윈도우 모바일의 에뮬레이터와는 다르게 아주 빠르게 실행되어 쾌적한 개발 환경을 제공합니다.
MIX10에서 발표가 되자마자 빠르게 설치하여 기본 개발 환경을 알아보았는데 앞으로 세세한 정보와 XNA에서의 개발환경도 알아보도록 하겠습니다. Microsoft의 윈도우폰 많이 기대해주세요 :)

실버라이트4 RC와 블렌드 4 베타 공개

2010-03-16T14:32:00.000+09:00

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

Visual Studio 2010 RC

2010-02-11T11:13:00.000+09:00

드디어 Visual Studio 2010 RC가 공개되었습니다. MSDN에 먼저 공개되었고 오늘 일반에 공개되어 모두 사용 할 수 있습니다.

Beta 2에서 RC버전으로 기능상으로는 특별히 추가된 것은 없고 버그 수정과 성능 향상에 많은 공을 들인 것 같습니다. RC가 발표 되자마자 여기저기서 사용기가 올라오고 있는데 퍼포먼스 향상에 많은 찬사를 보내고 있습니다.

알려진 것처럼 VS2010에는 IDE에 WPF가 일부 사용되었는데 하드웨어 가속을 사용하여 렌더링을 함으로써 퍼포먼스에 도움이 되고 있습니다.

RC버전의 성능에 만족을 느끼고 VS2008을 바로 삭제 했다고 하는 사람도 있을 정도로 완성도가 많이 좋아졌으나 아쉬운점도 많이 있습니다.

기본적인 요소는 대부분 포함되었지만 Silverlight 4 Beta 개발을 하기 위해선 여전히 VS2010 Beta 2 버전을 사용해야 합니다. RC 버전에는 기본적으로 Silverlight 3 개발 환경만 포함되었고 Silverlight 4는 이전과 마찬가지로 따로 Tool을 설치해야 하는데 아직 RC에 지원되는 Tool이 발표되지 않았습니다.

그리고 또 다른 아쉬운 점은 모바일 개발환경도 포함되지 않았습니다.

일반적으로 RC 단계에서는 모든 기능요소가 포함되고 최종 마무리 작업을 해서 RTM버전이 나오는데 VS2010 RC에는 아직 포함되지 않은 부분이 있습니다.

모바일 개발 환경 같은 경우는 윈도우 모바일 7 환경이 포함 될 가능성도 있어서인지(확실한 정보는 아닙니다. 추측입니다 ^^;) 아직까진 전혀 모습을 볼 수 없는게 많이 아쉽습니다. 그렇지만 기본적인 개발환경 지원이나 성능 등에서는 많은 사람들이 합격점을 주고 있으니 Beta에서 망설였던 분들도 사용해보시면 좋을 것 같습니다.

Visual Studio 2010과 Blend Preview for .NET 4 통합 문제

2009-11-23T17:35:00.000+09:00

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 아래에 있으니 주의하시고 수정하시기 바랍니다.

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

OpenInBlendRegHack.zip

※ 원문은 Microsoft의 Tim Heuer 블로그에 있습니다.

Silverlight 4 Beta 공개!

2009-11-19T04:00:00.000+09:00

Microsoft PDC09 행사 2일째가 진행중인데 Scott Guthrie의 키노트 발표에서 드디어 Silverlight 4가 공개되었습니다.

올 해 3월달에 MIX09 행사에서 Silverlight 3 베타가 발표되고 7월에 정식 버전이 나왔는데 이후 4개월만에 다시 새로운 버전 베타가 나왔네요.

PDC09 생중계를 보면서 설마설마했는데 발표가 끝나자마자 바로 다운로드가 가능해졌습니다.

아쉽게도 Visual Studio 2010 Beta2에서만 설치가 가능하며 Visual Studio 2008에서는 SL4를 지원하지 않습니다.

그렇지만 VS2010에서 새롭게 향상된 점을 이용한 SL4개발이 기대되지 않나요? ㅎㅎ

키노트에서 SL4의 새로운 점과 데모를 보여줬는데 그 동안 요구사항이 많았던 기능들이 대부분 들어간 것 같습니다.

많은 기능 향상이 이루어졌지만 구글 크롬 브라우저의 정식 지원도 눈에 띄네요.

기존에도 구글 크롬에서 실버라이트가 사용이 가능했지만 공식 지원이 아니라서 그런지 간혹 문제점이 발견되기도 했었는데 SL4에서는 크롬 브라우저를 지원하게 되었습니다.

개인적으로는 웹캠과 마이크 지원, 그리고 HTML 지원 등이 가장 맘에 드네요.

이 외에도 정말 많은 기능과 성능 향상이 이루어졌습니다.

자세한 내용은 Silverlight 4 Beta 공식 사이트에서 확인이 가능합니다.

일단 SL4 발표 소식을 간단하게 전하며 앞으로 차근차근 Silverlight 4와 Visual Studio 2010에서의 개발 방법에 대해 알아보도록 하겠습니다.

Visual Studio 2010 Beta 2 or Visual Web Developer Express 2010 Beta 2 (pick one)
Silverlight Tools for Visual Studio 2010
Expression Blend for .NET 4 Preview – for authoring Silverlight 4 and WPF 4 applications
WCF RIA Services (formerly .NET RIA Services) (NOTE: This is actually included in the SL Tools for Silverlight 4)
Silverlight 4 SDK CHM (offline documentation) – optionally online here as well
Updated Silverlight Toolkit for Silverlight 4
Developer runtimes: Windows and Mac platforms
Silverlight 4 SDK only – not needed if you install the tools above
Silverlight Media Framework – a new, Open Source media player framework for you to use.

VS2010 베타2의 WPF & Silverlight 디자이너 성능 향상 팁

2009-10-28T00:05:00.000+09:00

Visual Studio 2010 베타2에서는 WPF와 Silverlight 개발을 위한 디자이너(코드네임 Cider) IDE가 많이 향상되었습니다. VS2010 베타1에서 특히 사용하기 불편 했던 점이 성능에 관한 문제였는데 베타2에서는 불편함 없이 사용이 가능합니다.

Channel 9의 VS2010 베타2의 Cider 디자이너 소개 동영상을 보시면 성능을 더욱 향상 시킬 수 있는 팁이 소개됩니다. VS2010 베타2가 개발 되는 중에 늦게 발견되어 베타2에는 포함되지 못했다고 하는데 최종 릴리즈 때는 따로 수정이 불필요 하도록 포함된다고 합니다.

간단하게 레지스트리에 키를 추가 해주는 방법으로 성능 향상이 이루어 진다고 하는데 방법은 다음과 같습니다.

※ 레지스트리 수정은 시스템에 큰 영향을 줄 수 있으니 주의 바랍니다.

1. 먼저 VS가 실행 중이라면 모두 종료합니다.

2. regedit 명령으로 레지스트리 편집기를 엽니다.

3. HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\10.0 키를 선택합니다.

4. 마우스 오른쪽 버튼을 클릭하고 "새로만들기 - 키"를 선택하고 ClrHost라는 이름을 줍니다.

5. 새로 추가한 키에서 다시 마우스 오른쪽 버튼을 눌러 DWORD32 값을 StartupFlags 이름으로 추가합니다.

6. 값은 5로 해줍니다.

7. 레지스트리 편집기를 종료합니다.

8. 이제 모든 수정이 완료되었고 평소처럼 VS를 사용하면 됩니다.

실제로 어느정도 성능이 향상되는지는 알 수 없으나 강력히 추천하고 있으니 꼭 적용시켜서 사용하시길 바랍니다.

VS 2010 Beta 2 설치 과정에서 Silverlight SDK 문제

2009-10-22T10:15:00.000+09:00

기존에 Visual Studio 2008에서 Silverlight 3 SDK를 설치하여 사용 하시던 분들 중에

Visual Studio 2010 Beta 2를 설치 할 때 Silverlight SDK에서 에러가 나는 경우가 있습니다.

Silverlight 3 SDK가 초기에 배포된 이후 마이너 업데이트 되어 GDR 버전이 나왔는데

VS2010 설치를 할 때 같이 설치되는 Silverlight 3 SDK 버전은 최신 버전(GDR)입니다.

VS 2010 Beta 2에서는 최신 버전을 자동으로 설치하지 않고 설치 과정에서 에러를 표시하게 되는데

이 문제는 RTM에서는 해결 될 예정이라고 합니다.

그래서 초기 버전의 Silverlight 3 SDK를 사용 하시던 경우에는 먼저 삭제를 하고 Visual Studio 2010 Beta 2를

설치하시면 에러 없이 깔끔하게 설치가 완료 될 것입니다.

그러나 이미 설치 한 경우도 Visual Studio 2010 Beta 2 사용에는 문제가 없고

단지 Silverlight 3 SDK 버전 문제로 에러가 나는 것입니다.

최신 버전의 Silverlight 3 SDK를 사용하기 위해선 Silverlight 3 SDK를 삭제하고

최신 버전인 GDR 버전으로 다시 설치 해 주면 됩니다.

여기에서 Silverlight 3 SDK GDR 버전의 다운로드가 가능합니다.

Visual Studio 2010 Beta 2 공개

2009-10-20T11:07:00.000+09:00

안녕하세요. 오랜만에 포스팅 하네요 :)

우리나라 시간으로 오늘 새벽에 Visual Studio 2010 Beta 2가 공개되었습니다.

MSDN 가입자를 대상으로 우선 공개되었고 일반 공개는 10월 22일로 예정되어 있습니다.

Visual Studio 2010 Beta 2부터 제품군 변화와 함께 로고도 새롭게 바뀌었습니다.

좀 더 세련되고 상큼하게 바뀌어서 개발자를 더욱 즐겁게(?) 해주고 있네요.

· Microsoft® Visual Studio® 2010 Professional

· Microsoft® Visual Studio® 2010 Professional with MSDN

· Microsoft® Visual Studio® 2010 Premium with MSDN

· Microsoft® Visual Studio® 2010 Ultimate with MSDN

제품군은 Team Suite 버전이 Ultimate로 바뀌었고 Professional 버전은 그대로 남습니다.

그 중간 버전들이 Premium으로 통합되었고 무료인 Express 버전 역시 제공됩니다.

Visual Studio 2010 Beta 2의 초기 화면은 위와 같습니다. Beta 1에서 문제되었던 성능이나 기타 여러 문제점들이 많이 개선되었다고 합니다.

앞으로 제 블로그나 VSTS2010 공식 블로그를 통해서 자세한 내용을 알아보도록 하겠습니다.

많은 기대 해주세요~

Silverlight 3 & Blend 3 RC 공개!!!

2009-07-10T01:56:00.000+09:00

Silverlight 3 정식버전이 드디어 공개됐습니다.

현지 시간으로 7월 10일에 공개된다는 기사가 있었는데 약간 일찍 나왔습니다.

Blend 3도 공개됐는데 RC라고 붙은거 보니 아직 완전 정식판은 아니지만 그래도 이번에는 SketchFlow까지 포함되어서 MIX09에서 보여 주었던 모든 기능을 사용 할 수 있습니다.

Deep Zoom Composer도 역시 Silverlight 3에 맞게 업데이트 되었습니다.

아래 링크에서 다운받을 수 있습니다.

Silverlight 3 Tools 설치하시면 SDK도 같이 설치되니 한번에 설치 하실 분들은 참고하세요.

Silverlight 3 SDK

Silverlight 3 Tools for Visual Studio 2008 SP1

Blend 3 Trial

Deep Zoom Composer

Imagine Cup 2009 세계대회 결과

2009-07-08T06:00:00.000+09:00

결론부터 말하자면 임베디드 부문 한국 대표인 Wafree팀이 세계 대회 1등을 했습니다.

Wafree팀은 처음에 소프트웨어 디자인 부문 한국대표 선발전에 출전했는데 2위를 하는바람에 세계대회 출전권을

얻지 못했었는데 다시 다듬어서 임베디드 부문 선발전에 출전을 해서 한국대표 선발전에서 1위를 하고 결국 이집트

세계 대회에서 1등을 하게 되었습니다.

소프트웨어 디자인부문 한국대표 선발전에서 같은 조에 속해 있어서 잘 알고 있고 임베디드 부문 한국대표 선발전에서

자원봉사를 했기 때문에 다시 한번 볼 수 있었습니다.

그 때 팀원들의 기념 사진도 찍어주고 국가대표로 열심히 해달라는 당부도 했었는데 결과가 좋게 나왔네요.

이번 대회에는 소프트웨어 디자인, 임베디드 개발, 디자인 3개 부문에서 세계 대회에 출전했는데 최종 결과는

임베디드 부문에서만 수상 결과가 나오게 되었습니다.

소프트웨어 디자인 부문의 아이디어는 굉장히 독특했는데 신선했는데 아쉽게 되었고 디자인 부문은 이번에 처음으로

세계대회에 출전했는데 수상은 못했지만 세계 6강에 드는 놀라움을 보여주었습니다.

우리나라 대표로 출전한 선수들 모두에게 박수를 쳐주고 싶네요!!! 정말 수고하셨습니다.

MS의 공식 보도 자료는 여기에서 보실 수 있습니다.

이제 날이 밝으면 뉴스 기사도 빵빵 터질텐데 더 자세한 내용은 그쪽에서 확인 해주세요. ^^

MSP 2기가 만드는, MSP 3기 백서(白書)

2009-06-03T12:23:00.000+09:00

MSP 2기들이 MSP 3기를 준비하시는 분들을 위해 동영상을 제작하였습니다.

이 동영상에는 MSP 소개 , 활동 경험담, ‘나만의 공식’ TIP 등 다채로운 내용이 담겨 있답니다.

MSP선배의 입장이자 같은 학생의 입장에서 도움이 될 내용들을 가득 담았으니, 이 영상을 놓치지마시길 바랍니다.

MSP는 열정 가득한 여러분의 도전을 기다립니다. 여러분을 표현하는, ‘나만의 공식’을 쓰는 것만으로 지원이 가능하니, 열정과 도전정신 그리고 가득한 여러분들의 많은 참여 부탁 드립니다.

따분하고 지루한 일상 생활에 지친 대학생, 나만의 눈부신 커리어를 쌓고 싶은 대학생,

‘나만의 공식’으로 MSP 3기에 도전하세요!!!

Visual Studio 2010 Beta 1 스크린샷

2009-05-19T04:10:00.000+09:00

이전과 비슷하지만 F#이 기본적으로 포함되었습니다.

전체적인 디자인이나 색감, 그리고 초기 화면도 많이 바뀌었습니다.

시작 페이지는 XAML 기반으로 되어 있어서 커스터마이징 해서 사용이 가능합니다.

새 프로젝트 생성을 하면 나타나는 메뉴도 많이 달라졌습니다.

.NET Framework 4.0 기반의 프로젝트가 선택이 가능하며

Visual Studio 2008과 마찬가지로 .NET Framework 2.0 이상은 모두 지원합니다.

WPF 프로젝트를 생성하고 코드창을 분리 해 보았습니다.

멀티 모니터 사용 시 다른 모니터에 코드창을 따로 분리 하는 식으로 사용이 가능하고

이전보다 효과적으로 작업 할 수 있는 편의성이 추가 되었습니다.

초기 화면과 프로젝트가 생성된 모습을 간단히 보았는데 알려진 바와 같이

WPF로 구현된 부분이 많아서 이전과는 많이 다른 느낌을 줍니다.

앞으로 좀 더 자세히 구석구석 변화된 모습을 살펴보고 향상된 점을 알아 보도록 하겠습니다.

Visual Studio 2010 Beta 1 MSDN에 공개

2009-05-19T02:11:00.000+09:00

방금전에 Visual Studio 2010 Beta 1이 .NET Framework 4.0 Beta 1과 함께 MSDN에 공개되었습니다.

MSDN 구독자들은 확인해보세요!

일반 사용자에게는 우리나라 시간으로 21일 새벽쯤에 공개됩니다.

[MSDN 개발자 뉴우스 8] VSTS 2010 스터디모임

2009-04-30T18:29:00.000+09:00

제가 참여 하고 있는 VSTS2010 스터디 모임 인터뷰가 MSDN 팝콘에 떴습니다.

Visual Studio Team System 2010에서 제공할 신기능들과 .NET Framework 4의 새로운 특징들을 공부하고 블로그를 통해 다른 개발자들에게 어디서도 얻을 수 없는 정보를 공유하고 있습니다.

아직 베타도 나오지 않은 VSTS2010이지만 열심히 자료를 모으고 정보를 공유 하고 있으니 블로그 많이 들러주시기 바랍니다.

영상이 보이지 않으면 이곳을 클릭해서 실버라이트를 설치하세요

Windows 7을 위한 Windows XP 모드

2009-04-29T15:58:00.000+09:00

Windows XP 모드는 Windows 7 기반 PC에서 Windows XP 어플리케이션을 사용할 수 있습니다.
Windows XP에서 Windows 7 환경으로 이행하려는 기업을 목적으로 개발했다고 하는데 일반 사용자에게도 많은 도움이 될 것 같습니다.

공개된 스크린샷을 보면 Windows 7 환경에서 XP 어플리케이션이 자연스럽게 구동되는것을 볼 수 있습니다. (에어로 테마가 아닌 XP의 루나 테마로 확인 할 수 있습니다.)

Windows Virtual PC의 Windows XP 환경에서 가상으로 동작하게 되며 호환성 문제의 고민을 해결합니다. 현재 아직 공개되지는 않았고 조만간 베타버전이 선보인다고 하는데 이후에 자세한 내용을 알아보도록 하겠습니다.

현재 공개된 정보는 아래 링크에서 자세히 확인 할 수 있습니다.
Windows XP Mode for Windows 7 Screens
Revealing Windows XP Mode for Windows 7

WPF Features Preview (3) - Styling the DataGrid

2009-04-23T15:34:00.000+09:00

WPF Features Preview (1) - DataGrid
WPF Features Preview (2) - DatePicker

맨 처음 초기 어플리케이션을 보면 스타일이 적용되어 멋지게 보입니다. DataGrid를 적용하여 수정된 버전은 좀 더 기능적이긴 하지만 밋밋하고 보기엔 좀...
이번에는 DataGrid에 스타일을 주어서 컬러풀하고 비주얼적으로 멋지게 만들어 보도록 하겠습니다.

프로젝트를 열고 MainWindow.xaml 파일을 열어서 DockPanel 부분을 보면 뭔가 스타일이 적용된것을 볼 수 있습니다. 이 중에서 몇가지 brush와 GridViewColumnHeader와 ListViewItem 스타일을 DataGrid 스타일에 적용해 보도록 하겠습니다.

DataGrid의 스타일 프로퍼티
1. CellStyle - 각각의 cell에 사용되는 스타일 (DataGridCell)
2. RowStyle - row에 사용되는 스타일 (DataGridRow)
3. ColumnHeaderStyle - header bar에 사용되는 스타일 (DataGridColumnHeader)

사용자가 grid와 상호작용하는 것에 대한 프로퍼티
1. SelectionMode - 단일선택과 확장된 선택에 대한 모드
2. SelectionUnit - 무엇이 선택되는가에 대한 설정 (FullRow vs Cell vs CellOrRowHeader)
3. GridLinesVisibility - cell 주변의 라인에 대한 속성
4. VerticalGridLinesBrush - 수직 라인에 대한 색상
5. HorizontalGridLinesBrush - 수평 라인에 대한 색상

먼저 TargetType으로 스타일이 적용될 타입에 대해 설정해줍니다.
TargetType 값에 GridViewColumnHeader를 dg:DataGridColumnHeader로 바꿔줍니다.
그리고 ListViewItem도 dg:DataGridRow로 바꿔줍니다.

변경된 xaml 코드는 아래와 같습니다.

</Style>

<Style.Triggers>

</Trigger>

</Trigger>

</Style.Triggers>

</Style>

DataGrid가 정의된 곳에는 ColumnHeaderStyle과 RowStyle 속성을 설정해줍니다.

<dg:DataGrid x:Name="dg" ItemsSource="{Binding}" Margin="10"

AutoGenerateColumns="False"

Background="#80909090" AlternationCount="2"

ColumnHeaderStyle="{StaticResource dgHeaderStyle}"

RowStyle="{StaticResource dgRowStyle}">

이제 어플리케이션을 실행해보면 스타일이 적용되어 이전과 다른 모습을 볼 수 있습니다.

이제 몇가지 grid에 대한 속성을 주도록 하겠습니다.
1. Extended 선택 모드 적용
2. SelecionUnit을 FullRow로 설정
3. GridLinesVisibility를 All로 설정
4. VerticalGridLinesBrush를 DarkGray로 설정

<dg:DataGrid x:Name="dg" ItemsSource="{Binding}" Margin="10"

AutoGenerateColumns="False"

Background="#80909090" AlternationCount="2"

ColumnHeaderStyle="{StaticResource dgHeaderStyle}"

RowStyle="{StaticResource dgRowStyle}"

SelectionMode="Extended"

SelectionUnit="FullRow"

GridLinesVisibility="All"

VerticalGridLinesBrush="DarkGray">

또 몇가지 설정을 해서 header 스타일을 주도록 해보겠습니다.
1. BorderTickness를 1로 주어서 border를 볼 수 있도록
2. pixel snapping을 활성화 (SnapsToDevicePixels="True")
3. 컨텐트 horizontal 정렬 (HorizontalContentAlignment="Center")
4. MinWidth="0" MinHeight="30" 으로 설정
5. 기본 커서 모양을 Hand로 설정

</Style>

다시 컴파일해서 실행해보면 좀 더 직관적으로 보기 쉽게 스타일 적용이 된 것을 볼 수 있습니다.

다음으로는 Cell 자체에 대한 스타일 적용을 해보겠습니다. Cell의 컨텐트가 가운데로 오고 필요할 때 포커스가 적용되면 좀 더 편리할 것 같은데 이것을 해보도록 하겠습니다.

새로운 스타일 속성을 DockPanel.Resources에 추가하도록 합니다.
1. TargetType을 dg:DataGridCell로 설정
2. 중요한 속성은 기본 DataGridCell을 따르기 위해 BasedOn 프로퍼티 설정
   "{StaticResource{x:Type dg:DataGridCell}}"
3. SnapsToDevicePixels를 "True"로 설정
4. VerticalAlignment를 "Center"로 설정
5. Trigger 컬렉션 추가 - 셀이 선택되었을 때 background/foreground 색상 변경
6. <Style.Triggers> 부분에 IsSelected 프로퍼티를 True로 설정하고
   a. Background를 Transparent로
   b. BorderBrush를 Transparent로
   c. Foreground를 Black으로
7. 두번째 trigger를 추가하고 IsKeyboardFocusWithin="True" 프로퍼티에
   a. Background에 "{StaticResource whiteBackBrush}" 리소스
b. BorderBrush에 "{DynamicResource{x:Static dg:DataGrid.FocusBorderBrushKey}}" 리소스
   c. Foreground에 Black

<Style x:Key="dgCellStyle" TargetType="dg:DataGridCell"

BasedOn="{StaticResource {x:Type dg:DataGridCell}}">

<Style.Triggers>

</Trigger>

<Setter Property="BorderBrush"

Value="{DynamicResource {x:Static dg:DataGrid.FocusBorderBrushKey}}" />

</Trigger>

</Style.Triggers>

</Style>

그리고 DataGrid 속성에 CellStyle 프로퍼티값을 줍니다.

<dg:DataGrid x:Name="dg" ItemsSource="{Binding}" Margin="10"

AutoGenerateColumns="False"

Background="#80909090" AlternationCount="2"

ColumnHeaderStyle="{StaticResource dgHeaderStyle}"

RowStyle="{StaticResource dgRowStyle}"

CellStyle="{StaticResource dgCellStyle}"

SelectionMode="Extended"

SelectionUnit="FullRow"

GridLinesVisibility="All"

VerticalGridLinesBrush="DarkGray">

이제 Cell을 클릭해보면 색이 적용되어 하이라이트 되는것을 볼 수 있습니다.

마지막으로 RowDetail 속성을 설정하도록 하겠는데 위에서 했던 방법과 비슷하니 자세한 설명은 생략하겠습니다. xaml 코드를 보면 어렵지 않게 이해 할 수 있을 것입니다.

<dg:DataGrid x:Name="dg" ItemsSource="{Binding}" Margin="10" ...

VerticalGridLinesBrush="DarkGray"

RowDetailsVisibilityMode="VisibleWhenSelected">

<dg:DataGrid.RowDetailsTemplate>

</StackPanel>

</DataTemplate>

</dg:DataGrid.RowDetailsTemplate>

TextBlock 속성

TextBox 생성

<dg:DataGrid.RowDetailsTemplate>

<TextBox.Style>

<Style.Triggers>

<Setter Property="BorderBrush"

Value="{x:Static SystemColors.WindowFrameBrush}" />

<Setter Property="Background"

Value="{x:Static SystemColors.WindowBrush}" />

</Trigger>

<Setter Property="BorderBrush"

Value="{x:Static SystemColors.WindowFrameBrush}" />

<Setter Property="Background"

Value="{x:Static SystemColors.WindowBrush}" />

</Trigger>

</Style.Triggers>

</Style>

</TextBox.Style>

</TextBox>

</StackPanel>

</DataTemplate>

</dg:DataGrid.RowDetailsTemplate>

이제 모든 스타일 적용이 끝났습니다. 실행을 해보면 위에서 적용한 스타일이 적용되어 처음의 DataGrid보다 훨씬 보기도 좋고 스타일이 좋아진것을 알 수 있습니다.

CheckbookManager.zip

지금까지 DataGrid에 대해 알아보았는데 다음에는 역시 새롭게 추가된 Ribbon 컨트롤에 대해 알아보겠습니다.
WPF에서도 기존의 메뉴와 툴바를 벗어나서 새로운 Ribbon 스타일을 적용할 수 있는데 이것 역시 어렵지 않게 할 수 있으니 기대해주세요.

WPF Features Preview (2) – DatePicker

2009-04-22T16:54:00.000+09:00

WPF Features Preview (1) - DataGrid

저번 시간에는 WPFToolkit을 이용해서 ListView를 DataGrid로 바꿔보았습니다. 훨씬 간편하고 쉽게 데이터를 보여줄 수 있다는것을 알았는데요 이번에는 WPFToolkit에 포함된 (WPF 4.0에는 기본으로 포함) 다른 컨트롤들을 이용해서 좀 더 DataGrid를 강화해 보겠습니다.

XAML 파일을 열고 DataGrid 아래에 보면 DataGridTextColumn 부분에 날짜가 표현되는 것을 볼 수 있습니다. 이 부분을 헤더는 그대로 두고 MinWidth 속성에 100으로 고정값을 주도록 하겠습니다.
그리고 template column에서 CellEditingTemplate을 생성합니다.

이제부터 중요한 작업을 하겠는데 기존에 그냥 날짜가 표시되는것을 DatePicker 컨트롤을 이용해서 표현해보겠습니다.
DataTemplate을 생성 한 후 WPFToolkit의 DatePicker 컨트롤을 추가해줍니다. DataGrid와 같은 네임스페이스에 있으니 따로 추가적인 작업은 필요하지 않습니다.
SelectedDate 속성에서 Date 프로퍼티를 바인딩해주고 SelectedDateFormat 프로퍼티에서 Short 값을 주어 포맷을 정합니다.
CellTemplate 프로퍼티에서는 TextBlock을 이용해서 Date 프로퍼티를 바인딩해주고 StringFormat에 d 값을 주어서 DateTime 포맷으로 해줍니다.
이렇게 해서 수정된 XAML은 아래와 같습니다.

<dg:DataGridTemplateColumn Header="Date" MinWidth="100">

<dg:DataGridTemplateColumn.CellEditingTemplate>

<dg:DatePicker SelectedDate="{Binding Date}" SelectedDateFormat="Short" />

</DataTemplate>

</dg:DataGridTemplateColumn.CellEditingTemplate>

<dg:DataGridTemplateColumn.CellTemplate>

</DataTemplate>

</dg:DataGridTemplateColumn.CellTemplate>

</dg:DataGridTemplateColumn>

이제 어플리케이션을 실행해보면 새로운 DatePicker 컨트롤이 나오는것을 볼 수 있고 달력을 클릭해서 값을 수정할 수 있는 모드가 나옵니다.

간단하게 새로운 컨트롤을 이용해서 좀 더 직관적인 데이터 표현을 할 수 있는것을 보았습니다. 컨트롤 사용법과 데이터 바인딩 방법만 익히면 다른 부분에도 쉽게 적용할 수 있을것입니다.
다음에는 DataGrid에 Style 속성을 이용하여 기본적인 DataGrid를 좀 더 보기 좋게 만드는 방법을 알아보도록 하겠습니다.

CheckbookManager.zip

WPF Features Preview (1) – DataGrid

2009-04-19T01:31:00.000+09:00

WPF 4에서는 새로운 컨트롤들이 포함되게 되는데 대표적으로 DataGrid, Ribbon, VIsual State Manager 컨트롤이 있습니다.
WPF Features Privew를 통해서 새로운 컨트롤들을 미리 보는 시간을 가져보겠습니다.

Exercise 1 - Using the new WPF DataGrid

먼저 기존에 있는 Checkbook 어플리케이션을 살펴보면 ListView를 이용해서 DataGrid 형태로 사용하는 것을 볼 수 있습니다.
이번 실습에서는 몇가지 단계를 따르게 되는데 다음과 같습니다.

1. DataGrid 어셈블리 추가 (WPF Toolkit)
2. ListView와 GridView를 DataGrid로 교체
3. 스타일과 템플릿 변형

먼저 WPF 어플리케이션을 실행해보면 몇가지 데이터가 바인딩된 어플리케이션 형태를 볼 수 있습니다.

Task 1 - Examine the existing application

CheckbookManager 어플리케이션을 Visual Studio를 이용해서 열어서 살펴보면 어떤 형태로 동작하는지 쉽게 알 수 있습니다.
이제 소스코드를 살펴보면 메인 윈도우인 MainWindow.xaml에 보면 ListView가 정의된것을 볼 수 있습니다. 스타일과 컬럼 효과를 이용해서 형태를 정의하고 있는데 column definition은 템플릿을 필요로 하게 됩니다. 왜냐하면 기본적인 ListView 컬럼은 읽기 전용 속성이기 때문입니다.
이것을 TextBox를 이용해서 DataGrid처럼 표현하고 있는것을 볼 수 있습니다.
Data 폴더에 보면 자료구조가 정의되어 있는데 여기서 살펴볼것은 아니니 그냥 넘어가도록 하겠습니다.

Task 2 - Using the DataGrid

이번 단계에서는 ListView를 WPF DataGrid로 교체해보도록 하겠습니다.
먼저 DataGrid를 포함하고 있는 WPFToolkit 어셈블리를 참조합니다.

참조 추가를 선택하고 WPFToolkit.dll 파일을 선택해주면 됩니다.

그리고 나서 MainWindow.xaml 상단에 보면 네임스페이스가 정의된 부분이 있는데 여기에 WPF Toolkit을 추가해줍니다.

접두어를 붙여주고 Microsoft.Windows.Controls 네임스페이스를 선택해주면 WPFToolkit이 등록됩니다.

스크롤을 좀 더 내려서 XAML을 살펴보면 ListView가 있는데 ListView를 dg:DataGrid로 바꿔서 DataGrid 컨트롤을 사용할 수 있게 해줍니다.
물론 바꾸고 나면 많은 에러가 나게 되는데 이것은 차차 고쳐 나갈것입니다.

그리고 ItemContainerStyle 속성을 지워줍니다. 이것은 나중에 다시 해줄텐데 우선 지우도록 하겠습니다.

그리고 TextBox 스타일 리소스 역시 지워줍니다. 우리는 새로운 데이타 컬럼 타입을 사용하게 되니 더 이상필요하지 않습니다.

ListView의 ContextMenu 속성 역시 dg:DataGrid로 바꿔줍니다.
이렇게 해주면 다음과 같은 XAML 형태를 가지게 됩니다.

<dg:DataGrid x:Name="dg" ItemsSource="{Binding}" Margin="10"

Background="#80909090" AlternationCount="2">

<dg:DataGrid.ContextMenu >

<MenuItem Header="Copy Selected Transactions"

Command="{x:Static ApplicationCommands.Copy}" />

</ContextMenu>

</dg:DataGrid.ContextMenu>

<!-- <ListView.View> ...

</ListView.View> -->

</dg:DataGrid>

이제 어플리케이션을 컴파일하고 다시 실행시켜 보면 DataGrid가 자동적으로 컬럼을 생성해서 데이터를 보여주는것을 볼 수 있습니다.

다시 소스코드로 돌아와서 컬럼 타입을 정의해주도록 하겠습니다.
DataGrid 안에 <dg:DataGrid.Columns>를 추가 해 줍니다.
그리고 <dg:DataGridTextColumn> 요소를 위의 컬럼 컬렉션 안에 추가 해 줍니다.

Header 프로퍼티는 Header 텍스트값의 속성이고 Width는 컬럼의 폭을 정할 수 있는데 고정값을 줄 수도 있고 컬럼의 헤더나 셀 사이즈에 맞게 해줄 수도 있습니다.
마지막으로 컬럼에 데이터 바인딩을 해줘야 하는데 Binding 속성을 이용해서 ListView에서 해줬던것 처럼 같은 방식으로 해주면 됩니다.

<dg:DataGrid x:Name="dg" ItemsSource="{Binding}" Margin="10"

Background="#80909090" AlternationCount="2">

<dg:DataGrid.Columns>

<dg:DataGridTextColumn Header="No." Width="SizeToCells"

Binding="{Binding CheckNumber}" />

</dg:DataGrid.Columns>

여기까지 하고 실행을 해보면 새로 정의해준 컬럼이 추가되긴 했지만 기존 컬럼이 그대로 남아있는것을 볼 수 있습니다.
DataGrid 속성중에 AutoGenerateColumns라는 속성이 기본적으로 True값을 가지게 되어 이렇게 되는데 이 속성을 False로 바꿔주면 정의된 컬럼만 나타나게 됩니다.

<dg:DataGrid x:Name="dg" ItemsSource="{Binding}" Margin="10"

AutoGenerateColumns="False"

Background="#80909090" AlternationCount="2">

그리고 나머지 컬럼들에 대해서도 속성을 정의해주면 됩니다.

DataGridCheckBoxColumn
DataGridComboBoxColumn
DataGridHyperlinkColumn
DataGridTextColumn
DataGridTemplateColumn

이름을 보면 알 수 있듯이 DataGrid 안에서 일반 컨트롤과 같은 역할을 하게 됩니다.
이러한 컬럼 스타일을 이용해서 원하는 데이터에 맞게 설정을 해주면 초기의 ListVIew에서 보여줬던 형태를 DataGrid로 만들 수 있습니다.

<dg:DataGrid x:Name="dg" ItemsSource="{Binding}" Margin="10"

AutoGenerateColumns="False"

Background="#80909090" AlternationCount="2">

...

<dg:DataGrid.Columns>

<dg:DataGridTextColumn Header="No." Width="SizeToCells"

Binding="{Binding CheckNumber}" />

<dg:DataGridTextColumn Header="Date" Binding="{Binding Date, StringFormat=d}" />

<dg:DataGridTextColumn Header="Pay To" MinWidth="200"

Binding="{Binding Recipient}" />

<dg:DataGridComboBoxColumn Header="Memo" Width="*"

ItemsSource="{Binding Source={x:Static Data:CheckBook.Descriptions},

Mode=OneWay}"

TextBinding="{Binding Memo}">

<dg:DataGridComboBoxColumn.EditingElementStyle>

</Style>

</dg:DataGridComboBoxColumn.EditingElementStyle>

</dg:DataGridComboBoxColumn>

<dg:DataGridCheckBoxColumn Header="C" Width="SizeToHeader"

Binding="{Binding Cleared}"

ElementStyle="{DynamicResource NoBorderCheckBoxStyle}"

EditingElementStyle="{DynamicResource NoBorderCheckBoxStyle}" />

<dg:DataGridTextColumn Width="SizeToCells" Header="Payment"

Binding="{Binding Amount, Converter={StaticResource amountConverter},

ConverterParameter=0, StringFormat=C}" />

<dg:DataGridTextColumn Width="SizeToCells" Header="Deposit"

Binding="{Binding Amount, Converter={StaticResource amountConverter},

ConverterParameter=1, StringFormat=C}" />

<dg:DataGridTemplateColumn Width="SizeToCells" Header="Balance"

ClipboardContentBinding="{Binding TotalBalance}">

<dg:DataGridTemplateColumn.CellTemplate>

<TextBlock Foreground="{Binding TotalBalance,

Converter={StaticResource BalanceDisplayConverter}}"

Text="{Binding TotalBalance, StringFormat=C}" />

</DataTemplate>

</dg:DataGridTemplateColumn.CellTemplate>

</dg:DataGridTemplateColumn>

</dg:DataGrid.Columns>

</dg:DataGrid>

여기까지 마치고 실행해보면 정의해준 컬럼 스타일에 맞게 데이터가 바인딩되어 보이게 됩니다.
지금까지 WPF Toolkit을 이용해서 DataGrid를 추가하고 컬럼 속성 스타일을 주어서 데이타 바인딩하는 방법까지 살펴보았습니다.
다음에는 여기에 추가해서 Calendar와 DatePicker 컨트롤을 이용해서 데이터 필드를 구성하는것에 대해 보도록 하겠습니다.

참고자료
WPF Toolkit : http://www.codeplex.com/wpf

CheckbookManager.zip