Getting mouse click coordinates in a WebBrowser Document - c#

I am capturing click coordinates within a PictureBox but I want to achieve the same thing with a WebBrowser. After some research I found out that it is not possible to subscribe to the Mouse Click event of a WebBrowser control.
What are the possible ways to capture the clicks? Is there a sort of element which would allow me to navigate through the page but still capture the click?
I tried to create a transparent panel but transparent color doesn't mean see through as I see and when the element is in the back also doesn't capture the click, being able to capture the clicks with panel being behind the WebBrowser would also work.
PictureBox code:
private void uploadedPNG_MouseClick(object sender, MouseEventArgs e)
{
if(uploadedPNG.Image != null && !string.IsNullOrEmpty(deviceHeight.Text) && !string.IsNullOrEmpty(deviceWidth.Text))
{
mouseX = e.X;
mouseY = e.Y;
targetHeight = Int32.Parse(deviceHeight.Text);
targetWidth = Int32.Parse(deviceWidth.Text);
int outPutWidth = (mouseX * targetWidth) / uploadedPNG.Width;
int outPutHeight = (mouseY * targetHeight) / uploadedPNG.Height;
ConsoleText.Text = "Clicked X coordinate " + outPutWidth + " Clicked Y coordinate " + outPutHeight;
}
}

The WebBrowser itself doesn't provide Mouse Click coordinates: you're not actually clicking on the Control client area, you're clicking on the content of the HtmlDocument.
You can use the HtmlDocument.Click or HtmlDocument.MouseDown events to retrieve the Mouse pointer coordinates on an initialized HtmlDocument.
Note:
The HtmlElementEventArgs object returns the Mouse coordinates in both absolute coordinates (the whole Document area), in e.ClientMousePosition and relative to the clicked HtmlElement, in e.OffsetMousePosition.
This can be tricky, because you need to subscribe to the Click event when the current HtmlDocument is already created: you cannot subscribe to the event of the default Document object:
i.e., subscribing to the event in Form.Load with:
webBrowser1.Document.Click += (obj, evt) => { /*Do something */ };
will not accomplish anything. The event will never be raised: the Document is null thus, of course, it's not referency any current/active HtmlDocument.
An HtmlDocument is ready when the WebBrowser.DocumentCompleted event is raised and its ReadyState is set to WebBrowserReadyState.Complete.
You can subscribe to the Document.Click event when the Document is fully loaded, then remove the event before the WebBrowser navigates to a new page, creating a new document.
Also, the DocumentCompleted event may be raised multiple times for a single HTMLpage, so you need to be sure that you don't subscribe to the same event multiple times:
Note:
A HtmlDocument may contain more than one Frame/IFrame and each Frame may have its own HtmlDocument; IFrames have one each for sure. Refer to the notes in this question for more informations on this matter:
How to get an HtmlElement value inside Frames/IFrames?
An example:
bool WebBrowserDocumentEventSet = false;
private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
WebBrowser wb = (sender as WebBrowser);
if (wb.ReadyState == WebBrowserReadyState.Complete && WebBrowserDocumentEventSet == false)
{
WebBrowserDocumentEventSet = true;
wb.Document.MouseDown += this.OnHtmlDocumentClick;
}
}
private void webBrowser1_Navigating(object sender, WebBrowserNavigatingEventArgs e)
{
(sender as WebBrowser).Document.MouseDown -= this.OnHtmlDocumentClick;
WebBrowserDocumentEventSet = false;
}
protected void OnHtmlDocumentClick(object sender, HtmlElementEventArgs e)
{
Console.WriteLine(e.ClientMousePosition);
}

Related

How to Add Mouse click event to Picturebox using C#.net

i am creating simple inventory system. i need only this if i click picturebox 1 relavent message should display "pic1" if i click piturebox 2 relavent message should display "pic2"
public Form1()
{
InitializeComponent();
this.MouseClick += mouseClick;
}
private void mouseClick(object sender, MouseEventArgs e)
{
var clickedPictureBox = (PictureBox)sender;
if (clickedPictureBox == pictureBox1)
{
MessageBox.Show("Pic1");
}
}
i tried the code but it is not working
First, you're using the form's mouse click event, you'll need to replace:
this.MouseClick += mouseClick;
by:
pictureBox1.MouseClick += mouseClick;
pictureBox2.MouseClick += mouseClick;
Option 1: Use the sender object
The mouse click event gives you the argument sender, which is the object that triggered the event.
So you could use it like this:
var clickedPictureBox = (PictureBox)sender;
if (clickedPictureBox == pictureBox1)
...
Option 2: use a tag
You can set tags in your winforms elements and use them. For example, go to the Designer and set the tag of both pictures to "Pic1" and "Pic2" and then use it like this:
var clickedPictureBox = (PictureBox)sender;
if (clickedPictureBox.Tag.ToString() == "Pic1")
...

c# Mouse events through child control

I have a custom user control that contains a chart element that takes up 80% of the space.
When this is placed in a form, i can click the area not occupied by the chart and the click/mousedown/mouseup events work. But yet when i click in the chart area the mouse events aren't passed through and therefore not triggered.
Is there a global way of doing this without having at add the event function for each control on the form?
void Drag_MouseDown(object sender, MouseEventArgs e)
{
activeControl = sender as UserControl;
previousLocation = e.Location;
Cursor = Cursors.SizeAll;
}
void Drag_MouseMove(object sender, MouseEventArgs e)
{
if (activeControl == null || activeControl != sender)
return;
var location = activeControl.Location;
location.Offset(e.Location.X - previousLocation.X, e.Location.Y - previousLocation.Y);
activeControl.Location = location;
}
void Drag_MouseUp(object sender, MouseEventArgs e)
{
activeControl = null;
Cursor = Cursors.Default;
}
These are at the moment having to be manually set to both the custom usercontrol and the chart
It seems like chart overrides your mouse events. So, you can try to add event listeners to chart as well.
PS: We can assign same method to different listeners.

How to allow user to move a control on the form

I have a winform on which i want to allow the user to move a control.
The control is (for now) a vertical line : label with border and a width of 1.
The context is not very important but i'll give it to you anyways. I have a background with some graphics and i'd like the user to be able to slide a guideline above the graphics. The graphics are made with the NPlots library. It looks something like this:
http://www.ibme.de/pictures/xtm-window-graphic-ramp-signals.png
If i can find out how the user can click and drag the label/line control around the screen, i can solve my guideline problem. Please help.
The code for this can get a bit complex, but essentially you will need to capture the MouseDown, MouseMove, and MouseUp events on your form. Something like this:
public void Form1_MouseDown(object sender, MouseEventArgs e)
{
if(e.Button != MouseButton.Left)
return;
// Might want to pad these values a bit if the line is only 1px,
// might be hard for the user to hit directly
if(e.Y == myControl.Top)
{
if(e.X >= myControl.Left && e.X <= myControl.Left + myControl.Width)
{
_capturingMoves = true;
return;
}
}
_capturingMoves = false;
}
public void Form1_MouseMove(object sender, MouseEventArgs e)
{
if(!_capturingMoves)
return;
// Calculate the delta's and move the line here
}
public void Form1_MouseUp(object sender, MouseEventArgs e)
{
if(_capturingMoves)
{
_capturingMoves = false;
// Do any final placement
}
}
In WinForms, you can handle the MouseDown, MouseMove and MouseUp events of a control. On MouseDown, set some bit or reference telling your form what control the mouse was clicked on, and capture the X and Y of the mouse from MouseEventArgs. On MouseMove, if a control is set, adjust its X and Y by the difference between your last captured X and Y and the current coordinates. On MouseUp, release the control.
I would set up an "edit mode" for this; when the user enters this mode, the current event handlers of your form's controls should be detached, and the movement handlers attached. If you want to persist or revert these changes (like you're making a custom form designer your client can use to customize window layouts), you'll also need to be able to take some sort of snapshot of the before and after layouts of the controls.
I wrote a component to do exactly that: move a control on a form (or move a borderless form on the screen). You can even use it from the designer, without writing any code.
http://www.thomaslevesque.com/2009/05/06/windows-forms-automatically-drag-and-drop-controls-dragmove/
Here's an extension method that you can use for any control. It uses Rx and is based on the A Brief Introduction to the Reactive Extensions for .NET, Rx post and sample by Wes Dyer.
public static class FormExtensions
{
public static void EnableDragging(this Control c)
{
// Long way, but strongly typed.
var downs =
from down in Observable.FromEvent<MouseEventHandler, MouseEventArgs>(
eh => new MouseEventHandler(eh),
eh => c.MouseDown += eh,
eh => c.MouseDown -= eh)
select new { down.EventArgs.X, down.EventArgs.Y };
// Short way.
var moves = from move in Observable.FromEvent<MouseEventArgs>(c, "MouseMove")
select new { move.EventArgs.X, move.EventArgs.Y };
var ups = Observable.FromEvent<MouseEventArgs>(c, "MouseUp");
var drags = from down in downs
from move in moves.TakeUntil(ups)
select new Point { X = move.X - down.X, Y = move.Y - down.Y };
drags.Subscribe(drag => c.SetBounds(c.Location.X + drag.X, c.Location.Y + drag.Y, 0, 0, BoundsSpecified.Location));
}
}
Usage:
Button button1 = new Button();
button1.EnableDragging();
Well in all honesty there is a simpler way where by you initialize a global boolean variable called whatever you like, in this case, isMouseClicked. On your control you wish to allow dragging you go to its mouse down event,
Make sure these event are your control events not your forms event.
if (e.button == MouseButtons.left)
//this is where you set the boolean to true
Then go to its mouse move event
if (isMouseClicked == true)
//You then set your location of your control. See below:
Button1.Location = new Point(MousePosition.X, MousePosition.Y);
On your mouse up make sure to set your isMouseClicked to false;

How to allow user to drag a dynamically created control at the location of his choice

I am creating an application where I need to generate dynamically created controls say textbox or label etc.
Now what I that user can relocate that textbox to his desired location. Like we do in Visual Studio.
One way is to get new location by getting values from him using textbox. But I want the user interface easy.
Can we have such functionality in winforms
I have created a simple form that demonstrate how to move the control by dragging the control.
The example assumes there is a button named button1 on the form attached to the relevant event handler.
private Control activeControl;
private Point previousLocation;
private void button1_Click(object sender, EventArgs e)
{
var textbox = new TextBox();
textbox.Location = new Point(50, 50);
textbox.MouseDown += new MouseEventHandler(textbox_MouseDown);
textbox.MouseMove += new MouseEventHandler(textbox_MouseMove);
textbox.MouseUp += new MouseEventHandler(textbox_MouseUp);
this.Controls.Add(textbox);
}
void textbox_MouseDown(object sender, MouseEventArgs e)
{
activeControl = sender as Control;
previousLocation = e.Location;
Cursor = Cursors.Hand;
}
void textbox_MouseMove(object sender, MouseEventArgs e)
{
if (activeControl == null || activeControl != sender)
return;
var location = activeControl.Location;
location.Offset(e.Location.X - previousLocation.X, e.Location.Y - previousLocation.Y);
activeControl.Location = location;
}
void textbox_MouseUp(object sender, MouseEventArgs e)
{
activeControl = null;
Cursor = Cursors.Default;
}
It is the easiest way: First go to your solution name and right click. Select "Manage NuGet Packages". After a while a window opens with a search bar on top of it. Choose the "Browse option " and search DraggableControl package. The name Control.Draggable must be seen. Click on it then click install. Now you can use it's special commands for example.
private void button1_Click(object sender, EventArgs e)
{ Point p = new Point(20,70 * i);
RichTextBox tb = new RichTextBox();
tb.Location = p;
tb.Height= 60;
tb.Width = 100;
tb.Font = Normal;
ControlExtension.Draggable(tb,true);
this.Controls.Add(tb);
i++;
The ControlExtension.Draggable command can set it to be draggable or not. Just write the name of the object in the brackets (tb for me) and write a comma. Then write it is draggable (true) or not (false).
NOTE: Do not Forget to put a semicolon.
Hope it helps.
Link : https://www.nuget.org/packages/Control.Draggable/
You can call DoDragDrop with a data object containing or representing the control to begin a drag&drop operation, then handle the container's DragDrop event and move the control.
If you want to see the control as it's dragged, you can either make a transparent (handle WM_NCHITTEST) form under the mouse showing the control (call DrawToBitmap), or not use drag&drop at all and instead handle mouse events and track state manually.
If you want Visual Studio-style snaplines, you can compare the control's bounds to other controls, make a set of lines to draw, and draw them in a paint event.

How to make a control "transparent" for the mouse or Route MouseMove event to parent?

I want to create a card playing game. I the use mousemove event to drag cards through the window. The problem is if I move the mouse over another card, it is stuck because the card underneath the mouse cursor gets the mouse events, so that the MouseMove event of the window isn't fired.
This is what I do:
private void RommeeGUI_MouseMove(object sender, MouseEventArgs e)
{
if (handkarte != null)
{
handkarte.Location = this.PointToClient(Cursor.Position);
}
}
I tried the following, but there was no difference:
SetStyle(ControlStyles.UserMouse,true);
SetStyle(ControlStyles.EnableNotifyMessage, true);
Iam looking for a way to implement an application-global event-handler or a way to implement so called event-bubbling. At least I want to make the mouse ignore certain controls.
In order to do this you will need to keep track of a few things in your code:
On which card the mouse is pointing
when the mouse button is pressed;
this is the card that you want to
move (use the MouseDown event)
Move the the card when the mouse is moved
Stop moving the card when the mouse button is released (use the
MouseUp event)
In order to just move around controls, there is no need to actually capture the mouse.
A quick example (using Panel controls as "cards"):
Panel _currentlyMovingCard = null;
Point _moveOrigin = Point.Empty;
private void Card_MouseDown(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
_currentlyMovingCard = (Panel)sender;
_moveOrigin = e.Location;
}
}
private void Card_MouseMove(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left && _currentlyMovingCard != null)
{
// move the _currentlyMovingCard control
_currentlyMovingCard.Location = new Point(
_currentlyMovingCard.Left - _moveOrigin.X + e.X,
_currentlyMovingCard.Top - _moveOrigin.Y + e.Y);
}
}
private void Card_MouseUp(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left && _currentlyMovingCard != null)
{
_currentlyMovingCard = null;
}
}
What you could do, is send the MouseDown event to the event.function you want to call.
Say you got a "Label" ontop of a "Card", but you wan't to "go-through" it:
private void Label_MouseDown( object sender, MouseEventArgs)
{
// Send this event down the line!
Card_MouseDown(sender, e); // Call the card's MouseDown event function
}
Now the appropriate event-function is called, even though the bothersome label was clicked.
Normally you do this by, before capturing the mouse, seeing if anybody else has it...

Categories

Resources