【问题标题】:Showing custom tooltip?/Popup when hovering over an object in Silverlight将鼠标悬停在 Silverlight 中的对象上时显示自定义工具提示?/弹出窗口
【发布时间】:2010-07-13 16:13:54
【问题描述】:

当我在 Silverlight 应用程序中悬停或单击对象时,如何获得类似的弹出/悬停/工具提示(见下图)?

更新:添加赏金

我正在寻找一个可以投下阴影并显示箭头的控件。我想要 3-4 行数据,可以作为控件的属性传入。

popup exampe http://www.freeimagehosting.net/uploads/4a78a786fc.gif

【问题讨论】:

    标签: wpf silverlight silverlight-4.0


    【解决方案1】:

    Expression Blend 4 具有这种标注形状,您可以对其应用<DropShadowEffect/>。要将文本放入其中,只需将文本框和标注包装在画布中即可。来自this site

    Expression Blend 4 现在包含用于轻松创建弧线、箭头、标注和多边形的预设。形状可以在草图样式和常规样式渲染之间轻松切换。此功能可以在新 Shapes 类别下的 Assets 面板中找到。

    我使用了标注 - 非常方便,并且与 Office 中的自选图形非常相似。要制作弹出窗口,您只需要一个简单的动画即可。

    如果您没有表达式,您可以手动编写 XAML 代码来创建标注。这是我制作的一个示例:

    <Path x:Name="Callout" Height="218" Width="197" Stroke="Black" StrokeThickness="2" Fill="WhiteSmoke" Canvas.Top="60" Canvas.Left="53" Stretch="Fill">
        <Path.Effect>
            <DropShadowEffect ShadowDepth="50" Opacity="0.25" BlurRadius="10"  />
        </Path.Effect>
        <Path.Data>
            <PathGeometry>
              <PathGeometry.Figures>
                <PathFigure StartPoint="0 21.1" IsClosed="True">
                  <PathFigure.Segments>
                    <ArcSegment Point="21.1 0" Size="21.1 21.1" SweepDirection="Clockwise" />
                    <LineSegment Point="31.66 0" />
                    <LineSegment Point="79.14 0" />
                    <LineSegment Point="168.83 0" />
                    <ArcSegment Point="189.93 21.1" Size="21.1 21.1" SweepDirection="Clockwise" />
                    <LineSegment Point="189.93 73.86" />
                    <LineSegment Point="189.93 105.52" />
                    <ArcSegment Point="168.83 126.62" Size="21.1 21.1" SweepDirection="Clockwise" />
                    <LineSegment Point="79.14 126.62" />
                    <LineSegment Point="30.57 213.21" />
                    <LineSegment Point="31.66 126.62" />
                    <LineSegment Point="21.1 126.62" />
                    <ArcSegment Point="0 105.52" Size="21.1 21.1" SweepDirection="Clockwise" />
                    <LineSegment Point="0 105.52" />
                    <LineSegment Point="0 73.86" />
                  </PathFigure.Segments>
                </PathFigure>
              </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
    </Path>
    

    标注的尾部与示例中的不完全相同,阴影也不同,但可以更改不同的值以使其看起来尽可能接近示例。

    【讨论】:

    • 我没有 Expression Blend 4,有没有办法在纯 XAML 代码上做到这一点。你能提供例子吗? -谢谢
    • @VoodooChild:我在上面的编辑中提供了一个纯 XAML 中的标注示例。
    • +1 这个周末我要试试这个。谢谢,很快就会奖励积分...
    • @VoodooChild:很高兴听到这对你有用。您可能想提出另一个关于显示标注的问题,以便整个社区都有机会提供答案。
    【解决方案2】:

    ToolTipService 怎么样?

         <Button Content="Test" Width="100" Height="27" ToolTipService.Placement="Bottom">
            <ToolTipService.ToolTip>
                <TextBlock
                    Text="Test" />
            </ToolTipService.ToolTip>
        </Button>
    

    它适用于 SL3,我相信也适用于 SL4。

    【讨论】:

    • 感谢您的回复。我正在尝试使用 ToolTipService,但有没有办法显示箭头从工具提示打开的点到打开的位置并使它看起来很漂亮。
    • @VoodooClild:我相信你可以得到非常接近的结果。我认为 ExpressionBlend 是您的朋友。我对 XAML 效果不是很熟练,所以我无法为您提供更多帮助。如果您还没有这样做,请尝试在 Expression 论坛上发布消息:social.expression.microsoft.com/Forums/en-US/categories。还有一个 Designing with Silverlight 论坛:forums.silverlight.net/forums/19.aspx
    猜你喜欢
    • 1970-01-01
    • 2010-10-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-06-11
    相关资源
    最近更新 更多