Question

I’m trying to accomplish the following in ASP.Net:

1. Create a WPF Canvas control
2. Spin up a WPF Image control and a BitmapImage object
3. Set the BitmapImage source to a Uri for an image
4. Add the image to the canvas
5. When the image is downloaded render the canvas to a new bitmap

My code works correctly in WPF itself, however when running in an ASP.Net page the image is not downloaded.

It works totally fine for other WPF UI elements. In the case of Image, using the BitmapImage.StreamSource property to set the source works correctly. When I use the BitmapImage.UriSource property the BitmapImage.DownloadCompleted event isn’t raised, which hints that the image never starts downloading in the first place.

It’s important to note that it works fine for most controls – ellipses, rectangles, ink presenters, and also the Image control so long as I use a stream source rather than a uri source.

So, what am I missing here? Why does the BitmapImage class behave differently in a web
application?

I know I’ll get asked so the purpose in doing this is that I have written a Silverlight client to create graphical content which is stored on a web server. I want the web server to render the content to bitmap files.

Thanks in advance for any advice..

Here’s my code for the ASP.Net page:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Windows.Controls;
using System.Windows.Media.Imaging;
using System.Threading;
using System.Windows;
using System.Net;
using System.IO;
using System.Windows.Media;

public partial class _Default : System.Web.UI.Page 
{
    private static Canvas c;
    protected void Page_Load(object sender, EventArgs e)
    {
        Thread t = new Thread(new ThreadStart(
            delegate { DownloadAndSave(); }));
        t.SetApartmentState(ApartmentState.STA);
        t.Start();
        t.Join();
    }

    [STAThread]
    void DownloadAndSave()
    {
        c = new Canvas();
        BitmapImage bitmap = new BitmapImage();
        System.Windows.Controls.Image image = new System.Windows.Controls.Image();

        bitmap.DownloadCompleted += new EventHandler(bitmap_DownloadCompleted);
        bitmap.BeginInit();
        bitmap.UriSource = new Uri("http://andrew.myhre.tanash.net/customassets/andrewmyhre/image/face.jpg");
        bitmap.EndInit();

        image.Source = bitmap;

        c.Children.Add(image);

        c.UpdateLayout();
        c.Measure(new Size(400, 300));
        c.Arrange(new Rect(new Size(400, 300)));
    }

    void bitmap_DownloadCompleted(object sender, EventArgs e)
    {
        // this never fires!!
        SaveImage(c);
    }

    void SaveImage(UIElement element)
    {
        RenderTargetBitmap bmp = new RenderTargetBitmap(400, 300, 96, 96, PixelFormats.Pbgra32);
        bmp.Render(element);
        BitmapEncoder encoder = new JpegBitmapEncoder();
        encoder.Frames.Add(BitmapFrame.Create(bmp));
        using (Stream stm = File.Create(Server.MapPath("~/file.jpg")))
            encoder.Save(stm);
    }
}

Answer 1

I think the DownloadCompleted event is never raised because BitmapImage loads asynchronously when you use the UriSource property which allows the background thread (DownloadAndSave method) to complete before the image is loaded.

What worked for me recently in an almost identical situation was to download the bitmap resource synchronously and set it with the BitmapImage.StreamSource property. Note when using that technique that you can’t close/dispose the stream until after you’ve rendered the RenderTargetBitmap.