4

I have several items (in the form of rectangles) inside a "Carousel" (which again is basically just a fancy PathListBox)

When the mouse hovers over one of those rectangles, a tooltip with some information appears. The look of the rectangles is determined by a DataTemplate. The beginning of the xaml of this DataTemplate is displayed here:

<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 

Just for completeness, this is the xaml for "Box512":

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

The tooltip is supposed to be displayed at a fixed location in the bottom left corner of the page close to a XAML element with the name "Box512".

To this end I used the "PlacementTarget"-Property of the tooltip. I tried (as you can see in the code above):

 PlacementTarget="{Binding ElementName=Box512}"

This didn't work. INstead of in the left bottom corner of the page, the tooltip was still displayed at the rectangle over which the mouse hovered. I then tried:

        PlacementTarget="{x:Bind Box512}"  

... this didn't work either.

So my question is: how can I make the tooltip appear at the same position near Box512 independent of which rectangle my mouse is hovering over?


****************************ADDITIONAL INFORMATION***********************

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(); };
    }

}

The GraphItems list is defined as a property of the MainViewModel:

 private List<GraphNode> _GraphItems;
    public List<GraphNode> GraphItems
    {
      get { return _GraphItems; }
      private set
      {
        _cGraphItems = value;
        this.RaisePropertyChangedEvent("GraphItems");
      }
    }

The "Text" Property is associated with the GraphNode class:

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

  }
steady_progress
  • 3,311
  • 10
  • 31
  • 62

1 Answers1

2

You should use the TooltipService to specify the placement target:

    <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>
P.Manthe
  • 960
  • 1
  • 5
  • 12
  • Thank you for your answer ... the tooltip is now displayed in the desired location ... however, the tooltip is empty because now the Binding in the line does not work anymore ... I tried to establish the old datacontext for the TextBlock element again but I'm not really proficient with datacontexts, so I failed ... one thing I tried was: {Binding Path=Text, RelativeSource={RelativeSource DataTemplate}} ... do you know how to get the Binding working again? – steady_progress Oct 31 '17 at 15:24
  • 1
    the TextBlock datacontext must have a Text property. Regarding your XAML, this datacontext is the same for Texblock, Grid, and the related Datatemplate. Regarding your description, this Datacontext must be one of the "several items (in the form of rectangles)". Do these items have a Text property? Can you share the codebehind for the "item/rectangle" class, at least the part that concern the Text property? – P.Manthe Nov 01 '17 at 00:49
  • Hallo Bob, I have edited the post, adding a lot of additional information (see everything below "ADDITIONAL INFORMATION") ... I think that using ToolTipService.PlacementTarget="{Binding ElementName=Box512}" changes the datacontext of the tooltip to the one of Box512. When I simply use instead of , the text is displayed in the tooltip. Adding the attribute "ToolTipService.PlacementTarget" causes the tooltip to be empty. – steady_progress Nov 01 '17 at 14:56