This tutorial demonstrates how to create and draw a route using only XAML code. This tutorial is one of many Telogis Silverlight API tutorials.

Create a Silverlight project and configure a GeoStream server

Make sure that your Inetpub\wwwroot directory contains the client access policy file "clientaccesspolicy.xml". Create a new Silverlight project named 'routing-xaml' and add a reference to Telogis.GeoBase.Silverlight.dll. Be sure to configure a GeoStream server.

See the Create a Silverlight-Specific GeoBase project using Visual Studio tutorial for an illustrated walk-through.

Adding user controls

Open MainPage.xaml and add the following attributes to the UserControl tag. These attributes allow your XAML code to access the Telogis.GeoBase and Telogis.GeoBase.Routing namespaces.

xmlns:GeoBase="clr-namespace:Telogis.GeoBase;assembly=Telogis.GeoBase.Silverlight"
xmlns:Routing="clr-namespace:Telogis.GeoBase.Routing;assembly=Telogis.GeoBase.Silverlight"
 

The routing is achieved by using the Route element. In this example, the following Routing properties are set to true:

  • AutoCalculate forces a recalculation of the route if the route stops change
  • DrawStops renders the route stops on the map
  • DrawDirections renders the path of the route on the map

Route stops are added to the route by using GeoBase:RouteStop and setting the Location property. Add the following code to MainPage.xaml:

<Border BorderBrush="Black" Grid.Row="0" BorderThickness="2">
  <GeoBase:Map x:Name="MainMap" Center="35.8719,-120.8062" Zoom="4">
    <!--Define a route in XAML. No need to create the route in C# code-->
    <Routing:Route x:Name="SimpleRoute"
                   AutoCalculate="True"
                   DrawStops="True"
                   DrawDirections="True"
                   Color="Blue">

      <GeoBase:RouteStop Location="33.804079,-117.957673"></GeoBase:RouteStop>
      <GeoBase:RouteStop Location="33.822364,-117.903988"></GeoBase:RouteStop>
      <GeoBase:RouteStop Location="37.768548,-122.478505"></GeoBase:RouteStop>
    </Routing:Route>
  </GeoBase:Map>
</Border>

Testing

Press F5 to build and run your application. Your default web browser will load a web page displaying a map, RouteStop objects and the Route directions.

There may be a short delay before the directions are shown (in blue) on the map.

Next step

The next tutorial, Routing using C# and the Silverlight API, demonstrates how to route using C# code. The tutorial will walk you through the creation of an application that allows you to enter a start and destination address, and will display turn-by-turn directions to your chosen destination. Alternatively you can skip to another Telogis Silverlight API tutorial.

Published, Apr 6th 2011, 03:25

Tagged under: silverlight routing