如何在悬停时显示bing贴图图钉的工具提示

本文关键字：工具提示 bing 显示 悬停 | 更新日期: 2023-09-27 18:27:03

我使用的是bing贴图，在显示工具提示时遇到了一些问题。

我有我的PushPin模型，所以我可以绑定到它：

public class PushpinModel : DependencyObject, INotifyPropertyChanged
{
    private double _latitude;
    private double _longitude;
    private string _description;
    private string _title;
    public double Latitude
    {
        get
        {
            return _latitude;
        }
        set
        {
            if (_latitude != value)
            {
                _latitude = value;
                NotifyPropertyChanged("Latitude");
            }
        }
    }
    public double Longitude
    {
        get
        {
            return _longitude;
        }
        set
        {
            if (_longitude != value)
            {
                _longitude = value;
                NotifyPropertyChanged("Longitude");
            }
        }
    }
    public string Description
    {
        get
        {
            return _description;
        }
        set
        {
            if (_description != value)
            {
                _description = value;
                NotifyPropertyChanged("Description");
            }
        }
    }
    public string Title
    {
        get
        {
            return _title;
        }
        set
        {
            if (_title != value)
            {
                _title = value;
                NotifyPropertyChanged("Title");
            }
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

我有PushPinViewModel（我的愿望是用MVVM做所有事情，但现在我不使用命令，所以我把它写在后面的代码中）。

private ObservableCollection_pushpins=新建ObservableCollection（）；

    public ObservableCollection<PushpinModel> Pushpins
    {
        get
        {
            return _pushpins;
        }
    }

主页面：

public sealed partial class MainPage : Page
{
    PushpinViewModel pvm;
    public MainPage()
    {
        this.InitializeComponent();
        pvm = new PushpinViewModel();
        map.DataContext = pvm;
    }
...

在XAML中：

<Page.Resources>
    <Style TargetType="ToolTip">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border CornerRadius="5">
                        <Border.Background>
                            <SolidColorBrush Color="Black" Opacity="0.5"/>
                        </Border.Background>
                        <ContentPresenter Margin="5">
                            <ContentPresenter.Content>
                                <StackPanel Margin="5" MaxWidth="200">
                                    <TextBlock Text="{Binding Title}" FontWeight="Bold" FontSize="16" Foreground="White"/>
                                    <TextBlock Text="{Binding Description}" Foreground="White" TextWrapping="Wrap"/>
                                </StackPanel>
                            </ContentPresenter.Content>
                        </ContentPresenter>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

有更多的代码，比如绑定到位置（效果很好）。但工具提示的问题已经解决了。

    private void Pushpin_Tap(object sender, TappedRoutedEventArgs e)
    {
        //Just hard coded for testing
        PushpinModel tooltipPin = new PushpinModel();
        tooltipPin.Latitude = 26.820553;
        tooltipPin.Longitude = 30.802498000000014;
        tooltipPin.Title = "Pin 2";
        tooltipPin.Description = "This is an example of a custom infobox that is created using a tooltip and a user control.";
        pvm.AddPushpin(tooltipPin);
        ToolTipService.SetToolTip(tooltipPin, new ToolTip()
        {
            //What to do here?
            //DataContext = tooltipPin
        });
    }

这段代码创建了图钉并将其放在地图上，但没有显示工具提示，有人能帮我吗？

非常感谢！！！

如何在悬停时显示bing贴图图钉的工具提示

您需要不在PushpinModel上设置ToolTipService.ToolTip属性，而是在PushpinViewModel上设置，PushpinViewModel应该是UIElement。工具提示必须连接到一个UIElement，它实际上在您的视觉树中渲染，才能由鼠标悬停触发。

例如，以下代码之所以有效，是因为Pushpin类派生自UIElement（DependencyObject-->UIElement-->FrameworkElement-->Control-->Pushpin）。

Pushpin pin = new Pushpin();
pin.Text = "Pin";
ToolTipService.SetToolTip(pin, "Sweet tooltip!!");
MapLayer.SetPosition(pin, loc);
MyMap.Children.Add(pin);

设置DataContext=tooltipPin看起来是正确的。尝试向工具提示样式添加一个键，并将其传递到新工具提示的样式属性中。

我已经解决了这个问题，这比我想象的要简单，我应该在代码后面添加工具提示，而是像这样将它添加到图钉模板中：

<ToolTipService.ToolTip>
    <ToolTip Style="{StaticResource ToolTipStyle}">
        <StackPanel Orientation="Vertical">
            <TextBlock Text="{Binding Title}" />
            <TextBlock Text="{Binding Description}" TextWrapping="Wrap" />
        </StackPanel>
    </ToolTip>
</ToolTipService.ToolTip>
相关文章：