<Page
    x:Class="StoreApplication.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:map="using:MapControl"
    xmlns:vm="using:ViewModel"
    xmlns:local="using:StoreApplication">
    <Page.Resources>
        <map:TileLayerCollection x:Key="TileLayers">
            <!--
            TileLayers with OpenStreetMap data.
            -->
            <map:TileLayer SourceName="OpenStreetMap"
                           Description="Maps © [OpenStreetMap Contributors](http://www.openstreetmap.org/copyright)"
                           MaxZoomLevel="19">
                <map:TileSource UriFormat="http://{c}.tile.openstreetmap.org/{z}/{x}/{y}.png"/>
            </map:TileLayer>
            <map:TileLayer SourceName="Thunderforest OpenCycleMap"
                           Description="Maps © [Thunderforest](http://www.thunderforest.com/), Data © [OpenStreetMap Contributors](http://www.openstreetmap.org/copyright)">
                <map:TileSource UriFormat="http://{c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png"/>
            </map:TileLayer>
            <map:TileLayer SourceName="Thunderforest Landscape"
                           Description="Maps © [Thunderforest](http://www.thunderforest.com/), Data © [OpenStreetMap Contributors](http://www.openstreetmap.org/copyright)">
                <map:TileSource UriFormat="http://{c}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png"/>
            </map:TileLayer>
            <map:TileLayer SourceName="Thunderforest Outdoors"
                           Description="Maps © [Thunderforest](http://www.thunderforest.com/), Data © [OpenStreetMap Contributors](http://www.openstreetmap.org/copyright)">
                <map:TileSource UriFormat="http://{c}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png"/>
            </map:TileLayer>
            <map:TileLayer SourceName="Thunderforest Transport"
                           Description="Maps © [Thunderforest](http://www.thunderforest.com/), Data © [OpenStreetMap Contributors](http://www.openstreetmap.org/copyright)">
                <map:TileSource UriFormat="http://{c}.tile.thunderforest.com/transport/{z}/{x}/{y}.png"/>
            </map:TileLayer>
            <map:TileLayer SourceName="Thunderforest Transport Dark"
                           Description="Maps © [Thunderforest](http://www.thunderforest.com/), Data © [OpenStreetMap Contributors](http://www.openstreetmap.org/copyright)"
                           Foreground="White" Background="Black">
                <map:TileSource UriFormat="http://{c}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png"/>
            </map:TileLayer>
            <map:TileLayer SourceName="MapQuest OpenStreetMap"
                           Description="Maps © [MapQuest](http://www.mapquest.com/), Data © [OpenStreetMap Contributors](http://www.openstreetmap.org/copyright)">
                <map:TileSource UriFormat="http://otile{n}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png"/>
            </map:TileLayer>
            <map:TileLayer SourceName="Seamarks" Description="© OpenSeaMap Contributors"
                           MinZoomLevel="10" MaxZoomLevel="18">
                <map:TileSource UriFormat="http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png"/>
            </map:TileLayer>

            <!--
            Bing Maps TileLayers with tile URLs retrieved from the Imagery Metadata Service
            (see http://msdn.microsoft.com/en-us/library/ff701716.aspx).
            A Bing Maps API Key (see http://msdn.microsoft.com/en-us/library/ff428642.aspx) is required
            for using these layers and must be assigned to the static BingMapsTileLayer.ApiKey property.
            -->
            <map:BingMapsTileLayer SourceName="Bing Maps Road"
                                   Description="Bing Maps - © Microsoft Corporation"
                                   Mode="Road" MaxZoomLevel="19"/>
            <map:BingMapsTileLayer SourceName="Bing Maps Aerial"
                                   Description="Bing Maps - © Microsoft Corporation"
                                   Mode="Aerial" MaxZoomLevel="19" Foreground="White" Background="Black"/>
            <map:BingMapsTileLayer SourceName="Bing Maps Hybrid"
                                   Description="Bing Maps - © Microsoft Corporation"
                                   Mode="AerialWithLabels" MaxZoomLevel="19" Foreground="White" Background="Black"/>
        </map:TileLayerCollection>

        <DataTemplate x:Key="PolylineItemTemplate">
            <map:MapPolyline Locations="{Binding Locations}" Stroke="Red" StrokeThickness="3"/>
        </DataTemplate>

        <Style x:Key="PolylineItemStyle" TargetType="map:MapItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="map:MapItem">
                        <map:MapPolyline Locations="{Binding Locations}" Stroke="Red" StrokeThickness="3"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="PointItemStyle" TargetType="map:MapItem">
            <Setter Property="local:BindingHelper.LocationPath" Value="Location"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="map:MapItem">
                        <Canvas>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="Disabled"/>
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="labelBackground" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.1"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="selectedPath" Storyboard.TargetProperty="Opacity" To="0.7" Duration="0:0:0.1"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedUnfocus">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="selectedPath" Storyboard.TargetProperty="Opacity" To="0.7" Duration="0:0:0.1"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedDisable">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="selectedPath" Storyboard.TargetProperty="Opacity" To="0.7" Duration="0:0:0.1"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedPointer">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="selectedPath" Storyboard.TargetProperty="Opacity" To="0.7" Duration="0:0:0.1"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedPressed">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="selectedPath" Storyboard.TargetProperty="Opacity" To="0.7" Duration="0:0:0.1"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Path x:Name="selectedPath" Fill="White" Opacity="0">
                                <Path.Data>
                                    <EllipseGeometry RadiusX="15" RadiusY="15"/>
                                </Path.Data>
                            </Path>
                            <Path Fill="Transparent" Stroke="Gray" StrokeThickness="2">
                                <Path.Data>
                                    <EllipseGeometry RadiusX="8" RadiusY="8"/>
                                </Path.Data>
                            </Path>
                            <Grid Canvas.Left="15" Canvas.Top="-8">
                                <Rectangle x:Name="labelBackground" Fill="White" Opacity="0.7"/>
                                <TextBlock Margin="2,0,2,0" Text="{Binding Name}"/>
                            </Grid>
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="PushpinItemStyle" TargetType="map:MapItem">
            <Setter Property="local:BindingHelper.LocationPath" Value="Location"/>
            <Setter Property="VerticalAlignment" Value="Bottom"/>
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="map:MapItem">
                        <map:Pushpin Content="{Binding Name}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Page.DataContext>
        <vm:ViewModel/>
    </Page.DataContext>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <map:Map x:Name="map" TileLayer="{Binding [OpenStreetMap], Source={StaticResource TileLayers}}"
                 Center="{Binding MapCenter}" MinZoomLevel="2" MaxZoomLevel="18" ZoomLevel="11" ManipulationMode="All">
            <map:MapImage x:Name="mapImage" South="53.54031" North="53.74871" West="8.08594" East="8.43750"
                          Source="10_535_330.jpg" Opacity="0.5"/>
            <map:MapGraticule Opacity="0.6"/>

            <!-- use ItemTemplate or ItemContainerStyle alternatively -->
            <map:MapItemsControl ItemsSource="{Binding Polylines}"
                                 ItemTemplate="{StaticResource PolylineItemTemplate}"/>
            <!--<map:MapItemsControl ItemsSource="{Binding Polylines}"
                                 ItemContainerStyle="{StaticResource PolylineItemStyle}"/>-->

            <map:MapItemsControl ItemsSource="{Binding Points}"
                                 ItemContainerStyle="{StaticResource PointItemStyle}"
                                 SelectionMode="Extended"/>

            <map:MapItemsControl ItemsSource="{Binding Pushpins}"
                                 ItemContainerStyle="{StaticResource PushpinItemStyle}"/>

            <Path Stroke="Blue" StrokeThickness="3">
                <map:MapPanel.Location>
                    <map:Location Latitude="53.5" Longitude="8.2"/>
                </map:MapPanel.Location>
                <Path.Data>
                    <EllipseGeometry RadiusX="1000" RadiusY="1000" Transform="{Binding ScaleTransform, ElementName=map}"/>
                </Path.Data>
            </Path>

            <map:Pushpin Background="Yellow" Foreground="Blue" Content="N 53° 30' E 8° 12'">
                <map:MapPanel.Location>
                    <map:Location Latitude="53.5" Longitude="8.2"/>
                </map:MapPanel.Location>
            </map:Pushpin>
        </map:Map>
        <Border HorizontalAlignment="Right" VerticalAlignment="Bottom" Background="#BFFFFFFF">
            <TextBlock Margin="2" FontSize="10" Foreground="Black"
                       map:HyperlinkText.InlinesSource="{Binding TileLayer.Description, ElementName=map}"/>
        </Border>
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right">
                <StackPanel Margin="5">
                    <TextBlock Text="Zoom Level" HorizontalAlignment="Center" Foreground="Gray" FontSize="14"/>
                    <Slider Margin="10,-10,10,-10" Width="200" SmallChange="0.1"
                            Minimum="{Binding MinZoomLevel, ElementName=map}"
                            Maximum="{Binding MaxZoomLevel, ElementName=map}"
                            Value="{Binding TargetZoomLevel, ElementName=map, Mode=TwoWay}"/>
                </StackPanel>
                <StackPanel Margin="5">
                    <TextBlock Text="Heading" HorizontalAlignment="Center" Foreground="Gray" FontSize="14"/>
                    <Slider Margin="10,-10,10,-10" Width="200" Minimum="0" Maximum="360" SmallChange="5" LargeChange="45"
                            Value="{Binding Heading, ElementName=map, Mode=TwoWay}"/>
                </StackPanel>
                <StackPanel Margin="5">
                    <TextBlock Text="Image Opacity" HorizontalAlignment="Center" Foreground="Gray" FontSize="14"/>
                    <Slider Margin="10,-10,10,-10" Width="200" Value="50" ValueChanged="ImageOpacitySliderValueChanged"/>
                </StackPanel>
                <CheckBox Margin="10" VerticalAlignment="Center" Content="Seamarks"
                          Checked="SeamarksChecked" Unchecked="SeamarksUnchecked"/>
                <ComboBox Width="200" Margin="10" VerticalAlignment="Center"
                          SelectedValuePath="Tag" SelectedValue="{Binding TileLayer, ElementName=map, Mode=TwoWay}">
                    <ComboBoxItem Tag="{Binding [OpenStreetMap], Source={StaticResource TileLayers}}">OpenStreetMap</ComboBoxItem>
                    <ComboBoxItem Tag="{Binding [Thunderforest OpenCycleMap], Source={StaticResource TileLayers}}">OpenCycleMap</ComboBoxItem>
                    <ComboBoxItem Tag="{Binding [Thunderforest Landscape], Source={StaticResource TileLayers}}">Landscape</ComboBoxItem>
                    <ComboBoxItem Tag="{Binding [Thunderforest Outdoors], Source={StaticResource TileLayers}}">Outdoors</ComboBoxItem>
                    <ComboBoxItem Tag="{Binding [Thunderforest Transport], Source={StaticResource TileLayers}}">Transport</ComboBoxItem>
                    <ComboBoxItem Tag="{Binding [Thunderforest Transport Dark], Source={StaticResource TileLayers}}">Transport Dark</ComboBoxItem>
                    <ComboBoxItem Tag="{Binding [MapQuest OpenStreetMap], Source={StaticResource TileLayers}}">MapQuest Open</ComboBoxItem>
                    <!--<ComboBoxItem Tag="{Binding [Bing Maps Road], Source={StaticResource TileLayers}}">Bing Maps Road</ComboBoxItem>
                    <ComboBoxItem Tag="{Binding [Bing Maps Aerial], Source={StaticResource TileLayers}}">Bing Maps Aerial</ComboBoxItem>
                    <ComboBoxItem Tag="{Binding [Bing Maps Hybrid], Source={StaticResource TileLayers}}">Bing Maps Hybrid</ComboBoxItem>-->
                </ComboBox>
            </StackPanel>
        </Grid>
    </Grid>
</Page>