My First Windows 8 App

[Former Member]

Hi! We’re Kirstin, Denis, Hans, Oliver and Tobias from Microsoft and in our third blog post we will show you how to create your first app. The idea is to create an app which allows to browse through different SAP locations and to display their location on a Bing map.

So let’s get started :smile: : First create a new project in Visual Studio. Before choosing one of the installed templates you have to decide on the programming language. You can choose between C#, C++, Visual Basic and Java Script depending on your preferences. The JavaScript option uses HTML and CSS for the GUI layout while the other options apply XAML for this purpose. In this example we use C# and XAML. For each option Visual Studio offers three Windows Store Templates making it really easy to create apps in the typical Windows 8 design.

For our app idea the SplitApp is most suitable. This template consists of two pages: on the ItemsPage the different countries will be displayed. For each country the SplitPage will provide the user with a list of corresponding SAP locations on the left side and specific information for a selected location on the right side. The latter will also contain a Bing map showing the position of the location.

The created project consists of default example data which we want to replace by the SAP locations data. Therefore alter the file SampleDataSource.cs which is included in the folder DataModel:

• Each SAP location shall be described by an address, so extend the SampleDataItem class by the property address and corresponding methods.
• Fill the method SampleDataGroup with appropriate data. This could look like follows:

public SampleDataSource()

{

      var group1 = new SampleDataGroup("Germany",

                    "Germany",

                    "SAP Locations in Germany",

                    "Assets/SAP_Logo.png",

                    "Further information about SAP in this country.");

     group1.Items.Add(new SampleDataItem("Walldorf",

                    "Walldorf",

                    "SAP AG Headquarters",

                    "Assets/SAP_Logo.png",

                    "Further information about SAP in this location.",

                    "Dietmar-Hopp-Allee 16\n69190 Walldorf",

                      group1)); …

• You can associate each item and group with an individual picture. In our example we used the SAP logo for all items and groups. For each picture, you use, make sure that you put it in the Assets folder: right click on the Assets folder in the Solution Explorer and then choose Add an Existing Item.

In the next step we want to integrate a map on each SplitPage which will show the position of the selected SAP location. To add Bing Maps to your project perform the following steps:

1. Download the Bing Maps SDK.
2. Create  a Bing Maps Key to authenticate your application
   1. Go to the Bing Maps Account Center at https://www.bingmapsportal.com/ and create a new account.
   2. Select Create or view keys under My Account.
   3. Choose Create Key on the My Keys page, fill in the requested information and click submit. The new key will display in the list of available keys.
3. In Visual Studio select PROJECT > Add Reference. Navigate to Extensions and select Bing Maps for C#, C++, or Visual Basic and Microsoft Visual C++ Runtime Package.
4. Select BUILD > Configuration Manager and set Active solution configuration to Debug and Active Solution Platform to x86, x64 or ARM.

Select SplitPage.xaml, detect the line that adds the image of the item to the page and substitute it with a Bing map:

1. Delete <Image x:Name="image" …/>

2. Insert <bm:Map x:Name="map" Height="600" Width="800" Language="English" Credentials=""></bm:Map> to display an English Bing map of the size 480 x 600. Insert your Bing key in the Credentials property.

3. Add the required namespace xmlns:bm="using:Bing.Maps" to the root element of the page.

Now have a look at your app: on each SplitPage a map is displayed. In the next step you will add a pin to the map representing the map location (geocode) of the selected SAP location as well as setting the center of the map to this geocode. The determination of the concrete geocode is done by the Bing Maps Geocode Service, a SOAP based service which is located at http://dev.virtualearth.net/webservices/v1/geocodeservice/geocodeservice.svc. To use this service you need to create a proxy client class:

1. Select PROJECT > Add Service Reference, insert the service address given above in the field address and click Go.
2. After the service information is downloaded click Ok: now the required class is generated and you can use the service. The corresponding API reference can be found here.

  Go to SampleDataSource.cs and add the code that is required to determine the geocode of a SAP location:

private double _latitude;

private double _longitude;

async private void GetLocation(String address)

{            

     //Create a request

     GeocodeService.GeocodeRequest geocodeRequest = new GeocodeService.GeocodeRequest();

     //set credentials

     geocodeRequest.Credentials = new GeocodeService.Credentials();

     geocodeRequest.Credentials.ApplicationId = "";

     //set address

     geocodeRequest.Query = address;

     //set confidence level: only results of high confidence

     GeocodeService.ConfidenceFilter filter = new GeocodeService.ConfidenceFilter();

     filter.MinimumConfidence = GeocodeService.Confidence.Medium;

     //make the request

     GeocodeService.GeocodeServiceClient geocodeService =

     new GeocodeService.GeocodeServiceClient(GeocodeService.GeocodeServiceClient. EndpointConfiguration.BasicHttpBinding_IGeocodeService);

     GeocodeService.GeocodeResponse geocodeResponse = await geocodeService.GeocodeAsync(geocodeRequest);

     if (geocodeResponse.Results.Count > 0)

     {

          _latitude = geocodeResponse.Results[0].Locations[0].Latitude;

          _longitude = geocodeResponse.Results[0].Locations[0].Longitude;

     }

}

In this method one of the new features of .NET 4.5, simplified asynchronous programming, is applied. You don't need to manage threads explicitly or interact directly with the underlying implementation, you just need to add the await statement to the corresponding code lines and async to the method header and the rest is done by the compiler (further information can be found here).

Add code to declare the properties latitude and longitude:

public double Latitude

{

     get { return this._latitude; }

     set { this.SetProperty(ref this._latitude, value); }

}

public double Longitude

{

     get { return this._longitude; }

     set { this.SetProperty(ref this._longitude, value); }

}

Now we can add the pin on the map. Go to SplitPage.xaml and add the following code to the map tags:

<bm:Map.Children>

     <bm:Pushpin>

          <bm:MapLayer.Position>

               <bm:Location Latitude="{Binding Latitude}" Longitude="{Binding Longitude}" />

          </bm:MapLayer.Position>

     </bm:Pushpin>

</bm:Map.Children>

Via data binding the properties of Latitude and Longitude are set to the values that you have just defined in the SampleDataSource. To set the center of the map to the determined geocode navigate to the method ItemListView_SelectionChanged (object sender, SelectionChangedEventArgs e) in the code behind and add the following code at the end of the method:

if (this.itemsViewSource.View.CurrentItem != null)

{

     var selectedItem = (SampleDataItem)this.itemsViewSource.View.CurrentItem;

     var location = new Location(selectedItem.Latitude, selectedItem.Longitude);

     map.SetView(location, 12);

}

Thereby the first parameter of the method SetView() defines the center and the second parameter gives the zoom level.

There are a variety of options to set further map properties. Refer to the Bing Maps API reference for an overview. Your first app is ready now :smile: - build and debug your app and have a look at the result – in our app (download) the SplitPage e.g. looks as follows: