Windows Phoneアプリケーション開発入門

第15回 Windows Phoneでグラデーションのボタンを作ってみよう!(2)

この記事を読むのに必要な時間:およそ 6 分

はじめの前に

はじめに,Microsoftから発表された新しいモバイルOSについて紹介させてください。

2010年6月17日,Microsoftはビジネス向けのモバイルOSとして「Windows Embedded Handheld」を発表しました。Windows Embedded Handheldの初版は,Windows Mobile 6.5.3がベースですので,Windows Mobile向けに開発されたソフトウェアとも互換性を持っており,今までのソフトウェア財産が無駄にならずに済みます。

Windows Phone 7が発表された際に「Windows Mobile 6.5にも投資を続ける」との発言は,この件があったからなんでしょうか。個人でもWindows Embedded Handheld端末が手に入れば嬉しいのですが……と,楽しみにしています。

Windows Phone 7が発売されているだろう2011年下半期には,Windows Embedded Handheldの次期バージョンとしてWindows Embedded CE 6.x系ベースの「Windows Embedded Compact 7」のリリースが予定されています。

こちらに関しては,Windows Mobile 6.5系の開発環境(Win32,MFC,Compact Framework)に加え,Silverlight for Embeddedが使えますので,今まで通りかそれ以上に面白そうな端末になりそうです。

Visual Studio 2010では,Windows Mobile 6.5の開発は出来ないらしいので,Windows Embedded Handheld向けのアプリケーションを開発する場合もVisual Studio 2008を利用しなければいけないのかどうかが気になりますね。

はじめに

さて,前回の予告どおりグラデーションを使ったさまざまな図形を早速描画してみましょう。

どのような処理を行っているのかをグラデーションさせた円形の描画を例にして,絵を使って説明します。その次に円形以外の図形にグラデーションを適用させてみましょう。

グラデーション掛かった円形を描画するメソッドを実装する

先にソースコードを示します。コメントの部分で数字を打っておきましたので,後程出てくるイメージ画像と合わせてご覧ください。描画関連のメソッドをまとめたクラスですので,クラス名は「GraphicsExtension」としました。

using System;
using System.Linq;
using System.Collections.Generic;
using System.Text;

using System.Drawing;
using System.Drawing.Imaging;

namespace GradientionSample
{
    public class GraphicsExtension
    {
        public static Color KeyColor = Color.FromArgb(255, 0, 255);

        public static void DrawGradientEllipse(Graphics g, Rectangle rc,
            Color startColor, Color endColor, Color borderColor,
            FillDirection gradientType)
        {
            // クリッピング用の色の設定
            Color clippingColor = Color.Green;

            Rectangle rect = new Rectangle(0, 0, rc.Width, rc.Height);

            // (1)グラデーションを描画するイメージの生成
            Bitmap gradientImage = new Bitmap(rc.Width, rc.Height,
                PixelFormat.Format16bppRgb565);
            Graphics gxGradient = Graphics.FromImage(gradientImage);

            // グラデーションを描画する
            GradientFill.Fill(gxGradient, rect,
                startColor, endColor, FillDirection.TopToBottom);

            // (2)任意の図形でグラデーションを切り抜く為のイメージの生成
            Bitmap tempImage = new Bitmap(rc.Width, rc.Height,
                PixelFormat.Format16bppRgb565);

            // クリッピング用に緑色の円形を描画するdelegateを呼ぶ
            Graphics gxTemp = Graphics.FromImage(tempImage);
            gxTemp.Clear(KeyColor);
            gxTemp.FillEllipse(new SolidBrush(clippingColor), rect);
            if (borderColor != Color.Empty)
            {
                gxTemp.DrawEllipse(new Pen(borderColor), rect);
            }

            // グラデーションイメージに対して、
            // クリッピング用のイメージを、緑色の透過色を使用して上書きする
            ImageAttributes clippingAttr = new ImageAttributes();
            clippingAttr.SetColorKey(clippingColor, clippingColor);
            gxGradient.DrawImage(tempImage,
                rect, 0, 0, rect.Width, rect.Height,
                GraphicsUnit.Pixel, clippingAttr);

            // (3)グラデーションの掛かった図形を描画する
            ImageAttributes attrib = new ImageAttributes();
            attrib.SetColorKey(KeyColor, KeyColor);
            g.DrawImage(gradientImage, rc, 0, 0,
                gradientImage.Width, gradientImage.Height,
                GraphicsUnit.Pixel, attrib);

            // Clean up
            gxTemp.Dispose();
            tempImage.Dispose();
            gxGradient.Dispose();
            gradientImage.Dispose();
        }
    }
}

図形に対してのグラデーションの適用

まず例として最初に円形のグラデーションの描画をします。

Windows Mobileでは,グラデーションを矩形でしか描画することができません。ですので,少し手間ですが数ステップ踏んで描画します。

(1)ベースになるグラデーションイメージを用意する

赤から黒への単純なグラデーションイメージを用意しました。このグラデーションイメージが,最終的にグラデーションの掛かった図形になります。

ベースになるグラデーション

ベースになるグラデーション

(2)グラデーションをクリッピングするイメージを作る

背景をマゼンタで塗り潰し,グラデーションさせたい領域を緑色で描画します(この画像では分かりやすいように円形を黒線で囲っています)⁠

クリッピングイメージ

クリッピングイメージ

透過させる色に緑色を設定して,グラデーションイメージに対して,クリッピングイメージ(マゼンタ背景&緑図形)を描画すると,このように緑色の部分が透過されます。

グラデーションイメージの上に乗せたクリッピングイメージ

グラデーションイメージの上に乗せたクリッピングイメージ

マゼンタを背景としたグラデーション掛かった円形のイメージの完成です。

グラデーションイメージ

グラデーションイメージ

(3)円形のグラデーションを描画する

次に透過色をマゼンタに設定して,グラデーションイメージをFormのOnPaintイベントのe.Graphicsに描画します。これでグラデーション掛かった円形を描画することができました。

描画されたグラデーションの掛かった円形

描画されたグラデーションの掛かった円形

著者プロフィール

和田健司(わだけんじ)

1982年10月12日生まれ。大阪で働くプログラマ。Microsoft MVP for Device Application Development(Jul 2010 - Jun 2011)。Windows Mobileに傾倒し今に至る。Windows Mobile向けのTipsを書いています。iPhoneアプリ開発を始めました。嫌いな食べ物はカレー。

URL: http://ch3cooh.jp/
Blog: http://d.hatena.ne.jp/ch3cooh393/

コメント

コメントの記入