【问题标题】:How to make tooltip appear at fixed position (in this case: bottom left corner of page)如何使工具提示出现在固定位置(在这种情况下:页面左下角)
【发布时间】:2017-10-30 21:00:19
【问题描述】:

我在“旋转木马”(基本上只是一个花哨的 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”属性。我试过了(你可以在上面的代码中看到):

 PlacementTarget="{Binding ElementName=Box512}"

这不起作用。而不是在页面的左下角,工具提示仍然显示在鼠标悬停的矩形上。然后我尝试了:

        PlacementTarget="{x:Bind Box512}"  

...这也不起作用。

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


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

MainWindow.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>

MainWindow.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

  }

【问题讨论】:

    标签: wpf xaml tooltip wpf-positioning


    【解决方案1】:

    您应该使用 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>
    

    【讨论】:

    • 感谢您的回答...工具提示现在显示在所需位置...但是,工具提示为空,因为现在 不再起作用...我尝试再次为 TextBlock 元素建立旧的数据上下文,但我对数据上下文并不精通,所以我失败了...我尝试的一件事是:{Binding Path=Text, RelativeSource={RelativeSource DataTemplate}} ...您知道如何让 Binding 再次工作吗?
    • TextBlock 数据上下文必须具有 Text 属性。关于您的 XAML,此数据上下文对于 Texblock、Grid 和相关的数据模板是相同的。关于您的描述,此 Datacontext 必须是“几个项目(以矩形形式)”之一。这些项目是否具有 Text 属性?你能分享一下“item/rectangle”类的代码隐藏,至少是涉及 Text 属性的部分吗?
    • 你好鲍勃,我已经编辑了帖子,添加了很多附加信息(请参阅“附加信息”下面的所有内容)......我认为使用 ToolTipService.PlacementTarget="{Binding ElementName=Box512} " 将工具提示的数据上下文更改为 Box512 之一。当我简单地使用 而不是 时,文本显示在工具提示中。添加属性“ToolTipService.PlacementTarget”会导致工具提示为空。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-11-06
    • 2020-06-05
    • 1970-01-01
    • 1970-01-01
    • 2021-05-25
    • 1970-01-01
    相关资源
    最近更新 更多