ユーザーのPCからの写真の読み込みや、ブラウザーへのファイルのドラッグ&ドロップ操作など、Silverlightの機能も活用していきます。また、見た目も図のようにBingのスタイルに合うように作成します。写真のWebアップロードは行わず、ユーザーのPC上でのみ楽しめるものとします。
プラグインの作成
それでは、これまでと同様にSilverlightクラスプロジェクトから、プラグイン クラスを作成しましょう。また、プッシュピンなどのエンティティを表示するレイヤー クラスも用意しておきます。各クラス ファイルの内容は次の通りです。
パネルとなるSilverlightユーザーコントロールもプロジェクトに追加します。今回のアプリの方針として、ほとんどの処理をこのパネルコントロールのコードビハインドに記述(MyPhotoPanel.xaml.csに記述)します。
地図の参照やプッシュピンの追加などContractによって提供されている機能や、レイヤーの参照などは、プラグイン クラスのプロパティから参照します。そのため、レイヤー クラスを通してパネルでもプラグイン クラス(MyPhotoPlugin)を参照できるように記述します。
MyPhotoPanel.xamlのほうは、後で編集します。以上がプラグインを構成する基本となるクラスです。
PhotoEntityクラス
次に、写真を表すクラスを作成してプラグインで使用します。Entityクラスを継承し、レイヤーには追加して、パネル上のリスト用にはコレクションとして使用します。最低限な情報として次のプロパティを追加します。
- ID(文字列)
- 名前(文字列)
- 写真(BitmapImgeクラス)
位置情報は、Entityクラス自身が持っているため追加する必要はありません。名前には今回、ファイル名を設定して使います。プロジェクトにクラスを追加して次のように記述します。
上記コードではNameプロパティで少し特殊なことをしているので説明します。エンティティの名前というのは、今回の写真を表すものだけでなく、すべてのエンティティでも使用されるような一般的な情報です。実際にEntityクラスはそう設計されており、名前のプロパティを持っています。ただし、XAMLの機能である依存プロパティとして実装されています。依存プロパティについての説明は割愛しますが、上記コードでは通常のプロパティからアクセスできるようにしています。また、Bing Map SDKでは上記のようにEntityのRetrievePropertyメソッドを使用します。
Map Appにおいて、この依存プロパティを使用することは、Contractで提供されるルート探索などを使用した場合に、プロパティの値が使用され正しい動作が期待できます。今回のアプリでは特に関係がありません。Core.Nameのほかにも、Core.Address、Core.Phone、Core.Description、Core.PluginTokenがあります。
このPhotoEntityクラスは、パネルクラス内でコレクションとして保持するようにします。MyPhotoPanelクラス内を次のように編集します。
パネルのデザイン
次にパネルの見た目の部分を作成していきましょう。パネル上には、写真の項目を表示するListBoxと写真追加のためのButtonがあります(図2)。スクロールバーやボタンのスタイルやBing Mapsのスタイルを適用しています。また、ListBoxの項目は図のように写真とリンクから構成し、この部分もデザインします。
XAMLの編集
順にMyPhotoPanel.xamlを編集していきましょう。まずListBoxとButtonです。MyPhotoPanel.xamlの内容を次のように書き換えます。
StaticResource部分で指定している、App.ScrollViewerやApp.Button1はBing Maps SDKで用意されているスタイルです。Bing Maps上で実行したときにデザインが反映されます。スタイルについては第3回でも紹介しています。そのほかのStaticResourceは、<UserControl.Resources>要素内に、これから定義します。上記コードにまだ定義されていない内容は次の3個です。
- ListBoxの項目のスタイル
- ListBoxの項目内のリンクのスタイル
- ListBoxの項目のコントロールの構成
内容は特に気にせず次のコードをコピーしていきましょう。それぞれ、<UserControl.Resources>要素内に追記します。
デザイン部分は以上です。見た目を少しよくするためにコードが長くなっています。上記部分にもSDKで用意されいてるスタイル(App.Border.Rolloverなど)が使用されています。マウスポインターをListBoxの項目に重ねたとき見た目を切り替えるなどの処理が記述されています。
これらをすべてVisual Studioで記載したわけではなく、実際にはデザイナツールであるExpression Blend 4を使用して編集しています。ListBoxのデフォルトのスタイルをコピーして書き換えています。デフォルトのスタイルはMSDNライブラリにも記載されています。
ListBoxの項目の構成を記述しているListBoxItemTemplateでは、PhotoEntityのプロパティの内容を表示するため、データバンディング({Binding Name}と{Binding BitmapImage}部分)も記述しています。説明は省略しますが、データバインディングもXAMLの大きな特徴のひとつです。
項目を構成するコントロールの中のHyperlinkButtonについても、スタイルを定義しています(HyperlinkButtonStyle部分)。SDKにはHyperlinkButton用にスタイルが用意されているのですが、見た目がBing Mapsと異なるため、そのスタイルを参照しつつ別に用意しました。
イベントの仮処理
上記のXAMLのコードには、次のイベント記述の部分が含まれています。
- Click="HyperlinkButton_Click"
- Drop="PhotoListBox_Drop"
- Click="Button_Click"
コピーした場合はこれらに対応する処理がないため実行時にエラーになってしまいます。今回は何もしない空のメソッドをコードビハインドに記述しておきましょう。記述するといっても自分で書くのではなくVisual Studioの機能を利用してください。デザイナのメニュー(図3)またはプロパティウィンドウなどを使って自動でメソッドをコードに挿入するようにします。
正しく追加された場合は、以下のコードが、MyPhotoPanel.xaml.cs内に記述されています。
デザインの確認
実際の処理部分は次回に続きますが、現時点までの内容を確認できるように一時的なコードを書いてプラグインを実行してみましょう。たとえばパネル クラスのコードを次のように記述すると動作します。
実行結果は図4の通りです。Bing Mapsのようなデザインになったでしょうか?
今回はここまでです。次回はアプリの動作を記述していきます。お楽しみに。