Как реализовать настраиваемую границу речевого пузыря в SL с подвижным лидером

Question

Проверьте следующую картинку.Это происходит, когда вы раскрываете папку в Mac OS X из ее ярлыка на панели.Я хотел бы сделать что-то очень похожее в SL.А в случае, если это трудно понять - док-станция находится справа, а папка-речевой пузырь расширяется вверх и влево.Содержимое папки будет отображаться вне рамки в левом верхнем углу.

Лучшее, что я придумал, - это включение пути xaml, который составляет "лидера"часть пузыря и размещение его прямо над границей холста.Это выглядит следующим образом.

Путь, будучи отдельным элементом, плохо «интегрируется» с сеткой и вызывает две проблемы.Если вы посмотрите внимательно, вы увидите, что есть небольшая прозрачность, и граница сетки слегка просвечивает.Еще одна вещь, которая возникнет, если я использую толщину границы> 1, это то, что концевые заглушки между границей пути и границей сетки не будут связаны, они будут просто перекрываться, выглядя коренастыми и неполированными.

Что мне нужно, так это решение, которое позволяет мне перемещать лидера вверх и вниз по речевому пузырю (в зависимости от его контекста) и приспосабливаться к проблемам, описанным выше.Я был бы рад идеям, примерам и полным реализациям.

Answer 1

Вам не нужно использовать пограничный контроль. Просто создайте Path и поместите его и элементы управления в теге Canvas для группировки. Тогда путь будет примерно таким:

    <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 для перемещения TopOfCallOut и BottomOfCallOut вдоль оси Y. В этом примере я сделал основание выноски 40 баллов, поэтому, если вы переместите TopOfCallOut с 0,30 до 0,10, просто убедитесь, что вы также поставили BottomOfCallOut до 0,50.

Answer 2

Я использовал тот же подход в элементе управления TipBubble (http://www.youpvp.com/blog/post/TipBubble-Tutorial.aspx).. В большинстве случаев он работает хорошо, но ломается, если вы комбинируете границу и прозрачный фон. Чтобы сделать пузырь, который работает в этом конкретном случае, вам придется сделать его с одним путемПросто объедините сегменты дуги и линии в один путь. Или вы можете попробовать закругленный прямоугольник с выносом из Blend 4 SDK.

Answer 3

Если кому-то еще нужен пузырь в Silverlight, я подготовил для этой цели многоразовый элемент управления.

Я не могу размещать изображения здесь, но вы можете посмотреть фотографии, подробности и скачать код с поста в блоге здесь: http://mikeshilkov.wordpress.com/2012/01/26/speech-bubble-control-in-sl/