WPF鼠标悬停消息显示

时间:2018-11-24 16:00:03

标签: c# wpf ellipse

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

我遇到的问题是我什至看不到控件的悬停事件。 这是我的代码:

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

IDk为什么但没有鼠标悬停。  这是我制作椭圆的代码:

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


    }

因此,当用户单击图表时,它将变成椭圆形

有人可以帮我吗?

1 个答案:

答案 0 :(得分:1)

总的来说,这是一个很大的任务,需要在一个问题中进行解释,并且可能并不完全符合SO的预期格式。 无论如何,这是一种闪电之旅。

您要添加的内容(椭圆)不只是一个椭圆,对。您希望它执行鼠标悬停之类的操作。因此,将其功能封装到用户控件中。

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

如果要添加一堆,则某些项控件将在候选列表的顶部。因为这已经做好准备,可以收集一个集合并将其模板化为内容。是tabcontrol,组合框,datagrid列表框还是itemscontrol本身。列出到itemsource>模板化> UI out。 但是这些东西并不仅仅是一个接一个地堆叠在一起,因此,items控件中的默认堆叠面板并不是您想要的。

将其作为项目空间放置在画布上,然后可以放置用户控件。

如果我向您展示将一些模板数据输入到ui中,那么应该可以让您感受到我在这里谈论的内容:

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

该东西正在使用固定的集合,并且可以从不同类型的视图模型执行各种模板。您只需要一个用户控件和一个视图模型,并具有顶部和左侧的公共属性。最后将此称为EllipseVM。

然后,您可以处理单击,确定该单击的位置,并将其传递到窗口视图模型,以创建EllipseVM并设置“顶部”和“左侧”属性。

另一件事。 在画布上粘贴一条省略号,并以该画布的左上角为中心。因此,您无需进行任何偏移量计算。 我用它来定位点在此: enter image description here

例如:

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

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