Skip to content Skip to sidebar Skip to footer

WP8 - WebBrowser Control To Display Images From Resource Folder

I am working on WP8application, I have few images in location Resources\Graphics\ i am trying to display images from these folder, but its not picking the path. Here is my code : &

Solution 1:

I faced a similar issue when I tried to open images that have been saved to local storage. I could solve this by putting an HTML file at the same location so that I could access the files with "./filename.ext". It did not work with any of the resource path constructions that I used to access the local file within the webview.


Solution 2:

The only way to achieve this is by storing in the images and the dynamically generated Html content file in the Isolated storage of the application.

Go through this link for how to store the content in Isolated storage and display it using Web browser control: http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff431811(v=vs.105).aspx

Here you go, First of all store the images,which you want to show on the Html files into the Isolated storage of the application using the following method.

public static void CopyContentToIsolatedStorage(string file)
        {
            // Obtain the virtual store for the application.
            IsolatedStorageFile iso = IsolatedStorageFile.GetUserStoreForApplication();

            if (iso.FileExists(file))
                return;

            var fullDirectory = System.IO.Path.GetDirectoryName(file);
            if (!iso.DirectoryExists(fullDirectory))
                iso.CreateDirectory(fullDirectory);

            // Create a stream for the file in the installation folder.
            using (Stream input = Application.GetResourceStream(new Uri(file, UriKind.Relative)).Stream)
            {
                // Create a stream for the new file in isolated storage.
                using (IsolatedStorageFileStream output = iso.CreateFile(file))
                {
                    // Initialize the buffer.
                    byte[] readBuffer = new byte[4096];
                    int bytesRead = -1;

                    // Copy the file from the installation folder to isolated storage. 
                    while ((bytesRead = input.Read(readBuffer, 0, readBuffer.Length)) > 0)
                    {
                        output.Write(readBuffer, 0, bytesRead);
                    }
                }
            }

By calling the method as,

CopyContentToIsolatedStorage("Graphics/ImageName.png");//Pass the image folder path here

And then,form the Html dynamically like shown the below

StringBuilder HtmlString = new StringBuilder(@"<html><head><title>Test html File</title></head>");
HtmlString.Append(@"<body>");
HtmlString.Append(@"<img src=""Graphics/""@"+ ImageName + "/>");
HtmlString.Append(@"</body></html>");

And then save the Html file into Isolated Storage using the following code

var bytes = Encoding.UTF8.GetBytes(html.ToString());
using (IsolatedStorageFile iso = IsolatedStorageFile.GetUserStoreForApplication())
{
    using (IsolatedStorageFileStream output = iso.CreateFile("Testfile.html"))
    {
        output.Write(bytes, 0, bytes.Length);
    }
}

Now call that html file using your browser control like below,

WebBrowserControl.Navigate(new Uri("Testfile.html", UriKind.Relative));

Post a Comment for "WP8 - WebBrowser Control To Display Images From Resource Folder"