Building your first ArcGIS Mobile application for Windows using WPF

This walkthrough for developers describes how to create and deploy a simple ArcGIS Mobile application using Windows Presentation Foundation (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 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 Runtime SDK for Windows Mobile, there are some important concepts you should understand before starting the walkthrough. As a prerequisite, read the conceptual documentation in this Help system to gain an understanding of the mobile framework and architecture. Using the mobile API 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 section of the 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 ArcGIS.com.

ArcGIS Runtime SDK for Windows Mobile WPF components

This software development kit (SDK) provides several WPF components to help you develop mobile applications. The primary components you'll work with are MobileServiceConnection, MobileCache, SyncAgent, and the Map. The MobileServiceConnection component represents the MobileService published on an ArcGIS Server, the MobileCache represents a local compressed copy of that data stored in a folder set with the StoragePath property, and the SyncAgents represent 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 for Windows Mobile system and how the they 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 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, see the Developer Help.

Requirements

To complete this walkthrough, you need the following installed on your machine:

• Visual Studio .NET 2008 SP1 with .NET Framework 3.5
• ArcGIS Runtime SDK for Windows Mobile

See 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 open a mobile cache and display the layers in a map control. Then you'll add controls to navigate the map and identify features within the layers.

Steps:

1. Creating a new project using Visual Studio .NET 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 drop-down list at the top of the dialog box.
   5. Type a project name.
   6. Click OK. This creates a new project.

2. Adding a Map control

   The WPF controls, GraphicLayer, Map, and GPSDisplayControl, are located on the WPF Toolbox tab. To use the controls in your application, you must drag them from the toolbox to your WPF form.

   In this step, you'll 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 following screen shot. Leave space at the top of the form to add navigation buttons later.

   Your form now contains a Map, called mapControl1.

3. Adding buttons
   1. Add an Open button to the WPF form, and name it openButton (as shown in the following screen shot).

      This button will open the local mobile cache and render the data on mapControl1. You'll also include some sample code so that you can modify this button to have it connect to a live mobile service.

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

4. Configuring the components

   Add code to the Open button to initialize the Map control with the data layers from the map cache on disk. If you have a valid mobile service, you can also retrieve data from the server while the application is running.

   1. Create a click event for the openButton by double-clicking the Open button.
   2. Switch to code view and add the following using statements to include the ArcGIS Mobile assembly:

      using ESRI.ArcGIS.Mobile;
      using ESRI.ArcGIS.Mobile.FeatureCaching;
      

   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.Add(m_mobileCache); 
        } 
        catch(Exception ex)  
        {
          MessageBox.Show(ex.Message); 
        }
      }
      

      Note:

      Before running the application, copy the MapCache folder from the samples data directory to the C:\Temp folder of your computer.

      Tip:

      If you have a live service from which you want to get data 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 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.Add(mobileCache); 
        } 
        catch (Exception ex)
        { 
          MessageBox.Show(ex.Message); 
        } 
      }
      

   Run the application, and click the Open button. All layers from the mobile cache are added to the Map component.

5. Interacting with the map

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

   Double-click each of the navigation buttons you created earlier and add code as follows:

   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; 
     }
   

   Note:

   When working with WPF maps, don't use the built-in map actions designed for windows applications. Instead, set CurrentNavigationMode to the one best suited to your requirements.

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