wpf 自定義 ToolTip 模板

  示例是在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

相關文章
相關標籤/搜索