| Comments

I saw a note on Twitter come through yesterday about building pixel shaders for Silverlight in Visual Studio.  The question, from @blamborn was:

Does anyone know if there is a Shader Effects BuildTask like the #WPF one here http://bit.ly/gCkNT only for #Silverlight?

I replied that you can use the same build task and thought I had written my work around on how to do that, but apparently I never clicked published somewhere along the line.  I recall doing some work for this for a presentation a while back on VSLive and started to write it up.  Here are hopefully some helpful knowledge around the subject.

Option 1: Compiling using DirectX Libraries

One option you can do is to use a pre-build command for your project in combination with the DirectX SDK.  What you really need out of the DirectX SDK is a tool called fxc.exe.  This is a compiler for the HLSL code for the pixel shader code you write.  The download is 500MB.  Yeah, big.  Once you have it installed you can put a pre-build command on your Visual Studio project with something like this:

   1: "C:\Program Files (x86)\Microsoft DirectX SDK (March 2009)\Utilities\bin\x86\fcx.exe" 
   2:     /T ps_2_0 /Fo "$(ProjectDir)ShaderEffect1.ps" "$(ProjectDir)ShaderEffect1.fx"

Now keep in mind your installation directory might be different, but you should get the gist of it.  The result of this command is that you’ll get a <Filename>.ps file that you will include in your project.  The .ps file, in fact, *IS* your pixel shader…that’s really the only thing your Silverlight project cares about!  The build command doesn’t automatically make it a part of your project though, so you’ll have to ensure that after it builds you use the “show all files” feature in Visual Studio and include it in your project.

Option 2: Using a build task

Another option is to use a build task in your project.  For Windows Presentation Foundation (WPF) developers, this is what is easiest and doesn’t require the massive 500MB download.  What is cool is that we can use the same build task for Silverlight.  Awesome right?  Well, yes and no.

It’s awesome that it works.  What is not awesome is the setup.  Allow me to walk you through my steps.  It’s a bit of hackery admittedly.  If anyone is a super Visual Studio extensibility wizard and wants to contribute knowledge to me on extending it to my liking, I’ll send you a virual Mt. Dew!  Here’s my steps otherwise.

Install the WPF Build tasks!!!  You can get them from here (Shader Effects Build Task and Templates).  Run the installer.  These steps assume you have them already!!!  You don’t need the templates, but if you want you can install them too – they are for WPF.  You’ll install my template as the next step.

1. Get the VS template I created for Silverlight Pixel Shaders.

I created an item template for Silverlight projects so that you can do Add Item…Silverlight Pixel Shader to your project.  Once you have this installed (just double-click on the VSI and follow the steps) you will see that option.

The template provides you with the right files that get added as well as follows the requirement for a pixel shader being a resource in your project.  You’ll notice after you add the item (let’s say you kept the default name) that the code will show:

   1: static ShaderEffect1()
   2: {
   3:     _pixelShader.UriSource = new Uri("/SilverlightApplication29;component/ShaderEffect1.ps", UriKind.Relative);
   4: }

This is the best practice for a pixel shader.  Note that my project name is SilverlightApplication29, but the template will use your projects name, of course.

2. Hackery 1: Open the **proj file for your Silverlight application in a text editor like notepad.

Yes, I know.  You are cursing me now.  I agree, if the tool (VS) is awesome why do I have to do this step?  I’ve been trying to understand myself how an item template can actually do all these things for you…again, if you are an extensibility expert, let me know!  But for now, bear with me.

In the **proj file (csproj or vbproj) add the following information right after the Import node in the file:

   1: <ItemGroup Condition="'$(BuildingInsideVisualStudio)'=='true'">
   2:     <AvailableItemName Include="Effect" />
   3:   </ItemGroup>
   4:   <UsingTask TaskName="ShaderBuildTask.PixelShaderCompile" AssemblyName="ShaderBuildTask, Version=1.0.3072.18169, Culture=neutral, PublicKeyToken=44e467d1687af125" />
   5:   <Target Name="EffectCompile" Condition="'@(Effect)' != '' ">
   6:     <PixelShaderCompile Sources="@(Effect)">
   7:       <Output TaskParameter="Outputs" ItemName="Resource" />
   8:     </PixelShaderCompile>
   9:   </Target>
  10:   <PropertyGroup>
  11:     <!-- Add effect compilation to the PrepareResourcesDependsOn so that the effect fx  get compiled before resources are collected -->
  12:     <PrepareResourcesDependsOn>EffectCompile;$(PrepareResourcesDependsOn)</PrepareResourcesDependsOn>
  13:   </PropertyGroup>

These properties enable you to see the “Effect” build task in the properties for your .fx files in the project.  Save the proj file and go back to Visual Studio.  You should be prompted to reload – go for it.  You may see a file named Effect with a warning icon on it.  For now, ignore it.  It’s admittedly an artifact of this hackery.  It will look like this:

Project solution explorer

Now that you have both of these steps you can add a new pixel shader (using my template of course).

3. Change the .fx file’s properties to Build Action: Effect.

Once you have added a shader library (using my template) to the project, select the .fx file (which is your HLSL code) and look at the properties dialog for the file.  Change the build action to the new item Effect.

Build action property

Build your project.

4. Hackery 2: Refresh the view all files and add to project

After the build, refresh the view all files feature and you should see your .ps file.  Right click on that and say Include in Project.  It should be included as a Resource build action automatically, but if it isn’t, make sure it is.

That’s it (as I say with a snarky smile).  I know it seems like some hacking….and it is.  But if you don’t want to download the DirectX SDK, you can still re-use the WPF build taks with a little project file modification.

If you don’t have a clue what a pixel shader is, check out this video.

Hope this helps!

| Comments

I’ve received a few emails about updated code for the Scott Guthrie MIX09 keynote demo referred to as “bouncing plane” Silverlight demo.  A screenshot of this demo is seen here to refresh your memory:

Bouncing plane Silverlight demo

There really isn’t anything ‘new’ about this demo code for SL3, other than being recompiled.  Perhaps the only real change is to accommodate the new requirement that pixel shaders are resources of the project.  You’ll see the Effect1.cs code file where the constructor code for the shaders uses:

   1: pixelShader = new PixelShader();
   2: pixelShader.UriSource = new Uri("/BouncingPlane;component/ShaderBytecode/Ripple.fx.ps", UriKind.Relative);

If you are writing shaders, I’d refer you to my post talking which has some Visual Studio code snippets and item templates so you can say Add New Item…Silverlight Pixel Shader and get the appropriate stub code already there for you!

Here’s the Visual Studio project for Silverlight 3 for the bouncing plane demonstration: BouncingPlane_SL3.zip.

UPDATE: Hosting a demo of it (minus the video, so you'll get an error if you choose video) here: Bouncing Plane Silverlight Demo.

| Comments

For things that aren’t a part of the Visual Studio tools (yet) and things that help me move faster in my development, I like to take advantage of the power of Visual Studio’s templates and snippets capabilities.  I’ve created a few and modified a few of others that I use regularly.  I’ve shown them in a few presentations and thought I’d package them up in a single bundle for your convenience if you choose to use them.  I was going to package Robby’s snippets up as well, but didn’t think he’d appreciate that…you should get his Silverlight snippets as well (and he’s packaged them in a VS community installer also).

Here’s the ones that I have in my package right now:

  • FloatableWindow item template – this is from my adaptation of ChildWindow.  You’ll of course need the binary for this to make any sense as well.
  • Silverlight Pixel Shader item template – adapted from the WPF template, with making the minor adjustments needed by default to make it work in one shot.
  • ResourceDictionary item template – using Nick Kramer’s base for adding stand alone ResourceDictionary files to your project (to take advantage of the merged resource feature in Silverlight 3).
  • Cross-domain policy file item template – rapidly add one just like you would web.config.  You still have to set the desired security – I chose not to imply one for you :-)
  • Cross-domain policy code snippet – this actually goes along with the policy file (or replacement) which is a VS code snippet template if you want to just use that instead

I’m sure I’ll add more over time and package it in this update but for now this is what I could pull together.  Sorry the package isn’t signed as a verified publisher…if I could figure out how to do that I would have tried :-).  You can download them here: SilverlightVSHelpers_1.vsi.  Oh and yes, they are for Visual Basic and C#.

Hope this helps!

This work is licensed under a Creative Commons Attribution By license.