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;
-
-
-
_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的設置優先。