工具提示放置 - WPF

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17449646/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-13 09:08:27  来源:igfitidea点击:

Tooltip Placement - WPF

wpf

提问by Mike

I'm trying to put together a tool tip for a simple button. However when the mouse is hovered over the button, the tool tip does not appear below it.

我正在尝试为一个简单的按钮组合一个工具提示。但是,当鼠标悬停在按钮上时,工具提示不会出现在按钮下方。

Please see this : enter image description here

请看这个: 在此处输入图片说明

This xaml is as below:

这个xaml如下:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Height="300" Width="300"  xmlns:sys="clr-namespace:System;assembly=mscorlib">

    <Page.Resources>

        <Style x:Key="ToolTipStyle" TargetType="{x:Type ToolTip}">
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToolTip">
                        <Grid x:Name="PopupGrid">
                            <Grid x:Name="ShadowBackground" Height="65" Width="260">
                                <Grid.Effect>
                                    <DropShadowEffect BlurRadius="7" ShadowDepth="1" Opacity="0.5" />
                                </Grid.Effect>
                                <Path Margin="0 0 50 0" Width="20" Height="10" HorizontalAlignment="Right" VerticalAlignment="Top" Data="M0,10 L10,0 20,10Z" Stroke="Gray" Fill="#EFEFF0" Stretch="None" />
                                <Border BorderThickness="1 0 1 1" CornerRadius="3" Margin="10 9 10 10" BorderBrush="Gray" Background="#EFEFF0">
                                    <ContentPresenter/>
                                </Border>
                                <Border BorderThickness="0 1 0 0" CornerRadius="0 0 3 0" Margin="0 9 10 0" HorizontalAlignment="Right" VerticalAlignment="Top" Width="41" Height="10" BorderBrush="Gray" />
                                <Border BorderThickness="0 1 0 0" CornerRadius="3 0 0 0" Margin="10 9 69 0" VerticalAlignment="Top" Height="10" BorderBrush="Gray" />

                            </Grid>                     
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="ToolTipHeaderStyle" TargetType="{x:Type Label}">
            <Setter Property="FontFamily" Value="Calibri"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="FontSize" Value="14"/>
        </Style>

        <Style x:Key="ToolTipTextStyle" TargetType="{x:Type Label}">
            <Setter Property="FontFamily" Value="Calibri"/>
            <Setter Property="FontSize" Value="12"/>
        </Style>

    </Page.Resources>

    <Grid x:Name="PopupGrid" Background="Red">
        <Button Width="100" Height="30" Content="Click Me!">
            <Button.ToolTip>
                <ToolTip Style="{StaticResource ToolTipStyle}">
                    <StackPanel Orientation="Vertical">
                        <Label Content="Newly Rejected" Style="{StaticResource ToolTipHeaderStyle}"></Label>
                        <Label Content="Please perform requested edits and resubmit" Style="{StaticResource ToolTipTextStyle}"></Label>
                    </StackPanel>
                </ToolTip>
            </Button.ToolTip>
        </Button>
    </Grid>

</Page>

I'm not sure what is causing this behavior. Can you please help to get the placement correct?

我不确定是什么导致了这种行为。你能帮忙调整一下位置吗?

Forgot to mention how it should appear:

忘了提到它应该如何出现:

the triangle of the tooltip should be places right below the mouse cursor, which would mean that the tooltip should move towards left.Something like this:enter image description here

工具提示的三角形应该放在鼠标光标的正下方,这意味着工具提示应该向左移动。像这样:在此处输入图片说明

Thanks, -Mike

谢谢,-迈克

采纳答案by TrueEddie

Have you played around with the placement properties?

你玩过放置属性吗?

You can add this to your ToolTipStyle:

您可以将此添加到您的 ToolTipStyle:

<Setter Property="ToolTipService.Placement" Value="Left" />

There's also ToolTipService.PlacementRectangle and ToolTipService.PlacementTarget

还有 ToolTipService.PlacementRectangle 和 ToolTipService.PlacementTarget

EDIT:

编辑

You could try:

你可以试试:

<Setter Property="ToolTipService.HorizontalOffset" Value="-200" />

回答by JGU

Use the CustomPopupPlacementCallback.. In my case I needed the tip to display on the right of a textbox, Placement.Right worked fine on my laptop, but was displaying to the left on my touchscreen, the easiest way to fix this is to use the callback to calculate a relative offset in the code behind:

使用 CustomPopupPlacementCallback .. 就我而言,我需要将提示显示在文本框的右侧,Placement.Right 在我的笔记本电脑上运行良好,但在我的触摸屏上显示在左侧,解决此问题的最简单方法是使用在后面的代码中计算相对偏移量的回调:

...
tip.PlacementTarget = this;
tip.Placement = PlacementMode.Custom;
tip.CustomPopupPlacementCallback = new CustomPopupPlacementCallback(PositionTooltip);
...

    private CustomPopupPlacement[] PositionTooltip(Size popupSize, Size targetSize, Point offset)
    {
        double offsetY = targetSize.Height / 2 + popupSize.Height;
        double offsetX = targetSize.Width;

        return new CustomPopupPlacement[] { new CustomPopupPlacement(new Point(offsetX, offsetY), PopupPrimaryAxis.None) };
    }