WP 8.1 WinRT - 图钉地图中的自定义工具提示（或用户控件）？答案

【问题标题】：WP 8.1 WinRT - Custom tooltip (or UserControl) in maps for a pushpin?WP 8.1 WinRT - 图钉地图中的自定义工具提示（或用户控件）？
【发布时间】：2014-07-29 00:27:09
【问题描述】：

我正在使用来自 Windows Phone 8.1 WinRT 的新 api 的 MapControl。我想要实现的是在点击的图钉上方显示一个简单的工具提示（带有关于图钉位置的附加信息）。最好我希望该工具提示是UserControl。

遗憾的是，api 没有内置支持，web.xml 也没有简单的解决方案。到目前为止，人们习惯使用 WindowsPhoneToolkit 库中的 ContextMenu 功能，不幸的是它仅适用于 Silverlight。 Flyout 也不是一个选项。 ToolTipService 也不能正常工作。

到目前为止，我所做的是连接到图钉的 Tapped 事件，然后在代码隐藏中添加一个子图钉的Grid - 但它看起来不是一个好选择，它使我的图钉移动。

代码 XAML：

  <maps:MapControl x:Name="Map">
    <maps:MapItemsControl ItemsSource="{Binding Pushpins}">
      <maps:MapItemsControl.ItemTemplate>
        <DataTemplate>
          <Grid x:Name="MyGrid"
                Tapped="UIElement_OnTapped">
            <Grid.RowDefinitions>
              <RowDefinition Height="*" /> // if grid is tapped I will insert a UserControl to that row
              <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Image Grid.Row="1"
                   Width="24"
                   Height="24"
                   Source="{Binding Converter={StaticResource PushpinLogoConverter}}"
                   maps:MapControl.Location="{Binding Location}"
                   maps:MapControl.NormalizedAnchorPoint="1,0.5" />
          </Grid>
        </DataTemplate>
      </maps:MapItemsControl.ItemTemplate>
    </maps:MapItemsControl>
  </maps:MapControl>

后面的代码：

    private void UIElement_OnTapped(object sender, TappedRoutedEventArgs e)
    {
        var grid = (Grid)e.OriginalSource;
        var tooltipBase = new TooltipBase();

        grid.Children.Add(tooltipBase);
        tooltipBase.SetValue(Grid.RowProperty, 0);
    }

你能告诉我是否有更好的方法吗？当我添加一个孩子时，如何让MyGrid不动？提前感谢您的帮助，我真的很感激！

【问题讨论】：

标签： c# xaml user-controls winrt-xaml windows-phone-8.1

【解决方案1】：

只需创建一个带有 PushPin 图标的 UserControl，并在其上方创建一个带有简单 TextBox 的 Grid。默认情况下使 Grid 不可见，并在用户单击图钉时使其可见以显示您想要的所有数据。

<Grid>
    <Ellipse Fill="#FFF4F4F5" 
             HorizontalAlignment="Center"
             Height="50" 
             Stroke="Black" 
             VerticalAlignment="Center"
             Width="50" 
             Tapped="Ellipse_Tapped"/>
    <Grid x:Name="locationInfoGrid"
          Margin="0,-100,0,0"
          HorizontalAlignment="Center" 
          VerticalAlignment="Top"
          Width="100" 
          Height="100" 
          Background="#FFB4B4B4">

        <TextBlock x:Name="locationInfo"
                   FontSize="14"/>
    </Grid>
</Grid>

代码背后：

    private void Ellipse_Tapped(object sender, TappedRoutedEventArgs e)
    {
        locationInfo.Text = "Location info here";

        if (locationInfoGrid.Visibility == Visibility.Visible)
            locationInfoGrid.Visibility = Visibility.Collapsed;
        else
            locationInfoGrid.Visibility = Visibility.Visible;
    }

然后只需将 UsercControl 添加到您的地图的特定位置。

        private async void Button_Click(object sender, RoutedEventArgs e)
    {
        MyUserControl1 uc = new MyUserControl1();
        MyMap.Children.Insert(0, uc);
        MapControl.SetLocation(uc, location);
        MapControl.SetNormalizedAnchorPoint(uc, new Point(0.5, 1));
    }

【讨论】：