Windows Phone : MyClock テンプレート


#wp7dev_jp

簡単にデスクトップクロックを作成する、MyClockというテンプレートを作成しました。ハッカソンのワークショップやWindows Phoneアプリケーション開発の学習に活用して下さい。

デジタル時計、アナログ時計、日付表示 がユーザーコントロールとして用意されているので、それを自由に配置してデスクトップクロックを作成します。

MyClockScreen

テンプレートのインストール

添付のファイル MyClock Resource.zip をダウンロードし、解凍します。解凍された中にある MyClockTemplate.zip を配置します。

お使いのコンピュータのドキュメントフォルダーの下にある Visual Studio 2010\Templates\ProjectTemplates サブフォルダーに MyClockTemplate.zip を解凍せずにそのまま コピーしてください。

画像リソース

解凍した MyClock Resource.zip には画面設定用の画像が用意されています。

  • Clock Image : アイコン用の時計画像
  • Clock Panel : アナログ時計の文字盤サンプルです
  • WallPaper : 背景用の壁紙画像です

また、Windows Phone Art Galleryなども併せて活用してください。
http://msdn.microsoft.com/ja-jp/windowsphone/hh544699

テンプレートの利用

Visual Studio 2010 または、Visual Studio 2010 Express for Windows Phone を起動します。「新しいプロジェクト」を選択します。インストールされたテンプレートからC#を選択すると MyClock テンプレートが表示されますので選択します。

image

画面下の名前には、これから作成するアプリケーションを入れて(Shinobu Clock とか)OKを押します。

Expression Blend で開く

プロジェクトが作成されたら、始めに「ビルド」メニューの「ソリューションのビルド」を実行します。(もしくはF6を押します)画面左下に「ビルド正常終了」となれば完了です。

「プロジェクト」メニューから「Expression Blend を開く...」 を選択して、Expression Blend を開きます。

image

あらかじめ3つの時計コントロールが配置されているので、そちらをカスタマイズしてもOKです。

コントロールの追加

画面左のアセットパネルを選択して、「プロジェクト」を開きます。以下の3つが時計のためのコントロールです。

  • AnalogClock
  • DigitalClock
  • DigitalDate

image

これらのコントロールを画面上にドラッグ&ドロップすることで画面上に配置することが出来ます。

背景画像の追加と利用

ダウンロードしたリソースのWallpaperフォルダから使用する壁紙を決めて、「プロジェクトパネル」にドロップします。

image image

壁紙をタップして、プロパティパネルの「共通プロパティ」 内の「Source」で追加した画像を選択します。

AnalogClock

背景に文字盤を選択できます。文字盤サンプルを追加して、「ブラシ」パネルで「タイルブラシ」(右から2番目のタブ)選び、ImageSourceから文字盤の画像を選びます。

image

その他、大きさや、不透明度(Opacity)などを設定することが出来ます。

DigitalClock

フォントや、フォントサイズ、ForeGroundブラシで文字の色を指定できます。また、その他のパネルにある、viewAmpm のチェックで、12時間表示と12時間表示の切り替えを、viewSecond のチェックで、秒の表示の設定をすることが出来ます。

image

Digital Date

フォントや、フォントサイズForeGroundブラシで文字の色を指定できます。

image

Marketplace への公開のために

■ タイル画像の作成
Windows Phone Icon Maker
http://wpiconmaker.codeplex.com/
からZipファイルをダウンロードし、デスクトップに展開します。
WP_IconMaker.exe を起動して、タイルを作りましょう。

■ アプリケーションアイコンの登録
ApplicationIcon.png、Background.png の上書きコピー
上記の手順で生成されたタイル画像から、2つのファイルを選択し、
ソリューションエクスプローラー上のプロジェクトファイルへドラッグ&ドロップします。

■ 登録用Xapファイルの作成
Releaseビルドの設定、[F5]キーで実行確認、エミュレーターからスクリーンショットを作成します。
スクリーンショットは、Iconと同じふぁおるだに入れておくとよいでしょう。

APP Hubへのアプリケーション登録
Windows Phone 用のデスクトップクロックとして登録します。

ぜひ、ご利用ください。

MyClock Resource.zip

Comments (0)

Skip to main content