Adding a Click event to a Web Browser control

  • Thread starter Thread starter Jayyde
  • Start date Start date
J

Jayyde

Can anyone point me to a good guide for how to do this or give me some
pointers? What I'm basically trying to do is use the Web Browser as a
picture box that has a web source for the image, but it doesn't have a click
event for the control (so I can pop up a new window with an enlarged image).
I can put a panel above it (on a user control) with a click event or even a
picture box, but Transparent background apparently isn't actually
transparent so I'm staring at a gray square until I click on it then it pops
up the enlarged image perfectly. If anyone knows a better way to do this
I'm game for that also.

TIA,
Jayyde
 
Well, you could perhaps set the .ObjectForScripting to a C# object with a
method, and make the browser load some simple HTML (which you would write)
which places an IMG with an "onclick" that invokes a method on the scripting
object via javascript; something like below (all notepad jobs; not tested).

Marc


*** class def
[ComVisible(true)]
public class ScriptingObject {
internal event EventHandler Clicked;
public void SomeMethod() {
EventHandler handler = Clicked;
if(handler!=null) handler(this,EventArgs.Empty);
}
}
*** HTML extract
<IMG SRC="..." ONCLICK="window.external.SomeMethod()"/>
*** UI code
ScriptingObject() obj = new ScriptingObject();
obj.Clicked += // TODO: handle
myBrowser.ObjectForScripting = obj;
 
Thanks for all the help Marc :). I just have 1 more question (one little
thing that's not cooperating). This thing is basically pulling image file
names from a db and creating individual thumbnails for them then needs to
update a selected image web browser (bigger) when they're clicked. It's
working perfectly for products that only have 1 image, but for those that
have more than 1 thumbnail it fires off the first click and resets the
document text for the selected image fine, but when the second one is
clicked it goes through the motions but never actually updates the document
text. I've tried it with and without a following .Refresh on the web
browser and with and without a .DocumentText = String.Empty before it tries
to update it. Is there something else that I need to do to make the
document text update?

TIA,
Jayyde
 
Maybe this will help and maybe it won't then lol. Basic form set up is a
panel of small thumbnails of products (100x100) with a slightly larger
thumbnail (180x180) spot over to the side that displays that slightly larger
image for whatever smaller thumbnail the user selects. The user can then
click to zoom the selected which just opens a new form where they can make
it as big as they want and save the picture locally if they want. (Note:
the context menus are turned on just so I can get to the view source to try
to figure out what the heck's going on--they won't be on release).

************** CODE ********************************

private void LoadProductImages(DataSet dsImages)
{
WebBrowser wb;
int i = 0;
int x = 0;

foreach (DataRow dr in dsImages.Tables[0].Rows)
{
i++;

wb = new WebBrowser();
pnlImages.Controls.Add(wb);

wb.Name = "webThumb" + i.ToString();
wb.AllowWebBrowserDrop = false;
wb.AllowNavigation = false;
wb.ScrollBarsEnabled = false;
wb.IsWebBrowserContextMenuEnabled = true;
wb.WebBrowserShortcutsEnabled = false;
wb.ObjectForScripting = this;
wb.ScriptErrorsSuppressed = true;
wb.DocumentText =
"<html><head><style>" +
"body,table,tr,td,img{margin:0px; padding:0px; display:inline;
vertical-align: bottom; }" +
"</style></head><body><center>" +
"<img src=\"" + cIMAGE_HOST +
dr[ProductImageDCSchema.FileName].ToString() + "\" " +
"height=\"100\" " +
"onclick=\"window.external.Thumbnail_Click('" +
dr[ProductImageDCSchema.FileName].ToString() + "')\">" +
"</center></body></html>";
wb.Size = new Size(100, 100);
wb.Location = new Point((x + 3), 3);
wb.Refresh();

x += 103;
}
}

public void Thumbnail_Click(string ImageFileName)
{
webSelectedImage.DocumentText = String.Empty;
mstrSelectedImageFileName = ImageFileName;
** webSelectedImage.DocumentText =
"<html><head><style>" +
"body,table,tr,td,img{margin:0px; padding:0px; display:inline;
vertical-align: bottom; }" +
"</style></head><body><center>" +
"<img src=\"" + cIMAGE_HOST + ImageFileName + "\" " +
"height=\"180\" " +
"onclick=\"window.external.SelectedImage_Click('" + ImageFileName +
"')\">" +
"</center></body></html>";
webSelectedImage.Refresh();
}

public void SelectedImage_Click(string ImageFileName)
{
if (webSelectedImage.DocumentText != String.Empty)
EnlargeImage();
else
MessageBox.Show("Please select an image to enlarge.");
}

****************************************************

It's on that **ed line where it gets messed up for some reason. The first
thumbnail that gets clicked sets it fine. When another one gets clicked it
sends ImageFileName ok, but the DocumentText doesn't actually save to the
new one. When I break point it and hover over it it's almost like it hasn't
refreshed. Freakishly, however, when I view source on the selected image
web browser all it has as its DocumentText is "<HTML></HTML> ".

I have no idea if any of that explains the situation better, but for my sake
I hope it does ;).
 
Eesh that's a lot of WebBrowsers... any reason you couldn't just lay out all
the thumbnails in one browser within a single HTML block? Or better, any
reason you can't do the bulk of this (presumably excluding EnlargeImage)
with a single DHTML page? Still, C# is a viable solution...

A quick (!) test shows that this concept generally works OK (i.e. with
multiple WebBrowsers all updating the DocumentText of another one).

My first suspicion would be that you html is malformed. Hard to tell without
looking at the final string; as a debugging aid, write the HTML to a
variable first, and either view it (break point) in a the HTML viewer, else
save it to the file system (e.g. File.WriteAllText() to a temp file), and
then inspect this file carefully. Or try loading it into a browser. See what
happens.

Personally, I don't really like inline HTML etc; you simply can't debug it
properly in this way. I tend to keep the HTML template in either a simple
text file (with token replacement), or build it via xslt (which makes it
easier to avoid "escaping" bugs). That said, it would be even less postable
if you had done it in a tidy way, so that isn't a dig! For all I know your
"real" code has the HTML off to one side...

Marc
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Google Images not working 11
File drag drop on web browser control 0
Click event with webbrowser control 3
Web Browser Control 2
Access 2013 Display weblink from row 0
Customize web browser control's scroll bar 0
Adding images to a listview 1
Custom Control Mouse Events 2

Back
Top