Question

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.

Answer 1

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.