myfriendsaround/main/MyFriendsAround.WP7/Views/MainPage.xaml

<phone:PhoneApplicationPage xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
                            x:Class="MyFriendsAround.WP7.MainPage"
                            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                            xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
                            xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP7"
                            FontFamily="{StaticResource PhoneFontFamilyNormal}"
                            FontSize="{StaticResource PhoneFontSizeNormal}"
                            Foreground="{StaticResource PhoneForegroundBrush}"
                            SupportedOrientations="Portrait"
                            Orientation="Portrait"
                            mc:Ignorable="d"
                            d:DesignWidth="480"
                            d:DesignHeight="768"
                            shell:SystemTray.IsVisible="True"
                            DataContext="{Binding Main, Source={StaticResource Locator}}"
                            d:DataContext="{Binding Main, Source={StaticResource Locator}}"
                            xmlns:my="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
                            xmlns:Preview="clr-namespace:Phone7.Fx.Preview;assembly=Phone7.Fx.Preview"
                            xmlns:binding="clr-namespace:Coding4Fun.Phone.Controls.Binding;assembly=Coding4Fun.Phone.Controls"
                            xmlns:Core="clr-namespace:Microsoft.Phone.Controls.Maps.Core;assembly=Microsoft.Phone.Controls.Maps"
                            xmlns:conv="clr-namespace:MyFriendsAround.WP7.Helpers.Converters">

    <!--LayoutRoot contains the root grid where all other page content is placed-->

    <phone:PhoneApplicationPage.Resources>
        <conv:MyImageConverter x:Key="myImageConverter" />
        <ControlTemplate x:Key="PushpinControlTemplate1"
                         TargetType="my:Pushpin">
            <Grid Height="24"
                  Width="24"
                  Margin="-12,-12,0,0">
                <Ellipse Fill="#FF12A5C7"
                         Stroke="Black"
                         Margin="0" />
                <Image Source="{Binding PinSource}" />
            </Grid>
        </ControlTemplate>
        <ControlTemplate x:Key="PushpinControlTemplate2"
                         TargetType="my:Pushpin">
            <Grid x:Name="ContentGrid">
                <StackPanel Orientation="Vertical">
                    <Grid Background="{TemplateBinding Background}"
                          HorizontalAlignment="Left">
                        <Image x:Name="imgFriend"
                               Source="{Binding PinImageUrl, Mode=OneWay, Converter={StaticResource imageCacheConverter}}"
                               Margin="2, 2, 2, 24"
                               Width="48"
                               Height="48"
                               Stretch="Fill">
                        </Image>
                        <TextBlock HorizontalAlignment="Left"
                                   Text="{Binding PinUserName, Mode=OneWay}"
                                   VerticalAlignment="Bottom"
                                   Margin="1"
                                   Width="48"
                                   Height="24" />
                    </Grid>
                    <Polygon Fill="{TemplateBinding Background}"
                             Points="0,0 29,0 0,29"
                             Width="29"
                             Height="29"
                             HorizontalAlignment="Left" />
                </StackPanel>
            </Grid>
        </ControlTemplate>
    </phone:PhoneApplicationPage.Resources>

    <i:Interaction.Triggers>
        <i:EventTrigger EventName="Loaded">
            <cmd:EventToCommand Command="{Binding MainLoadCommand}" />
        </i:EventTrigger>
        <i:EventTrigger EventName="BackKeyPress">
            <cmd:EventToCommand Command="{Binding BackKeyPressCommand}" PassEventArgsToCommand="True" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
    

    <Grid x:Name="LayoutRoot"
          Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>


        <Grid.Resources>
            <DataTemplate  x:Key="LogoTemplate">
                <my:Pushpin Location="{Binding Location}"
                            Background="{StaticResource PhoneAccentBrush}"
                            Template="{StaticResource PushpinControlTemplate2}">
                </my:Pushpin>
            </DataTemplate>
        </Grid.Resources>


        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentGrid"
              Grid.Row="0"
              VerticalAlignment="Stretch"
              Grid.RowSpan="2"
              Margin="0">

            <my:Map x:Name="map"
                    CredentialsProvider="AkCiPfQt9YM0cCkZlltdR3mnFQRkV41l4f-eXFmf3qcBBhBC-EkvD8MuazOkMnE_"
                    HorizontalAlignment="Stretch"
                    Margin="6,0,6,0"
                    VerticalAlignment="Stretch"
                    Center="{Binding Path=MapCenter, Mode=TwoWay}"
                    ZoomLevel="{Binding Path=MapZoom, Mode=TwoWay}"
                    AnimationLevel="Full"
                    ViewChangeEnd="map_ViewChangeEnd">
                <my:MapLayer x:Name="layerFriends">
                    <my:MapItemsControl ItemsSource="{Binding VisiblePushPins}"
                                        ItemTemplate="{StaticResource LogoTemplate}">
                    </my:MapItemsControl>
                </my:MapLayer>
                <my:MapLayer x:Name="layerMyLocation">
                    <my:MapItemsControl ItemsSource="{Binding MyLocationPushPins}">
                        <my:MapItemsControl.ItemTemplate>
                            <DataTemplate>
                                <my:Pushpin Location="{Binding Location}"
                                            Background="{StaticResource PhoneAccentBrush}"
                                            Template="{StaticResource PushpinControlTemplate1}" />
                            </DataTemplate>
                        </my:MapItemsControl.ItemTemplate>
                    </my:MapItemsControl>
                </my:MapLayer>
            </my:Map>

            <Grid  HorizontalAlignment="Right"
                   VerticalAlignment="Center"
                   Width="64">
                <Rectangle RadiusX="10"
                           RadiusY="10"
                           Fill="Black"
                           Opacity="0.3"
                           Margin="0,0,-20,0">
                </Rectangle>


                <StackPanel HorizontalAlignment="Left"
                            VerticalAlignment="Stretch">
                    <Image Source="/icons/appbar.add.rest.png"
                           Margin="0"
                           Width="64"
                           Height="64"
                           VerticalAlignment="Top"
                           HorizontalAlignment="Left">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="MouseLeftButtonDown">
                                <cmd:EventToCommand Command="{Binding MapZoomOutCommand}" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </Image>
                    <Slider Orientation="Vertical"
                            Minimum="1"
                            Maximum="22"
                            Value="{Binding MapZoom, Mode=TwoWay}"
                            Height="300">
                        <!--<i:Interaction.Triggers>
                            <i:EventTrigger EventName="ValueChanged">
                                <cmd:EventToCommand Command="{Binding MapZoomChangedCommand}" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>-->
                    </Slider>

                    <Image Source="/icons/appbar.minus.rest.png"
                           Margin="0"
                           Width="64"
                           Height="64"
                           VerticalAlignment="Bottom"
                           HorizontalAlignment="Left">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="MouseLeftButtonDown">
                                <cmd:EventToCommand Command="{Binding MapZoomInCommand}" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </Image>

                </StackPanel>
            </Grid>

        </Grid>


        <!--TitlePanel contains the name of the application and page title-->
        <Grid x:Name="TitlePanel"
              Grid.Row="0"
              Margin="0"
              Background="Transparent"
              VerticalAlignment="Top"
              HorizontalAlignment="Stretch"
              Opacity="1">
            <Rectangle Fill="Black"
                       Opacity="0.7"></Rectangle>
            <TextBlock x:Name="ApplicationTitle"
                       Margin="12, 12, 0, 0"
                       Text="{Binding ApplicationTitle}"
                       Foreground="{StaticResource PhoneAccentBrush}"
                       Style="{StaticResource PhoneTextNormalStyle}" />
            <Grid Margin="0,6,6,6"
                  Height="80">
                <Grid Width="80"
                      Height="80"
                      HorizontalAlignment="Right"
                      Background="{StaticResource PhoneAccentBrush}"
                      Opacity="1">
                    <Image x:Name="imgMine"
                           Opacity="1"
                           Source="{Binding SelectedFriend, Path=SelectedFriend.PinImageUrl, Converter={StaticResource imageCacheConverter}}"
                           Margin="1"
                           Stretch="Fill">
                    </Image>
                    <Border Background="{StaticResource PhoneAccentBrush}"
                            Width="80"
                            Height="25"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Bottom"
                            BorderThickness="0"
                            Opacity="1">
                        <TextBlock x:Name="txtMyName"
                                   Style="{StaticResource PhoneTextNormalStyle}"
                                   FontSize="16"
                                   Foreground="Black"
                                   HorizontalAlignment="Left"
                                   VerticalAlignment="Center"
                                   Margin="2"
                                   Text="{Binding SelectedFriend, Path=SelectedFriend.PinUserName}"
                                   Opacity="1" />
                    </Border>
                    <Rectangle Fill="Transparent"
                               HorizontalAlignment="Stretch"
                               VerticalAlignment="Stretch">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="MouseLeftButtonDown">
                                <cmd:EventToCommand Command="{Binding ShowSelectFriendCommand}" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </Rectangle>
                </Grid>

                <toolkit:PerformanceProgressBar HorizontalAlignment="Left"
                                                Margin="0,0,0,0"
                                                Name="performanceProgressBar1"
                                                VerticalAlignment="Top"
                                                Height="18"
                                                Width="480"
                                                ActualIsIndeterminate="{Binding Path=IsBusy}"
                                                IsIndeterminate="{Binding Path=IsBusy}" />
            </Grid>

        </Grid>


        <Preview:BindableApplicationBar x:Name="AppBar"
                                        BarOpacity="0.8">
            <Preview:BindableApplicationBarIconButton Command="{Binding ShowMyLocationCommand}"
                                                      IconUri="/icons/appbar.location.png"
                                                      Text="{Binding AppBarTextMyLocation}" />
            <Preview:BindableApplicationBarIconButton Command="{Binding RefreshFriendsCommand}"
                                                      IconUri="/icons/appbar.sync.rest.png"
                                                      Text="{Binding AppBarTextRefresh}"
                                                      IsEnabled="{Binding Path=IsBusy, Converter={StaticResource InvertValueConverter1}}" />
            <Preview:BindableApplicationBarIconButton Command="{Binding PublishLocationCommand}"
                                                      IconUri="/icons/appbar.publish.png"
                                                      Text="{Binding AppBarTextPublish}"
                                                      IsEnabled="{Binding Path=IsBusy, Converter={StaticResource InvertValueConverter1}}" />
            <Preview:BindableApplicationBarIconButton Command="{Binding NavigateToSettingsCommand}"
                                                      IconUri="/icons/appbar.feature.settings.rest.png"
                                                      Text="{Binding AppBarTextSettings}" />

            <Preview:BindableApplicationBar.MenuItems>
                <Preview:BindableApplicationBarMenuItem  Text="{Binding AppBarTextAbout}"
                                                         Command="{Binding ShowAboutCommand}" />
            </Preview:BindableApplicationBar.MenuItems>
        </Preview:BindableApplicationBar>
        
        
        <Grid Background="Transparent"
              VerticalAlignment="Stretch"
              Grid.RowSpan="2"
              Visibility="{Binding IsSelectFriend, Converter={StaticResource BooleanToVisibilityConverter1}}">
            <Rectangle Fill="Black"
                       Opacity="0.7">
            </Rectangle>
            <StackPanel Margin="20"
                        Opacity="1"
                        Background="Black"
                        VerticalAlignment="Stretch"
                        HorizontalAlignment="Stretch"
                        Width="Auto"
                        Height="Auto">
                <TextBlock Text="Select your friend"
                           Style="{StaticResource PhoneTextNormalStyle}"
                           TextAlignment="Center"
                           FontSize="24"
                           Padding="10"
                           Margin="0" />
                <ListBox ItemsSource="{Binding PushPins, Mode=OneWay}"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
                         Margin="0"
                         Width="Auto"
                         Height="675"
                         Background="Black"
                         Opacity="1"
                         SelectedItem="{Binding SelectedFriend, Mode=TwoWay}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal"
                                        HorizontalAlignment="Stretch"
                                        Margin="4">
                                <Image Source="{Binding PinImageUrl, Mode=OneWay, Converter={StaticResource imageCacheConverter}}"
                                       Width="96"
                                       Height="96" />
                                <StackPanel Margin="10, 0,0,0">
                                    <TextBlock Text="{Binding PinUserName}"
                                               FontSize="24" />
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="Last update:"
                                                   FontSize="20">
                                        </TextBlock>
                                        <TextBlock Text="{Binding PinLastUpdated}"
                                                   FontSize="20"
                                                   Margin="10, 0, 0, 0" />
                                    </StackPanel>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="Distance:"
                                                   FontSize="20">
                                        </TextBlock>
                                        <TextBlock Text="{Binding PinDistance}"
                                                   FontSize="20"
                                                   Margin="10, 0, 0, 0" />
                                        <TextBlock Text="Km"
                                                   Margin="5, 0, 0, 0"
                                                   FontSize="20">
                                        </TextBlock>
                                    </StackPanel>
                                </StackPanel>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </StackPanel>
        </Grid>

        
    </Grid>

</phone:PhoneApplicationPage>