Hide info box when pointer clicked outside

Question

When I click on a pushpin on bing maps I show a Custom InfoBox since there isnt one built into the windows app store SDK. It shows fine but when the user clicks outside the box I want to hide/dismiss it like you see on the native bing maps application in windows 8.

I tried setting a Tapped callback on the map itself but the problem with that is that always gets called even when clicking on a pushpin to display the infobox.

I could probably use a one time boolean when the pushpin is first clicked but that just seems to be an ugly way of doing it, What is a better way of accomplishing what I want?

Answer 1

Add a click/tapped event to the map. To prevent the tap event from bubbling up to the map, in the tap event on your pushpin set the event args handled property to true. This will make it so the maps tap even doesn't fire when clicking on the pushpin. You can add similar tap event/handled property to the infobox too so that if you click on the infobox it doesn't close.

Answer 2

I think the best way to solve this is to use the Attached Flyout like below (I'm not sure if you're using Windows 8.1, but for now that's an assumption I made)

You can add an attached flyout to the pushpin like below:

<maps:Pushpin Height="100" Width="100" Tapped="UIElement_OnTapped">
    <FlyoutBase.AttachedFlyout>
        <Flyout>
            <Grid Width="100" Height="100" Background="Red"></Grid>
        </Flyout>
    </FlyoutBase.AttachedFlyout>
    <maps:MapLayer.Position>
        <maps:Location Latitude="47.610039" Longitude="-122.342207" />
    </maps:MapLayer.Position>
</maps:Pushpin>

And in the Tapped event you add some code to show the flyout:

var element = sender as FrameworkElement;
if (element != null)           {
    FlyoutBase.ShowAttachedFlyout(element);
}

Because the flyout is automatically LightDismissable, you don't have to worry anymore about the closing of the infobox anymore.

Just replace the grid with background red with your custom infobox and your good to go. (probably some alignment things to get it 100%)

Hope this helps.