Question

I’m relatively new to C# and .Net, and this is my first WPF project, so I’m hoping this is just a case of lack of familiarity and weak Google-Fu on my part.

I need to create a preview window for an HTML5 development tool. The pages will contain javascript, ogg vorbis and/or mpeg4 (m4a) audio, and png images.

The Frame control seems to work fine for viewing the file. I initially tried the WebBrowser control, but it seems to be based on IE7, which doesn’t support the functionality I need. Frame seems to use the installed IE9, which is what I need. The problem seems to be in loading the content.

I can get it to work if the page is hosted on an Apache-based web server, but that is definitely not the preferred solution. Professional web developers aren’t the target audience, so I feel it’s unreasonable to expect the users to be able to install and configure one. I’ve tried to implement a bare-bones server using HttpListener, but (a) it doesn’t seem to work any better than just setting the Frame Source=”C:/test_project_path/index.html” directly, and (b) I don’t want to create any problems if a user already has a web server running on their machine. I’ve had issues with “conflicts with existing registration” exceptions when trying to add the prefix — even though I have no other web server installed, let alone running, and I verified that nothing else is using the same port — which makes me hesitant to rely on it.

What I’d really like to be able to do is:

myFrame.Navigate("C:/test_project_path/index.html");

This almost works. I seem to get the graphical elements, but the javascript application crashes with a “Unable to get value of property: object is null or undefined” error. Since, as I said, it works when served from Apache, it seems that the issue is that not all of the javascript files are loading properly.

My questions:

Are there any settings that I’m missing? I get a security warning about active content, which I have to click through. I’d like to get rid of that, but it isn’t my main concern right now if it doesn’t directly relate to my current problem.

Is there some way to check whether the Frame control is doing all the necessary subrequests to load the page, and that they’re being fulfilled? Putting a watch on myFrame, I can only see the initial page (index.html). There doesn’t seem to be a way to tell if the various sub-elements are there other than what myFrame renders and the javascript errors I get.

Do I need to invoke the javascript files with InvokeScript(), or is that just for accessing functionality from a WPF control?

Answer 1

Edit: A more general solution can be found here: http://forums.devshed.com/net-development-87/serving-images-using-httplistener-414552.html
It seems to work for all the file types I’m dealing with.

It seems the problem was in the way the server was encoding non-text files for the output stream. I was doing it this way, which is more or less how it’s done in most of the examples I found online:

StreamReader streamReader = new StreamReader(requestUrl);
byte[] buffer = Encoding.UTF8.GetBytes(streamReader.ReadToEnd());
response.ContentLength64 = buffer.Length;
response.OutputStream.Write(buffer, 0, buffer.Length);
response.OutputStream.Close();

This works fine for text files, such as html and javascript, but for images it seemed to be throwing in a bunch of extra junk, basically doubling the file size. The solution was to read in the image as an image, then save that to the output stream:

Image image1 = Image.FromFile(requestUrl);
image1.Save(response.OutputStream, System.Drawing.Imaging.ImageFormat.Png);
response.OutputStream.Close();

Obviously, you’d need to change the ImageFormat to handle whatever image types you want to serve. This works for PNGs, and I suspect the solution for sound files is similar, though I haven’t worked that out yet.