使ってみよう! Bing API/SDK

第7回 Hello, Bing Map App!──Silverlightで作るBing Mapsアプリケーション(7)

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

PhotoEntityクラス

次に,写真を表すクラスを作成してプラグインで使用します。Entityクラスを継承し,レイヤーには追加して,パネル上のリスト用にはコレクションとして使用します。最低限な情報として次のプロパティを追加します。

  • ID(文字列)
  • 名前(文字列)
  • 写真(BitmapImgeクラス)

位置情報は,Entityクラス自身が持っているため追加する必要はありません。名前には今回,ファイル名を設定して使います。プロジェクトにクラスを追加して次のように記述します。

namespace MyPhotoMapApp
{
    using Microsoft.Maps.Core;
    using System.Windows.Media.Imaging;
    using System;

    public class PhotoEntity : Entity
    {
        public string Id { get; set; }
        public BitmapImage BitmapImage { get; set; }
        
        public string Name
        {
            get
            {
                return (string)base.GetValue(RetrieveProperty("Core.Name", typeof(string)));
            }
            set
            {
                base.SetValue(RetrieveProperty("Core.Name", typeof(string)), value);
            }
        }
    }
}

上記コードではNameプロパティで少し特殊なことをしているので説明します。エンティティの名前というのは,今回の写真を表すものだけでなく,すべてのエンティティでも使用されるような一般的な情報です。実際にEntityクラスはそう設計されており,名前のプロパティを持っています。ただし,XAMLの機能である依存プロパティとして実装されています。依存プロパティについての説明は割愛しますが,上記コードでは通常のプロパティからアクセスできるようにしています。また,Bing Map SDKでは上記のようにEntityのRetrievePropertyメソッドを使用します。

Map Appにおいて,この依存プロパティを使用することは,Contractで提供されるルート探索などを使用した場合に,プロパティの値が使用され正しい動作が期待できます。今回のアプリでは特に関係がありません。Core.Nameのほかにも,Core.Address,Core.Phone,Core.Description,Core.PluginTokenがあります。

このPhotoEntityクラスは,パネルクラス内でコレクションとして保持するようにします。MyPhotoPanelクラス内を次のように編集します。

private MyPhotoPlugin plugin;
private ObservableCollection<PhotoEntity> PhotoItems; // 追加

public MyPhotoPanel(MyPhotoPlugin plugin)
{
    InitializeComponent();

    this.plugin = plugin;
    this.PhotoItems = new ObservableCollection<PhotoEntity>(); // 追加
}

パネルのデザイン

次にパネルの見た目の部分を作成していきましょう。パネル上には,写真の項目を表示するListBoxと写真追加のためのButtonがあります図2⁠。スクロールバーやボタンのスタイルやBing Mapsのスタイルを適用しています。また,ListBoxの項目は図のように写真とリンクから構成し,この部分もデザインします。

図2 パネルのデザイン

図2 パネルのデザイン

XAMLの編集

順にMyPhotoPanel.xamlを編集していきましょう。まずListBoxとButtonです。MyPhotoPanel.xamlの内容を次のように書き換えます。

<UserControl x:Class="MyPhotoMapApp.MyPhotoPanel"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <UserControl.Resources>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ListBox x:Name="PhotoListBox" 
                 ItemContainerStyle="{StaticResource ListBoxItemStyle}"
                 ItemTemplate="{StaticResource ListBoxItemTemplate}"                 
                 AllowDrop="True" Drop="PhotoListBox_Drop">
            <ListBox.Template>
                <ControlTemplate>
                    <ScrollViewer Style="{StaticResource App.ScrollViewer}">
                        <ItemsPresenter  />
                    </ScrollViewer>
                </ControlTemplate>
            </ListBox.Template>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
        <Button Grid.Row="1" Content="Add photo" Width="120" Margin="5"
                Style="{StaticResource App.Button1}"
                Click="Button_Click" />
    </Grid>
</UserControl>

StaticResource部分で指定している,App.ScrollViewerApp.Button1はBing Maps SDKで用意されているスタイルです。Bing Maps上で実行したときにデザインが反映されます。スタイルについては第3回でも紹介しています。そのほかのStaticResourceは,<UserControl.Resources>要素内に,これから定義します。上記コードにまだ定義されていない内容は次の3個です。

  • ListBoxの項目のスタイル
  • ListBoxの項目内のリンクのスタイル
  • ListBoxの項目のコントロールの構成

内容は特に気にせず次のコードをコピーしていきましょう。それぞれ,<UserControl.Resources>要素内に追記します。

著者プロフィール

松江祐輔(まつえゆうすけ)

日本システムウエア株式会社 勤務。現在,ハードウェア設計・検証業務を担当。大学生・大学院生時代はベンチャー企業 有限会社ミレニアムシステムズにプログラマーとして従事。趣味はプログラミング。好きな言語はVisual Basic。Microsoft MVP for Windows Live Platform(Jul 2010 - Jun 2011),Windows Live(Jul 2011 - Jun 2013)。

URL:http://katamari.jp