wpf - 如何使工具提示出现在固定位置(在本例中为 : bottom left corner of page)

标签 wpf xaml tooltip wpf-positioning

我在“旋转木马”中有几个项目(以矩形的形式)(这基本上只是一个花哨的 PathListBox)

当鼠标悬停在这些矩形之一上时,会出现一个包含一些信息的工具提示。矩形的外观由 DataTemplate 确定。这个 DataTemplate 的 xaml 的开头显示在这里:

<Carousel:CarouselControl.DataTemplateToUse>
<DataTemplate>
    <Grid ShowGridLines="True">
          <Grid.ToolTip>
              <ToolTip Placement="Right" 
                      PlacementRectangle="50,0,0,0"
                      HorizontalOffset="10" 
                      VerticalOffset="20"
                      HasDropShadow="false"
                      PlacementTarget="{Binding ElementName=Box512}"
                      >
                      <BulletDecorator>                                                   
                            <TextBlock Text="{Binding Text}"/>
                      </BulletDecorator>
              </ToolTip>
        </Grid.ToolTip>

        //further xaml code defining the DataTemplate 

为了完整起见,这是“Box512”的 xaml:
      <Border x:Name="Box512" Grid.Row="2" Grid.Column="1"  Grid.RowSpan="4" 
                    Grid.ColumnSpan="2" BorderThickness="0" Opacity="0.5">
            <Image>
                <Image.Style>
                    <Style TargetType="Image">
                        <Setter Property="Source" Value="Resources/Box512.ico"/>
                    </Style>
                </Image.Style>
            </Image>
        </Border>

工具提示应该显示在页面左下角的固定位置,靠近名为“Box512”的 XAML 元素。

为此,我使用了工具提示的“PlacementTarget”-Property。我尝试过(如您在上面的代码中所见):
 PlacementTarget="{Binding ElementName=Box512}"

这没有用。工具提示仍然显示在鼠标悬停的矩形上,而不是在页面的左下角。然后我尝试:
        PlacementTarget="{x:Bind Box512}"  

......这也不起作用。

所以我的问题是:如何使工具提示出现在 Box512 附近的相同位置,而与鼠标悬停在哪个矩形上无关?

****************************附加信息******************** ***

主窗口.xaml:
<Carousel:CarouselControl x:Name="CarouselControl"                                                             
                       ScaleRange="1.0,1.0" 
                       MaxNumberOfItemsOnPath="4"  
                       SelectedItem="{Binding CurrentData,Mode=TwoWay}"
                       SelectionChanged="CarouselControl_SelectionChanged"
                       ItemsSource="{Binding GraphItems}"      
                       CustomPathElement="{Binding ElementName=customPath}">

<Carousel:CarouselControl.DataTemplateToUse>
     <DataTemplate>

   with this line of code the text inside the tooltip would get displayed BUT 
   the tooltip would not be in the desired location: 

   <!--<Grid ShowGridLines="True">-->

  with this line of code the tooltip is empty but the tooltip 
  is displayed in the desired location: 

      <Grid ShowGridLines="True" ToolTipService.PlacementTarget="{Binding 
      ElementName=Box512}">        

          <Grid.ToolTip>
            <ToolTip Placement="Right" 
                PlacementRectangle="50,0,0,0"
                HorizontalOffset="10" 
                VerticalOffset="20"
                HasDropShadow="false">
                     <BulletDecorator>
                          <BulletDecorator.Bullet>
                              <Ellipse Height="10" Width="20" Fill="Blue"/>
                          </BulletDecorator.Bullet>                         
                          <TextBlock Text="{Binding Text}"/>
                     </BulletDecorator>
             </ToolTip>
         </Grid.ToolTip>

        //further xaml code defining the DataTemplate 

      </Grid>
    </DataTemplate>
  </Carousel:CarouselControl.DataTemplateToUse>
</Carousel:CarouselControl>

主窗口.cs:
public partial class MainWindow : Window
{
     ///View Model for MainWindow.
     private ViewModels.MainWindowVM mainViewModel = null;


    public MainWindow()
    {
        InitializeComponent();
        //Initialize View Model
        mainViewModel = new ViewModels.MainWindowVM();
        //Set it as Data Context
        this.DataContext = mainViewModel;

        //Close-Event bound
        mainViewModel.RequestClose += delegate 
            (object sender, EventArgs e) { this.Close(); };
    }

}

GraphItems 列表被定义为 MainViewModel 的一个属性:
 private List<GraphNode> _GraphItems;
    public List<GraphNode> GraphItems
    {
      get { return _GraphItems; }
      private set
      {
        _cGraphItems = value;
        this.RaisePropertyChangedEvent("GraphItems");
      }
    }

“Text”属性与 GraphNode 类相关联:

GraphNode.cs:
public class GraphNode : ObservableObject
  {
      ///GENERAL INFORMATION
        private string _Text;
        public string Text { 
           get { return _Text; } 
           set { _Text = value; this.RaisePropertyChangedEvent("Text"); } 
      }

     //more code

  }

最佳答案

您应该使用 TooltipService 来指定放置目标:

    <TextBlock Text="Header"  Grid.Row="0" Background="Green" Margin="0,0,0,0" ToolTipService.PlacementTarget="{Binding ElementName=Box512}">
        <TextBlock.ToolTip>
          <ToolTip Placement="Right" 
                  PlacementRectangle="50,0,0,0"
                  HorizontalOffset="10" 
                  VerticalOffset="20"
                  HasDropShadow="false"
                  >
                  <BulletDecorator>                                                   
                        <TextBlock Text="This is the tooltip text"/>
                  </BulletDecorator>
          </ToolTip>
        </TextBlock.ToolTip>
    </TextBlock>

关于wpf - 如何使工具提示出现在固定位置(在本例中为 : bottom left corner of page),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47024074/

相关文章:

wpf - 有没有更好/更简洁的方式来声明这个重复的 WPF 绑定(bind)?

c# - 生成带有图像的辅助图 block 不立即显示图像

c# - ComboBox 项目的自定义项目模板

java - 想要在 Vaadin 网格单元格上将工具提示设置为 HTML

c# - 如何在 wpf 中使用 DateTimePicker 绑定(bind)

wpf - 呈现 UserControl.Resources

c# - 如何制作自动变化的照片?

wpf - 如何在 TextBox 上设置正则表达式?

ionic-framework - 如何在 Ionic 上添加工具提示

java - JMenuItem 的工具提示