Graphics improvements in WPF 4.0

Layout Rounding

When object renders on screen, WPF calculates pixel position frequently so sometime it may lead to artifacts and it looks like blurry. So In WPF 4.0 Microsoft introduced UseLayoutRounding property on Framework Element. By setting this property to true on any framework element you can see clear rendering of an element. This feature was available in Silverlight2.  

<StackPanel Orientation="Horizontal">

    <Rectangle Fill="Red" Height="1" Width="100"

Margin="10" UseLayoutRounding="False"   />

    <Rectangle Fill="Red" Height="1" Width="100"

Margin="10" UseLayoutRounding="True" />

</StackPanel>

Output

You can see left rectangle is little blurred which has UseLayoutRounding = false while right rectangle is pretty much sharp because UseLayoutRounding property set to true.

Cached Composition

You can Cache a complex Visual Tree creation of your element as Bitmap so it can save rendering time. To apply this you need to set CacheMode=”BitmapCache” on your element. This will improve rendering performance of your element having complex Visual Tree.

<Path Data="M 10,20 l 15,0 l 5,-15 l5,15 l 15,0 l -10,10 l 4,15 l-15,-9 l -15,9 l 7,-15 Z" Stroke="Blue" StrokeThickness="2" />

<Path Data="M 10,20 l 15,0 l 5,-15 l5,15 l 15,0 l -10,10 l 4,15 l-15,-9 l -15,9 l 7,-15 Z" Stroke="Blue" StrokeThickness="2">

   <Path.RenderTransform>

      <ScaleTransform ScaleX="5" ScaleY="5" />

   </Path.RenderTransform>

</Path>

<Path Data="M 10,20 l 15,0 l 5,-15 l5,15 l 15,0 l -10,10 l 4,15 l-15,-9 l -15,9 l 7,-15 Z" Stroke="Blue" StrokeThickness="2" 

CacheMode="BitmapCache" >

   <Path.RenderTransform>

      <ScaleTransform ScaleX="5" ScaleY="5" />

   </Path.RenderTransform>

</Path>

First output shows normal Star. In second image you can see Star scales 5 times and in third image you can see star is showing blurry because BitmapCache is enabled. When you set CacheMode=”BitmapCache” than your element loads as Bitmap image instead of Vector image. So it looks like bit blurry when you enlarge it. 


This feature is really helpful when an element has complex Visual Tree taking too much time to render.

Pixel Shader

Shader effects was first introduced in WPF 3.5 SP1 and supports Pixel Shader version 2 but now in WPF 4.0 you can add Pixel Shader 3.0 effect in your application.

Please check out below links to read more about Pixel Shader and tools

http://wpffx.codeplex.com/
http://shazzam-tool.com/

http://msdn.microsoft.com/en-us/library/system.windows.media.effects.shadereffect.aspx