9 自定义导航工具栏
请先阅读：以下所有对于工具栏的按钮的添加将在这个事件中进行处理。
首先，在页面构造函数中，添加以下事件的处理函数：
public MainPage(){ InitializeComponent(); //自定义导航条 map.MapForeground.TemplateApplied += delegate(object sender, EventArgs args) { map.MapForeground.NavigationBar.TemplateApplied += NavigationBar_TemplateApplied; };} 然后，在相应的处理函数中，对工具栏进行自定义：
void NavigationBar_TemplateApplied(object sender, EventArgs e){ //在这里进行导航工具栏的自定义处理，添加、删除等。。。} 9.1 实现地图的移动和缩放功能
因为工具栏有两部分，一个是垂直的，一个是水平的，这里先向垂直的工具栏上添加按钮。
对于缩放功能，Bing Maps已经提供了相关的命令，可以直接使用：
void NavigationBar_TemplateApplied(object sender, EventArgs e)
{ //得到地图的导航条 NavigationBar navBar = map.MapForeground.NavigationBar;
//分割线 navBar.VerticalPanel.Children.Add(new CommandSeparator());
//使用ZoomMapCommand命令添加缩放按钮到工具条
CommandButton btnZoomIn = new CommandButton(new ZoomMapCommand(true), "放大", "放大地图"); navBar.VerticalPanel.Children.Add(btnZoomIn); CommandButton btnZoomOut = new CommandButton(new ZoomMapCommand(false), "缩小", "缩小地图"); navBar.VerticalPanel.Children.Add(btnZoomOut);
}
移动命令就需要自定义了，要自定义导航工具栏上的功能，需要实现NavigationBarCommandBase抽象类，并实现相应功能。
因为移动方向有四个，就偷懒写到一个Command里面了。。。用一个枚举区分：
////// 地图移动方向/// public enum MoveDirection{ 上,下,左,右 }
下面是对NavigationBarCommandBase的实现：
////// 工具条命令：移动地图/// class MoveMapCommand : NavigationBarCommandBase{ private MoveDirection direction; public MoveMapCommand(MoveDirection direction) { this.direction = direction; } ////// 执行命令 /// /// 被执行该命令的工具条控制的地图 public override void Execute(MapBase map) { //定义移动位移量，初始均为0 int deltaX = 0; int deltaY = 0; //根据移动方向向移动位移赋值 switch (direction) { case MoveDirection.上: deltaY = -50; break; case MoveDirection.下: deltaY = 50; break; case MoveDirection.左: deltaX = -50; break; case MoveDirection.右: deltaX = 50; break; default: break; } //首先获取当前视图的坐标 Point viewportPoint; if (map.TryLocationToViewportPoint(map.Center, out viewportPoint)) { //将坐标与移动位移量进行相加，对地图视野中心进行调整 viewportPoint.X += deltaX; viewportPoint.Y += deltaY; //将调整后的坐标再设置回地图 Location newCenter; if (map.TryViewportPointToLocation(viewportPoint, out newCenter)) { //前台控件关掉了动画效果，这里再使用时再加上，用完后还原 AnimationLevel al = map.AnimationLevel; map.AnimationLevel = AnimationLevel.Full; map.Center = newCenter; map.AnimationLevel = al;
} } }}
Command类定义好后就可以添加按钮了（以下代码添加至NavigationBar_TemplateApplied函数中）：
void NavigationBar_TemplateApplied(object sender, EventArgs e){ //得到地图的导航条 NavigationBar navBar = map.MapForeground.NavigationBar; //分割线 navBar.VerticalPanel.Children.Add(new CommandSeparator()); //使用自定义的MoveMapCommand命令添加移动按钮到工具条 CommandButton btnMoveLeft = new CommandButton(new MoveMapCommand(MoveDirection.左), "左移", "左移地图"); navBar.VerticalPanel.Children.Add(btnMoveLeft); CommandButton btnMoveRight = new CommandButton(new MoveMapCommand(MoveDirection.右), "右移", "右移地图"); navBar.VerticalPanel.Children.Add(btnMoveRight); CommandButton btnMoveUp = new CommandButton(new MoveMapCommand(MoveDirection.上), "上移", "上移地图"); navBar.VerticalPanel.Children.Add(btnMoveUp); CommandButton btnMoveDown = new CommandButton(new MoveMapCommand(MoveDirection.下), "下移", "下移地图"); navBar.VerticalPanel.Children.Add(btnMoveDown);} 等到最后再一起上效果图。
9.2 实现地图模式的更换
这里将向水平向的工具栏上添加按钮，因为原工具栏上已经有了几个地图模式按钮，还是英文的，不好看，首先把它们全部干掉：
navBar.HorizontalPanel.Children.Clear();
然后，开始添加自定义的地图模式按钮，这里是按钮特殊，有预置好的改变地图模式的按钮可以使用，然后直接将需要改变成的地图模式直接new上去就好了：
void NavigationBar_TemplateApplied(object sender, EventArgs e){ //拿到地图的导航条 NavigationBar navBar = map.MapForeground.NavigationBar; //清除横向导航菜单上现有项 navBar.HorizontalPanel.Children.Clear(); //使用ChangeMapModeButton添加地图模式按钮到工具条 ChangeMapModeButton btnRoad = new ChangeMapModeButton(new RoadMode(), "普通地图", "普通地图模式"); navBar.HorizontalPanel.Children.Add(btnRoad); ChangeMapModeButton btnAerial = new ChangeMapModeButton(new AerialMode(true), "卫星地图", "卫星地图模式"); navBar.HorizontalPanel.Children.Add(btnAerial); ChangeMapModeButton btnBirdseye = new ChangeMapModeButton(new BirdseyeMode(), "鸟瞰地图", "鸟瞰地图模式"); navBar.HorizontalPanel.Children.Add(btnBirdseye); ChangeMapModeButton btnStreetside = new ChangeMapModeButton(new StreetsideMode(), "街景地图", "街景地图模式"); navBar.HorizontalPanel.Children.Add(btnStreetside); ChangeMapModeButton btnChina = new ChangeMapModeButton(new ChinaMode(), "中国地图", "自定义的中国地图模式"); navBar.HorizontalPanel.Children.Add(btnChina); ChangeMapModeButton btnGoogle = new ChangeMapModeButton(new GoogleMode(), "谷歌卫图", "谷歌卫星地图模式"); navBar.HorizontalPanel.Children.Add(btnGoogle);} 这里除了控件自带的几个地图模式以外，还添加了两个自定义的地图模式，ChinaMode之前已经做出了实现，就只贴出GoogleMode的代码：
////// 谷歌卫星地图模式/// public class GoogleMode : CustomModeBase{ public GoogleSatelliteMode() { //初始化谷歌卫星地图瓦片源 GoogleTileSource TileSource = new GoogleTileSource(); //向瓦片图层添加瓦片源 base.TileLayer.TileSources.Add(TileSource); }}
9.3 实现“转到”按钮
自定义一个Command类来实现根据名称转到固定坐标视野的功能，以下是Command类的实现：
////// 工具条命令：转到某处位置/// public class GotoCommand : NavigationBarCommandBase{ private string PositionName; public GotoCommand(string name) { this.PositionName = name; } public override void Execute(MapBase map) { Location location; double zoomLevel; switch (this.PositionName) { case "北京": default: location = new Location(39.92, 116.46); zoomLevel = 15; break; }
//前台控件关掉了动画效果，这里再使用时再加上，用完后还原 AnimationLevel al = map.AnimationLevel; map.AnimationLevel = AnimationLevel.Full; map.SetView(location, zoomLevel); map.AnimationLevel = al;} }
以下是按钮的添加：
void NavigationBar_TemplateApplied(object sender, EventArgs e){ //拿到地图的导航条 NavigationBar navBar = map.MapForeground.NavigationBar; //分割线 navBar.HorizontalPanel.Children.Add(new CommandSeparator()); //使用自定义GotoCommand命令添加“北京”按钮到工具条 CommandButton btnBJ = new CommandButton(new GotoCommand("北京"), "北京", "回到北京"); navBar.HorizontalPanel.Children.Add(btnBJ);} 9.4 实现对地图控件上显示内容的控制
首先是对地图上自带的内容：Logo、比例尺、版权信息的控制，然后再加上之前做的“鹰眼”地图。
因为内容较多，仍然使用一个枚举来决定要控制的内容：
////// 要控制的内容/// public enum HideElement{ 比例尺,Logo,版权信息,迷你地图}
下面是对Command类的实现：
////// 工具条命令：显示/隐藏内容/// class ToggleHideCommand : NavigationBarCommandBase{ private HideElement element; public ToggleHideCommand(HideElement element) { this.element = element; } ////// 根据element改变显示/隐藏 /// /// 地图控件 /// 显示/隐藏 private void ChangeVisibility(MapBase map, Visibility visibility) { switch (element) { case HideElement.比例尺: map.ScaleVisibility = visibility; break; case HideElement.Logo: map.LogoVisibility = visibility; break; case HideElement.版权信息: map.CopyrightVisibility = visibility; break; case HideElement.迷你地图: map.Children.Where(u => u is Canvas).Select(u => u as Canvas).First().Visibility = visibility; break; default: break; } } public override void Execute(MapBase map) { NavigationBarCommandStatus status = this.GetStatus(map); if (status == NavigationBarCommandStatus.Checked) { ChangeVisibility(map, Visibility.Collapsed); } else if (status == NavigationBarCommandStatus.Normal) { ChangeVisibility(map, Visibility.Visible); } } ////// 根据element获取其显示状态 /// /// 地图控件 ///显示状态 private Visibility GetVisibility(MapBase map) { switch (element) { case HideElement.比例尺: return map.ScaleVisibility; case HideElement.Logo: return map.LogoVisibility; case HideElement.版权信息: return map.CopyrightVisibility; case HideElement.迷你地图: return map.Children.Where(u => u is Canvas).Select(u => u as Canvas).First().Visibility; default: return Visibility.Collapsed; } } ////// 获取当前按钮其对应的状态，用于在工具条中显示其状态 /// /// 工具条所控制的地图控件 ///返回的状态 public override NavigationBarCommandStatus GetStatus(MapBase map) { NavigationBarCommandStatus status = NavigationBarCommandStatus.Normal; if (GetVisibility(map) == Visibility.Visible) { status = NavigationBarCommandStatus.Checked; } return status; }}
ChangeVisibility和GetVisibility是为了少些代码所封装的自定义函数，这里的重点在于对GetStatus的实现，这个函数的返回值将控制工具条上按钮的状态，是处于选中？还是未选中？状态。
下面向工具栏中添加按钮：
void NavigationBar_TemplateApplied(object sender, EventArgs e){ //拿到地图的导航条 NavigationBar navBar = map.MapForeground.NavigationBar; //分割线 navBar.HorizontalPanel.Children.Add(new CommandSeparator()); //使用自定义ToggleHideCommand命令添加“北京”按钮到工具条（注：这个按钮有状态） CommandToggleButton btnScale = new CommandToggleButton (new ToggleHideCommand(HideElement.比例尺), "比例尺", "显示/隐藏比例尺"); navBar.HorizontalPanel.Children.Add(btnScale); CommandToggleButton btnLogo = new CommandToggleButton (new ToggleHideCommand(HideElement.Logo), "Logo", "显示/隐藏Logo"); navBar.HorizontalPanel.Children.Add(btnLogo); CommandToggleButton btnCopyright = new CommandToggleButton
(new ToggleHideCommand(HideElement.版权信息), "版权信息", "显示/隐藏版权信息"); navBar.HorizontalPanel.Children.Add(btnCopyright); CommandToggleButton btnMiniMap = new CommandToggleButton
(new ToggleHideCommand(HideElement.迷你地图), "迷你地图", "显示/隐藏迷你地图"); navBar.HorizontalPanel.Children.Add(btnMiniMap);}
最终效果：
首先是在“中国地图”模式下，开启所有内容的显示：
为了加强对比，这个是在“谷歌卫图”模式下，隐藏所有内容显示（请注意工具条按钮的变化）：
