How to implement popup balloon in Windows Store App using Bing maps?

Question

I have an app that shows information about a certain pushpin that's placed on a map. So far I have the information showing up as a message dialog. This isn't very nice to look at and isn't really suitable as an info box. I am going to try to implement a popup which will show all the information instead which should be easy enough since there is a good bit of documentation about it. My question is how to make it look swanky like the popup balloons that show up in the Windows Maps app for example? The image shows what I mean. It seems that this kind of balloon is harder to find info on.

Maybe I'm searching for the wrong thing even.

Does anyone know if this is relatively easy? And any info on how to do it myself?

Answer 1

I actually was looking for something similar, ended up creating a UserControl. Here is what mine looks like:

And this is what the Xaml code looks like:

<Popup 
    x:Name="bingMapsFlyout" 
    IsLightDismissEnabled="True"
    >
        <Popup.ChildTransitions>
            <TransitionCollection>
                <PaneThemeTransition/>
            </TransitionCollection>
        </Popup.ChildTransitions>
        <Canvas 
        x:Name="contentFlyoutPanel" 
        Height="126" 
        Width="259"
        >
            <Rectangle HorizontalAlignment="Left" Height="45.035" VerticalAlignment="Top" Width="20.552" RenderTransformOrigin="0,1" UseLayoutRounding="False" d:LayoutRounding="Auto" Fill="#FF252525" Opacity="0.6" Canvas.Left="26.902" Canvas.Top="26.128">
                <Rectangle.Clip>
                    <RectangleGeometry Rect="20.761,-7.16,21.378,58.646">
                        <RectangleGeometry.Transform>
                            <CompositeTransform CenterY="-7.6496992111206055" CenterX="20.250661849975586" Rotation="-3.03122615814209" SkewX="-21.284000396728516"/>
                        </RectangleGeometry.Transform>
                    </RectangleGeometry>
                </Rectangle.Clip>
                <Rectangle.RenderTransform>
                    <CompositeTransform SkewX="21" Rotation="163.744"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle HorizontalAlignment="Left" Height="69" VerticalAlignment="Top" Width="245" Fill="#FF2B2B2B" Canvas.Left="7" Canvas.Top="8"/>
            <StackPanel HorizontalAlignment="Left" Height="69" VerticalAlignment="Top" Width="247" Canvas.Left="7" Canvas.Top="8">
                <TextBlock x:Name="txtLine1" HorizontalAlignment="Left" Height="18" TextWrapping="Wrap" VerticalAlignment="Top" Width="227" Margin="10,10,0,0" Foreground="White" FontFamily="Arial" FontSize="16" FontWeight="Bold"/>
                <TextBlock x:Name="txtLine2" HorizontalAlignment="Left" Height="26" TextWrapping="Wrap" VerticalAlignment="Top" Width="227" Margin="10,5,0,0" Foreground="White" FontFamily="Arial" FontSize="12" FontWeight="Bold"/>
            </StackPanel>
        </Canvas>
    </Popup>

Answer 2

You will need to use the PopupMenu class

http://msdn.microsoft.com/en-us/library/windows/apps/xaml/windows.ui.popups.popupmenu.aspx