Converting and customizing XAML to PNG with server-side WPF

One Tweet by Oliver Sturm (http://twitter.com/olivers) the other day got me to thinking. He was asking about the possibility to host graphics for a web site in XAML format, and the best way to render it.

Read the rest of this entry »

Print | posted on Friday, October 10, 2008 12:48 AM

Feedback

# re: Converting and customizing XAML to PNG with server-side WPF

left by Jeremiah Morrill at 10/10/2008 3:21 AM Gravatar
This is really cool Laurent! You said that it won't work in IIS right now. Do you think if you set the IIS service option "Allow to interact with the desktop" option will work? I had issues in creating hWnds under IIS in the past and I *think* this fixed it (It's been a while).

-Jer

# re: Converting and customizing XAML to PNG with server-side WPF

left by russ at 10/10/2008 6:07 AM Gravatar
hi Laurent, cool article. have you had a look @ the memory consumption on your IIS box? I've been working on a project doing something v. similar: We ended up abandoning this approach and displaying everything in Silverlight - because memory would quickly run out on the server. our WPF did refer to JPG files, so I'm pretty sure that's were the memory leak was.. when I have time I'll grab your source code and see how the memory looks with our XAML - would be VERY nice if I can end up using it.

# re: Converting and customizing XAML to PNG with server-side WPF

left by Laurent at 10/10/2008 4:30 PM Gravatar
@Jer: I am having issues with IIS in general on this box. Our IT department apparently restricted my usage of it without notice. Investigating. On my ISP (discountASP.NET), I get other errors indicating that some codecs DLLs cannot be found. I will check that when I have more time.

@Russ: As you can see this is still pretty rough and need some honing. I didn't run the code in IIS yet, as explained just above. I will investigate more when I can and I'll make sure to post updates. In the mean time, feel free to use the code, I would love it if you can use it. Cheers!

# re: Converting and customizing XAML to PNG with server-side WPF

left by Chris Cavanagh at 10/16/2008 7:58 PM Gravatar
Here's something that might help (or save some typing): http://chriscavanagh.wordpress.com/2008/02/15/wpf-skinning-your-websites/

There's an assembly in there called "XamlCapture". I've not tried using it under IIS, but in theory it should work (unless there are partial/full trust issues). As far as threading goes, I'd say the simplest solution is just maintain a static dictionary of images. Use a ReaderWriterLockSlim around any access to the dictionary; if images don't currently exist, upgrade to a writer lock and generate them. Unless I'm missing something, it shouldn't matter which thread you create and use your WPF elements on (as long as you don't share them between threads). The end result is just a dictionary of byte[] content you can share for all requests...

# re: Converting and customizing XAML to PNG with server-side WPF

left by Laurent at 10/16/2008 8:27 PM Gravatar
Hey Chris,

Thanks for the feedback. In fact I had seen your blog entry about XamlCapture. I wrote my own stuff because I like to play with code :) As you can read here, I am having issues with it on IIS at the moment, so I will definitely test with your library. I am just a bit too busy right now but it's high on my list.

Thanks!
Laurent

# re: Converting and customizing XAML to PNG with server-side WPF

left by Josh Smith at 10/21/2008 10:05 PM Gravatar
Nice solution! Thanks for sharing it.

Josh

# re: Converting and customizing XAML to PNG with server-side WPF

left by Charles at 10/23/2008 1:02 AM Gravatar
Rendering out vector to PNG was something we desperately wanted for our Flash files when we developed www.dudefactory.com (now messdudes.com). In the end we just saved out all the SWFs as PNGs from Flash and composited them all using .NET.

If Silverlight had been around then we'd have done it all in XAML for sure.

# Issue with IIS7 and .net framework 3.5 sp1

left by Bryan Livingston at 11/10/2008 6:49 PM Gravatar
This will break with .net framework 3.5 sp1.

See: http://forums.asp.net/t/1299963.aspx

# re: Converting and customizing XAML to PNG with server-side WPF

left by Laurent at 11/10/2008 7:13 PM Gravatar
Hey Bryan,

Thanks for pointing the thread to me. I am also having issues running this on IIS, but I never had time to look further into this (with PDC and my book being just published, my plate was quite full). I will contact David Teitlebaum and follow up. We met at PDC and he seems a very knowledgeable (and nice) fellow.

I'll follow up on my blog.

Cheers,
Laurent

# re: Converting and customizing XAML to PNG with server-side WPF

left by slyi at 1/12/2009 6:42 PM Gravatar
Fix avaialble on
http://www.microsoft.com/downloads/details.aspx?familyid=b9de7937-2c12-4f16-ad66-a31b83931953&displaylang=en

Could this be used in silverlight screenshoting but i was think a little different approach, would this be more performent?

1. Use http://silverlightcontrib.org/ xamlwriter or VisualTreeHelper (since the xaml is not directly serializable) to send the client xaml back to the server
2. On the server create a winform WebBrowser object and add a silverlight object control and inject posted xaml
3. Take a screenshot of the result and send back to client

Of course you would need have the correct <base href=””> on the server side based silverlight page etc…

# re: Converting and customizing XAML to PNG with server-side WPF

left by Johnson at 2/5/2009 5:06 PM Gravatar
Hi:

How about in the xaml string you embed a rotated image, how you get the image also shows up when converting xaml to png.

# re: Converting and customizing XAML to PNG with server-side WPF

left by Bruce Pierson at 3/17/2009 11:04 PM Gravatar
Here's a much simpler way to get a System.Windows.Media.Color from a string (in your WpfUtility class, MakeColor method):

TypeConverter tc = TypeDescriptor.GetConverter(typeof(System.Windows.Media.Color));
return tc.ConvertFromString(colorNameOrCode);


# re: Converting and customizing XAML to PNG with server-side WPF

left by Laurent at 3/23/2009 2:08 PM Gravatar
Very nice trick, thanks Bruce.

Every day we learn new things :) You are my new thing for the day LOL

# re: Converting and customizing XAML to PNG with server-side WPF

left by Sasha at 4/30/2009 1:12 AM Gravatar
Thanks for good article!

I used your ideas for Silverlight -> XAML -> WPF -> PNG printing.

# re: Converting and customizing XAML to PNG with server-side WPF

left by Tatiana at 5/19/2010 9:54 AM Gravatar
I have a valid XAML call tarea.xaml but It doesnt work only shows XXXX description here is the code

---------------------------------------------------
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Canvas Width="auto" Height="auto" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<TextBlock Text="XXXXXXX" Width="125" Height="37.5" Padding="38,16,1,0">
<TextBlock.Background>
<VisualBrush>
<VisualBrush.Visual>
<Rectangle Width="125" Height="37.5" Stroke="#FF000000" RadiusX="20" RadiusY="20" Canvas.Left="262.5" Canvas.Top="525">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFFFF" Offset="0" />
<GradientStop Color="DodgerBlue" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</VisualBrush.Visual>
</VisualBrush>
</TextBlock.Background>
</TextBlock>

</Canvas>
-----------------------------------------------------
I don´t know why
I would apreciate your help

# re: Converting and customizing XAML to PNG with server-side WPF

left by Damian Powell at 9/20/2011 3:05 PM Gravatar
This is a really neat piece of code. Nice one, Laurent.

# re: Converting and customizing XAML to PNG with server-side WPF

left by Neil Barnwell at 9/22/2011 2:28 PM Gravatar
Hey Laurent - this is excellent stuff and I'm in the process of trying it out at the moment. The only thing is, binding expressions in the xaml don't seem to be invoked. If I put the FrameworkElement I get back from XamlReader.Load() into a container on a WPF window it all works fine, but using your code above to render straight to a png does not seem to invoke the bindings properly. Is there something I can do to force this to happen?

# re: Converting and customizing XAML to PNG with server-side WPF

left by Neil Barnwell at 9/22/2011 3:53 PM Gravatar
Hi again!

I just wanted to post an update to mention that I think I've worked out a solution. I posted a question on stackoverflow and then posted my own answer when I worked it out for myself shortly thereafter. Here's the link in case it's of interest:

http://stackoverflow.com/questions/7515360/wpf-xaml-bindings-seemingly-not-applied-to-dynamically-loaded-xaml

# re: Converting and customizing XAML to PNG with server-side WPF

left by Mark Foreman at 11/16/2011 11:35 PM Gravatar
Laurent, your code is fantastic, though we've been plagued by massive unmanaged memory leaks. Turns out that the rendering needs to run on a Dispatcher thread. Check out Josh Twist's post about it here:

http://www.thejoyofcode.com/Generating_images_using_WPF_on_the_Server.aspx

The also include a call to UpdateLayout(), which enables binding support (thanks Neil!), and they have slightly simplified the implementation of RenderToBitmap (no image brush needed).

# re: Converting and customizing XAML to PNG with server-side WPF

left by Laurent at 11/20/2011 7:34 PM Gravatar
Hey Mark,

Thanks! Happy you found a use for it (and a solution to the leaks). It was pretty much experimental code for me, so I didn't investigate much deeper :)

Cheers,
Laurent

# re: Converting and customizing XAML to PNG with server-side WPF

left by Dirkster99 at 7/19/2012 10:23 AM Gravatar
I took your code and used it in a command line tool that solves some of the to dos you mentioned above. Please leave a comment on the code project web-site site.

# re: Converting and customizing XAML to PNG with server-side WPF

left by David Egli at 2/9/2013 8:39 PM Gravatar
We've implemented a tool for VisualStudio that implements all this and more, initially based on the code posted by Chris Cavanagh above.
The tool can create images, animated gifs, PDF's, html image maps from xaml, svg & photoshop, upon project build, or on the fly in ASP.NET through an HttpHandler. You can even include xaml markup in an aspx page, and render it as an image in the page.

Greetings & Blessings,

David Egli

# re: Converting and customizing XAML to PNG with server-side WPF

left by David Egli at 2/9/2013 8:40 PM Gravatar
Uups, forgto to say, the tool is at xamlimageconverter.codeplex.com
Comments have been closed on this topic.