In this article we are going to see how to change the background color modes of Maps control in Windows Phone application development. To get some basics about maps please refer to my previous article on How to use Maps in Windows Phone application. Map control has the property called ColorModes where we can display the maps in Light or Dark color by setting this property. Let us see the steps on how to achieve this task in our Windows Phone application development. Open Visual Studio 2012 IDE and create a new Windows Phone project with a valid project name as shown in the screen below.     [more]

Clicking on OK will create the project and the solution with the list of default files and folders that are required to run the application. It will take some time to create these files based on your system configuration, so once everything is ready we can see the Visual Studio IDE with the project as shown in the screen below.

Let us add some controls to trigger event on changing the background map color mode from light to dark and vice versa, so we will add button control and map control from the tool box as shown in the code below.

XAML Code:

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="F5debug How to Series" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Map Color Mode" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!–ContentPanel – place additional content here–>
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Button Content="Light Mode" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Click="Button_Click" Width="215"/>
            <Button Content="Dark Mode" HorizontalAlignment="Left" Margin="230,10,0,0" VerticalAlignment="Top" Click="Button_Click_1" Width="216"/>

            <maps:Map HorizontalAlignment="Left" Margin="25,87,0,0" VerticalAlignment="Top" Height="496" Width="409"/>
        </Grid>

In the button click event of both the buttons (Light and Dark) let us add the below code which basically uses the Colormode property of the maps control. ColorMode property uses the MapColorMode enumeration (available in Microsoft.Phone.Maps.Controls) to assign the required mode to the maps to which the property will be assigned as shown in the code below.

C# Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using F5debugHowto73.Resources;
using Microsoft.Phone.Maps.Controls;

namespace F5debugHowto73
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();

            mymaps.Center = new System.Device.Location.GeoCoordinate(47.6097, -122.3331);
            mymaps.ZoomLevel = 15;

        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            mymaps.ColorMode = MapColorMode.Light;
        }

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            mymaps.ColorMode = MapColorMode.Dark;
        }

    }
}

Now we are done with the code, just run the application by pressing F5 directly from the keyboard or we can use the Build and execute the project option from the tool bar to run the application. Once the Build is successful we can see the Windows Phone emulator with the application and the expected outputs as shown in the screen below.