<?xml version="1.0" encoding="utf-8"?>
<UserControl x:Class="EsriMapSamples.AddPins" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" xmlns:esri="http://schemas.esri.com/arcgis/client/2009" xmlns:viewmodel="clr-namespace:EsriMapSamples.ViewModel">
    <UserControl.Resources>
        <!-- marker for items in the esri control (any UI element) -->
        <esri:MarkerSymbol x:Key="esriMarker" OffsetX="0" OffsetY="40">
            <esri:MarkerSymbol.ControlTemplate>
                <ControlTemplate>
                    <!-- Blue Pin-->
                    <Canvas HorizontalAlignment="Right" Width="20" Height="40">
                        <Path Data="M361.20407,257.15527 L345.5,309" Height="22.74" Stretch="Fill" Stroke="#FF565656" StrokeThickness="2" UseLayoutRounding="False" Width="9.026" Canvas.Top="17.26">
                            <Path.Fill>
                                <RadialGradientBrush GradientOrigin="0.75,0.25" Center="0.5,0.5" RadiusX="0.75" RadiusY="0.75">
                                    <GradientStop Color="White" Offset="0" />
                                    <GradientStop Color="#FF0D3749" Offset="1" />
                                    <GradientStop Color="#FF2AA7DD" Offset="0.242" />
                                </RadialGradientBrush>
                            </Path.Fill>
                        </Path>
                        <Ellipse Stroke="Black" Width="20" StrokeThickness="0" Height="20">
                            <Ellipse.Fill>
                                <RadialGradientBrush GradientOrigin="0.75,0.25" Center="0.5,0.5" RadiusX="0.75" RadiusY="0.75">
                                    <GradientStop Color="White" Offset="0" />
                                    <GradientStop Color="#FF0D3749" Offset="1" />
                                    <GradientStop Color="#FF2AA7DD" Offset="0.242" />
                                </RadialGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                    </Canvas>
                </ControlTemplate>
            </esri:MarkerSymbol.ControlTemplate>
        </esri:MarkerSymbol>
    </UserControl.Resources>
    <UserControl.DataContext>
        <Binding Source="{StaticResource mainViewModel}" />
    </UserControl.DataContext>

    <Grid x:Name="LayoutRoot" Background="White">
        <esri:Map Background="White" Name="map1" WrapAround="True" Extent="-130,5,-70,65" MouseClick="map1_MouseClick" MapGesture="map1_MapGesture">
            <esri:Map.Layers>
                <esri:LayerCollection>
                    <!-- BaseMap Layer-->
                    <esri:ArcGISTiledMapServiceLayer ID="BaseMapLayer" Url="http://services.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer" InitializationFailed="ArcGISTiledMapServiceLayer_InitializationFailed" />
                
                    <!-- Marker Layer-->
                    <esri:GraphicsLayer ID="MarkerLayer" x:Name="markerLayer" IsHitTestVisible="True" RendererTakesPrecedence="True">
                        <!-- data source -->
                        <esri:GraphicsLayer.GraphicsSource>
                            <esri:PointDataSource ItemsSource="{Binding Source={StaticResource mainViewModel}, Path=Users}" XCoordinateBinding="{Binding Longitude}" YCoordinateBinding="{Binding Latitude}">
                            </esri:PointDataSource>
                        </esri:GraphicsLayer.GraphicsSource>
                        <!-- renderer -->
                        <esri:GraphicsLayer.Renderer>
                            <esri:SimpleRenderer Symbol="{StaticResource esriMarker}" />
                        </esri:GraphicsLayer.Renderer>
                        <!-- tooltip -->
                        <esri:GraphicsLayer.MapTip>
                            <Border Padding="4,2" Background="Black" DataContext="{Binding [DataContext]}">
                                <StackPanel>
                                    <TextBlock Foreground="White">
                                        <Run Text="{Binding FirstName}" />
                                        <Run Text="{Binding LastName}" />
                                    </TextBlock>
                                    <TextBlock Text="{Binding DateAdded}" Foreground="White" />
                                </StackPanel>
                            </Border>
                        </esri:GraphicsLayer.MapTip>
                    </esri:GraphicsLayer>
                </esri:LayerCollection>
            </esri:Map.Layers>
        </esri:Map>
        <!-- navigation control -->
        <esri:Navigation Grid.Row="2" Grid.Column="1" Margin="4" VerticalAlignment="Bottom" HorizontalAlignment="Left" Map="{Binding ElementName=map1}" />
    </Grid>
</UserControl>