Building your first ArcGIS Mobile application for Windows using WPF

This walkthrough is for developers who wish to learn about creating and deploying a simple ArcGIS Mobile application using WPF. It uses step-by-step instructions to demonstrate how to create an application with the map component and basic navigation functions.

Project description

The application will display map data using a Map Control, and provide basic navigation tools such as zoom and pan. Upon the completion of this walkthrough, you can extend the application with additional functionality, or use what you learned to build your own application. While this walkthrough is written in C#, the same functionality can be used with VB.NET.

Concepts

Even though this walkthrough does not require previous experience with ArcGIS Mobile, there are some important concepts you should understand before starting. As a prerequisite, please read the Mobile SDK conceptual documentation, found in this help, to gain an understanding of the mobile framework and architecture. Using the ArcGIS Mobile class diagrams while proceeding through this walkthrough will help you learn about the classes and their relationships. You can find the class diagrams in the Mobile Assembly book of the ArcGIS Mobile Developer Help. In addition, you should have a good understanding of Visual Studio .NET 2008 and how to create a Windows application.

Where to get the sample

The sample is available for download from here.

ArcGIS Mobile SDK components

The ArcGIS Mobile SDK provides several Visual Studio components to help you develop mobile applications. The primary components that you will work with are the MobileServiceConnection, MobileCache, SyncAgent and the Map. The MobileServiceConnection component represents the MobileService published on an ArcGIS Server, the MobileCache represents a local copy of that data compressed and stored in a folder set with the StoragePath property, and the SyncAgents represents the flow of data between them. While this sample can run without a connection to a server, it is important to understand the role each of these components play in the ArcGIS Mobile system. Notice how the components are linked together and operate as a group to reflect the unique tasks each of them perform. The local data used in this walkthrough was previously extracted from a web service that was published with mobile capabilities. You do not need to create a mobile web service to complete this walkthrough or have a mobile device. The Map component will display the contents of the included MobileCache without connecting to a server. Additional components are used to navigate the map and identify attribute information for given features. For more information on the components used in this walkthrough, please refer to the ArcGIS Mobile Developer Help.

Requirements

In order to complete this walkthrough you will need the following installed on your machine:

Go to the Developer Requirements topic for more details and links to downloads and instructions.

Implementation

In this walkthrough, you will create a simple application that allows you to connect to a mobileservice, open a mobilecache and display the layers in a map control. Then you will add additional controls that will let you navigate the map and identify features within the layers.

Steps:
  1. Creating a new project using Visual Studio 2008
    1. Start Visual Studio .NET 2008.
    2. On the main menu, go to File > New > Project.
    3. In the New Project dialog box, under Project Types, expand Visual C#, click Windows and select Windows WPF from the Templates pane.
    4. Select .NET Framework 3.5, from the dropdown list at the top of the dialog.
    5. Enter a project name.
    6. Click OK. This will create a new project for you.

    New Project Dialog creating a C# based WPF Application

  2. Adding a Map Control

    The ArcGIS Mobile controls are added to the Visual Studio toolbox when you install the ArcGIS Mobile SDK. The WPF controls, GraphicLayer, Map, and GPSDisplayControl, are automatically added to WPF Toolkit tab. To use the controls within your application you must drag and drop them from the Toolbox to your WPF form.

    Within the following section, you will add a Map component to the application and configure it.

    1. Drag the Map component from the toolbox onto the form.
    2. Resize the Map to fill the desired area as indicated by the screen shot below. Leave some space on top of the form so we can place navigation buttons later.

      Visual Studio IDE with the WPF Map control added to the form from the WPF Toolkit tab

    Your form should now contain a Map, called mapControl1. Unlike a traditional Windows application, adding a Map control, from the designer to your WPF form, doesn't automatically create MobileCache for you.

  3. Adding Buttons

    Now let's add an Open button to WPF form.

    1. Add an Open button to WPF form, and name it openButton (as shown below).

      This button will open the local mobile cache and render the data on mapControl1. Also, we will include some sample code so that you can modify this button to let it connect to a live mobile service.

      The new form with the Open button added

    2. Add the following three navigation buttons, which will be used to Pan, Zoom In, or Zoom Out on the map. Name them panButton, zoomInButton, and zoomOutButton.

      The new form with the Pan, Zoom In and Zoom Out buttons added

  4. Configure the components

    Now add code to the Open button to initialize the Map Control with the data layers from the mapcache on disk. If you have a valid mobile service, you can also retrieve data from server while the application is running.

    1. Create a click event for the openButton. (Double-click on the Open button)
    2. Switch to code view and add the using statements below to include the ArcGIS Mobile assembly.

      using ESRI.ArcGIS.Mobile;
      using ESRI.ArcGIS.Mobile.MobileServices;
      

    3. Add the following code to the openButton_Click event.

      private void openButton_Click(object sender, RoutedEventArgs e)
      {
        try 
        { 
        // Create an instance of MobileCache, and set StoragePath
        MobileCache m_mobileCache = new MobileCache();
        m_mobileCache.StoragePath = @"c:\temp\MapCache";
        m_mobileCache.Open(); 
        // Load layers from MobileCache to Mapcontrol 
        mapControl1.MapLayers.AddRange(m_mobileCache); 
        } 
        catch(Exception ex)  
        {
        MessageBox.Show(ex.Message); 
        }
      }

      NoteNote:

      Before running the application, you need to copy the map data from the samples data directory to the your computer's C:\Temp folder.

      TipTip:

      If you have a live service, which you want to get data from on the fly, use the following code for the openButton_Click event. It uses a MobileServiceConnection to manage the communication between client and server, and with a MobileCacheSyncAgent to download data for the full extent of the service to your local MobileCache.

      private void openButton_Click(object sender, RoutedEventArgs e)
      {
        try
        { 
        // Create an instance of MobileCache, and set StoragePath 
        MobileCache mobileCache = new MobileCache();
        mobileCache.StoragePath = @"c:\temp\MapCache";
        if (mobileCache.CacheExists)
          mobileCache.DeleteCache();
        MobileServiceConnection conn = new MobileServiceConnection();
        conn.Url = @"http://<YourServer>/arcgis/services/<YourService>/MapServer/Mobileserver";
        // Create Mobile Cache Schema 
        conn.CreateCache(mobileCache);
        //Open MobileCache
        mobileCache.Open(); 
        // Use MobileCacheSyncAgent to download data from server 
        MobileCacheSyncAgent agent = new MobileCacheSyncAgent(mobileCache); 
        agent.MapDocumentConnection = conn; 
        agent.DownloadExtent(mobileCache.GetExtent(), 0, 0); 
        // Load layers from MobileCache to Map control 
        mapControl1.MapLayers.AddRange(mobileCache); 
        } 
        catch (Exception ex)
        { 
          MessageBox.Show(ex.Message); 
        } 
      }
      

    Run the application, and click the Open button. All layers from the mobilecache will be added to the Map component.

    The running application displaying the data

  5. Interacting with the Map

    Now that we have the data drawing in the display, we will add navigation capabilities. The WPF Map component has a CurrentNavigationMode property, and provides the following navigation modes: None, Pan, Recenter, Zoom In, and Zoom Out. By setting this property to one of these navigation modes, the user can navigate the map using their mouse.

    Double-click on each of the navigation buttons we created earlier and add code as shown below:

    private void panButton_Click(object sender, RoutedEventArgs e) 
      {
      mapControl1.CurrentNavigationMode = ESRI.ArcGIS.Mobile.WPF.NavigationMode.Pan;
      }
    private void zoomInButton_Click(object sender, RoutedEventArgs e)
      {
      mapControl1.CurrentNavigationMode = ESRI.ArcGIS.Mobile.WPF.NavigationMode.ZoomIn;
      }
    private void zoomOutButton_Click(object sender, RoutedEventArgs e)
      {
      mapControl1.CurrentNavigationMode = ESRI.ArcGIS.Mobile.WPF.NavigationMode.ZoomOut; 
      }
    

    NoteNote:

    To work with WPF maps, you don't use the built-in map actions designed for windows applications. Instead, you can set CurrentNavigationMode to the one that you desire

    Your application should now be in a state where it will compile and run. In this state, you should be able to click the Open button to open the local MobileCache, and click any one of the navigation buttons to navigate the map.

    The running application displaying the data, just after the Zoom In button was clicked


9/20/2011