WPF中ToolTip的自定义 · WPF编程之路

ToolTip或者PopUp这个控件在做界面时会经常用到。如何对ToolTip进行自定义呢？ 1.首先自定义tooltip的controlTemplate，完全清除系统默认效果，如下： ~~~ <ControlTemplate x:Key ="TooltipTemplate" TargetType="ToolTip"> <ContentPresenter x :Name="contentPresenter" Height="{TemplateBinding Height }" Width="{ TemplateBinding Width}" ContentTemplate="{TemplateBinding ContentTemplate }" ></ContentPresenter> </ControlTemplate> ~~~ 2.自定义tooltip的contentTemplate，这样可以专注于tooltip的界面呈现，而不关心tooltip要显示的字符串，如下： ~~~ <Style x :Key="ToolTipStyle" TargetType="ToolTip"> <Setter Property ="IsOpen" Value="False"> </Setter> <Setter Property ="ContentTemplate"> <Setter.Value> <DataTemplate> <Border x :Name="errorBorder" Background="#CC595959" BorderBrush="#99000000" BorderThickness="1" CornerRadius ="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin ="0" MaxWidth="320"> <Border.Effect> <DropShadowEffect BlurRadius ="4" ShadowDepth="0"/> </Border.Effect> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width ="Auto"/> <ColumnDefinition Width ="*"/> </Grid.ColumnDefinitions> <Border Margin ="16,16,8,16" VerticalAlignment="Top"> <Path x :Name="path1" Grid.ColumnSpan="1" Data="M9.0789473,12.870737 L10.927632,12.870737 10.927632,14.5 9.0789473,14.5 z M9.0000001,5.9999999 L11,5.9999999 11,7.994543 10.526316,12.308322 9.4802633,12.308322 9.0000001,7.994543 z M9.9647158,1.8074455 C9.5912184,1.7923756 9.2860216,2.1402843 9.2860216,2.1402845 9.2860216,2.1402843 2.5977592,14.8926 2.2227221,15.46075 1.8476844,16.028899 2.5562553,16.218284 2.5562553,16.218284 2.5562553,16.218284 16.2035,16.218284 17.18278,16.218284 18.162063,16.218284 17.870029,15.460751 17.870029,15.460751 17.870029,15.460751 11.056506,2.8352754 10.494117,2.1197443 10.31837,1.8961406 10.134488,1.8142953 9.9647158,1.8074455 z M9.9331295,0.00021409988 C10.317457,0.0076069832 10.762559,0.20740509 11.244278,0.77299643 12.785778,2.5828881 19.97391,16.249695 19.97391,16.249695 19.97391,16.249695 20.318179,17.954408 18.505573,17.985971 16.692966,18.017535 1.5982747,17.985971 1.5982747,17.985971 1.5982747,17.985971 -0.27740097,18.206807 0.03512764,16.028899 0.3476572,13.850991 8.5362361,0.89893103 8.536236,0.8989315 8.5362361,0.89893103 9.0876089,-0.016049385 9.9331295,0.00021409988 z" Height="17" Stretch="Fill" Width="20" Visibility="Visible" Fill ="Red"/> </Border> <TextBlock x :Name="textBlock" Text="{TemplateBinding Content }" Margin="0,14,10,14" FontSize="14" Grid.Column ="1" TextWrapping="Wrap" Foreground="Red"/> </Grid> </Border> </DataTemplate> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property ="IsOpen" Value="True"> <Trigger.EnterActions> <BeginStoryboard> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Duration="0:0:3"> <DiscreteObjectKeyFrame KeyTime ="0:0:0"> <DiscreteObjectKeyFrame.Value> <Visibility> Visible</Visibility > </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> <DiscreteObjectKeyFrame KeyTime ="0:0:3"> <DiscreteObjectKeyFrame.Value> <Visibility> Hidden</Visibility > </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </Trigger.EnterActions> </Trigger> </Style.Triggers> </Style> ~~~ 3.应用Tooltip的style，如下： ~~~ <Button Content ="TestButton"> < Button.ToolTip> < ToolTip Style ="{ DynamicResource ToolTipStyle}" Content="This is a button"></ ToolTip > </ Button.ToolTip> </ Button> ~~~ 4.以上style使用时的注意事项：因为Animation的设置值优先于本地设置值，所以会出现ToolTip在动画结束时永远隐藏。因此在需要打开tooltip时，首先要在动画开始时设置Visibility为Visible，第二要触发IsOpen=True则必须先IsOpen=False，因为在Tooltip隐藏后并没有设置IsOpen=False。代码如下： ~~~ _toolTip.Style = ToolTipStyle; _toolTip.PlacementTarget = this.AssociatedObject; _toolTip.Placement = PlacementMode.Bottom; _toolTip.Content = toolTipText; //must set false first to trigger storyboard _toolTip.IsOpen = false; _toolTip.IsOpen = true; _toolTip.StaysOpen = false; ~~~ 5.ToolTip的bug 对于ToolTip的显示延迟、显示时间长度、是否保持显示、显示时的位置等等，通用的做法都是通过ToolTipService来进行统一设置。比如： ~~~ ~~~ ToolTipService.InitialShowDelay="1000" ToolTipService.ShowDuration="7000" ToolTipService.BetweenShowDelay="2000" ToolTipService.Placement="Right" ToolTipService.PlacementRectangle="50,0,0,0" ToolTipService.HorizontalOffset="10" ToolTipService.VerticalOffset="20" ToolTipService.HasDropShadow="false" ToolTipService.ShowOnDisabled="true" ToolTipService.IsEnabled="true" ~~~ ~~~ 但是，我发现在TextBox的PreviewInput事件里去弹出tooltip时，以上的ToolTipService设置并没有起到效果，Tooltip的弹出位置和显示时间还是默认的，即跟随鼠标显示，默认5s。这个时候就需要对ToolTip的相关属性进行设置。 _toolTip.Style = ToolTipStyle; _toolTip.PlacementTarget = this.AssociatedObject; _toolTip.Placement = PlacementMode.Bottom; 当然，当我们toolTip和ToolTipService都设置相关属性时， ToolTipService的设置优先。