윈도우 모바일 6.5(1) – 윈도우 모바일 6.5의 티타늄 스타일을 개발하자!!
지난번 약속대로 오늘부터 윈도우 모바일 애플리케이션 개발자들을 위한 시리즈로 연재를 시작해 보겠습니다. 그 동안 손이 근질근질해서 참는 데 혼났습니다.
첫번째로 나도 윈도우 모바일 6.5에서 적용된 티타늄 스타일 애플리케이션을 개발할 수 있다!! 입니다. 이 티타늄 스타일은 Zune에서 처음 사용되었습니다. 사용해 보시면 아시겠지만 단순하면서 고급스러운 모던 이미지를 창출할 수 있습니다.
티타늄(Titanium) 스타일은 내부적으로 DirectDraw 기술과 알파 블렌딩(Alpha Blending) 이라는 기술을 통해 구현되어 있습니다. “Creating a Compelling UI for Windows Mobile and the Microsoft .NET Compact Framework” 라는 제목으로 MSDN 기사에 잘 설명되어 있는데, 여기에서 가장 핵심적인 부분은 엔진 부분을 담당하고 있는 Platform API 폴더의 GraphicsExtension.cs 파일의 DrawAlPha 메서드 입니다. 아래의 코드 조각을 보시면 BlendFunction 구조체를 이용하여 이미지를 투명화 처리하고 백그라운드 이미지와 중첩되는 부분을 알파 채널을 이용해서 제거 시켜줍니다.
Code Snippet
- /// <summary>
- /// Draws an image with transparency
- /// </summary>
- /// <param name="gx">Graphics to drawn on.</param>
- /// <param name="image">Image to draw.</param>
- /// <param name="transparency">Transparency constant</param>
- /// <param name="x">X location</param>
- /// <param name="y">Y location</param>
- public static void DrawAlpha(this Graphics gx, Bitmap image, byte transparency, int x, int y)
- {
- using (Graphics gxSrc = Graphics.FromImage(image))
- {
- IntPtr hdcDst = gx.GetHdc();
- IntPtr hdcSrc = gxSrc.GetHdc();
-
- BlendFunction blendFunction = new BlendFunction(); // Create BlendFunction Class
- blendFunction.BlendOp = (byte)BlendOperation.AC_SRC_OVER; // Only supported blend operation
- blendFunction.BlendFlags = (byte)BlendFlags.Zero; // Documentation says put 0 here
- blendFunction.SourceConstantAlpha = transparency; // Constant alpha factor
- blendFunction.AlphaFormat = (byte)0; // Don't look for per pixel alpha
- PlatformAPIs.AlphaBlend(hdcDst, x, y, image.Width, image.Height,
- hdcSrc, 0, 0, image.Width, image.Height, blendFunction);
- gx.ReleaseHdc(hdcDst); // Required cleanup to GetHdc()
- gxSrc.ReleaseHdc(hdcSrc); // Required cleanup to GetHdc()
- }
- \
또한 사용자의 포커스를 위해 윈도우의 구석(Edge)를 부드럽게 처리하게 위해 FillGradientRectagle 메서드를 이용하여 컬러들을 처리해 줍니다.
Code Snippet
- /// <summary>
- /// Fills the rectagle with gradient colors
- /// </summary>
- /// <param name="gx">Destination graphics</param>
- /// <param name="rc">Desctination rectangle</param>
- /// <param name="startColorValue">Starting color for gradient</param>
- /// <param name="endColorValue">End color for gradient</param>
- /// <param name="fillDirection">The direction of the gradient</param>
- public static void FillGradientRectangle(this Graphics gx, Rectangle rc, Color startColorValue, Color endColorValue, FillDirection fillDirection)
- {
- GradientFill.Fill(
- gx,
- rc,
- startColorValue,
- endColorValue,
- fillDirection);
- \
그리고 나서, .NET CF 에서 Form 을 하나 디자인 한 다음 Form_Paint 이벤트 핸들링 처리에서 알파 채널을 이용한 색칠 또는 이미지 처리를 해주면 Zune에서 적용된 티타늄 스타일처럼 여러분들의 애플리케이션을 직접 알파 블렌딩 효과를 이용할 수 있습니다.
Code Snippet
- protected override void OnPaint(PaintEventArgs e)
- {
- // Draw a background first
- this.offGx.Clear(this.BackColor);
-
- if (this.backgroundImage != null)
- {
- this.offGx.DrawImage(this.backgroundImage, 0, 0);
- }
-
- // Pass the graphics to the canvas to render
- if (this.canvas != null)
- {
- this.canvas.Render(offGx);
- }
-
- // Blit the offscreen bitmap
- e.Graphics.DrawImage(offBitmap, 0, 0);
- \
관련된 상세 소스는 다음과 같이 공유해 드리오니 적용해 보시기 바랍니다. 참고로 이 소스 모두 윈도우 모바일 6.1 과 윈도우 모바일 6.5 모두 사용 가능합니다.
