オレオレMapを作成する。

ゲームアプリ開発であったり、データビジュアライゼーションなんかしてると、世界地図じゃなくて自作した地図を使いたいなんてことがあると思います。

今回はその実現方法です。
まず、WP toolkitを追加して、mapコントロールを置きます。
その中に、Rectangleと使いたい地図のImageを置きます。
で、Imageにジェスチャーを定義します。
XAMLにするとこんなかんじですね。

<Grid>
   	<Microsoft_Phone_Controls_Maps:Map CredentialsProvider="BingMapのAccountID" LogoVisibility="Collapsed" CopyrightVisibility="Collapsed">
   		<Rectangle Fill="Blue" Stroke="Black"/>
   		<Image x:Name="dynmMap1" Source="/MapData/dynm01.jpg" Stretch="UniformToFill" Height="498" Width="629.999938964844">
   			<Image.Projection>
      <PlaneProjection/>
   			</Image.Projection>
   			<Image.RenderTransform>
      <CompositeTransform x:Name="transform0"/>
   			</Image.RenderTransform>
   			<toolkit:GestureService.GestureListener>
      <toolkit:GestureListener 
      	Hold="OnHold"
      	DoubleTap="OnDoubleTap"
      	DragDelta="OnDragDelta"
      	PinchStarted="OnPinchStarted"
      	PinchDelta="OnPinchDelta"/>
   			</toolkit:GestureService.GestureListener>
   		</Image>
   	</Microsoft_Phone_Controls_Maps:Map>
</Grid>

で、C#でジェスチャーを定義します。
すると、mapコントロールの枠の中で、Imageを操作することが出来ます。
RectangleはImageをパンで移動させたときに、下の地図が見えないようにするカモフラージュですね。
今回は分かりやすく、item1だけ青色のRectangleをおいてみました。
この青色Rectangleの下では、世界地図が描画され、ジェスチャーに合わせて動作しています。

世界地図の見えないオレオレMapコントロールがXAMLで実現できました。
これで、Panoramaコントロールの上にジェスチャー操作したい画像を設置しても、Panoramaにジェスチャーが反映されることはなくなりますね！