はじめに
7月13日に日本のBingが正式サービスになりました。皆さんは新しくなってから使ってみましたか？ 「ホバープレビュー」
残念ながら日本版のBingにはまだまだ利用できない機能があります。この連載で紹介しているBing Map Appについても英語のサービスしかありません。Bing Map App SDKはそのMap Appを作る開発者向けキットのBeta版です。今回もMap Appの開発について紹介します。日本でのサービス化を期待しつつ，
さて，
Map Appのスタイル
前回はパネルを使用したMap Appを紹介しました。パネルはSilverlightのユーザーコントロールとして作成しているので，
よりMap Appらしくするためには，
Map Appプロジェクトの作成
それでは見た目をBing Mapに合わせたデザインのMap Appを作成してみましょう。Map Appの作り方は前回までを参照して，
Bing Map App SDKをインストールすると，
Static Resourcesの使用
用意されたStyleを適用するにはふたつ方法があります。ひとつはコントロールのXAMLに直接Styleプロパティに指定する方法です。たとえばボタンのスタイルを変更する場合，
<StackPanel>
<Button Content="ボタン1" Style="{StaticResource App.Button1}" Margin="2" Width="100" />
<Button Content="ボタン2" Style="{StaticResource App.Button2}" Margin="2" Width="100" />
<Button Style="{StaticResource App.ButtonClose}" Margin="2" />
<Button Content="Style 適用なし" Margin="2" Width="100" />
</StackPanel>
Styleプロパティ部分にStaticResourceを指定しています。プロジェクトではこのStaticResourceを定義していませんので， ボタン以外にもスクロールバーや何かしらの処理中であることを示すインジケーターなどのスタイルも用意されています スタイルを変更するもうひとつの方法は， これまでと同様にプラグイン クラスにContractを定義します。 このプロパティを使用して， 今回のコードでは， 定義したStyleProviderContractプロパティはプラグイン クラスのプロパティです。また通常は， 実行結果は図4のようになります。 今回紹介したもの以外にもスタイルが用意されています。一覧はSDKの文書を確認してください。公式のMap AppやBing Mapsと同様のデザインにするためには，
<StackPanel>
<ListBox Margin="10" Height="50">
<ListBox.Template>
<ControlTemplate>
<ScrollViewer Style="{StaticResource App.ScrollViewer}">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ListBox.Template>
<ListBoxItem Content="アイテム1" />
<ListBoxItem Content="アイテム2" />
<ListBoxItem Content="アイテム3" />
<ListBoxItem Content="アイテム4" />
<ListBoxItem Content="アイテム5" />
</ListBox>
<CheckBox Style="{StaticResource App.CheckBox}" IsChecked="True" Content="チェックボックス" />
<RadioButton Style="{StaticResource App.RadioButton}" IsChecked="True" Content="ラジオボタン" />
<ContentControl Style="{StaticResource App.LoadingIndicator}" />
</StackPanel><StackPanel>
<Button Content="ボタン1" Style="{StaticResource App.Button1}" Margin="2" Width="100" />
<Button Content="ボタン2" Style="{StaticResource App.Button2}" Margin="2" Width="100" />
<Button Style="{StaticResource App.ButtonClose}" Margin="2" />
<Button Content="Style 適用なし" Margin="2" Width="100" />
</StackPanel>
StyleProviderContractの使用
[ImportSingle("Microsoft/StyleProviderContract", ImportLoadPolicy.Synchronous)]
public StyleProviderContract StyleProviderContract { get; set; }
var style = parent.StyleProviderContract.GetResource("App.H1.Highlight") as Style;
StyleTextBlock.Style = style;
<StackPanel>
<TextBlock Text="見出し" x:Name="StyleTextBlock" Margin="10" />
<ComboBox Style="{StaticResource App.ComboBox}"
x:Name="StyleComboBox" Margin="10" />
</StackPanel>
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
public class StyleItem
{
public string Name { get; set; }
public string DisplayMember { get; set; }
}
public partial class SamplePanel : UserControl
{
private SamplePlugin parent;
public SamplePanel(SamplePlugin plugin)
{
InitializeComponent();
this.parent = plugin;
var headings = new List<StyleItem>()
{
new StyleItem { Name = "App.H1.Highlight", DisplayMember = "見出し１ ハイライト" },
new StyleItem { Name = "App.H1", DisplayMember = "見出し１ 既定の色" },
new StyleItem { Name = "App.H2.Highlight", DisplayMember = "見出し２ ハイライト" },
new StyleItem { Name = "App.H2.Neutral", DisplayMember = "見出し２ 中間色" },
new StyleItem { Name = "App.P1.Base", DisplayMember = "強調する文" },
new StyleItem { Name = "App.P2.Base", DisplayMember = "本文" },
new StyleItem { Name = "App.P3.Base", DisplayMember = "注釈" },
new StyleItem { Name = "App.P4.Base", DisplayMember = "フッター" },
new StyleItem { Name = "App.P1.Web", DisplayMember = "外部サイトへのリンク" },
new StyleItem { Name = "App.P1.Highlight", DisplayMember = "強調する文中の強調" },
new StyleItem { Name = "App.P2.Highlight", DisplayMember = "本文中の強調" },
new StyleItem { Name = "App.P2.Web", DisplayMember = "本文中の外部サイトへのリンク" },
new StyleItem { Name = "App.P2.Red", DisplayMember = "本文中のエラーメッセージなどの強調" }
};
StyleComboBox.DisplayMemberPath = "DisplayMember";
StyleComboBox.ItemsSource = headings;
StyleComboBox.SelectionChanged += StyleComboBox_SelectionChanged;
}
private void StyleComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var item = StyleComboBox.SelectedValue as StyleItem;
var style = parent.StyleProviderContract.GetResource(item.Name) as Style;
StyleTextBlock.Text = item.Name;
StyleTextBlock.Style = style;
}
}
