画布元素中的工具提示

Question

我编写了一个在画布中绘制元素的应用程序，如 this other post

我按照@grek40 的指示做了，效果很好。

现在我想为画布中绘制的元素添加一个工具提示（仅限由 Border 类表示的 Tasks 元素）。这是我的代码：

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

但它不起作用。当我悬停任务元素（边框项目）时，什么也没有发生。有什么想法吗？

更新

网格 (x:Name="grid1") 包含在处理缩放和填充的自定义控件中。我在this post in codeplex 之后实现了这个（我遵循了“简单示例代码”）。

所以我的 xaml 看起来像这样：

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

ZoomAndPanControl 的命令是否会干扰工具提示？

Answer 1

您在网格内覆盖了两个不同的 itemcontrol。最上面的控件管理行，它有Background="Transparent"，因此它将捕获所有鼠标流量，并且底层任务项集合永远不会收到鼠标悬停。

解决方案 1（hacky）：交换项目和行的顺序或 Z-Index。

解决方案 2（也是 hacky）：移除阻挡背景而不是使其透明 (Background="{x:Null}")

解决方案 3（不那么 hacky）：创建一个组合项目集合，其中包含数据上下文中的行和任务项，并使用单个画布来呈现它们。

实现方案3的一种方式是组合后面代码中的项目，另一种是使用CompositeCollection：

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

Answer 2

从链接帖子中接受的答案来看，您似乎正在将此模板用于ItemsControl 中的项目。 ItemsControl 会将每个项目放入一个容器中，该容器的样式由ItemContainerStyle 属性定义。

通过将工具提示添加到ItemContainerStyle，尝试将工具提示放在容器而不是项目上。在另一篇文章中，这是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>