Reputation: 3741
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
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