Silverlight

In Silverlight objects can be animated by applying animation to their individual properties like path, color etc. A typical animation using sequence of images can also be achieved as demonstrated in the code below. We will rotate 5 images to create illusion of moving cartoon characters.

<UserControl x:Class=”eMantraNet.Sample1.MainPage”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″
xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
mc:Ignorable=”d”
d:DesignHeight=”100″ d:DesignWidth=”500″ Width=”500″ Height=”100″>

<UserControl.Resources>
<Storyboard x:Name=”sbAnimateImage”>

<DoubleAnimationUsingKeyFrames
Storyboard.TargetName=”animImg”
Storyboard.TargetProperty=”(Canvas.Left)”
RepeatBehavior=”Forever” AutoReverse=”False”>
<DiscreteDoubleKeyFrame Value=”0″ KeyTime=”0:0:0.0″ />
<DiscreteDoubleKeyFrame Value=”40″ KeyTime=”0:0:0.4″ />
<DiscreteDoubleKeyFrame Value=”80″ KeyTime=”0:0:0.8″ />
<DiscreteDoubleKeyFrame Value=”120″ KeyTime=”0:0:1.2″ />
<DiscreteDoubleKeyFrame Value=”160″ KeyTime=”0:0:1.6″ />
<DiscreteDoubleKeyFrame Value=”200″ KeyTime=”0:0:2.0″ />
<DiscreteDoubleKeyFrame Value=”240″ KeyTime=”0:0:2.4″ />
<DiscreteDoubleKeyFrame Value=”240″ KeyTime=”0:0:2.8″ />
<DiscreteDoubleKeyFrame Value=”240″ KeyTime=”0:0:3.8″ />
</DoubleAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames RepeatBehavior=”Forever” AutoReverse=”False”
Storyboard.TargetName=”animImg”
Storyboard.TargetProperty=”Source”>
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime=”0:0:0.0″>
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource=”Resources/Pic0.png”/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime=”0:0:0.4″>
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource=”Resources/Pic1.png”/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime=”0:0:0.8″>
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource=”Resources/Pic2.png”/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime=”0:0:1.2″>
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource=”Resources/Pic3.png”/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime=”0:0:1.6″>
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource=”Resources/Pic4.png”/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime=”0:0:2.0″>
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource=”Resources/Pic5.png”/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime=”0:0:2.4″>
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource=”Resources/Pic0.png”/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime=”0:0:2.8″>
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource=”Resources/Pixel.png”/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime=”0:0:3.8″>
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource=”Resources/Pixel.png”/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>

</Storyboard>
</UserControl.Resources>

<Grid x:Name=”LayoutRoot” >
<Canvas>
<Image Canvas.Left=”0″ x:Name=”animImg” Width=”304″
HorizontalAlignment=”Center” VerticalAlignment=”Center”
Source=”Resources/Pic0.png”>
</Image>
</Canvas>
</Grid>
</UserControl>

Add the line below in the class to start animation

 this.sbAnimateImage.Begin();

That was all we needed to do to create this cute animation and now we can add some bubble dialogues to make our little movie If you prefer you can add your voice in stead of bubble dialogues.

A lot of times there is a requirement to introduce some delay before an action can be taken. We will see how can we introduce a pause in Silverlight.

void Wait()
{
BackgroundWorker worker = new BackgroundWorker();
worker.RunWorkerCompleted += Worker_RunWorkerCompleted;
worker.DoWork += Worker_Sleep;
worker.RunWorkerAsync();
}

void Worker_Sleep(object sender, DoWorkEventArgs e)
{
Thread.Sleep(1000); // Sleep the background thread for 1 sec
}

void Worker_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
{

// You can write code here for the action which is to be taken after the

// delay
}

In order to introduce glow effect all we need to do is to use DropShadowEffect with ShadowDepth set to zero. For ex. let us look at the code below for a Rectangle.

<Rectangle Height=”100″ Width=”100″  Stroke=”PeachPuff” RadiusX=”5″ RadiusY=”5″  StrokeThickness=”3″ x:Name=”Rect1″ Opacity=”1.0″>
<Rectangle.Effect>
<DropShadowEffect BlurRadius=”20″
Color=”LightBlue”
Opacity=”1″
ShadowDepth=”0″
Direction=”0″ />
</Rectangle.Effect>
</Rectangle>

Notice Opacity set to 1.0.  In order to change the glow effect you need to set opacity value to zer0 which will remove the glow effect (see below)

So how do we set the Opacity value to zero programmatically? Well, one line of code is all we need.

Rect1.Effect.SetValue(DropShadowEffect.OpacityProperty, 0.0);

You want to turn it back on, set the value to 1.

Rect1.Effect.SetValue(DropShadowEffect.OpacityProperty, 1.0);

With Silverlight it is possible to create Bitmap images which gives us the option to generate Captcha images to validate input from a human being. Generating Captcha is a two step process

1. Generate Captcha code
2. Create Image to display the code

We will see a very basic example of Captcha code generation and validation here. The source code can be downloaded from here

In order to generate Captcha code we will randomly select chars from an array which will contain all allowed characters to be shown in the Captcha code.

 char[] charArray =
“ABCDEFGHIJKLMNPQRSTUVWXYZ12346789″.ToCharArray();

char[] captcha = new char[6];
for (int i = 0; i < captcha.Length; i++)
{
captcha[i] = charArray[random.Next(charArray.Length)];
}
CaptchaCode = new string(captcha);

Next step would be to generate a Bitmap image to be shown to the users

private WriteableBitmap GenerateBitmap()
{
// Capcha code textblock to render to a bitmap
TextBlock t = new TextBlock();
t.Height = 25;
t.Width = 60;
t.Text = this.CaptchaCode;
t.FontSize = 12;
t.Padding = new Thickness(5, 5, 5, 5);
t.Foreground = new SolidColorBrush(Colors.White);

// Create bitmap
WriteableBitmap bitmap = new WriteableBitmap(60, 25);
SkewTransform tr = new SkewTransform() { AngleX = -5, AngleY = -10 };
bitmap.Render(t, tr);

// invalidate the bitmap to render it
bitmap.Invalidate();
return bitmap;
}

Once we have the Bitmap image it can be assigned to an Image control in your XAML as shown below

 <Border Height=”30″ Grid.Column=”0″ Grid.Row=”1″  Background=”#FFAD4343″ Opacity=”1.0″ VerticalAlignment=”Center” HorizontalAlignment=”Center”>
<Image VerticalAlignment=”Bottom”  x:Name=”ImgCapcha” Height=”25″></Image>
</Border>

Users will be required to enter the code in a text box and the code will be validated using a button click (SEE PICTURE).

 <TextBox Grid.Row=”3″ Width=”100″ Height=”25″ x:Name=”EnteredCode”></TextBox>
<Button x:Name=”BtnSubmit” Grid.Row=”4″ Width=”40″ Height=”25″ Content=”OK” Click=”BtnSubmit_Click”></Button>

In the Silverlight control Captcha code can be initialized and validated as shown below

public partial class MainPage : UserControl
{
CaptchaCodeHandler c;

public MainPage()
{
InitializeComponent();
}

private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
{
LoadCaptchaCode();
}

private void LoadCaptchaCode()
{
c = new CaptchaCodeHandler();
ImgCapcha.Source = c.CaptchaImage;
}

private void BtnSubmit_Click(object sender, RoutedEventArgs e)
{
if (c.ValidateCaptchaCode(EnteredCode.Text))
{
System.Windows.Browser.HtmlPage.Window.Alert(“Correct code entered”);
}
else
{
System.Windows.Browser.HtmlPage.Window.Alert(“Wrong code entered. Enter next code”);
LoadCaptchaCode();
}
}
}

If you have issues loading your Silverlight controls and it does not give any clue on possible error, you should check IIS settings to see if MIME type is configured correctly for Silverlight. IIS 6 does not have this configuration and you would have to add MIME type manually in IIS.

Click on MIME Types and register a new MIME type as shown

For higher IIS versions check whether or not this is already available in the list of configured MIME types.