示例是在blend中畫的,圓角帶陰影和倒三角ide
<Style x:Key="toolTipStyle" TargetType="ToolTip"> <Setter Property="OverridesDefaultStyle" Value="true" /> <Setter Property="HasDropShadow" Value="True" /> <Setter Property = "HorizontalOffset" Value="-10"/> <Setter Property = "VerticalOffset" Value="2"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ToolTip"> <Grid Background="Transparent"> <Grid.Effect> <DropShadowEffect Color="#FFA4A1A1" ShadowDepth="0" BlurRadius="10"/> </Grid.Effect> <Border Background="#FFFBFBFB" Margin="0,0,0,9.96" CornerRadius="5" Padding="5"> <ContentPresenter></ContentPresenter> </Border> <Path Data="M14.499824,45.521505 L9.9553195,39.157883 19.044329,39.157881 z" Fill="#FFFBFBFB" HorizontalAlignment="Left" Height="7" Margin="25,0,0,3.88" Stretch="Fill" VerticalAlignment="Bottom" Width="10"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
應用於目標元素的代碼,好比一個Image對象spa
<Image Width="40" Height="40" ToolTipService.PlacementTarget="{Binding RelativeSource={RelativeSource Self}}" ToolTipService.Placement="Top"> <Image.ToolTip> <ToolTip Style="{StaticResource toolTipStyle}"> <ToolTip.Content> <lang:TextBlock Text="Tooltip template test" VerticalAlignment="Center" FontSize="8pt" Foreground="#2986ff"></lang:LangTextBlock> </ToolTip.Content> </ToolTip> </Image.ToolTip> </Image>
由於ToolTip.PlacementTarget默認對象是鼠標,因此Tooltip默認顯示位置是鼠標的位置,可是我想固定顯示在Image的上方,因此須要設置ToolTipService.PlacementTarget和ToolTipService.Placement="Top"這兩個個附加屬性code