Spatial Query Online

This sample demonstrates performing a spatial query and adding the results to the map and a DataGrid. To use the sample, select a drawing tool from the toolbar, then draw a query geometry on the map.

In the sample's code-behind, a QueryTask is used to query a states map service layer based on the geometry drawn. The results are then added as a Graphics to the map and displayed in a DataGrid. The sample also demonstrates specifying a mouse over symbol in XAML for the results graphics and highlighting a graphic when the corresponding row in the DataGrid is moused over.

Download Sample Application
XAML C# VB.NET
<UserControl x:Class="ArcGISWPFSDK.SpatialQuery"
    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>
            <LinearGradientBrush x:Key="PanelGradient" EndPoint="0.5,1" StartPoint="0.5,0">
                <LinearGradientBrush.RelativeTransform>
                    <TransformGroup>
                        <ScaleTransform CenterY="0.5" CenterX="0.5"/>
                        <SkewTransform CenterY="0.5" CenterX="0.5"/>
                        <RotateTransform Angle="176" CenterY="0.5" CenterX="0.5"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </LinearGradientBrush.RelativeTransform>
                <GradientStop Color="#FF145787" Offset="0.16"/>
                <GradientStop Color="#FF3D7FAC" Offset="0.502"/>
                <GradientStop Color="#FF88C5EF" Offset="0.984"/>
            </LinearGradientBrush>
            <Style x:Key="MyCustomRow" TargetType="{x:Type DataGridRow}">
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type DataGridRow}">
                            <Border x:Name="DGR_Border"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                SnapsToDevicePixels="True">
                                <SelectiveScrollingGrid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>

                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*"/>
                                        <RowDefinition Height="Auto"/>
                                    </Grid.RowDefinitions>

                                    <DataGridCellsPresenter Grid.Column="1"
                                         ItemsPanel="{TemplateBinding ItemsPanel}"
                                         SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>

                                    <DataGridDetailsPresenter 
                                        SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}, 
                                        Path=AreRowDetailsFrozen, Converter={x:Static DataGrid.RowDetailsScrollingConverter}, ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical}}"
                                            Grid.Column="1" Grid.Row="1" Visibility="{TemplateBinding DetailsVisibility}" />

                                    <DataGridRowHeader SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"  Grid.RowSpan="2"
                                    Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}, Path=HeadersVisibility, Converter={x:Static DataGrid.HeadersVisibilityConverter}, ConverterParameter={x:Static DataGridHeadersVisibility.Row}}"/>
                                </SelectiveScrollingGrid>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="DataGridRow.IsMouseOver" Value="True">
                                    <Setter Property="Background" Value="#8800FFFF" />
                                    <Setter Property="Foreground" Value="Black" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <esri:SimpleMarkerSymbol x:Key="DefaultMarkerSymbol" Color="Red" Size="12" Style="Circle" />
            <esri:SimpleLineSymbol x:Key="DefaultLineSymbol" Color="Red" Width="4" />
            <esri:FillSymbol x:Key="DefaultFillSymbol" >
                <esri:FillSymbol.ControlTemplate>
                    <ControlTemplate>
                        <Path x:Name="Element" IsHitTestVisible="False" Fill="#66FF0000" 
                            Stroke="Red" StrokeThickness="1"/>
                    </ControlTemplate>
                </esri:FillSymbol.ControlTemplate>
            </esri:FillSymbol>
            <esri:FillSymbol x:Key="ResultsFillSymbol">
                <esri:FillSymbol.ControlTemplate>
                    <ControlTemplate x:Name="CustomPolygonTemplate">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Element"
                                                Storyboard.TargetProperty="(Fill).(Color)"
                                                To="#880000FF" Duration="0:0:0.1" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Element"
                                                Storyboard.TargetProperty="(Fill).(Color)"
                                                To="#8800FFFF" Duration="0:0:0.1" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Element"
                                                Storyboard.TargetProperty="(Fill).(Color)"
                                                To="#8800FFFF" Duration="0:0:0.1" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Path x:Name="Element" Stroke="Blue" Fill="#880000FF"
                                StrokeStartLineCap="Round" StrokeThickness="2" 
                                StrokeLineJoin="Round" StrokeEndLineCap="Round" />
                        </Grid>
                    </ControlTemplate>
                </esri:FillSymbol.ControlTemplate>
            </esri:FillSymbol>
        </Grid.Resources>
        <esri:Map x:Name="MyMap" Extent="-15000000,2000000,-7000000,8000000" WrapAround="True">
            <esri:ArcGISTiledMapServiceLayer ID="StreetMapLayer" 
                    Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
            <esri:GraphicsLayer ID="MySelectionGraphicsLayer" 
                                    MouseEnter="GraphicsLayer_MouseEnter" 
                                    MouseLeave="GraphicsLayer_MouseLeave" />
        </esri:Map>
        <Border Background="{StaticResource PanelGradient}" BorderThickness="1" CornerRadius="5"
                HorizontalAlignment="Right" VerticalAlignment="Top"
                Margin="10" BorderBrush="{StaticResource PanelGradient}">
            <Border.Effect>
                <DropShadowEffect/>
            </Border.Effect>
            <Grid Margin="10" Background="White">
                <StackPanel Orientation="Vertical">
                    <StackPanel x:Name="MyStackPanel" Orientation="Horizontal" Width="483" Height="60">
                        <Button Tag="DrawPoint" Margin="5" Click="Tool_Click"  
                                ToolTipService.ToolTip="Select with a point">
                            <Image Source="/Assets/images/DrawPoint.png" Margin="2" />
                        </Button>
                        <Button Tag="DrawPolyline" Margin="5" Click="Tool_Click"
                                ToolTipService.ToolTip="Select with a polyline">
                            <Image Source="/Assets/images/DrawPolyline.png" Margin="2" />
                        </Button>
                        <Button Tag="DrawPolygon" Margin="5" Click="Tool_Click"
                                ToolTipService.ToolTip="Select with a polygon">
                            <Image Source="/Assets/images/DrawPolygon.png" Margin="5" />
                        </Button>
                        <Button Tag="DrawRectangle" Margin="5" Click="Tool_Click"
                                ToolTipService.ToolTip="Select with a rectangle">
                            <Image Source="/Assets/images/DrawRectangle.png" Margin="2" />
                        </Button>
                        <Button Tag="DrawFreehand" Margin="5" Click="Tool_Click"
                                ToolTipService.ToolTip="Select with a freehand line">
                            <Image Source="/Assets/images/DrawFreehand.png" Margin="5" />
                        </Button>
                        <Button Tag="DrawCircle" Margin="5" Click="Tool_Click"
                                ToolTipService.ToolTip="Select with a circle">
                            <Image Source="/Assets/images/DrawCircle.png" Margin="2" />
                        </Button>
                        <Button Tag="DrawEllipse" Margin="5" Click="Tool_Click"
                                ToolTipService.ToolTip="Select with an ellipse">
                            <Image Source="/Assets/images/DrawEllipse.png" Margin="2" />
                        </Button>
                        <Button Tag="ClearStopDraw" Margin="5" Click="Tool_Click"
                                Style="{x:Null}"
                                ToolTipService.ToolTip="Clear map">
                            <Image Source="/Assets/images/StopDraw.png" Margin="2" />
                        </Button>
                    </StackPanel>
                </StackPanel>
            </Grid>
        </Border>
        <Border x:Name="ResultsDisplay" Background="{StaticResource PanelGradient}" BorderThickness="1" CornerRadius="5"
                HorizontalAlignment="Right"  VerticalAlignment="Bottom" Visibility="Collapsed"
                Margin="5" Padding="10" BorderBrush="Black">
            <Grid>
                <TextBlock x:Name="DataDisplayTitle" Text="Search Results" Foreground="White" FontSize="12" Canvas.Left="10" Canvas.Top="4" />
                <DataGrid x:Name="QueryDetailsDataGrid" Width="Auto" Height="170" AutoGenerateColumns="False" HeadersVisibility="Column" Background="White" 
                             IsReadOnly="True" Canvas.Left="10" Canvas.Top="25" HorizontalScrollBarVisibility="Hidden"
                             RowStyle="{StaticResource MyCustomRow}" CanUserSortColumns="True"
                             SelectionChanged="QueryDetailsDataGrid_SelectionChanged"
                             LoadingRow="QueryDetailsDataGrid_LoadingRow">
                    <DataGrid.Columns>
                        <DataGridTextColumn Binding="{Binding Attributes[STATE_NAME]}" IsReadOnly="True" Width="80" CanUserSort="True" SortMemberPath="STATE_NAME" Header="State Name"/>
                        <DataGridTextColumn Binding="{Binding Attributes[SUB_REGION]}" IsReadOnly="True" Width="110" CanUserSort="False" Header="Region"/>
                        <DataGridTextColumn Binding="{Binding Attributes[STATE_FIPS]}" IsReadOnly="True" Width="45" CanUserSort="False" Header="FIPS"/>
                        <DataGridTextColumn Binding="{Binding Attributes[STATE_ABBR]}" IsReadOnly="True" Width="85" CanUserSort="False" Header="Abbreviation"/>
                        <DataGridTextColumn Binding="{Binding Attributes[POP2000]}" IsReadOnly="True" Width="103"  CanUserSort="False" Header="Population 2000"/>
                        <DataGridTextColumn Binding="{Binding Attributes[POP2007]}" IsReadOnly="True" Width="102" CanUserSort="True" SortMemberPath="POP2007" Header="Population 2007"/>
                    </DataGrid.Columns>
                </DataGrid>
            </Grid>
        </Border>
    </Grid>
</UserControl>

Sample code usage restrictions
5/16/2014