ToolTip in canvas elements

Question

I have programmed an application that draws elements in a canvas as described in this other post

I did it following the instructions of @grek40 and it works well.

Now I would like to add a tooltip to the elements drawn in the Canvas (only Tasks elements which are represented by a Border class). This is my code:

<DataTemplate DataType="{x:Type local:TaskItem}">
    <Border
    Background="#0074D9"
    BorderBrush="#001F3F"
    BorderThickness="2"
    Width="{Binding Width}"
    Height="{Binding Height}">
        <TextBlock
        Text="{Binding Id}"
        FontSize="20"
        Foreground="White"
        HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <Border.ToolTip>
            <ToolTip Background="#D5F0F0FF">
                <StackPanel>
                    <TextBlock Text="Reading Suggestion" FontWeight="Bold"/>
                    <TextBlock Text="Charles Dickens" Margin="5"/>
                </StackPanel>
            </ToolTip>
        </Border.ToolTip>
    </Border>
</DataTemplate>

But it doesn´t work. When I hover the Task elements (Border items) nothing happens. Any ideas what's wrong?

UPDATE

The Grid (x:Name="grid1") is contained in a custom control that handles zooming and padding. I implemented this following this post in codeplex (I followed the 'Simple Sample Code').

So my xaml looks like this:

<ScrollViewer
    x:Name="scroller"
    CanContentScroll="True"
    VerticalScrollBarVisibility="Visible"
    HorizontalScrollBarVisibility="Visible"
    >

    <!--
    This is the control that handles zooming and panning.
    -->
    <ZoomAndPan:ZoomAndPanControl                
        x:Name="zoomAndPanControl"
        Background="LightGray"
        MouseDown="zoomAndPanControl_MouseDown"
        MouseUp="zoomAndPanControl_MouseUp"
        MouseMove="zoomAndPanControl_MouseMove"
        MouseWheel="zoomAndPanControl_MouseWheel"
        >

        <!--
        This Canvas is the content that is displayed by the ZoomAndPanControl.
        Width and Height determine the size of the content.
        -->
        <Grid x:Name="grid1">
            <ItemsControl x:Name="content"
                ItemsSource="{Binding TaskItems}"
                ItemContainerStyle="{StaticResource canvasTaskItemStyle}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas
                            Background="White"
                            Height="2000"
                            Width="2000"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
            <ItemsControl x:Name="contentLines"
                ItemsSource="{Binding TaskLineItems}">                    
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas
                            Background="Transparent"
                            Height="2000"
                            Width="2000"/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </Grid>
    </ZoomAndPan:ZoomAndPanControl>

</ScrollViewer>

Are maybe the commands of the ZoomAndPanControl interfering with the tooltip?

Are you sure? I just merged the tooltip into my example and it is showing without problem. Maybe some other part of your project is interfering? — grek40, May 12 '17 at 07:26
That's possible because I have your code inside a custom control that handles zooming and paning. I have updated the post with information about it. Thanks — chincheta73, May 12 '17 at 08:06

score 0 · Answer 1 · answered May 11 '17 at 21:48

From the accepted answer in the linked post, it looks like you are using this template for items in an ItemsControl. The ItemsControl will put each item in a container with the style of the container defined by the ItemContainerStyle property.

Try putting the tooltip on the container instead of the item by adding it to the ItemContainerStyle. In the other post this is canvasTaskItemStyle.

<Style x:Key="canvasTaskItemStyle" TargetType="ContentPresenter">
    <Setter Property="Canvas.Left" Value="{Binding CoordX}"/>
    <Setter Property="Canvas.Top" Value="{Binding CoordY}"/>
    <Setter Property="ToolTip">
        <Setter.Value>
            <ToolTip Background="#D5F0F0FF">
                <StackPanel>
                    <TextBlock Text="Reading Suggestion" FontWeight="Bold"/>
                    <TextBlock Text="Charles Dickens" Margin="5"/>
                </StackPanel>
            </ToolTip>
        </Setter.Value>
    </Setter>
</Style>

Still doesn't work. Maybe, as suggested by @grek40another part of the project is interfering. I will update my question with more code — chincheta73, May 12 '17 at 07:59

grek40 · Accepted Answer · 2017-05-12T08:23:07.663

You are overlaying two different itemcontrols inside the grid. The topmost control manages the lines and it has Background="Transparent", so it will capture all mouse traffic and the underlying task item collection never receives the mouse over.

Solution 1 (hacky): swap the order or the Z-Index of items and lines.

Solution 2 (also hacky): remove the blocking background instead of making it transparent (Background="{x:Null}")

Solution 3 (less hacky): Create a combined items collection that contains both, lines and taskitems in the data context and use a single canvas to present them.

One way of implementing solution 3 is combining the items in code behind, another is the use of CompositeCollection:

<ItemsControl ...>
    <ItemsControl.ItemsSource>
        <CompositeCollection>
            <CollectionContainer Collection="{Binding TaskItems}"/>
            <CollectionContainer Collection="{Binding TaskLineItems}"/>
        </CompositeCollection>
    </ItemsControl.ItemsSource>
    ...
</ItemsControl>

@chincheta73 no problem, see my edit for a suggestion how to create the combined collection without much efford. — grek40, May 12 '17 at 08:23

ToolTip in canvas elements

2 Answers2