Driving Directions Online

This sample demonstrates use of the RouteTask to calculate driving directions. To use the sample, specify the start and end address in the textboxes and click Get Directions. The route will be plotted on the map, and the driving steps are shown on the right side of the application. Clicking on a step zooms to that portion of the route.

In the code-behind, a Locator is first used to convert the addreses to geographic coordinates. Then, a RouteTask is used to calculate the route between the start and end points. When the results are returned, the route geometry is added to the map and the driving steps are added as TextBlocks.

Download Sample Application
XAML C# VB.NET
<UserControl x:Class="ArcGISWPFSDK.RoutingDirections"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:esri="http://schemas.esri.com/arcgis/client/2009">

    <Grid  x:Name="LayoutRoot" Background="White">

        <Grid.Resources>
            <esri:SimpleMarkerSymbol Size="15" Style="Circle" Color="#9900FF00" x:Key="FromSymbol" />
            <esri:SimpleMarkerSymbol Size="15" Style="Circle" Color="#99FF0000" x:Key="ToSymbol" />
            <esri:SimpleLineSymbol x:Key="RouteSymbol" Color="#990000FF" Width="5"/>
            <esri:SimpleLineSymbol x:Key="SegmentSymbol" Color="#99FF0000" Width="8"/>
        </Grid.Resources>

        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>

        <StackPanel Orientation="Horizontal" Grid.ColumnSpan="2">
            <TextBox x:Name="FromTextBox" Width="250" Margin="5" Text="380 New York St, Redlands, CA, 92373"
                       ToolTipService.ToolTip="Enter a U.S. address as 'Street, City, State, Zip'" />
            <TextBox x:Name="ToTextBox" Width="250" Margin="5" Text="345 Park Ave, San Jose, CA, 95110"
                       ToolTipService.ToolTip="Enter a U.S. address as 'Street, City, State, Zip'" />
            <Button Content="Get Directions" Click="GetDirections_Click" Margin="5" />
        </StackPanel>

        <esri:Map x:Name="MyMap" 
                  Grid.Row="1" Grid.Column="0"
                  Extent="-123,33,-115,37">
            <esri:Map.Layers>
                <esri:ArcGISTiledMapServiceLayer
                      Url="http://services.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/>
                <esri:GraphicsLayer ID="MyRouteGraphicsLayer" />
            </esri:Map.Layers>
        </esri:Map>

        <Grid Grid.Row="1" Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="70" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <StackPanel ToolTipService.ToolTip="Click to zoom to full route" Margin="5" 
                        MouseLeftButtonDown="StackPanel_MouseLeftButtonDown">
                <TextBlock x:Name="TitleTextBlock" FontWeight="Bold" TextWrapping="Wrap" Foreground="Black"
                           Text="Click 'Get Directions' above to display driving directions here..."/>
                <TextBlock x:Name="TotalDistanceTextBlock" Foreground="Black" />
                <TextBlock x:Name="TotalTimeTextBlock" Foreground="Black" />
            </StackPanel>
            <ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="1" Margin="5">
                <StackPanel x:Name="DirectionsStackPanel"
                        ToolTipService.ToolTip="Click direction text to zoom to associated segment."/>
            </ScrollViewer>
        </Grid>


    </Grid>
</UserControl>

Sample code usage restrictions
5/16/2014