Transferring Photoshop to XAML

Since my end goal for the Drunktender WPF application is to have it mirror its Win32 application and then some, it has to have some nice glasses.  My friend Ian Hall built them out originally  for my using Photoshop.  This sounds painful, right?

With Expression Blend 3 Preview, I was able to quickly import and continue working with my files.  While the file was done in Photoshop, it used vectors and effects to create the end graphic.  I had to do some magic with the glass work due to the effects (I merged them into a smart object which basically is rasterized), but now I can quickly work with and modify my files in XAML. 

It is super easy to accomplish this by going to File->Import Adobe Photoshop File.


Then you’ll be prompted with a screen that looks like this.  You can see what you’ll get in Blend from your original file.  This is the screen where I realized I would have some issues due to the Photoshop effects on the glass work.  To toggle between what you had and will get, just click “Compatibility Layer”


And here is one of the glasses I got back in XAML.  Pretty nice eh?


Now that I have the objects in XAML, I have to do some Visual Studio work.  In my WPF project, I created 2 folders and copied in the png files and created XAML files.  As you can see, it is still a work in progress.


You also must make sure the output is copied else you won’t have access to this.


In my XAML file, I copied one of the glass’s xaml’s from Expression Blend to Visual studio then used a regular expression to strip out the names with the Find and Replace tool.  I used this x\:Name=\"[a-zA-Z0-9_]+\" to accomplish it.  I kept 2 names in for the color find / replace.  In addition to this, I had to put in some namespace foo in it as well.

<Canvas xmlns=""
   Width="153" Height="286">
  <!-- more stuff -->

For the glass image, I had to change tweak the location, since XAML is relative, this was painless.  And to load this in c#, I had to change my code slightly since I no longer needed a StringReader stream.

var element = (UIElement)XamlReader.Load(new FileStream("GlassXaml/XMLFile1.xaml", FileMode.Open));

Now since I know I have 1+ elements that I’ll want to change the color on, I need to change my prior way of finding an element.  Not happy about it but I implemented a naming structure way of doing.  If an element is named replaceColor, or replaceColor with a number after it sequentially, I’ll change the background color, else move on.  Now since I tend to forget stuff and may not check the code 6 months in the future for the numbering system, I have it check for both 0 and 1 before moving on.

Brush brush = new SolidColorBrush(getRandomColor());

if (DyanmicXamlLoad.Children.Count <= 0)

object element;
int i = -1;
	// need to check replaceColor, replaceColor0, replaceColor1, and replaceColor2, replaceColor3
	string objectName = string.Format("replaceColor{0}", (i < 0) ? "" : i.ToString());
	element = ((FrameworkElement)DyanmicXamlLoad.Children[DyanmicXamlLoad.Children.Count - 1]).FindName(objectName);

	if (element != null && element is Shape)
		((Shape)element).Fill = brush;
} while (element != null || i < 2 );

A dynamically loaded and background color changed whiskey glass.


Painless, right?  I think so as I did this all on an airplane with zero internet access so no google to assist me.

seo tampa Sep 24, 2009 @ 2:20 AM

# re: Transferring Photoshop to XAML
Thank you for the great tutorial. Even I can understand this.

Noah Nov 23, 2014 @ 4:53 AM

# re: Transferring Photoshop to XAML
I used to work in PS for a wide period, I'm still doing it. I can't call myself a digital artist, I don't paint myself glasses or smth, I just do things like wallpapers, logos.. Anyway, I should try to change it, do this too.

Cosmin Oloiu Jun 22, 2015 @ 3:33 AM

# re: Transferring Photoshop to XAML
Wow, i've been trying to do this for ages. I always had issues transforming photoshop to thw Web. Thanks a lot!

Post a Comment

Please add 4 and 1 and type the answer here: