本文主要內容是講述如何創建基於 Windows Universal App 的Windows 10 3D地圖應用，涉及的Windows 10新特性包括 Bing Maps 控件、Compiled data bindings (x:Bind)，SplitView 和Hamburger。
本文中的示例源代碼已在github 上共享( https://github.com/gaoxuesong/navigado )。
獲取Bing Maps密鑰
在 Universal Windows App 中使用必應地圖需要從 Bing Maps Developer Center 獲取地圖驗證密鑰，並將其添加到應用中。
創建新密鑰：
- 在瀏覽器中登陸 Bing Maps Developer Center ( https://www.bingmapsportal.com )，建議以您的 Microsoft 賬戶登陸。首次登陸選擇要與必應地圖帳戶關聯的帳戶。如果你想要使用自己的 Microsoft 帳戶，請單擊"是"。否則，請單擊"使用其他帳戶登錄"。
- 創建必應地圖帳戶。依次輸入"帳戶名稱"、"聯系人姓名"、"公司名稱"、"電子郵件地址"和"電話號碼"。在接受使用條款后，單擊"創建"。
- 在"我的帳戶"菜單下，單擊"創建或查看密鑰"。
- 單擊用於創建"新密鑰"的鏈接。
-
創建新密鑰。完成"創建密鑰"表格，然后單擊"創建"。
- 應用程序名稱：此信息僅供你作參考之用，以將其與其他密鑰區分開來。
- 應用程序 URL（可選）：此信息僅供你作參考之用。
- 密鑰類型：選擇Basic 或者 Enterprise。
- 應用程序類型：選擇Universal App以便在你的 Universal Windows App 中使用。
將創建的密鑰復制到安全位置，在下面的步驟中我們會將其加入到Universal Windows App 中。
創建基於 Universal Windows App的地圖應用
在Visual Studio 2015中創建新工程
打開 Visual Studio 2015（目前最新版為 Visual Studio 2015 RC），選擇File > New Project。
展開Installed > Templates ，選擇 Windows Universal > Blank App ( Windows Universal)，如下圖所示。
設定工程的名稱即在 Name 中輸入應用的名稱，本例為"navigado"。Navigado是世界語導航的意思。
設定工程保存的目錄，即在 Location 中設定工程保存的目錄。
點擊 OK 即創建新的Windows 10 Universal App。
添加地圖控件和綁定密鑰
在 XAML 頁面或代碼中，MapControl 需要 Windows.UI.Xaml.Controls.Maps 命名空間的命名空間聲明。
本例中是手動將 MapControl 添加到 MainPage.XAML 頁面，並在該頁面頂部手動添加命名空間聲明：
xmlns:Maps="using:Windows.UI.Xaml.Controls.Maps"
若要在你的 Universal Windows App 中使用 MapControl 和地圖服務 (Windows.Services.Maps)，則需要地圖驗證密鑰。將該密鑰添加到地圖控件和地圖服務對象（如果適用）。
若要驗證 MapControl，請使用該密鑰來設置 MapServiceToken 屬性值。你可以在代碼中設置該屬性，也可以在 XAML 標記中設置。
在本例中采用 Compiled data bindings (x:Bind) 的方式將必應地圖的密鑰綁定至 XAML 文件中的 MapControl，代碼如下：
File: MainPage.xaml
<Maps:MapControl
x:Name="myMapControl"
MapServiceToken="{x:Bind BingMapsToken, Mode=OneWay}"
Loaded="MapControlLoaded"/>
在 MainPage.xaml.cs中的 MainPage 類中設定 BingMapsToke 的值，BingMapsToken的值即是在第一步驟中獲取的 Bing Maps的密鑰。代碼如下：
File: MainPage.xaml.cs
private String BingMapsToken = "BingMapsToken by Bing Maps dev center ";
顯示3D地圖和設定地圖中心
在MainPage.xmal.cs代碼文件的頂部手動添加命名空間聲明。
using Windows.UI.Xaml.Controls.Maps;
using Windows.Devices.Geolocation;
在 MapControl 類的 MapControlLoaded方法中添加如下的代碼，顯示3D地圖並設定地圖中心：
File: MainPage.xaml.cs
public BasicGeoposition seattleLocation = new BasicGeoposition()
{
//Geopoint for Seattle
Latitude = 47.604,
Longitude = -122.329
};
public BasicGeoposition spaceNeedlePosition = new BasicGeoposition()
{
//Geopoint for Seattle
Latitude = 47.6204,
Longitude = -122.3491
};
private async void MapControlLoaded(object sender, RoutedEventArgs e)
{
myMapControl.Center = new Geopoint(seattleLocation);
myMapControl.ZoomLevel = 12;
if (myMapControl.Is3DSupported)
{
this.myMapControl.Style = MapStyle.Aerial3DWithRoads;
Geopoint spaceNeedlePoint = new Geopoint(seattleLocation);
MapScene spaceNeedleScene = MapScene.CreateFromLocationAndRadius(spaceNeedlePoint,
400, /* show this many meters around */
135, /* looking at it to the south east*/
60 /* degrees pitch */);
await myMapControl.TrySetSceneAsync(spaceNeedleScene);
}
else
{
//string status = "3D views are not supported on this device.";
this.myMapControl.Style = MapStyle.Aerial;
}
}
可使用MapControl 的 Is3DSupported 方法判斷設備是否支持3D地圖顯示，代碼
this.myMapControl.Style = MapStyle.Aerial3DWithRoads;
實現了地圖的切換至3D模式。調用MapControl.TrySetSceneAsync 方法切換地圖場景。
其中 使用BasicGeoposition 類實例化兩個演示地點 seattleLocation 和 spaceNeedlePosition。
在地圖上顯示圖釘、圖像和地理空間形狀
可通過將圖釘、圖像和形狀添加到 MapElements 集合，在 MapControl 上顯示集合中的圖釘或者圖像。
- 通過使用 MapIcon 類顯示圖像（例如，圖釘）和文本（可選）。使用 Image 屬性設定自定義圖像。
- 定義和顯示 MapPolygon 或 MapPolyline。
提示 在 XAML 標記中，無法以聲明方式綁定到 MapElements 集合。
以下是未對 Title 屬性指定任何值的MapIcon默認圖像。
下面的示例顯示了 Seattle 的地圖並添加了自定義圖像和標題的 MapIcon，來指示 Space Needle 的位置。您可以更具您應用的邏輯在需要的時候添加圖釘，比如在OnNavigatedTo 方法中設定。本例中在MainPage.xmal.cs代碼文件中的 MapControlLoaded 方法中添加圖釘。
File: MainPage.xaml.cs
MapIcon seattleMapIcon = new MapIcon();
seattleMapIcon.Location = new Geopoint(seattleLocation);
seattleMapIcon.NormalizedAnchorPoint = new Point(0.5, 1.0);
seattleMapIcon.Title = "Parking here";
seattleMapIcon.Image = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/mappin.png"));
myMapControl.MapElements.Add(seattleMapIcon);
SplitView 和Hamburger
在Windows 10 應用設計的典型特征就是 SplitView 和 Hamburger，本文當然不會漏過此新特性。
在 MainPage.xaml 中添加如下代碼：
<SplitView x:Name="Splitter" IsPaneOpen="False" DisplayMode="CompactInline">
<SplitView.Pane>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="70"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListView x:Name="NavLinksList" Grid.Row="1" Margin="0,12,0,0" SelectionMode="None" VerticalAlignment="Stretch"
IsItemClickEnabled="True" ItemClick="NavLinksList_ItemClick"
ItemsSource="{x:Bind NavLinks}" ItemTemplate="{StaticResource NavLinkItemTemplate}"/>
<StackPanel Grid.Row="2" Orientation="Horizontal" Margin="14,24,0,24" >
<SymbolIcon Symbol="Setting" />
<TextBlock Text="Settings" Margin="24,0,0,0" VerticalAlignment="Center"/>
</StackPanel>
</Grid>
</SplitView.Pane>
</SplitView>
<FontIcon HorizontalAlignment="Left"
Margin="14,40,0,0"
VerticalAlignment="Top"
x:Name="Hamburger"
FontFamily="Segoe MDL2 Assets"
Glyph=""
Foreground="Green"
PointerPressed="Button_Click" />
在 MainPage.xaml 中添加代碼設定ListView 的ItemTemplate：
<Page.Resources>
<DataTemplate x:Key="NavLinkItemTemplate" x:DataType="local:NavLink">
<StackPanel Orientation="Horizontal" Margin="2,0,0,0">
<SymbolIcon Symbol="{x:Bind Symbol}"/>
<TextBlock Text="{x:Bind Label}" Margin="24,0,0,0" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</Page.Resources>
ListView 的ItemsSource 以x:Bind方式綁定，綁定的數據源在 MainPage.xaml.cs 中設定：
private ObservableCollection<NavLink> _navLinks = new ObservableCollection<NavLink>()
{
new NavLink() { Label = "Map", Symbol = Windows.UI.Xaml.Controls.Symbol.Map },
new NavLink() { Label = "MapDrive", Symbol = Windows.UI.Xaml.Controls.Symbol.MapDrive },
new NavLink() { Label = "MapPin", Symbol = Windows.UI.Xaml.Controls.Symbol.MapPin },
new NavLink() { Label = "Camera", Symbol = Windows.UI.Xaml.Controls.Symbol.Camera },
};
public ObservableCollection<NavLink> NavLinks
{
get { return _navLinks; }
}
我們在ListView 中的ItemClick 事件可響應用戶的交互。在MainPage.xaml.cs中實現 NavLinksList_ItemClick 方法，通過判斷 ListView 中Item的 Lable 可知用戶究竟點擊了哪一個Item，即可執行不同的業務邏輯。在本例中，我們添加Lable為"Map"的響應切換地圖顯示模式，其代碼如下：
private void NavLinksList_ItemClick(object sender, ItemClickEventArgs e)
{
String label = (e.ClickedItem as NavLink).Label;
switch (label)
{
case "Map":
if (myMapControl.Is3DSupported)
{
if ( this.myMapControl.Style == MapStyle.Aerial3DWithRoads)
{
this.myMapControl.Style = MapStyle.Road;
}
else
{
this.myMapControl.Style = MapStyle.Aerial3DWithRoads;
}
MapIcon seattleMapIcon = new MapIcon();
seattleMapIcon.Location = new Geopoint(seattleLocation);
seattleMapIcon.NormalizedAnchorPoint = new Point(0.5, 1.0);
seattleMapIcon.Title = "Parking here";
seattleMapIcon.Image = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/mappin.png"));
myMapControl.MapElements.Add(seattleMapIcon);
}
break;
default:
break;
}
}
在前面的代碼中我們將FontIcon的x:Name 屬性設定為Hamburger，現在 MainPage.xaml.cs 中添加PointerPressed 事件響應Button_Click 即實現了Windows 10 的Hamburger。
private void Button_Click(object sender, RoutedEventArgs e)
{
Splitter.IsPaneOpen = (Splitter.IsPaneOpen == true) ? false : true;
//StatusBorder.Visibility = Visibility.Collapsed;
}
代碼運行效果如下：
如果您的設備支持多點手勢觸控，則旋轉地圖，效果超酷。旋轉后可清晰看到圖釘的文字"Parking here"。
點擊 Hamburger 的 "Map"按鈕切換地圖顯示模式，如下圖所示。
激活設備的開發者模式
使用 Visual Studio 2015 開發 Windows 10 應用時，您會看到下圖的提示，提醒您激活開發者模式。
那么如何激活開發者模呢？
如果您的Windows 10已經升級至 Pro Insider Preview Evaluation Copy. Build 10130 以上，或者您看此文時Windows 10 正式版已經發布，那么在 Settings 選擇 Update & security > For developers ，選擇 Developer Mode 激活開發者模式。
Windows 10 Phones
在 Settings 選擇 Update & security，然后選擇 For developers 。
Windows 10 desktop
Use gpedit to enable your device
- Open a cmd prompt with administrator privileges.
- Run Gpedit.msc.
- Go to Local Computer Policy > Computer Configuration > Administrative Templates > Windows Components > App Package Deployment
-
Edit the policies to enable the following:
- Allow all trusted apps to install (Enables your device for sideloading apps)
- Allows development of Windows Store apps and installing them from an integrated development environment (IDE) (Enables your device for development from Visual Studio)
- Reboot your machine.
Use regedit to enable your device
- Open a cmd prompt with administrator privileges.
- Run regedit.
- Set the value of this DWORD to 1: HKLM\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock\AllowAllTrustedApps
- Set the value of this DWORD to 1: HKLM\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock\AllowDevelopmentWithoutDevLicense
Use PowerShell to enable your device
- Run Windows PowerShell with administrator privileges.
- Run the following command: PS C:\WINDOWS\system32> reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock" /t REG_DWORD /f /v "AllowDevelopmentWithoutDevLicense" /d "1"
- Run this command too: PS C:\WINDOWS\system32> reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock" /t REG_DWORD /f /v "AllowAllTrustedApps" /d "1"
作者：雪松
Microsoft MVP -- Windows Platform Development,
Hortonworks Certified Apache Hadoop 2.0 Developer