Come on, Feel the Noize–adding noise to your WPF applications

Humans live in an analogue world, where even the most uniform-looking things display some variation in color. Subtle gradients are one type of color variation typically seen on ‘real-world’ objects, and are well understood in software UIs (to the point of abuse). Real-world objects also often exhibit variations in color caused by the texture (sometimes these are quite striking). When we see an image like the one below we immediately know how this particular object would feel to touch, how soft it would be and maybe even how it would smell.


In contrast with all this things in the digital world are often much flatter and less visually interesting, without any of the suggestion of texture and the associations they bring. Complex textures (like leather) are usually best achieved with photos of real-world objects, but increasingly subtle use of digital noise is being used to create a little bit of visual variation to otherwise flat UIs.




So how can I use this in my WPF application?

The simplest way to add noise to your WPF applications has been to create a ‘noisy’ texture using an imaging program like Photoshop, the GIMP or Paint.NET, and use it as an image source to an ImageBrush in WPF. If you’re working with a visual designer this is probably what they’ll do. One pretty common trick here is to make the noise image almost completely transparent – it can then be layered over the top of gradients and the like to create more complicated visual effects which would otherwise need to be created as a single large bitmap. This technique can be seen in ‘SimpleNoise’ sample application in the download. An ImageBrush is defined like so, using a ‘noise’ PNG image that has been created with the GIMP added as a Resource to the project as the ImageSource:

<ImageBrush x:Key="noise" ImageSource="noise.png" TileMode="Tile" Viewport="0,0 128,128" ViewportUnits="Absolute" />

When overlaid on a dark gradient the following dark and slightly noisy background is created. In the sample shown a small amount of noise has also been added to background of the light block of text in the middle.


Programmers do it in code

If you’re a developer your Photoshop muscles may be weak or non-existent. Also the ‘static’ approach has a number of drawbacks. Textures that look good over dark backgrounds will not work well with light ones, or textures created for one color may not suit another. Each texture you add increases the size of your application, and if your application needs to support a number of themes or dynamic color schemes it can become a bit of a pain to generate multiple ‘noise’ image. For these reasons I created a programmatic means of creating noisy textures in a WPF application, allowing the developer to specify the different colors to be used, and the frequency with which they should appear. This can be seen in the ‘ComeOnFeelTheNoize’ project in the download. Once again an ImageBrush is used over the top of an object with a dark gradient as the background. This time however the ImageSource for the brush is bound to another resource called NoiseGenerator:

<n:NoiseGenerator x:Key="background_noise" Size="128">
        <n:ColorFrequency Color="#33222222" Frequency="30" />
        <n:ColorFrequency Color="#3300A500" Frequency="1" />
        <n:ColorFrequency Color="#55E0E0E0" Frequency="15" />
        <n:ColorFrequency Color="#33666666" Frequency="15" />
<ImageBrush ImageSource="{Binding Source={StaticResource background_noise}, Path=NoiseImage}" x:Key="noise" TileMode="Tile" ViewportUnits="Absolute" Viewport="0,0 128,128" />

Once again, when the noisy ImageBrush is overlaid on a dark gradient a very similar dark and slightly noisy background is created. The NoiseGenerator has also been used to create a noisy background for the light block of text in the middle.


The NoiseGenerator uses a very simplistic algorithm to generate the noise image. One enhancement would be to implement alternate ‘noise’ algorithms which can suggest materials of a different ‘’texture’ to the eye.

Alternative Approaches

Aside from the super-simple approach of creating an ‘noise’ image file using an image editing tool there are a few other approaches to getting programmatic noise. One alternative approach would be to add noise via a pixel-shader.

So finally, everyone..this time with feeling! Come on, feel the noize.

Leather image courtesy of smig44_uk


Great post. Here’s a more modern twist to that great song!

2/03/2011 1:28:38 PM
Pingback from

Dew Drop – March 2, 2011 | Alvin Ashcraft's Morning Dew

2/03/2011 10:46:58 PM
Hey, looks interesting idea. Can you please clarify if the same is doable in Silverlight ?

many thanks!

3/03/2011 9:39:13 AM
Joseph Cooney
Since the ImageBrush in Silverlight doesn’t support tiling doing this in silverlight won’t be a direct port. You could do it however with silverlight’s writeablebitmap, and just create a noise image as large as you need.
3/03/2011 12:15:37 PM
Microsoft Weblogs
Windows Client Developer Roundup 062 for 3/7/2011

This is Windows Client Developer Roundup #62. The Windows Client Developer Roundup aggregates information

7/03/2011 6:52:54 PM
We got the noise–WPF-Effekt

Bin gerade auf einen schönen WPF-Effekt zur Erzeugung von Noise bzw. Rauschen gekommen, den man immer

8/03/2011 7:05:28 AM
Pingback from

Windows Client Developer Roundup 062 for 3/7/2011 · All About Computer

9/03/2011 1:31:06 AM
Andy Stumpp
Wow, that looks really great!
16/03/2011 6:55:14 AM
Erno de Weerd
Adding Noise Using a WPF Shader Effect

Inspired by this post I decided to try and create a noise effect to make it easier to add some noise

7/08/2011 12:41:37 PM
Pingback from

Adding Noise Using a WPF Shader Effect | WP7 Developers Links

8/08/2011 3:26:18 PM
Subtle Texture Patterns suitable for backgrounds in your WPF application

Subtle Texture Patterns suitable for backgrounds in your WPF application

11/10/2011 3:12:12 PM