Question

我正在使用Windows Phone 8.1 WinRT的新api中的MapControl。我想要实现的是在轻敲的图钉上方显示一个简单的工具提示（有关图钉位置的附加信息）。我希望这个工具提示是UserControl。

可悲的是，api没有内置的支持，也没有简单的解决方案。到目前为止，人们习惯使用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不要移动？在此先感谢您的帮助，我真的很感激！

Answer 1

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

<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添加到特定位置的Map。

        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));
    }

WP 8.1 WinRT - 图钉地图中的自定义工具提示（或UserControl）？

1 个答案: