Silverlight 3 gets a similar capability to that introduce in WPF 3.5 Service Pack 1 – built-in and custom effects can now be applied to elements.

The UIElement class gets a new property called Effect which is of type Effect and there are two built-in effects named BlurEffect and DropShadowEffect which are pretty easy to use and understand. A couple of quick examples;

<UserControl
    x:Class="SilverlightApplication15.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400"
    Height="300">
    <Grid
        x:Name="LayoutRoot"
        Background="White">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition
                Height="Auto" />
        </Grid.RowDefinitions>
        <Button
            Content="Click Me"
            FontSize="48"
            Margin="20">
            <Button.Effect>
                <BlurEffect
                    x:Name="blur"
                    Radius="0"/>
            </Button.Effect>
        </Button>
        <Slider
            Grid.Row="1"
            Minimum="0"
            Maximum="10"
            MinWidth="384"
            Value="{Binding ElementName=blur,Path=Radius,Mode=TwoWay}"
            Margin="10" />
    </Grid>
</UserControl>

produces;

and, similarly,

<UserControl
    x:Class="SilverlightApplication15.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400"
    Height="300">
    <Grid
        x:Name="LayoutRoot"
        Background="White">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition
                Height="Auto" />
        </Grid.RowDefinitions>
        <Button
            Content="Click Me"
            FontSize="48"
            Margin="20">
            <Button.Effect>
                <DropShadowEffect
                    x:Name="drop"
                    Direction="0"
                    Color="Yellow"
                    BlurRadius="0"
                    ShadowDepth="1" />
            </Button.Effect>
        </Button>
        <StackPanel
            Grid.Row="1">
            <Slider
                Minimum="0"
                Maximum="10"
                MinWidth="384"
                Value="{Binding ElementName=drop,Path=ShadowDepth,Mode=TwoWay}"
                Margin="10" />
            <Slider
                Minimum="0"
                Maximum="10"
                MinWidth="384"
                Value="{Binding ElementName=drop,Path=BlurRadius,Mode=TwoWay}"
                Margin="10" />
            <Slider
                Minimum="-180"
                Maximum="180"
                MinWidth="384"
                Value="{Binding ElementName=drop,Path=Direction,Mode=TwoWay}"
                Margin="0" />
        </StackPanel>
    </Grid>
</UserControl>

can give us;

Beyond the built-in 2 effects, it’s also possible to write your own effects for Silverlight 3 and plug-them in to the system.

Effects are written as pixel-shaders using High Level Shader Language and run in software by the Silverlight plug-in – for an example of how to go about building one of these, have a look at this video which has a basic example in it.

You can download the code for this post here.

This is one of a series of posts taking a quick look at Silverlight 3 – expect them to be a little “rough and ready” and that they’ll get expanded on as I’ve had more time to work with Silverlight 3.