Btukfyl

I am making a custom chart control. So what I want is when the user to hover over a ellipse so display the information about the ellipse. so the ellipse are note with Frequencies and octs and I want to display that information. but I do NOT want to use a message box, i just want to do like a green bubble that would pop up with the information.

problems I am having is that I do not even see a hover event for my control.
here is my code :

<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:UsersbboonePicturesnote1.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 why but there is no mouse hover.
here is my code for making the ellipse:

  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

        };





    }

so when the user click on the chart, it will make an ellipse

so can anyone help me out ?

Altogether, this is a kind of a big task to explain in one question and probably doesn't really fit the expected format of SO.
Here's a sort of lightning tour anyhow.

The thing you want to add ( the ellipse ) isn't just an ellipse, right. You want it to do stuff like mouseover. Therefore encapsulate it's functionality into a usercontrol.

There is, however, a fine line here where simple markup would instead go into a datatemplate in a resourcedictionary.

If you're adding a bunch of them then some sort of itemscontrol is top of the list of candidates. because this is geared up to take a collection and template it into stuff. Be that a tabcontrol, combobox, datagrid listbox or an itemscontrol itself. List to itemssource > templated > UI out.
But these things aren't just stacked up one after the other so the default stackpanel you have in an itemscontrol is not what you want.

Make it's itemsspanel a canvas and you can then position your usercontrols.

If I show you something templates data into ui then that should give you the flavour of what I'm talking about here:

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

That thing is working with a fixed collection and does a variety of templates from different types of viewmodel. You just need one usercontrol and one viewmodel for that with public properties for Top and Left. Call this last an EllipseVM.

You then handle clicks, work out the location of that click and pass that to a window viewmodel creates those EllipseVM and sets the Top and Left properties.

One other thing.
Stick a path which is an ellipsegeometry in a canvas and it is centered around the top left corner of that canvas. So you don't need to do any offset calculations.
I use that to position the spot on the line in this:

For example:

      <Path  

            Height="7"

            Width="7"

            Fill="White"

            Stroke="Black"

            StrokeThickness="1">

                <Path.Data>

                    <EllipseGeometry 

                        RadiusX="2.5" 

                        RadiusY="2.5"

                                   />

                </Path.Data>

            </Path>

</UserControl>

If you paste that into a usercontrol replacing the grid and take a look at the designer you'll see what I mean immediately.
You're looking at just the bottom right corner in the designer.