<?xml version="1.0" encoding="utf-8"?>
<UserControl x:Class="MapComparison.MainPage" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="800" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" xmlns:esri="http://schemas.esri.com/arcgis/client/2009" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" xmlns:local="clr-namespace:MapComparison">

  <UserControl.Resources>

    <!-- data model exposed as a resource -->
    <local:DataModel x:Key="_dataModel" />

    <!-- template for items in the C1Maps control -->
    <DataTemplate x:Key="_itemTemplate">
      <c1:C1VectorPlacemark GeoPoint="{Binding Path=LongLat}" ToolTipService.ToolTip="{Binding Name}" Fill="Gold" Stroke="Black">
        <c1:C1VectorPlacemark.Geometry>
          <EllipseGeometry RadiusX="7.5" RadiusY="7.5" />
        </c1:C1VectorPlacemark.Geometry>

        <!-- NOTE: "Label" is a misleading name: this can be any UI element.
        <c1:C1VectorPlacemark.Label>
            <Rectangle Width="15" Height="15" Fill="#a0ffffff" IsHitTestVisible="False" />
        </c1:C1VectorPlacemark.Label> -->
      </c1:C1VectorPlacemark>
    </DataTemplate>

    <!-- marker for items in the esri control (any UI element) -->
    <esri:MarkerSymbol x:Key="_esriMarker">
      <esri:MarkerSymbol.ControlTemplate>
        <ControlTemplate>
          <Ellipse Width="15" Height="15" Fill="Gold" Stroke="Black" Margin="-7.5 -7.5 0 0" RenderTransformOrigin=".5,.5" />
        </ControlTemplate>
      </esri:MarkerSymbol.ControlTemplate>
    </esri:MarkerSymbol>
  </UserControl.Resources>

  <!-- layout root -->
  <Grid x:Name="LayoutRoot" Background="Black">
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="auto" />
      <RowDefinition />
      <RowDefinition Height=".5*" />
    </Grid.RowDefinitions>

    <!-- title/toolbar -->
    <StackPanel Orientation="Horizontal" Grid.ColumnSpan="2">
      <TextBlock Text="Map Control Comparison" Margin="0 0 20 0" FontSize="18" FontWeight="Bold" Foreground="Wheat" VerticalAlignment="Bottom" />
      <CheckBox Content="Natural" IsChecked="{Binding Source={StaticResource _dataModel}, Path=ShowNatural, Mode=TwoWay}" Foreground="Wheat" VerticalAlignment="Bottom" Margin="4 0 0 0" />
      <CheckBox Content="Man-made" IsChecked="{Binding Source={StaticResource _dataModel}, Path=ShowManMade, Mode=TwoWay}" Foreground="Wheat" VerticalAlignment="Bottom" Margin="4 0 0 0" />
      <CheckBox Name="_chkConnections" Content="Connections" Foreground="Wheat" VerticalAlignment="Bottom" Margin="4 0 0 0" />
      <CheckBox Name="_chkSpending" Content="Spending Potential" Foreground="Wheat" VerticalAlignment="Bottom" Margin="4 0 0 0" />
      <Button Name="_btnMovePoint" Content="Move Statue of Liberty" Padding="6 2" VerticalAlignment="Bottom" Click="_btnMovePoint_Click" />
    </StackPanel>

    <!-- C1Map -->
    <TextBlock Text="ComponentOne" Grid.Row="1" Foreground="Wheat" />
    <c1:C1Maps Name="_c1Map" Grid.Row="2" Margin="4" Zoom="0.8">

      <!-- layer to show connections -->
      <c1:C1VectorLayer Name="_lyrConnectionsC1" />

      <!-- layer to show items -->
      <c1:C1VectorLayer ItemsSource="{Binding Source={StaticResource _dataModel}, Path=Landmarks}" ItemTemplate="{StaticResource _itemTemplate}" />
    </c1:C1Maps>

    <!-- esri Map -->
    <TextBlock Text="ESRI" Grid.Row="1" Grid.Column="1" Foreground="Wheat" />
    <esri:Map Name="_esriMap" Grid.Row="2" Grid.Column="1" Margin="4" WrapAround="True">

      <!-- background tiles -->
      <esri:ArcGISTiledMapServiceLayer Url="http://services.arcgisonline.com:80/ArcGIS/rest/services/World_Imagery/MapServer" />

      <!-- USA retail spending potential (free ESRI data at http://www.esri.com/data/free-data/index.html) -->
      <esri:ArcGISTiledMapServiceLayer ID="_retailSpendingPotential" Opacity="0.5" Visible="False" Url="http://services.arcgisonline.com:80/ArcGIS/rest/services/Demographics/USA_Retail_Spending_Potential/MapServer" />

      <!-- layer to show connections -->
      <esri:GraphicsLayer x:Name="_lyrConnections" ID="_lyrConnections" />

      <!-- layer to show landmarks -->
      <esri:GraphicsLayer x:Name="_lyrLandmarks" ID="_lyrLandmarks">

        <!-- data source -->
        <esri:GraphicsLayer.GraphicsSource>
          <esri:PointDataSource ItemsSource="{Binding Source={StaticResource _dataModel}, Path=Landmarks}" XCoordinateBinding="{Binding Longitude}" YCoordinateBinding="{Binding Latitude}">
          </esri:PointDataSource>
        </esri:GraphicsLayer.GraphicsSource>

        <!-- renderer -->
        <esri:GraphicsLayer.Renderer>
          <esri:SimpleRenderer Symbol="{StaticResource _esriMarker}" />
        </esri:GraphicsLayer.Renderer>

        <!-- clusterer -->
        <esri:GraphicsLayer.Clusterer>
          <esri:FlareClusterer />
        </esri:GraphicsLayer.Clusterer>

        <!-- tooltip -->
        <esri:GraphicsLayer.MapTip>
          <Border Padding="4,2" Background="#99333333" CornerRadius="8" DataContext="{Binding [DataContext]}">
            <TextBlock Text="{Binding Name}" Foreground="White" />
          </Border>
        </esri:GraphicsLayer.MapTip>
      </esri:GraphicsLayer>
    </esri:Map>

    <!-- navigation control -->
    <esri:Navigation Grid.Row="2" Grid.Column="1" Margin="4" VerticalAlignment="Top" HorizontalAlignment="Left" Map="{Binding ElementName=_esriMap}" />

    <!-- scale line control -->
    <Border Grid.Row="2" Grid.Column="1" Margin="4" Padding="10 0" CornerRadius="6" VerticalAlignment="Bottom" HorizontalAlignment="Left" Background="#a0ffffff">
      <esri:ScaleLine Map="{Binding ElementName=_esriMap}" />
    </Border>

    <!-- also show the data on a list and on a grid -->
    <ListBox Name="_listBox" Grid.Row="3" ItemsSource="{Binding Source={StaticResource _dataModel}, Path=Landmarks}" />
    <sdk:DataGrid Grid.Row="3" Grid.Column="1" ItemsSource="{Binding Source={StaticResource _dataModel}, Path=Landmarks}" />
  </Grid>
</UserControl>