WP 8.1 WinRT -自定义工具提示(或UserControl)在地图图钉

本文关键字：UserControl 地图 WinRT 工具提示 自定义 WP | 更新日期: 2023-09-27 18:15:23

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

遗憾的是，没有api的内置支持，在web中也没有简单的解决方案。到目前为止，人们习惯使用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不移动，当我添加一个孩子到它?提前感谢任何帮助，我真的很感激!

WP 8.1 WinRT -自定义工具提示(或UserControl)在地图图钉

创建一个UserControl，上面有一个PushPin图标和一个网格，里面有一个简单的文本框。默认情况下使网格不可见，并在用户单击图钉时使其可见以显示您想要的所有数据。

<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));
    }
相关文章：