WPF-气泡形式的ToolTip提示框

来源:互联网 时间:1970-01-01

 

就是实现上面图中的样式。

首先那个气泡框是用Path画出来的。

为了可以共用,所以放到资源中。

 <Window.Resources> <Canvas x:Key="NotifityBackground"> <Path Stroke="Black" StrokeThickness="0.1" Fill="Yellow"> <Path.Data> <PathGeometry Figures=" M 10,10 L 10,10 200,10 L 200,10 200,100   L 200,100 40,100 L 40,100 30,110 L 30,110 30,100 L 30,100 10,100 Z"/> </Path.Data> </Path> </Canvas> </Window.Resources>

 

我使用一个Rectangle作为容器。让ToolTip提示出现在上方。

<Rectangle Width="50" Height="50" Fill="Blue" Margin="3" RenderTransformOrigin="0.5,1"> <Rectangle.ToolTip> <ToolTip Width="200" Height="100" Placement="Top" BorderBrush="Transparent"> <ToolTip.Background> <VisualBrush Stretch="Fill" Visual="{StaticResource ResourceKey=NotifityBackground}"/> </ToolTip.Background> </ToolTip> </Rectangle.ToolTip> <Rectangle.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="1" ScaleY="1" /> </TransformGroup> </Rectangle.RenderTransform> <Rectangle.Triggers> <EventTrigger RoutedEvent="Rectangle.MouseEnter"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" From="1" To="1.2" BeginTime="00:00:00" Duration="00:00:00.1"/> <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" From="1" To="1.2" BeginTime="00:00:00" Duration="00:00:00.1"/> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="Rectangle.MouseLeave"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" From="1.0" To="1" BeginTime="00:00:00" Duration="00:00:00.1"/> <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" From="1.0" To="1" BeginTime="00:00:00" Duration="00:00:00.1"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers></Rectangle>

ToolTip中的 Placement="Top" 属性定义了ToolTip出现的位置为容器的顶部;BorderBrush="Transparent"属性设置了ToolTip的边框为透明;

效果不错哦!

原文地址:http://www.luacloud.com/2011/06/10/wpf-%e6%b0%94%e6%b3%a1%e5%bd%a2%e5%bc%8f%e7%9a%84tooltip%e6%8f%90%e7%a4%ba%e6%a1%86/

相关阅读:
Top