steady_progress
steady_progress

Reputation: 3741

How to make tooltip appear at fixed position (in this case: bottom left corner of page)

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

  }

Upvotes: 4

Views: 1757

Answers (1)

P.Manthe
P.Manthe

Reputation: 960

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>

Upvotes: 2

Related Questions