Changing Map Modes in Bing WPF control - wpf

Question

Here is my XAML Code:
<s:SurfaceWindow x:Class="map_test.SurfaceWindow1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="http://schemas.microsoft.com/surface/2008"
xmlns:m="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Height="1080" Width="1920" WindowStartupLocation="CenterScreen">
<Grid>
<m:Map x:Name="NotreDameMap" CredentialsProvider="AmNh-jzPEmrdpc2T2wBxEjyB0fvSimavosz4B4_IPEAY4RDE-r7L2rHa439uEzlz" Mode="AerialWithLabels" Center="41.702380,-86.234168" ZoomLevel="16" >
<Canvas Width="175.198" Height="85"
m:MapLayer.Position="41.702380,-86.234168"
m:MapLayer.PositionOrigin="BottomCenter" Opacity="0.75">
<!-- Layer 1/<Group>/<Path> -->
<Path StrokeThickness="0.2" Stroke="#ffec008b" StrokeMiterLimit="1.0" Data="F1 M 122.944,144.000"/>
<!-- Layer 1/<Group>/<Path> -->
<Path StrokeThickness="0.2" Stroke="#ffec008b" StrokeMiterLimit="1.0" Data="F1 M 65.081,47.477"/>
<!-- Layer 1/<Group>/<Group>/<Compound Path> -->
<Path Fill="#ff0e223e" Data="F1 M 159.484,130.991 L 158.570,130.991 L 158.570,128.309 C 158.791,128.277 159.073,128.247 159.484,128.247 C 160.901,128.247 161.408,128.941 161.408,129.636 C 161.408,130.609 160.523,130.991 159.484,130.991 Z M 161.187,131.494 L 161.187,131.432 C 162.036,131.180 162.732,130.547 162.732,129.505 C 162.732,128.750 162.479,128.213 162.006,127.866 C 161.532,127.521 160.744,127.269 159.544,127.269 C 158.600,127.269 157.968,127.364 157.306,127.457 L 157.306,135.373 L 158.570,135.373 L 158.570,131.965 L 159.453,131.965 C 160.459,131.965 160.964,132.347 161.155,133.355 C 161.312,134.396 161.502,135.122 161.693,135.373 L 163.019,135.373 C 162.890,135.122 162.700,134.646 162.511,133.420 C 162.354,132.251 161.879,131.623 161.187,131.494 Z"/>
<!-- Layer 1/<Group>/<Group>/<Compound Path> -->
<Path Fill="#ff0e223e" Data="F1 M 154.433,89.842 L 149.441,95.128 L 144.158,95.128 L 144.158,47.566 L 149.441,47.566 L 154.433,52.852 L 154.433,89.842 Z M 123.018,95.128 L 120.080,95.128 L 91.603,47.566 L 123.018,47.566 L 123.018,95.128 Z M 62.242,95.128 L 62.232,95.128 L 62.232,47.566 L 65.170,47.566 L 93.646,95.128 L 62.242,95.128 Z M 41.101,95.128 L 31.693,95.128 L 31.693,47.566 L 41.101,47.566 L 41.101,95.128 Z M 157.372,26.423 L 144.158,26.423 L 144.158,21.138 L 157.372,21.138 L 157.372,0.000 L 109.807,0.000 L 109.807,21.138 L 123.018,21.138 L 123.018,26.423 L 78.677,26.423 L 62.242,0.000 L 27.892,0.000 L 27.892,21.138 L 41.101,21.138 L 41.101,26.423 L 0.000,26.421 L 0.000,47.737 L 10.571,47.737 L 10.571,95.299 L 0.000,95.299 L 0.000,116.276 L 40.808,116.265 L 40.808,121.550 L 27.609,121.550 L 27.609,142.688 L 75.453,142.688 L 75.453,121.550 L 62.242,121.550 L 62.242,116.265 L 106.345,116.265 L 122.165,142.688 L 144.158,142.688 L 144.158,116.265 L 157.372,116.265 L 175.598,97.774 L 175.598,44.921 L 157.372,26.423 Z"/>
<!-- Layer 1/<Group>/<Group>/<Compound Path> -->
<Path Fill="#ff0e223e" Data="F1 M 159.925,137.267 C 156.771,137.267 154.215,134.617 154.215,131.241 C 154.215,127.928 156.771,125.251 159.895,125.251 L 159.925,125.251 C 163.079,125.251 165.602,127.928 165.602,131.272 C 165.602,134.617 163.079,137.299 159.925,137.267 Z M 159.925,124.146 L 159.895,124.146 C 156.014,124.146 152.859,127.300 152.859,131.241 C 152.859,135.248 156.014,138.373 159.895,138.373 C 163.802,138.373 166.896,135.248 166.896,131.241 C 166.896,127.300 163.802,124.146 159.925,124.146 Z"/>
<TextBlock FontSize="9" Foreground="White" Margin="65" TextAlignment="Center">
Hesburgh<LineBreak />
Library <LineBreak />
</TextBlock>
</Canvas>
</m:Map>
<StackPanel>
<ToggleButton x:Name="toggleButton" Content="Change Map Mode"/>
<TextBlock Text="Maps" />
</StackPanel>
</Grid>
Quite simply i am trying to create a button that will change the mode of the map from AerialWithLabels to Road mode.
any help will be appreciated.
P.S sorry if its a fairly basic question I am new to coding

Answer 1

If you are using C# with your application, Then one way to do this would be:
Create a button in XAML, and give it a name:
<Button Name="TestButton">
<TextBlock FontSize="26">Change Map Mode</TextBlock>
</Button>
Assign an event handler to the button's MouseUp or TouchUp events:
<Button Name="TestButton" TouchUp="Toggle_Map">
<TextBlock FontSize="26">Change Map Mode</TextBlock>
</Button>
In your C# codebehind, create the event handler like so, with the proper C# code to toggle the map mode:
using Microsoft.Maps.MapControl.WPF;
private void Toggle_Map(object sender, TouchEventArgs e)
{
if (myMap.Mode.ToString() == "Microsoft.Maps.MapControl.WPF.RoadMode")
{
//Set the map mode to Aerial with labels
myMap.Mode = new AerialMode(true);
}
if (myMap.Mode.ToString() == "Microsoft.Maps.MapControl.WPF.AerialMode")
{
//Set the map mode to RoadMode
myMap.Mode = new RoadMode();
}
}
MyMap needs to match the Name of your map control, using Name="myMap" in XAML.
That should get you started...

Answer 2

I couldn't add a comment on the previous answer. So I will answer again with a modification
1) create a button on XAML
<Button Content="Toggle Map" HorizontalAlignment="Right" VerticalAlignment="Top" Width="81" Click="btnToggleMap_Click"/>
2) in C# the event handler should have an if and else. The code fixed it is:
using Microsoft.Maps.MapControl.WPF;
private void btnToggleMap_Click(object sender, TouchEventArgs e)
{
if (NotreDameMap.Mode.ToString() == "Microsoft.Maps.MapControl.WPF.RoadMode")
{
//Set the map mode to Aerial with labels
NotreDameMap.Mode = new AerialMode(true);
} else if (NotreDameMap.Mode.ToString() == "Microsoft.Maps.MapControl.WPF.AerialMode")
{
//Set the map mode to RoadMode
NotreDameMap.Mode = new RoadMode();
}
}
NOTE: NotreDameMap is the name of the Map, it has to be the same as the Map on XAML
You can copy and paste the code and should work.