如何使用可移动的领导者在SL中实现语音泡沫自定义边框

Question

查看以下图片。当您从Dock上的快捷方式展开Mac OS X中的文件夹时，会发生这种情况。我想在SL中做一些非常相似的事情。如果难以理解 - 底座位于右侧，文件夹 - 语音泡沫扩大了在左边。文件夹内容将是左上角的框架图标。

我提出的最好的方法是包括一个xaml Path，它构成了气泡的“领导者”部分并将其直接放在画布的边框上。它看起来如下。

Path作为一个单独的元素，不会与Grid“很好地集成”并导致两个问题。如果你仔细观察，你会发现它有一点点透明度，并且Grid的边界正在巧妙地渗透。如果我使用边框厚度＆gt;还会出现其他东西。 1，路径边框和网格边框之间的线端盖不会连接，它们只是重叠看起来粗糙和未抛光。

我需要的是一种解决方案，可以让我将领导者向上滑动讲话泡泡（取决于其背景）并适应上述问题。我会对想法，示例以及正确的完整实现感到满意。

Answer 1

我在TipBubble控件中使用了相同的方法（http://www.youpvp.com/blog/post/TipBubble-Tutorial.aspx）。它在大多数情况下运行良好，但如果将边框和透明背景结合使用则会出现故障要制作适用于特定情况的气泡，您必须使用单一路径制作气泡。只需将弧线和线段组合成一条路径即可。或者您可以尝试使用Blend 4 SDK中的圆角矩形标注。

Answer 2

您不必使用Border控件。只需创建一个Path并将其推出，并将Canvas标签中的控件分组。然后，Path将如下所示：

    <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>

然后只需使用PointAnimation沿Y轴移动TopOfCallOut和BottomOfCallOut。在这个例子中，我已经将标注的基数设为40分，因此如果将TopOfCallOut从0,30移动到0,10，请确保将BottomOfCallOut设置为0,50。

Answer 3

如果有人仍需要Silverlight中的Bubble，我已为此目的准备了可重复使用的控件。

我不允许在这里发布图片，但您可以在此处查看图片，详细信息并从博客文章下载代码：http://mikeshilkov.wordpress.com/2012/01/26/speech-bubble-control-in-sl/