ARTICLE

Bitmap Effects in WPF and XAML

Posted by Raj Kumar Articles | WPF using VB.NET February 09, 2009
This article shows how to give Bitmap Effects to a control or image in WPF and XAML.
 
Reader Level:

WPF (Windows Presentation Foundation) has five special visual effects built in to the System.Windows.Media.Effects namespace that can be applied to any UIElement, DrawingGroup and ViewPort3DVisualCovered.

Bitmap effects enable designers and developers to apply visual effects to rendered Microsoft Windows Presentation Foundation (WPF) content. For example, bitmap effects allow you to easily apply a DropShadowBitmapEffect effect or a blur effect to an image or a button. The unmanaged APIs provide an extensible framework for independent hardware vendors (IHVs) to develop custom effects to use in WPF applications.

Bitmap effects (IMILBitmapEffect object) are simple pixel processing operations. A bitmap effect takes a IWICBitmapSource Interface as an input and produces a new IWICBitmapSource Interface after applying the effect, such as a blur or drop shadow.

To apply a bitmap effect to a relevant object simply set its BitmapEffect property to an instance of one of the BitmapEffect derived classes. 

This below code adds three Buttons in XAML and applies three different bitmap effects on them - Bevel, drop shadow, and outer glow.

<Window x:Class="Bitmap_Effects.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Window1" Height="300" Width="300">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition></RowDefinition>

            <RowDefinition></RowDefinition>

            <RowDefinition></RowDefinition>

        </Grid.RowDefinitions>       

        <Grid.ColumnDefinitions>

            <ColumnDefinition></ColumnDefinition>

        </Grid.ColumnDefinitions>

       

        <!--this is button1 -->       

        <Button Grid.Row="0" Grid.Column="0" Height="30" Width="200" FontWeight="Bold" FontFamily="Verdana">

            Raj Beniwal

            <Button.BitmapEffect>

                <BevelBitmapEffect></BevelBitmapEffect>               

            </Button.BitmapEffect>

        </Button>

 

        <!--this is button2 -->

        <Button Height="30" Width="200" Grid.Row="1" Grid.Column="0" FontWeight="Bold" FontFamily="Verdana">

                Raj Beniwal

            <Button.BitmapEffect>   

                <BitmapEffectGroup>

                <OuterGlowBitmapEffect></OuterGlowBitmapEffect>

                <OuterGlowBitmapEffect></OuterGlowBitmapEffect>

                <OuterGlowBitmapEffect></OuterGlowBitmapEffect>

                <DropShadowBitmapEffect></DropShadowBitmapEffect>               

                <BevelBitmapEffect></BevelBitmapEffect>

                </BitmapEffectGroup>

            </Button.BitmapEffect>

        </Button>

       

        <!--this is button3 -->

        <Button Height="30" Width="200" Grid.Row="2" Grid.Column="0" FontWeight="Bold" FontFamily="Verdana">

            Raj Beniwal

            <Button.BitmapEffect>

                <BitmapEffectGroup>

                    <DropShadowBitmapEffect></DropShadowBitmapEffect>

                    <DropShadowBitmapEffect></DropShadowBitmapEffect>

                    <DropShadowBitmapEffect></DropShadowBitmapEffect>

                    <DropShadowBitmapEffect></DropShadowBitmapEffect>                   

                </BitmapEffectGroup>

            </Button.BitmapEffect>

        </Button>

    </Grid>

</Window>

 

The output of all three buttons looks like below. As you can see from the below image, all three buttons have three different bitmat effects.

Figure 1.

Bitmap Effects on Images

Not only the controls available in XAML and WPF, we can also apply these bitmap effects on images. The following code snippet applies bitmap effect on an Image control using Image.BitmapEffect.

<Window x:Class="Bitmap_Effects.Window2"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Window2" Height="300" Width="300">

    <Grid>

        <Image Source="Raj 059.JPG" Height="200" Width="200">

            <Image.BitmapEffect>

                <BitmapEffectGroup>

                <BevelBitmapEffect></BevelBitmapEffect>                   

                <DropShadowBitmapEffect></DropShadowBitmapEffect>

                <DropShadowBitmapEffect></DropShadowBitmapEffect>               

                </BitmapEffectGroup>               

            </Image.BitmapEffect>

        </Image>

    </Grid>

</Window> 

 

The image with drop shadow effect looks like Figure 2.

 

 

 

Figure 2.

 

Similar to the above samples, you can pretty much apply these bitmat effects on any WPF control as long as it supports it.

 

Login to add your contents and source code to this article
share this article :
post comment
 
Become a Sponsor
PREMIUM SPONSORS
  • ceTE software specializes in components for dynamic PDF generation and manipulation. The DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and new content to existing PDF documents from within your applications. Visit DynamicPDF here
    Get 2 Months Free of ASP.NET Hosting for Only $4.95/month! Receive FREE MS SQL and MySQL Databases Including ASP.NET 4/3.5, MVC 3.0, Silverlight 4, Windows 2008/IIS 7.0 Plus FREE IIS 7 Modules. Host UNLIMITED ASP.NET Web Sites - Click Here!
Become a Sponsor