图钉标注Bing Maps SDK Metro App XAML C＃

Question

I'm working with bing maps sdk for windows store apps. I'm trying to display a callout as soon as I click a pushpin. How can I do it? I know I need a custom control, but it would be nice to have code to do it. Where can I find an example?

Thank You!

Answer 1

include the popup as a child of the map control.

    <!-- Map Control -->
    <map:Map x:Name="map" Credentials="{StaticResource BingCredentials}" 
             ShowScaleBar="True" 
             ShowNavigationBar="False" 
             ShowBreadcrumb="False" 
             LogoPosition="TopRight"
             ViewRestriction="OneWorldOnly"
             Loaded="Map_Loaded"
             PreloadArea="Medium">

             <!-- pins -->
        <map:MapLayer x:Name="mapPinLayer" Visibility="Visible">
            <map:MapItemsControl x:Name="mapPins" ItemsSource="{Binding}">
                <map:MapItemsControl.ItemTemplate>
                    <DataTemplate>
                        <map:Pushpin IsTapEnabled="True" Style="{StaticResource PushPinStyle}" map:MapLayer.Position="{Binding Location}" Tag="{Binding}" Tapped="Pushpin_Tapped" />
                    </DataTemplate>
                </map:MapItemsControl.ItemTemplate>
            </map:MapItemsControl>
        </map:MapLayer>

        <!-- pin popup -->
        <Popup x:Name="PushpinPopup" IsLightDismissEnabled="True" DataContext="{Binding}" Tag="{Binding}">
            <Border BorderBrush="#F08D45" BorderThickness="1">
                <Grid Background="White" Width="300"  >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <StackPanel Grid.Row="0" Background="#F08D45">
                        <TextBlock Grid.Row="0" Foreground="White" FontSize="16" FontWeight="Bold" Text="{Binding Name}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10" />
                    </StackPanel>
                    <StackPanel Grid.Row="1" Orientation="Vertical" Margin="15">
                        <StackPanel Orientation="Horizontal" Visibility="{Binding Telephone, Mode=OneWay, Converter={StaticResource StringToVisibility}}">
                            <TextBlock Text="Tel" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5" FontSize="12" />
                            <TextBlock Text="{Binding Telephone}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5" FontSize="12"  />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal" Visibility="{Binding Fax, Mode=OneWay, Converter={StaticResource StringToVisibility}}">
                            <TextBlock Text="Fax" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5" FontSize="12"  />
                            <TextBlock Text="{Binding Fax}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5" FontSize="12"  />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal" Visibility="{Binding Email, Mode=OneWay, Converter={StaticResource StringToVisibility}}">
                            <TextBlock Text="Email" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5" FontSize="12"  />
                            <HyperlinkButton Content="{Binding Email}" NavigateUri="{Binding EmailMailTo}" HorizontalAlignment="Left" ClickMode="Press" 
                                             VerticalAlignment="Center" Margin="5" FontSize="12" Foreground="#F08D45" />
                        </StackPanel>

                        <StackPanel Orientation="Horizontal">
                            <Button x:Name="buttonGetDirections" Click="buttonGetDirections_Click">Get Directions</Button>
                            <Button x:Name="buttonShowServices" Click="buttonShowServices_Click" Tag="{Binding}">Services</Button>
                        </StackPanel>

                    </StackPanel>
                </Grid>
            </Border>
        </Popup>

    </map:Map>

and then handle the pushpin tapped event:

    private void Pushpin_Tapped(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
    {
        Pushpin p = sender as Pushpin;
        if (p != null && p.Tag != null)
        {
            PushpinModel model = p.Tag as PushpinModel;
            if (model != null) ShowPushpinContent(model);
        }
    }

    private void ShowPushpinContent(PushpinModel model)
    {
        PushpinPopup.IsOpen = false;
        PushpinPopup.DataContext = model;
        PushpinPopup.IsOpen = true;
        MapLayer.SetPosition(PushpinPopup, model.Location);
        currentmodel = model;
    }