Working with File Dialog box in Silverlight 2.0.

In this lab we will try to see OpenFileDialog class for Silverlight 2 application. OpenFileDialog class will all you to choose the files from Client. It can be used to upload the contents from client to server or you can do many things.

OpenFileDialog class gives you a very restricted access to client machine. So, it is secured.

So let’s start by

1) Creating a Silverlight 2.0 project by name “SLFileOpenDialogApplication” by using Visual Studio 2008.

2) Once you finished doing the same, open the same project by Expression Blend 2.0 and start designing the screen as shown bellow-

3) Write the Code as shown bellow-

<UserControl x:Class="SLFileOpenDialogApplication.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="640" Height="520">
    <Canvas x:Name="LayoutRoot" Background="Black">
        <Border Height="395" Width="590" Canvas.Left="25" Canvas.Top="35" 
Background="#FF000000" BorderBrush="#FFD1D448" BorderThickness="5,5,5,5" 
CornerRadius="10,10,10,10">
            <MediaElement Height="385" Width="580" Canvas.Left="25" Canvas.Top="35" 
Stretch="Fill" x:Name="MediaPlayer" Source="Bear.wmv" AutoPlay="False" />
        </Border>
        <Button Height="30" Width="50" Canvas.Left="119" Canvas.Top="434" 
Content="Play" x:Name="btnPlay" Click="btnPlay_Click"/>
        <Button Height="30" Width="50" Content="Pause" Canvas.Left="173" 
Canvas.Top="434" x:Name="btnPause" Click="btnPause_Click"/>
        <Button Height="30" Width="50" Content="Stop" Canvas.Left="477" 
Canvas.Top="434" x:Name="btnStop" Click="btnStop_Click"/>
        <Slider Height="29" Width="179.25" Canvas.Left="233.75" Canvas.Top="434" 
x:Name="ControlVolume" Maximum="100" ValueChanged="ControlVolume_ValueChanged"/>
        <TextBlock Height="18" Width="89.5" Canvas.Left="273.75" Canvas.Top="460" 
Text="Control Volume" TextWrapping="Wrap" Foreground="#FFFFFFFF"/>
        <Button Height="30" Width="50" Content="Mute" x:Name="btnMute" 
Canvas.Left="422" Canvas.Top="434" Click="btnMute_Click"/>
        <Button Height="30" Width="300" Content="Choose Your Video to Play !!" 
x:Name="btnChooseFile" Canvas.Left="173" Canvas.Top="480" FontWeight="Bold" 
FontFamily="Portable User Interface" FontStyle="Normal"/>
    </Canvas>
</UserControl>

4) Now, let’s start writing the code for Choosing “.WMV” file on the click event of the button “Choose Your Video to Play !!”. Before that let import the namespace System.IO;

FileInfo fileInfo;
private void btnChooseFile_Click(object sender, RoutedEventArgs e)
{
   OpenFileDialog openDialog = new OpenFileDialog()
   {
      Filter = "Media Wmv|*.wmv",
      Multiselect = false,
   };

   if (openDialog.ShowDialog() == true)
   {
      fileInfo = openDialog.File;
      MediaPlayer.SetSource(fileInfo.OpenRead());
   }
}

The above code will allow us to choose .WMV file and set it as a source for our media element.

5) Once you finished with this, let’s write the code for our “Play”, “Pause”, “Mute”, “Stop” buttons. and as well as write the code to control the volume as shown bellow-

private void btnPlay_Click(object sender, RoutedEventArgs e)
{
    MediaPlayer.Play();
}

private void btnPause_Click(object sender, RoutedEventArgs e)
{
    MediaPlayer.Pause();
}

private void btnStop_Click(object sender, RoutedEventArgs e)
{
    MediaPlayer.Stop();
}

private void ControlVolume_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    MediaPlayer.Volume = ControlVolume.Value;
}
bool flag = false;
private void btnMute_Click(object sender, RoutedEventArgs e)
{
    if (flag == false)
    {
        MediaPlayer.IsMuted = true;
        flag = true;
    }
    else
    {
        MediaPlayer.IsMuted = false;
        flag = false;
    }
}

6) That’s All !! Now Press F5 and see your own favourite videos on Silverlight applications !!

Now as you have completed writing the fifteenth Silverlight Lab, let’s have a closer look on sixteenth lab “Working with HttpAsyncUpload and HttpAsyncDownload.”

Working with Background Worker in Silverlight 2.0.

 

In this lab, we we try to work with Background worker class which plays a very important role for Silverlight application-

Background Worker class-: Any time consuming operation when you run on your User Interface, it makes your user interface non-responsive. For example, database transactions like bulk upload or insert Or any download from server side. In such cases if you want your User Interface Responsive along with long running process, BackgroundWorker class will be very much helpful.

So let’s start by

1) creating a new Silverlight application with the name “SLBackgroundWorker” by using Visual studio 2008.

2) Once you create the project, let’s open the same project by using Microsoft Expression Blend and start designing digital watch as shown bellow-

3) Once you finish the design, Expression Blend will generate the code as shown bellow-

<UserControl x:Class="SLBackgroundWorkerApplication.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

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

    Width="400" Height="300">
    <Canvas x:Name="LayoutRoot" Background="Black">
        <Button Content="Start Clock !!" x:Name="btnStartColoring" Height="50" 
Width="100" Canvas.Top="220" Canvas.Left="89" Click="btnStartColoring_Click"/>
        <Button Content="Stop Clock!!" x:Name="btnStopColoring" Height="50" 
Width="100" Canvas.Top="220" Canvas.Left="209" Click="btnStopColoring_Click"/>
        <Border Height="63" Width="384" Canvas.Left="8" Canvas.Top="18" 
BorderThickness="10,10,10,10">
            <Border.BorderBrush>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF595854"/>
                    <GradientStop Color="#FFDEC62A" Offset="1"/>
                </LinearGradientBrush>
            </Border.BorderBrush>
        </Border>
        <TextBlock Height="56" Width="108.969" Canvas.Left="19" Canvas.Top="16" 
Text="00H" TextWrapping="Wrap" Foreground="#FFFFFFFF" FontSize="48" 
HorizontalAlignment="Center" VerticalAlignment="Top" x:Name="txtHrs"/>
        <TextBlock Height="56" Width="101.938" Canvas.Left="127" Canvas.Top="16" 
Text="00M" TextWrapping="Wrap" Foreground="#FFFFFFFF" FontSize="48" 
HorizontalAlignment="Center" VerticalAlignment="Top" x:Name="txtMins"/>
        <TextBlock Height="56" Width="105" Canvas.Left="237" Canvas.Top="16" 
Text="00S" TextWrapping="Wrap" Foreground="#FFFFFFFF" FontSize="48" 
HorizontalAlignment="Center" VerticalAlignment="Top" x:Name="txtSecs"/>
    </Canvas>
</UserControl>

3) Now open the same project by Visual studio 2008 and write button click event for both of our buttons “Start Clock!!” and “Stop Clock!!”.

4) Now switch back to Page.xaml.cs file and import the namespace as shown bellow-

using System.ComponentModel;
using System.Threading;

5) Now write bellow code in Page.xaml.cs on “Start Clock!!” Button click event as shown bellow-

BackgroundWorker bgWorker;
 private void btnStartColoring_Click(object sender, RoutedEventArgs e)
 {
     bgWorker = new BackgroundWorker();
     bgWorker.DoWork += new DoWorkEventHandler(bgWorker_DoWork);
     bgWorker.ProgressChanged += new ProgressChangedEventHandler
(bgWorker_ProgressChanged);
     bgWorker.RunWorkerCompleted += new RunWorkerCompletedEventHandler
(bgWorker_RunWorkerCompleted);
     bgWorker.RunWorkerAsync();
     bgWorker.WorkerReportsProgress = true;
     bgWorker.WorkerSupportsCancellation = true;
 }

Background worker class will provide couple of methods, events and properties-

i) DoWork Event-: This event will get fired as soon as you give a call to RunWorkerAsync() method. This event will give a call to a method where you can start you time consuming work.

ii) When you start your work, it is a good practice to check whether the work which you have started is cancelled or not. To Support asynchronous cancellation, you will have to make WorkerSupportsCancellation property to True.

iii) ProgressChanges event will let you know the progress updates. For that you must set property called WorkerReportsProgress to True. It will get fired when you give a call to method “”.

6) Let’s write a code for DoWork Method as shown bellow-

void bgWorker_DoWork(object sender, DoWorkEventArgs e)
{
    int value = 0;
    while ((value < 60) && (!bgWorker.CancellationPending))
    {
    Thread.Sleep(1000);
    value++;
    bgWorker.ReportProgress(value);
    }
    if (bgWorker.CancellationPending)
    {
    e.Cancel = true;
    }
    if (value == 60)
    {
    value = 0;
    bgWorker_DoWork(sender, e);
}

7) Now, let’s declare few variables to show Seconds, Minutes and Hours as shown bellow and write a code for ProgressChanged Method-

static int min = 0;
static int hr = 0;
static int sec = 0;
void bgWorker_ProgressChanged(object sender, ProgressChangedEventArgs e)
{
    sec = e.ProgressPercentage;
    if (sec <= 9)
    {
    txtSecs.Text = "0" + e.ProgressPercentage.ToString() +"S";
    }
    else
    {
    txtSecs.Text = e.ProgressPercentage.ToString() + "S";
    }
            
    if (e.ProgressPercentage == 60)
    {
    min++;
    if (min <= 9)
    {
    txtMins.Text ="0"+ min.ToString() + "M";
    }
    else 
    {
    txtMins.Text = min.ToString() + "M";
    }
    sec = 0;
    }
    if (min == 60)
    {
    hr++;
    if (min <= 9)
    {
    txtMins.Text = "0" + min.ToString() + "H";
    }
    else
    {
    txtMins.Text = min.ToString() + "H";
    }
    min = 0;
    }
}

8) Now the last step, let’s write a code to cancel the Background worker thread on “Stop Clock!!” button click event as shown bellow-

private void btnStopColoring_Click
(object sender, RoutedEventArgs e)
{
    bgWorker.CancelAsync();
}

9) That’s All !! Hit F5 and see your Digital clock you can start as well as Stop as per your requirement !!

Now as you have completed writing the fourteenth Silverlight Lab, let’s have a closer look on fifteenth lab “Working with File Dialog box in Silverlight 2.0.”

Using Custom Types in XAML of Silverlight 2.0

In this lab, we we try to use “Custom Types” (Classes) in Silverlight XAML (Extensible Application Markup Language).

So, Let’s start by-

1) Creating Silverlight application called “SLUsingCustomTypesINXAML” using Visual Studio 2008.

2) Now, once you have created Silverlight application let’s add two Custom Types (Classes) as shown bellow-

i) Customers.cs-:

public class Customers
{
   public ObservableCollection<Customers>  CustomersList{ get; set; }
   public Customers()
   {
       CustomersList = new ObservableCollection<Customers>();
   }
   public string CustomerID { get; set; }
   public string CustomerName { get; set; }
}

ii) Orders.cs-:

public class Orders
{
   public ObservableCollection<Orders> MyOrdersList { get; set; }
   public Orders()
   {
       MyOrdersList = new ObservableCollection<Orders>();
   }
   public string OrderID { get; set; }
   public string CustomerID { get; set; }
   public string OrderDate { get; set; }
   public string RequiredDateTime { get; set; }
}

Imp. Note-: You must import System.Collections.ObjectModel namespace to get ObservableCollection.

ObservableCollection – This collection provides dynamic notifications you when the Item is add, removed or when the collection list is refreshed.

3) Now to access our custom types in Silverlight XAML code, you will have to import the name to <UserControl/> as shown bellow-

xmlns:localTypes="clr-namespace:SLUsingCustomTypesINXAML"

4) Now open Page.xaml and write down the bellow code-

<UserControl x:Class="SLUsingCustomTypesINXAML.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300"
    xmlns:localTypes="clr-namespace:SLUsingCustomTypesINXAML">
    <UserControl.Resources>
        <localTypes:Customers x:Key="myCustomers">
            <localTypes:Customers.CustomersList>
                <localTypes:Customers CustomerID="PRAV" 
CustomerName="Pravinkumar R. D."/>
                <localTypes:Customers CustomerID="YASH" 
CustomerName="Yash P. D."/>
                <localTypes:Customers CustomerID="PARI" 
CustomerName="Priti P. D."/>
            </localTypes:Customers.CustomersList>
        </localTypes:Customers>
        <localTypes:Orders x:Key="myCustomerOrders">
            <localTypes:Orders.MyOrdersList>
                <localTypes:Orders CustomerID="PRAV" OrderID="ORD1290" 
OrderDate="21/Oct/2009" RequiredDateTime="21/Oct/2009"/>
                <localTypes:Orders CustomerID="YASH" OrderID="ORD1290"

OrderDate="22/Sept/2009" RequiredDateTime="22/Sept/2009"/>
                <localTypes:Orders CustomerID="PARI" OrderID="ORD1290" 
OrderDate="06/Mar/2009" RequiredDateTime="22/Sept/2009"/>
                </localTypes:Orders.MyOrdersList>
           </localTypes:Orders>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="Black">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <ListBox DataContext="{StaticResource myCustomers}"
 ItemsSource="{Binding CustomersList}"
 Height="1170" Grid.Row="0" x:Name="CustList" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                     <StackPanel HorizontalAlignment="Left">
                        <TextBlock Text="{Binding CustomerID}" 
x:Name="txtCustomerID"/>
                        <TextBlock Text="{Binding CustomerName}"/>
                        <TextBlock Foreground="Black" 
Text="---------------------------------------"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <ListBox DataContext="{StaticResource myCustomerOrders}" 
ItemsSource="{Binding MyOrdersList}"
 Height="1170"   Grid.Column="1" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel HorizontalAlignment="Left">
                        <TextBlock Text="{Binding OrderID}" 
x:Name="CustomerID"/>
                        <TextBlock Text="{Binding OrderDate}"/>
                        <TextBlock Text="{Binding RequiredDateTime}"/>
                        <TextBlock Foreground="Black" 
Text="---------------------------------------"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</UserControl>

5) That’s all !! Hit F5 by making “SLUsingCustomTypesINXAMLTestPage.aspx” as a start up page and see your Custom Types output is working.

Now as you have completed writing the thirteenth Silverlight Lab, let’s have a closer look on fourteenth lab “Working with Background Worker in Silverlight 2.0.”

Creating and using Splash Screen in Silverlight 2.0.

 

In this lab, we will try out a “Splash Screen” screen. So, What is Splash Screen?

Splash Screen is a XAML (Extensible Application Markup Language) code, which will get splashed before downloading the .XAP file at client’s browser. Sometimes,if the .XAP file is bulky in size or end user’s bandwidth is poor, then downloading of .XAP always takes time. Till the time you can keep user entertained in various ways- For Example, You can play small animation or you can show download progress or show company Logo and many more !!

So, Let’s get started -

1) Create a Silverlight Project with the name SLSplashScreenApplication.

2) Once your project is created, let’s add a .MP3 or .WMV file into Silverlight project.

3) Then, bundle the same media file with .XAP file. You may have other contents also in your .XAP file as shown bellow - But for this Lab to make our .XAP file bulky in size, we are taking a media file.

Note-: Try to keep your .XAP file as small as you can.

4) I have taken a Sample Video “Taare Zameen Par.mp3” which I am deploying with .XAP file. ( I have renamed the file to Taare.mp3" )

5) Now, add a MediaElement into Page.xaml and then set Source property of the same to our MP3 song and make its AutoPlay property “True” as shown bellow-

<UserControl x:Class="SLSplashScreenApplication.Page"
    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="Black">
        <MediaElement x:Name="Bear" AutoPlay="True" Height="400"
 Width="600"  Source="/Taare.mp3"/>
    </Grid>
</UserControl>

6) Now add to add a SplashScreen int our application, right click to Web Site and add a XMLFile with name and extension as shown bellow-

7) Now add small Animation and a TextBlock in our SplashScreen.xaml file as shown in bellow code-

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
  <Grid.Resources>
    <Storyboard x:Name="Ani" RepeatBehavior="Forever" >
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
 Storyboard.TargetName="e2" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.9000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
Storyboard.TargetName="e4" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="1"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.9000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
Storyboard.TargetName="e5" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.9000000" Value="1"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
Storyboard.TargetName="e6" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.9000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="1"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
Storyboard.TargetName="e3" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="1"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.9000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
Storyboard.TargetName="e1" Storyboard.TargetProperty="(UIElement.Opacity)">
        <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.7000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.8000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:00.9000000" Value="0"/>
        <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
    </Storyboard>

  </Grid.Resources>
  <Grid.Background>
    <RadialGradientBrush>
      <GradientStop Color="#FF000000"/>
      <GradientStop Color="#FF2A2779" Offset="0.50400000810623169"/>
    </RadialGradientBrush>
  </Grid.Background>
  <TextBlock FontSize="20"  Foreground="Gold" Text="Show Progress !!" 
x:Name="txtProgress"/>
  <Ellipse HorizontalAlignment="Left" Margin="132,203,0,209" 
VerticalAlignment="Stretch" Width="79" Stroke="#FF000000" x:Name="e1">
    <Ellipse.Fill>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF000000"/>
        <GradientStop Color="#FF88C81E" Offset="1"/>
      </LinearGradientBrush>
    </Ellipse.Fill>
  </Ellipse>
  <Ellipse HorizontalAlignment="Left" Margin="226,212,0,218" 
VerticalAlignment="Stretch" Width="64" Stroke="#FF000000" x:Name="e2">
    <Ellipse.Fill>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF000000"/>
        <GradientStop Color="#FF88C81E" Offset="1"/>
      </LinearGradientBrush>
    </Ellipse.Fill>
  </Ellipse>
  <Ellipse HorizontalAlignment="Right" Margin="0,225,220,225" 
VerticalAlignment="Stretch" Stroke="#FF000000" Width="44" x:Name="e4">
    <Ellipse.Fill>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF000000"/>
        <GradientStop Color="#FF88C81E" Offset="1"/>
      </LinearGradientBrush>
    </Ellipse.Fill>
  </Ellipse>
  <Ellipse HorizontalAlignment="Right" Margin="0,230,170,230" 
VerticalAlignment="Stretch" Stroke="#FF000000" Width="34" x:Name="e5">
    <Ellipse.Fill>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF000000"/>
        <GradientStop Color="#FF88C81E" Offset="1"/>
      </LinearGradientBrush>
    </Ellipse.Fill>
  </Ellipse>
  <Ellipse HorizontalAlignment="Right" Margin="0,234,126,235" 
VerticalAlignment="Stretch" Stroke="#FF000000" Width="28" x:Name="e6">
    <Ellipse.Fill>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF000000"/>
        <GradientStop Color="#FF88C81E" Offset="1"/>
      </LinearGradientBrush>
    </Ellipse.Fill>
  </Ellipse>
  <Ellipse HorizontalAlignment="Stretch" Margin="305,220,278,217" 
VerticalAlignment="Stretch" Stroke="#FF000000" x:Name="e3">
    <Ellipse.Fill>
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF000000"/>
        <GradientStop Color="#FF88C81E" Offset="1"/>
      </LinearGradientBrush>
    </Ellipse.Fill>
  </Ellipse>
</Grid>

7) The code looks lengthy, but it is playing a small animation. It is Showing a big Ellipse and small,

small, small by hiding the previous one.

9) Now open “SLSplashScreenApplicationTestPage.html” Page and 

following two parameters into <object/> tag 

which is acting like a Silverlight container control-

<param name="splashscreensource" value="SplashScreen.xaml" />
<param name="onsourcedownloadprogresschanged"
 value="OnSourceDownloadProcressChanged" />

i) Give a SplashScreen.xaml file as a source to parameter named as splashscreensource.

ii) Second parameter will allow us to access the controls or resources which we are using in 

SplashScreen.xaml by using JavaScript function and do some dynamic, entertaining work like mentioned earlier.

iii) It will even allow us to track, download of .XAP file 

in percentage format which 

we can display in to our SplashScreen.xaml file.

10) So, now let’s write JavaScript function,

 which will display the download progress in percentage 

into the TextBlock which is there in 

SplashScreen.xaml and play the animation as well.

function OnSourceDownloadProcressChanged(sender, args)
{
    sender.findName("txtProgress").Text =
 "Download Progress is : [" + args.progress + "]";
    sender.findName("Ani").Begin();
}

11) That’s all !! Hit F5 by making “SLSplashScreenApplicationTestPage.html” as a start up page and see your splash screen is working.

Now as you have completed writing the twelve Silverlight Lab, let’s have a closer look on thirteenth lab “Using Custom Types in XAML.”