やる気駆動型エンジニアの備忘録

WPF(XAML+C#)の話題を中心に.NET/Android/CI やたまに趣味に関するブログです

(WPF)Windows Community Toolkit の MapControl を使ってみた

随分と昔(といっても今年だった気がする)にXAML Islands というキーワードを目にしたのですが、そのパッケージが OSS 化されて WPF でも使用できるとのことなので試しに使ってみました。

XAML Islands って?

Windows のデスクトップ アプリケーション開発では UWP, WPF, Windows Forms があります。 しかし、現状 WPF, Windows Forms は新たな機能は追加されておらず、Windows API の恩恵を 100% 享受できているわけではありません。
そこで、UWP と同じコントロールをホストする機能として XAML Islands が登場しました。
(と、記憶しています。。。)
以下は参考ページです。

docs.microsoft.com

docs.microsoft.com

2018年12月現在、XAML Islands を使用するための NuGet パッケージが公開されています。
(GitHub) Microsoft.Toolkit.Win32

github.com

今回はこのパッケージを使用して XAML Islands の以下の機能を試してみます。

  • MapControl

なお、この記事で記載している内容は2018年11月27日にリリースされたVer.5.0.1時点のものです。

動作環境

github.com

github.com

MapControlの使い方

MapControl はその名の通り地図を表示・操作するためのコントロールです。
UWP の MapControl と全く同じように扱えるわけでは無いですが、似たようなよく使われる機能は揃っているようです。

docs.microsoft.com

docs.microsoft.com

ただし、Microsoft.Toolkit.Wpf.UI.Controls.MapControlに定義されているプロパティは実際には使用されていない(?)ようで、地図の位置や拡大率を変えてもプロパティの値が変更されませんでした。
タッチパネルなどで操作する場合は問題ないのですが、ボタン操作などで拡大率を変更したり、回転したい場合は以下の方法で実現します。(ただし、上記に書いたとおり MapControl プロパティの値は変化しないため、スライダーなどとデータバインドするといった使い方ができません)

MapControl に関するコード

拡大・縮小は 48行目、回転は 58行目、傾き(3Dビュー)は 68行目が該当箇所となっています。
それぞれのメソッドは非同期になっています。

また、表示座標・拡大率などを一度に設定する場合は 30行目にあるMapControl.TrySetViewAsyncメソッドを使用します。
MapControl は何らかの操作を行う際にアニメーションします。これは初期表示座標の移動時には少し不便だったため、アニメーションを非表示に設定しています。
さらに、一度MapControl.TrySetViewAsyncメソッドを呼び出してもタイミングによっては失敗することがありました。(原因はわかっていません)
この現象を回避するために座標設定が成功するまでリトライしています。(26行目~41行目)
この回避策が正しいかどうかはわかりませんが、これでひとまず初期座標の表示は可能です。

これを実行すると以下のような画面が表示されます。 f:id:iyemon018:20181228142317p:plain

オフライン環境でも使える

少し試しただけなのですが、どうやら MapControl はオフライン環境でも地図の表示が可能です。
[設定] - [アプリ] - [オフライン マップ] から地図データをダウンロードすればいいようですがこのあたりの仕組みはよくわかっていません。
また、重要なことですが日本地図はオフラインデータとして提供されていません。
試しにオフライン環境で実行してみましたが真っ白な地名も記載されていない背景だけが表示されます。
このあたりは Microsoft から提供されるまで待ちですね。

このように UWP と全く同じ機能を使用することはできませんが、WPF でも MapControl を使用することはできます。今後より良くなるには(OSS化されたとはいえ)Microsoft 次第なんでしょう。
近い内に他の機能(InkCanvas とか)も触ってみようと思います。

今回使用したサンプルはこちら↓↓↓↓↓

github.com