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.

4 comments:

  1. The problem with the DropShadowEffect is when you set the opacity of your object to 0.5 you will see the dropshadow behind it instead of not, like with the outer glow effect. :(

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. The main motive of the Big Data Solutions Developer is to spread the knowledge so that they can give more big data engineers to the world.

    ReplyDelete

Type based templating

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