How to show tooltip for bing maps pushpins on hover?

Question

I am using bing maps and have some problems with showing the tooltip.

I have my PushPin model, so I can bind to it:

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

and I have the PushPinViewModel (My wish is to do everything with MVVM but for now I am not using Commands, so I write it in the code behind).

private ObservableCollection _pushpins = new ObservableCollection();

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

In main page:

public sealed partial class MainPage : Page
{
    PushpinViewModel pvm;

    public MainPage()
    {
        this.InitializeComponent();

        pvm = new PushpinViewModel();
        map.DataContext = pvm;
    }
...

in 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>

Have some more code such as binding to the location (works fine). But the problem with the tooltips on tapped.

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

This code creates the pushpin and puts it on the map, but doesn't show a tooltip, can someone help me?

Thanks a lot !!!

Answer 1

I have solved it, this was more simple than I thought, Instead adding a tooltip in code behind, I should add it to the pushpin template like that:

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

Answer 2

You need to set the ToolTipService.ToolTip property not on the PushpinModel, but instead on the PushpinViewModel which should be a UIElement. ToolTips must be hooked up to a UIElement, which actually renders in your visual tree, to be triggered by mouse hover.

For example, the following code works because the Pushpin class derives from 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);

Answer 3

Setting the DataContext = tooltipPin looks correct. Try adding a key to your tooltip style and passing it into the style property of the new Tooltip.