Highlighting mouse position in wpf with an ellipse

Question

4.50/5 (2 votes)

See more:

Hello there,

i am facing some issue to implement one feature in my wpf window. I have a chart control (let it be any control...) inside the Grid which fills the entire window. I want to highlight the mouse position in the chart using an ellipse.

I tried the following -

1. I kept a canvas instead of grid - Now my chart control is no longer stretchable to fill the window

2. I kept the Grid and kept both Ellipse and Chart control inside it. Try changing the ZIndex of Ellipse to 0 and Chart control to 1. But could not see the Ellipse at run time despite visibility is Visible and ZIndex is 0.

I could not find even a single good solution so far. I know its very easy in Windows forms, but found very difficult in WPf. Kindly provide a solution with code snippet.

My Current code look like this....

xaml:

<Grid  Background="White"  AllowDrop="True" Name="myGrid" >
     <Ellipse Visibility="Hidden" Name="ellipse1" Stroke="Black" Height="10" HorizontalAlignment="Left" VerticalAlignment="Top" Width="10" Fill="Red"/>
     <d3:ChartPlotter Name="plotter" Margin="0,43,0,0" Panel.ZIndex="1">
     </d3:ChartPlotter>
 </Grid>

code:

void plotter_MouseMove(object sender, MouseEventArgs e)
  {
      Point pt = new Point(e.GetPosition(this).X, e.GetPosition(this).Y);
      ellipse1.Visibility = Visibility.Visible;
      ellipse1.Margin = new Thickness(pt.X, pt.Y, this.ActualWidth - pt.X, this.ActualHeight - pt.X);
  }

Many thanks....

Posted 8-Apr-11 0:08am

Asish N R

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Jonathan Cardy · Answer 1 · 2011-04-08T01:37:00

Hi Asish!

The z-index is determined by the order of elements in the visual tree, so your ellipse is behind your chart. Additionally, higher z-indexes are displayed above lower z-indexes so you have them the wrong way round.

I found this XAML to work:

XML

<Grid MouseMove="Grid_MouseMove" Name="grid">
        <TextBox Background="AliceBlue"/>
        <Ellipse Name="ellipse" HorizontalAlignment="Left" VerticalAlignment="Top" Width="10" Height="10" Fill="Aqua"/>
    </Grid>

C#:

C#

private void Grid_MouseMove(object sender, MouseEventArgs e)
        {
            var pos = e.GetPosition(grid);
            ellipse.Margin = new Thickness(pos.X, pos.Y, 0, 0);
        }