Monday, March 18, 2013

Alternative to OuterGlow BitmapEffect in WPF 4.0

WPF 4.0 has removed support for Bitmap effects as the are software rendered and cause performance issues. No alternatives are provided for these bitmap effects. I had to work on finding out alternative for OuterGlowEffect and I ended up tweaking DropShadowEffect to achieve this.

To start with I tried Obsolete Bitmap effect just to see if they work with warning or something. So below is what I wrote:

<TextBlock Text="Outer glow effect demo" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center">
     <TextBlock.BitmapEffect>
           <OuterGlowBitmapEffect GlowColor="Red" ></OuterGlowBitmapEffect>
     </TextBlock.BitmapEffect>
</<TextBlock>
The app run fine but no effect got applied. WPF 4.0 just ignores these bitmap effects.


If ShadowDepth is set to zero and BlurRadius is set to around 30 for DropShadowEffect it seems to gives a bit of glow around the control but its not quite a match for OuterGlowBitmapEffect.

<TextBlock Text="Outer glow effect demo" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center">
      <TextBlock.Effect>
         <DropShadowEffect BlurRadius="30" Opacity="1" ShadowDepth="0" Color="Red"></DropShadowEffect>
      </TextBlock.Effect>
</TextBlock>



I actually got stuck at this until found the trick to make it a lot closer to OuterGlowBitmapEffect. I put the Textblock inside a grid and applied the same on the grid but still not quite there, so I repeated the same once more and it started looking very much Like an OuterGlowBitmapEffect. Below is the xaml and screenshot of how it looks after this.

       <Grid>
        <Grid.Resources>
            <DropShadowEffect x:Key="glowEffect" BlurRadius="30" Opacity="1" ShadowDepth="0" Color="Red"></DropShadowEffect>
        </Grid.Resources>
        <Grid Effect="{StaticResource glowEffect}">
            <Grid Effect="{StaticResource glowEffect}">
                <TextBlock Text="Outer glow effect demo" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Center" Effect="{StaticResource glowEffect}"/>
            </Grid>
        </Grid>
    </Grid>

I hope this will be helpful to anyone looking for alternative to OuterGlowBitmapEffect.

Type based templating

            <DataTemplate DataType="{x:Type vm:SampleViewModel}">                 <DataTemplate.Resources>       ...