WPF鼠标悬停消息显示

Question

我正在制作自定义图表控件。所以我想要的是当用户将鼠标悬停在椭圆上时显示有关椭圆的信息。所以椭圆是用频率和八进制表示的，我想显示这些信息。但我不想使用消息框，我只想像一个会弹出信息的绿色气泡一样。

我遇到的问题是我什至没有看到我的控件的悬停事件。这是我的代码：

<UserControl x:Class="Baileys.CustomChartControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:Baileys"
         mc:Ignorable="d" 
         d:DesignHeight="81.855" Loaded ="UserControl_Loaded" MouseDoubleClick="UserControl_DoubleClick"  MouseDown="UserControl_MouseDown"  Width="759.405" >
<Grid x:Name="grid" Background="Transparent" Margin="0,0,-368,-23">
    <Canvas x:Name="canvas">
        <Image Source ="C:\Users\bboone\Pictures\note1.jpg" HorizontalAlignment="Left" Height="80" Margin="10,0,0,0" VerticalAlignment="Top" Width="67"/>
        <Line x:Name="xAxis" X1="0" Y1="80" X2="754" Y2="80" Margin="5,0,210,-5"
          Stroke="Black" StrokeThickness="2"/>
        <Line x:Name="YAxis" X1="0" Y1="0" X2="0" Y2="80" Margin="5,0,0,-4.8"            
          Stroke="Black" StrokeThickness="2" Grid.RowSpan="3"/>
        <Line x:Name="xAxis1" X1="0" Y1="0" X2="754" Y2="0" Margin="5,0,71,-4.8"
          Stroke="Black" StrokeThickness="2" Grid.RowSpan="3"/>
        <Line x:Name="xAxis2" X1="0" Y1="20" X2="754" Y2="20" Margin="5,0,71,-4.8"
          Stroke="Black" StrokeThickness="2" Grid.RowSpan="3"/>
        <Line x:Name="xAxis3" X1="0" Y1="40" X2="754" Y2="40" Margin="5,0,71,-4.8"
          Stroke="Black" StrokeThickness="2" Grid.RowSpan="3"/>
        <Line x:Name="xAxis4" X1="0" Y1="60" X2="754" Y2="60" Margin="5,0,71,-4.8"
          Stroke="Black" StrokeThickness="2" Grid.RowSpan="3"/>
        <Line x:Name="xAxis5" X1="0" Y1="20" X2="754" Y2="20" Margin="5,0,71,-4.8"
          Stroke="Black" StrokeThickness="2" Grid.RowSpan="3"/>
        <Line x:Name="YAxis2" X1="754" Y1="0" X2="754" Y2="80" Margin="-5,0,10,-4.8"
          Stroke="Black" StrokeThickness="2" Grid.RowSpan="3"/>
        <Line x:Name="YAxis3" X1="748" Y1="0" X2="748" Y2="80" Margin="10,0,-6,-4.8"
          Stroke="Black" StrokeThickness="2" Grid.RowSpan="3"/>
    </Canvas>

</Grid>

不知道为什么但是没有鼠标悬停。这是我制作椭圆的代码：

  private void WholeNote(Point circlePoints)
    {
        int x = (int)(circlePoints.X + circlePoints.Y);
        double cubePanelSize = Math.Min(this.Width, this.Height);
        double innerSize = cubePanelSize / 3;
        double outerSize = cubePanelSize / 3;
        Ellipse ellipse = new Ellipse();
        ellipse.Height = outerSize / 2; 
        ellipse.Width = outerSize / 2;
        ellipse.Fill = Brushes.Gray;
        ellipse.StrokeThickness = 3;


        Canvas.SetTop(ellipse, circlePoints.Y);
        Canvas.SetLeft(ellipse, circlePoints.X);
        locations.Add(canvas.Children.Add(ellipse));
       DoubleAnimation ani = new DoubleAnimation
        {
            From = 0,
            To = ellipse.Width,// Convert.ToDouble(i),
            Duration = new TimeSpan(0, 0, 2)
        };
        //Add animation 
        ani.FillBehavior = FillBehavior.HoldEnd;
        ellipse.BeginAnimation(HeightProperty, ani);
        ellipse.Effect = new DropShadowEffect
        {
            Color = new Color { A = 1, R = 0, G = 139, B = 139 },
            Direction = 45,
            ShadowDepth = 10,
            Opacity = 0.8,
            BlurRadius = 10
        };


    }

所以当用户点击图表时，它会变成一个椭圆

所以有人可以帮我吗？

Answer 1

总而言之，这是一项需要在一个问题中解释的艰巨任务，可能并不真正符合 SO 的预期格式。无论如何，这是一种闪电之旅。

您要添加的东西（椭圆）不仅仅是一个椭圆，对吧。您希望它执行鼠标悬停之类的操作。因此将其功能封装到用户控件中。

然而，这里有一条细线，其中简单的标记将改为进入资源字典中的数据模板。

如果您要添加一堆，那么某种项目控件将位于候选列表的首位。因为这是准备好收集一个集合并将其模板化为东西。可以是选项卡控件、组合框、数据网格列表框或项目控件本身。列表以 itemssource > templated > UI 出来。但是这些东西并不是一个接一个地堆叠起来的，所以你在 itemscontrol 中的默认堆叠面板不是你想要的。

将它的项目面板设为 canvas，然后您就可以定位您的用户控件了。

如果我向您展示一些模板数据到 ui，那么您应该能体会到我在这里谈论的内容：

https://1drv.ms/u/s!AmPvL3r385QhgooJ94uO6PopIDs4lQ

那个东西正在使用一个固定的集合，并从不同类型的视图模型中制作各种模板。您只需要一个用户控件和一个视图模型，顶部和左侧具有 public 属性。最后将其称为 EllipseVM。

然后您处理点击，计算出点击的位置并将其传递给 window viewmodel 创建那些 EllipseVM 并设置 Top 和 Left 属性。

还有一件事。在 canvas 中粘贴一条椭圆几何的路径，它以 canvas 的左上角为中心。所以你不需要做任何偏移计算。我用它来定位线上的位置：

例如：

      <Path  
            Height="7"
            Width="7"
            Fill="White"
            Stroke="Black"
            StrokeThickness="1">
                <Path.Data>
                    <EllipseGeometry 
                        RadiusX="2.5" 
                        RadiusY="2.5"
                                   />
                </Path.Data>
            </Path>
</UserControl>

如果您将其粘贴到替换网格的用户控件中并查看设计器，您会立即明白我的意思。您正在查看设计器中的右下角。

WPF鼠标悬停消息显示

WPF mouse hover message display

c#

wpf

ellipse