Sliverlight Pixel Effect

Sliverlight 3 has some built-in graphical effect and custom graphical effect. To have this graphical effect , add an image to the project. This is the source image for the rest of the basic image processing application

We add some rows in the UI. By adding rows with height 80% and with 20%. To the first row we out some image and a slider on the second row. The code looks as below

<UserControl x:Class="SilverlightPixelEffect.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
                    Height="4*"/>
            <RowDefinition
                    Height="*"/>
        </Grid.RowDefinitions>
        <Image Source="radio.jpg" 
                   Stretch="Fill"
                   Margin="24"/>
        <Slider Grid.Row="1" 
                MinWidth="192" 
                HorizontalAlignment="Center"/>
        

    </Grid>
</UserControl>

The output will like this on the browser

We can start apply the effect the the entire UI or to the image alone. We start applying the effect to the image. And this is get effect by the slider change on the UI. Thus there is some addition to the slider control.

These is a new way of data binding in Silverlight3. This is something like UI to UIbinding. Below is the snap of changed code

<Image Source="radio.jpg" 
                   Stretch="Fill"
                   Margin="24">
            <Image.Effect>
                <BlurEffect Radius="0"
                            x:Name="MyBlur"/>
            </Image.Effect>
        </Image>
            
        <Slider Grid.Row="1" 
                Minimum="0"
                Maximum="10"
                Value="{Binding ElementName=MyBlur,Path=Radius,Mode=TwoWay}"
                MinWidth="192" 
                HorizontalAlignment="Center"/>

The output is below. You can notice that as the slider bar moves to the right, the image is getting more blured. s

One feature of this is , we can assign only one effect to one element. That means we have only Image.Effect not Image.Effects.To get effected on more than once UI controls, we need keep all those in a container (Border). And we can assing new effects to the Border. Snap of code below

 <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition
                    Height="4*"/>
            <RowDefinition
                    Height="*"/>
            </Grid.RowDefinitions>
        <Border Margin="24">
            <Border.Effect>
                <DropShadowEffect 
                    x:Name="MyShadow"
                    ShadowDepth="0"/>
            </Border.Effect>
        <Image Source="radio.jpg" 
                   Stretch="Fill">
            <Image.Effect>
                <BlurEffect Radius="0"
                            x:Name="MyBlur"/>
            </Image.Effect>
        </Image>
         </Border>
        <StackPanel Grid.Row="1">
            <Slider 
                Minimum="0"
                Maximum="10"
                Value="{Binding ElementName=MyBlur,Path=Radius,Mode=TwoWay}"
                MinWidth="192" 
                HorizontalAlignment="Center"/>
            
            <Slider 
                Minimum="0"
                Maximum="10"
                Value="{Binding ElementName=MyShadow,Path=ShadowDepth,Mode=TwoWay}"
                MinWidth="192" 
                HorizontalAlignment="Center"/>
        </StackPanel>
    </Grid>

The output will like this. It is pretty easy to use the built-in effects.

We can use images and any controls for getting this effect. See the code snap change below. We have added a new button control. We added a new Grid control which has the previous image and the button control. We have moved the Effect to the Grid level, since we need to have the effects to both the controls

            <Grid>
                <Grid.Effect>
                    <BlurEffect Radius="0"
                     x:Name="MyBlur"/>
                </Grid.Effect>
                <Image Source="radio.jpg" 
                   Stretch="Fill">
                </Image>
                <Button Content="HelloWorld" FontSize="24"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"/>
            </Grid>

The output images looks as below.

We can also go ahead and build our own effects. This is the quite powerful aspects of the framework. To work with this we need to have Direct.X SDK installed in our machine.

Reference Articles