wpf 自定义 ToolTip 模板

  示例是在blend中画的,圆角带阴影和倒三角

<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对象

<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"这两个个附加属性

  

 

posted on 2019-10-29 17:36  落寞情缘  阅读(1765)  评论(0编辑  收藏  举报

导航