WPF mouse hover message display

Question

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:\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 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 ?

If you use a canvas as the host in your usercontrol then the control will not clip. Meaning you can show something "outside" it. Like a green bubble. EG Use a negative canvas.top and it'll be above. You could use a trigger to start a storyboard and that would compare ismouseover on your usercontrol. Put that bit in a style like here https://stackoverflow.com/questions/2388429/how-to-set-mouseover-event-trigger-for-border-in-xaml. — Andy, Nov 24 '18 at 16:34
I would do most of what you've got there in xaml rather than code. — Andy, Nov 24 '18 at 16:35
Andy, so I am very very new to WPF and everyone keep saying do more things in xaml but how would you do it in xaml? the user needs to be able to click the chart and place an ellipse where the user clicks, you cant do that in xaml right ? I have that part working in C# code. — Brandon Boone, Nov 24 '18 at 16:42

score 1 · Accepted Answer · answered Nov 24 '18 at 17:17

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.

WPF mouse hover message display

1 Answers1