Showing custom tooltip?/Popup when hovering over an object in Silverlight

核能气质少年 提交于 2019-12-18 13:31:31

问题


How can I go about getting similar popup/hover/tooltip (see image below) when I hover or click on an object in my Silverlight app?

Update: (added bounty)

I am looking for a control which can drop a shadow and show the arrow. I want like 3-4 lines of data which I can pass in as the control's properties.

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


回答1:


Expression Blend 4 has this kind of callout shape and you can apply a <DropShadowEffect/> to it. To put text inside, just wrap a textbox and the callout in a canvas. From this site:

Expression Blend 4 now includes presets for the easy creation of arcs, arrows, callouts, and polygons. Shapes can be easily switched between sketch-style and regular-style rendering. This feature can be found in the Assets panel under the new Shapes category.

I've used the callouts - very handy and very similar in usage to AutoShapes in Office. To do a pop-up, you'll just need a simple animation.

If you don't have Expressions, you could hand-code the XAML for creating the callout. Here's an example of one that I made:

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

The callout's tail isn't exactly like the one in the sample and the dropshadow is also different, but different values can be changed to try to make it look as close as possible to the sample.




回答2:


How about ToolTipService?

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

It works on SL3 and I believe will work on SL4 too.



来源:https://stackoverflow.com/questions/3239100/showing-custom-tooltip-popup-when-hovering-over-an-object-in-silverlight

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!