3

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?

popup balloon in windows maps image

Aimee Jones
  • 881
  • 2
  • 18
  • 38

2 Answers2

2

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

enter image description here

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>
em007
  • 70
  • 9
  • I actually gave up on this because I couldn't get my head around it. Your answer seems like exactly what I wanted. Thanks! – Aimee Jones Oct 10 '13 at 12:56
0

You will need to use the PopupMenu class

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

GONeale
  • 26,302
  • 21
  • 106
  • 149
  • I implemented a simple popup using the PopupMenu class, but still couldn't get it to look nice like the one in the image I have posted above – Aimee Jones Feb 27 '13 at 19:05