How to implement a speech bubble custom border in SL with a movable leader

Check out the following pic. This happens when you expand a folder in Mac OS X from its shortcut on the dock. I'd like to do something very similar in SL. And in case it's difficult to understand - the dock is on the right, with the folder-speech-bubble expanding up & out to the left. The folder contents would be icons out of frame in the upper-left.

The best I've come up with is including a xaml Path that makes up the "leader" portion of the bubble and placing it directly over the border of a canvas. It looks like the following.

The Path, being a separate element, doesn't "integrate" well with the Grid and causes two issues. If you look closely you'll see that there is a slight transparency and the Grid's border is subtly bleeding through. Something else that will crop up, if I use a border thickness > 1, is the line-end caps between the Path border and the Grid border won't be connected, they'll simply overlap looking chunky and unpolished.

What I need is a solution that allows me to 开发者_运维知识库slide the leader up & down the speech bubble (depending upon its context) and adapts to the issues explained above. I'd be happy with ideas, examples, and down right full implementations.

You don't have to use the Border control. Just create a Path and shove it and the controls in a Canvas tag to be grouped. Then, the Path will be something like the below:

    <Path Canvas.Left="0" Canvas.Top="0" Stroke="DarkGray" StrokeLineJoin="Round" StrokeThickness="2" Fill="Silver" Opacity="0.5">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="0,10" IsClosed="True">
                    <ArcSegment SweepDirection="Clockwise" Point="10,0" Size="10,10"/>
                    <LineSegment Point="90,0"/>
                    <ArcSegment SweepDirection="Clockwise" Point="100,10" Size="10,10"/>
                    <LineSegment Point="100,90"/>
                    <ArcSegment SweepDirection="Clockwise" Point="90,100" Size="10,10"/>
                    <LineSegment Point="10,100"/>
                    <ArcSegment SweepDirection="Clockwise" Point="0,90" Size="10,10"/>
                    <LineSegment x:Name="BottomOfCallOut" Point="0,70"/>
                    <LineSegment Point="-40,50"/>
                    <LineSegment x:Name="TopOfCallOut" Point="0,30"/>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>

Then just use PointAnimation to move both TopOfCallOut and BottomOfCallOut along the Y-axis. In this example, I've made the base of the callout 40 points, so if you move TopOfCallOut from 0,30 to 0,10, just make sure you also put BottomOfCallOut to 0,50.

I used same approach in TipBubble control (http://www.youpvp.com/blog/post/TipBubble-Tutorial.aspx). It works well in most cases but breaks down if you combine border and transparent background. To make bubble that works in that particular case you'd have to make it with single path. Just combine arc and line segments into one path. Or you could try rounded rectangle callout from Blend 4 SDK.

In case someone still needs a Bubble in Silverlight, I've prepared a reusable control for this purpose.

I'm not allowed to post images here yet, but you can see the pictures, details and download the code from by blog post here: http://mikeshilkov.wordpress.com/2012/01/26/speech-bubble-control-in-sl/