Drawing Graphics Over WebBrowser

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Steve - 23 Jun 2006 09:06 GMT

I'd like to draw some GDI+ graphics on top of a web page in a windows form
application, but I can't seem to do it. The WebBrowser control hides the
Paint event (and never calls the OnPaint method); and putting a transparent
other control on top doesn't work because "transparency" of a control means
substituting the parent's background color, not displaying the drawn contents
of the parent.
Any ideas?

Reply to this Message

Bill Woodruff - 24 Jun 2006 07:23 GMT

"Steve" wrote :

> I'd like to draw some GDI+ graphics on top of a web page in a windows form
> application, but I can't seem to do it. The WebBrowser control hides the
[quoted text clipped - 5 lines]
> contents
> of the parent. Any ideas?

Hi Steve,

I have the strong feeling that Bob Powell and other "gurus" will respond
with the "right" way to do it, but here's a demonstration of how you can get
graphics to appear on top of web-browser content. It's a crude demo : you
have to manually close the topmost form which is transparent, then manually
close the underlying form that holds the webbrowser control. Just a sketch.
And I note the text that shows over the web page, doesn't appear very
well-rendered doing it this way.

Start a new WinForms project (C#). Put a WebBrowser Control on the default
Form (Form1) created with the project. If it doesn't automatically dock to
'Fill : set Dock to Fill. Create a 'Load event handler for the default Form

: plug in this code into the Load event handler :

private void Form1_Load(object sender, EventArgs e)
{
webBrowser1.Url = new System.Uri("http://www.google.com",
System.UriKind.Absolute);

Form newForm = new Form();
newForm.FormBorderStyle = FormBorderStyle.FixedToolWindow;
newForm.BackColor = Color.Magenta;
newForm.TransparencyKey = Color.Magenta;
newForm.WindowState = FormWindowState.Maximized;
newForm.ShowInTaskbar = false;

Label newLabel = new Label();
newForm.Controls.Add(newLabel);

newLabel.BackColor = Color.Magenta;
newLabel.Font = new System.Drawing.Font("Microsoft Arial", 18F,
FontStyle.Regular, GraphicsUnit.Point, ((byte)(0)));
newLabel.ForeColor = Color.Crimson;
newLabel.Text = "Some text on a topmost transparent form window";

newForm.Show();
newForm.TopMost = true;

newLabel.AutoSize = true;
newLabel.Location = new Point(230, 375);
}

Reply to this Message

Steve - 24 Jun 2006 11:01 GMT

Bill, that's as close as I've ever come to pure evil. But I'll try it, it
looks like it will work!
-- Steve

Reply to this Message

James Westgate - 24 Jun 2006 19:13 GMT

Another option is to generate an image with a tag as follows and place
in a seperate layer in the html (or perhaps using an IFrame if you dont
have control over the source)

<img src="generate.aspx?ref=www.pagehere.com"/>

You can get a handle from a new image (im thinking GIF for transparency)
using Graphics.FromImage, and set the Response.ContentType to GIF.

Let me know if you need help.

James
http://www.crainiate.net

> I'd like to draw some GDI+ graphics on top of a web page in a windows form
> application, but I can't seem to do it. The WebBrowser control hides the
[quoted text clipped - 3 lines]
> of the parent.
> Any ideas?

Reply to this Message

Bill Woodruff - 24 Jun 2006 23:54 GMT

> Another option is to generate an image with a tag as follows and place in
> a seperate layer in the html (or perhaps using an IFrame if you dont have
[quoted text clipped - 17 lines]
>> the drawn contents of the parent.
>> Any ideas?

The thought about "injecting" your own HTML into the source HTML you want to
overlay also occurred to me. But whereas James is talking about overlaying
GIFs, I was thinking more about over-laying your own HTML elements.

I think the technique you would have to use would depend on the requirements
of the project : if you are required to associate some overlay with some
particular element in the HTML source your are overlaying : 'pin it' to that
element's position, etc., then I think you would have to get into at minimum
webscraping techniques and injecting custom HTML based on object positions
you've teased out by scraping, at maximum complex parsing of the DOM and
re-making the whole document.

While I haven't tried this, the thought crossed my mind that by generating a
new HTML doc on the fly, putting the source content in an IFrame set to fill
the HTML doc you've created, and then overlaying your own HTML elements on
top of that IFrame (perhaps in other IFrames), you might get at this. If the
"master page" has scroll bars (and your 'inner' IFrame doesn't), perhaps you
could get 'anchoring' or 'pinning' of overlay to underlying content on the
cheap ?

Treat this comment as a very tentative idea not based on experimentation. I
did mess around with transparent IFrames a long time when that functionality
came along with IE. I have no idea what support for transparency (other than
GIF) other browsers offer, and I am aware that IFrames for some users
involve security issues.

best, Bill

Reply to this Message

Drawing Graphics Over WebBrowser

Free Magazines