Do Less Get More

Working with File Dialog box in Silverlight 2.0.

noreply@blogger.com (Pravinkumar) — Mon, 25 May 2009 06:53:00 +0000

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.

noreply@blogger.com (Pravinkumar) — Mon, 25 May 2009 06:48:00 +0000

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

noreply@blogger.com (Pravinkumar) — Mon, 25 May 2009 06:38:00 +0000

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.

noreply@blogger.com (Pravinkumar) — Mon, 25 May 2009 05:55:00 +0000

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.”

Querying data From Collection using LINQ and Silverlight 2.0.

noreply@blogger.com (Pravinkumar) — Mon, 25 May 2009 05:50:00 +0000

In this lab, we will try to see LINQ (Language Integrated Query). If you are already familiar with LINQ, That will be added advantage here !!

LINQ has different flavours-

1) LINQ to Objects.

2) LINQ to Data. (LINQ to Dataset, LINQ to SQL, LINQ to Entity).

3) LINQ to XML.

If you ask me about LINQ, I will say “I LOVE LINQ” especially when I work with XLINQ.

Any ways, that’s my thinking !!

This demo is will show you how to Query to the objects. So, Let’s get started -

Note-: We will see XLINQ as well in future-

1) Create Silverlight project by the name SLLinqApplication.

2) Add a new class in Silverlight project by the name “Customers.cs” and code as shown bellow-

public class Customers
{
   public string CustomerName { get; set; }
   public string City { get; set; }
}

3) Now let’s design the screen as bellow-

4) Code is as follows-

<UserControl x:Class="SLLinqLab.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="150">
    <Canvas x:Name="LayoutRoot" Background="Black">
        <StackPanel Orientation="Horizontal" Canvas.Top="5">
        <TextBlock FontSize="10" Foreground="White" Text="Choose Operation - " Canvas.Left="10" Canvas.Top="10"/>
        <ComboBox x:Name="ChooseOperation" Width="150">
            <TextBlock Text="Where City Equal To"/>
            <TextBlock Text="Where City Not Equal To"/>
            <TextBlock Text="Where City Contains "/>
            <TextBlock Text="Where City Not Contain"/>
        </ComboBox>
            <TextBox x:Name="txtValue" Margin="0,0,0,0"  Width="150"/>
        </StackPanel>
        <Button Content="Show Result" Click="Button_Click" Canvas.Top="30"/>
        <StackPanel Orientation="Horizontal" Canvas.Top="70">
        <TextBlock FontSize="10" Foreground="White" 
Text="See All Customers - " Canvas.Left="0"/>
            <ComboBox x:Name="SeeCustomers" 
Width="150" ItemsSource="{Binding CustomerName}">
                
            </ComboBox>
        </StackPanel>

    </Canvas>
</UserControl>

5) Now let’s create Collection to add multiple customers as follows-

public Page()
{
   InitializeComponent();
   this.Loaded += new RoutedEventHandler(Page_Loaded);
}
List<Customers> custList;
void Page_Loaded(object sender, RoutedEventArgs e)
{
    custList = new List<Customers>()
    {
        new Customers(){CustomerName="AAA",City="Pune"},
        new Customers(){CustomerName="BBB",City="Pune"},
        new Customers(){CustomerName="CCC",City="Mumbai"},
        new Customers(){CustomerName="DDD",City="Mumbai"},
        new Customers(){CustomerName="EEE",City="Hydrabad"},
        new Customers(){CustomerName="FFF",City="Bangalore"}
      };
}

6) Now let’s write code on “Show Result” button click event-

private void Button_Click(object sender, RoutedEventArgs e)
{
    switch (ChooseOperation.SelectedIndex)
    {
        case 0:
             var query1 = from customer in custList
                          where customer.City.Equals(txtValue.Text)
                          select new Customers { CustomerName=customer.CustomerName};
             SeeCustomers.DisplayMemberPath = "CustomerName";
             SeeCustomers.ItemsSource = query1.ToList();

         break;
         case 1:
              var query2 = from customer in custList
                           where  !customer.City.Equals(txtValue.Text)
                           select new Customers { CustomerName = customer.CustomerName };
              SeeCustomers.DisplayMemberPath = "CustomerName";
              SeeCustomers.ItemsSource = query2.ToList();

          break;
          case 2:
              var query3 = from customer in custList
                           where customer.City.Contains(txtValue.Text)
                           select new Customers { CustomerName = customer.CustomerName };
             SeeCustomers.DisplayMemberPath = "CustomerName";
             SeeCustomers.ItemsSource = query3.ToList();
          break;
          case 3:
             var query4 = from customer in custList
                           where !customer.City.Contains(txtValue.Text)
                           select new Customers { CustomerName = customer.CustomerName };
             SeeCustomers.DisplayMemberPath = "CustomerName";
             SeeCustomers.ItemsSource = query4.ToList();

           break;
     }
 }

7)

That’s all !! you are done with the assignment !!

Now as you have completed writing the eleventh Silverlight Lab, let’s have a closer look on twelve lab “Creating and using Splash Screen in Silverlight 2.0.”

Consuming WCF Services in Silverlight 2.0.

noreply@blogger.com (Pravinkumar) — Wed, 20 May 2009 12:59:00 +0000

In this lab, we will try to Consume WCF Service in Silverlight application. In this Lab we will try to see different topics like-

1) WCF (Windows Communication Foundation).

2) LINQ (Language Integrated Query).

3) ADO.NET Entity Framework.

Note-: I am planning to do lab manuals for above specified topics also in future.

Well, all above topics are out of scope from our Silverlight 2.0 lab manuals. But if necessary I will give an introduction for each one.

So, let’s start first of all writing WCF Service-

Before that let’s have a introduction about WCF. I will try to explain only one question Why WCF?

To explain Why WCF? let’s take a closer look at a table given bellow-

I found this in one of the article written by -

1) Create a WCF Application by the name “SLWCFService” as shown bellow-

2) Once you are ready with the service, delete the bellow files which are already exists under WCF Project-

i) IService.cs.

ii) Service.svc.

3) Right click to WCF project and add new item “WCF Service” with the name “WCFCustomerService.svc” as shown bellow-

4) Now as we are finished adding WCF Service, let’s Add “ADO.NET Entity Data Model” by the name “CustomerORM.edmx” as shown bellow-

Note-: You must have .NET framework 3.5 SP1 installed before adding this new item.

5) You will see a wizard. Complete the steps as bellow-

i) Generate from Database.

ii) Choose the Connection String and save it in Web.config file.

iii) Make a choice of table in which you are interested. I am making a choice of the same table from Customers Database “CustomerInformation”.

6) So, What is Entity Data Model?

It is nothing but Entity Relationship Model Model used to define Types or structures and map the relationship between them.

7) Now, Let’s start writing WCF Service. Open IWCFCustomerService.cs file which is WCF Contract and write following [OperationContact].

[OperationContract]
string InsertCustomer(string CustomerID, string CustomerName, 
string Address, int ContactNo, string City);

8) Next step is, open WCFCustomerService.svc.cs file. Remove the existing code from the class and implement the Interface within the class as bellow-

public class WCFCustomerService : 
IWCFCustomerService
{
#region IWCFCustomerService Members
public string 
InsertCustomer(string CustomerID, string CustomerName, 
string Address, int ContactNo, string City)
{
throw new 
NotImplementedException();
}
#endregion
}

9) So Let’s write a code to add the customer record in our CustomerInformation table using WCF Service-

public string InsertCustomer(string CustomerID, string CustomerName,
string Address, int ContactNo, string City)
{
   CustomersEntities edmContext = new CustomersEntities();
   edmContext.AddToCustomerInformation(new CustomerInformation()
   {
       CustomerID = CustomerID,
       CustomerName = CustomerName,
       Address = Address,
       ContactNo = ContactNo,
       City = City
    });
    int i = edmContext.SaveChanges();
    if (i > 0)
       return "Customer Information stored successfully !!";
    else
       return "Not Successful ???";
}

10) Now the Most Important. You need to make a small change with Binding in Web.Config file. Because Silverlight 2.0 does not support wsHttpBinding, you will have to change it to basicHttpBinding.

First in Web.Config file find <system.serviceModel> section. Then find the Endpoint like bellow-

<endpoint address="" binding="wsHttpBinding" 
contract="WCFCustomerService.IWCFCustomerService">

And Change it to bellow-

<endpoint address="" binding="basicHttpBinding" 
contract="WCFCustomerService.IWCFCustomerService">

12) Now as you have made the changes into Web.Config file, Make a copy of clientaccesspolicy.xml Or crossdomain.xml which we had seen in last demo into root folder of WCF Service.

13) Now let’s test it. Right click to “WCFCustomService.svc” and view in browser. You will see browser instance with link to see WSDL.

14) Now Let’s design the screen to enter the Customer Information using Silverlight application like bellow-

<UserControl 
x:Class="CustomerSLApplication.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" 
Height="350">
<Grid x:Name="LayoutRoot" 
Background="Black">
<StackPanel 
Orientation="Vertical">
<StackPanel 
Orientation="Horizontal">
<TextBlock Text="CustomerID" Margin="10" 
Foreground="White"/>
<TextBox x:Name="CustID" Margin="38,10,0,10" 
Width="200"/>
</StackPanel>
<StackPanel 
Orientation="Horizontal">
<TextBlock Text="Customer Name" Margin="10" 
Foreground="White"/>
<TextBox x:Name="CustName" Margin="13,10,0,10" 
Width="200"/>
</StackPanel>
<StackPanel 
Orientation="Horizontal">
<TextBlock Text="Address" Margin="10" 
Foreground="White"/>
<TextBox x:Name="CustAddress" Margin="57,10,0,10" 
Width="200"/>
</StackPanel>
<StackPanel 
Orientation="Horizontal">
<TextBlock Text="Contact No." Margin="10" 
Foreground="White"/>
<TextBox x:Name="CustContNo" Margin="35,10,0,10" 
Width="200"/>
</StackPanel>
<StackPanel 
Orientation="Horizontal">
<TextBlock Text="City" Margin="10" 
Foreground="White"/>
<TextBox x:Name="CustCity" Margin="77,10,0,10" 
Width="200"/>
</StackPanel>
<StackPanel 
Orientation="Horizontal">
<Button Content="Clear" Width="100" 
x:Name="btnClear" Click="btnClear_Click" Margin="20" 
Foreground="Purple"/>
<Button Content="Insert Data" Margin="20" 
x:Name="btnInsert" Click="btnInsert_Click" Width="150" 
Foreground="Purple"/>
</StackPanel>
<StackPanel 
Orientation="Horizontal">
<TextBlock x:Name="Notification" Margin="20" 
Foreground="White" 
Text="Notification"/>
</StackPanel>
</StackPanel>
</Grid>
</UserControl>

15) Now let’s write the code to access the WCF Service and insert our Customer details into the database.

16) Add WCF service reference to Silverlight project and write a code on Click event of “Insert Data” button as follows-

WCFClientProxy.Service1Client proxy = new 
CustomerSLApplication.WCFClientProxy.Service1Client();
private void btnInsert_Click(object sender, 
RoutedEventArgs e)
{
  proxy.InsertCustomerCompleted += 
  new EventHandler<CustomerSLApplication.WCFClientProxy.
  InsertCustomerCompletedEventArgs>
  (proxy_InsertCustomerCompleted);
  proxy.InsertCustomerAsync(CustID.Text, CustName.Text,
  CustAddress.Text, int.Parse(CustContNo.Text), CustCity.Text);
}
void proxy_InsertCustomerCompleted(object sender,
CustomerSLApplication.WCFClientProxy.InsertCustomerCompletedEventArgs e)
{
   Notification.Text = e.Result;
}

17) Now hit F5 !! Test your application, and see the notification as bellow-

18) For “Clear” button click event write following code-

private void btnClear_Click(object sender, RoutedEventArgs e)
{
   CustID.Text = "";
   CustName.Text = "";
   CustAddress.Text = "";
   CustContNo.Text = "";
   CustCity.Text = "";
   CustID.Focus();
}

19) That’s all !! you are done with the assignment !!

Now as you have completed writing the tenth Silverlight Lab, let’s have a closer look on eleventh lab “Querying data from Collection using LINQ and Silverlight 2.0.”

Consuming Web Services in Silverlight 2.0.

noreply@blogger.com (Pravinkumar) — Wed, 20 May 2009 12:54:00 +0000

In this lab, we will try to Consume Web Service in Silverlight application. But, I don’t want to do a lab for “Hello World” kind of Web Service. So, let’s create something good.

First, let’s write a Web Service which will insert a record in the database. For this demonstration I will be using a database called “Customers” which is already there with my SQL Express named instance installed on my machine.

This database contains a table called CustomerInformation with following attributes-

CustomerID	VARCHAR(5)
CustomerName	VARCHAR(20)
Address	VARCHAR(30)
ContactNo	INT
City	VARCHAR(20)

So, Let’s start writing web service.

1) Open Visual Studio 2008 and create a new Web site and make a choice of ASP.NET Web Service Template from template window. Make a language choice as per your convenience. I am using C#. Make sure that you will be creating a web service at http://localhost location as shown bellow-

2) Once you have successfully created the Web Service, Add a new item into Web Service project called “Web Service” by the Name “CustomerInformation.asmx”.

3) In the code file of CustomerInformation service add following “Web Method”.

Note –: Make sure you will be changing the Connection String and table name as per your implementation!!

[WebMethod]
public string InsertCustomerInformation(string CustomerID,string CustomerName,
string Address,int ContactNo,string City)
{      
   try 
   {            
         SqlConnection CN=new 
SqlConnection(@"Server=.\SQLExpress;Database=Customers;UID=sa;Pwd=P@ssw0rd");
         SqlCommand CMD=new SqlCommand();
         CN.Open();
         CMD.Connection=CN;
         CMD.CommandText=
"Insert into CustomerInformation values('" + CustomerID + "','" + 
CustomerName + "','" + Address + "'," + ContactNo + ",'" + City + "')";
         CMD.ExecuteNonQuery();
         return "Customer Information stored successfully !!";
    }
    catch (Exception ex)
    {
         return "Exception :-" + ex.Message;
    }

}

4) Once you have finished writing Web Method, Hit F5 and test your service. Now as we are done with Writing Web Service, Let’s start designing the entry screen by Silverlight application.

5) So, let’s create Silverlight project with the name CustomerSLApplication and design the screen as shown bellow-

6) You can see the code for the Customer Entry screen bellow-

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

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

Width="400" Height="350">
<Grid x:Name="LayoutRoot" Background="Black">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="CustomerID" Margin="10" Foreground="White"/>
<TextBox x:Name="CustID" Margin="38,10,0,10" Width="200"/>
</StackPanel>
<StackPanel 
Orientation="Horizontal">
<TextBlock Text="Customer Name" Margin="10" Foreground="White"/>
<TextBox x:Name="CustName" Margin="13,10,0,10" Width="200"/>
</StackPanel>
<StackPanel 
Orientation="Horizontal">
<TextBlock Text="Address" Margin="10" Foreground="White"/>
<TextBox x:Name="CustAddress" Margin="57,10,0,10" Width="200"/>
</StackPanel>
<StackPanel 
Orientation="Horizontal">
<TextBlock Text="Contact No." Margin="10" Foreground="White"/>
<TextBox x:Name="CustContNo" Margin="35,10,0,10" Width="200"/>
</StackPanel>
<StackPanel 
Orientation="Horizontal">
<TextBlock Text="City" Margin="10" Foreground="White"/>
<TextBox x:Name="CustCity" Margin="77,10,0,10" Width="200"/>
</StackPanel>
<StackPanel 
Orientation="Horizontal">
<Button 
Content="Clear" Width="100" x:Name="btnClear" Click="btnClear_Click" Margin="20" Foreground="Purple"/>
<Button Content="Insert Data" Margin="20" x:Name="btnInsert" Click="btnInsert_Click" Width="150" Foreground="Purple"/>
</StackPanel>
<StackPanel 
Orientation="Horizontal">
<TextBlock x:Name="Notification" Margin="20" Foreground="White" Text="Notification"/>
</StackPanel>
</StackPanel>
</Grid>
</UserControl>

7) Now as we have finished designing screen, let’s write the code to utilize the Web Service which we have created to insert the Customer Information into our Customers Database-But before that you will have to add Customer Service Web reference into Silverlight application as shown bellow by the name CustomerInformationProxy.

8) So, to use this proxy let’s write code in Page.xaml.cs file on “Insert” button click event.

Imp. Note-: Silverlight application always works at client side. Whenever it needs to access any resources from Server, it will allow you to call those resources by making a Asynchronous call to the server.

CustomerInformationProxy.CustomerInformationSoapClient proxy = new CustomerSLApplication.CustomerInformationProxy.CustomerInformationSoapClient();

private void btnInsert_Click(object sender, RoutedEventArgs e)
{
proxy.InsertCustomerInformationCompleted += new EventHandler<CustomerSLApplication.CustomerInformationProxy.InsertCustomerInformationCompletedEventArgs>(proxy_InsertCustomerInformationCompleted);
proxy.InsertCustomerInformationAsync(CustID.Text, CustName.Text, CustAddress.Text, int.Parse(CustContNo.Text), CustCity.Text);

}

void proxy_InsertCustomerInformationCompleted(object sender, CustomerSLApplication.CustomerInformationProxy.InsertCustomerInformationCompletedEventArgs e)
{
Notification.Text = e.Result;
}

9) Hit F5, Make a entry of new Customer and see the Result-

You got Exception ????

10) Silverlight application will never allow any resources which you are trying to access through Cross Domain. Once Silverlight detects that the request is made for Cross Domain Service, It will look for the policy file. There are two different ways of writing the policy file as shown bellow-

i) Silverlight Cross domain Policy file called clientaccesspolicy.xml.

Or

ii) Adobe Cross domain Policy file called crossdomain.xml file.

Copy any one of the file at a domain root level of Web Service.

11) However, Always try to Keep you Web contents separate than your Services domain due to security reasons. And I guess that’s how you might be working !!

12) clientaccesspolicy.xml file code-

<?xml version="1.0" encoding="utf-8"?>
<access-policy>
<cross-domain-access>
<policy >
<allow-from http-request-headers="*">
<domain uri="*"/>
</allow-from>
<grant-to>
<resource path="/" include-subpaths="true"/>
</grant-to>
</policy>
</cross-domain-access>
</access-policy>


13) crossdomain.xml file code-

<?xml version="1.0"?>
    <!DOCTYPE cross-domain-policy SYSTEM
     "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
    <cross-domain-policy>
       <allow-access-from domain="*" headers="*" 
         secure="true">
    </cross-domain-policy>

14) Create anyone of the .xml by the same name given above and copy it to the root directory of Web site as follows-

15) Now Hit F5, and see the output once again !!

17) Now try out the same steps for crossdomain.xml file and See your application working !!

18) For “Clear” button click event write following code-

private void btnClear_Click(object sender, RoutedEventArgs e)
{
CustID.Text = "";
CustName.Text = "";
CustAddress.Text = "";
CustContNo.Text = "";
CustCity.Text = "";
CustID.Focus();
}

19) That’s all !! you are done with the assignment !!

Now as you have completed writing the ninth Silverlight Lab, let’s have a closer look on tenth lab “Consuming WCF Services in Silverlight 2.0.”

Working with MediaElement control in Silverlight 2.0.

noreply@blogger.com (Pravinkumar) — Wed, 20 May 2009 12:43:00 +0000

In this lab, we will try to work with Silverlight Control called “MediaElement”. I will not do anything Fancy. So, let’s start working with our MediaElement control.

1) Create a Silverlight Application using Visual Studio 2008 and write the bellow code to see a simple media element design-

The code for above design is as follows-

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SLMediaElement.Page"
    Width="640" Height="480" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">


    <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"/>
        </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"/>
    </Canvas>
</UserControl>

2) Now as you are done with the design part, let’s write the code for Loading, Playing, Pause and Stopping the Video which we are playing-

3) Add a video (.wmv) file in ClientBin folder which you like.

4) For Playing the Video, let’s write the code on “Play” button click Event as follows-

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

5) For Pausing the Video, let’s write the code on “Pause” button click Event as follows-

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

6) For Changing the Volume, let’s write the code on “Control Volume” Slider Change Event as follows-

private void ControlVolume_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
   MediaPlayer.Volume = ControlVolume.Value;
}

7) To Mute the Volume, let’s write the code on “Mute” button click Event as follows-

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;
  }
}

8) For Stopping the Video, let’s write the code on “Stop” button click Event as follows-

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

9) So, That’s all !! You are done with the assignment. Hit F5 and Test the application.

Note- We will try out the Same MediaElement control in more fancy way in future.

Now as you have completed writing the eighth Silverlight Lab, let’s have a closer look on Ninth lab – “Consuming Web Services in Silverlight 2.0.”

Creating and applying Styles & Templates in Silverlight 2.0 using Microsoft Expression Blend 2.0.

noreply@blogger.com (Pravinkumar) — Wed, 20 May 2009 12:38:00 +0000

In this lab we will have a closer look on designing Styles and Templates by using Microsoft Expression Blend 2.0. So, lets see how to Create, Apply, and Manage the Styles First-

1) Create a new Silverlight 2.0 project by using Expression Blend 2.0 as shown in previous Blog.

2) Once you are done with creating a project, let’s take few controls on the design surface of Page.xaml as shown bellow-

3) Once you finished with the design, start styling the TextBlock control. Make a choice of first TextBlock titled “First Name”. Then go to Object Menu –> Edit Style –> Create Empty Click as shown bellow-

4) You will get a dialog box for Create Style Resource. Style resources you can keep or manage at different levels. This dialog shows you to manage the styles at a Document level or Application level.

Styles can be managed at various levels, Like-

1) Styles can be managed at Panel level.

2) Document Level – The style which is created at Document level can be accessed through out the document and can be applied to any control which is targeted.

3) Application Level – The style which is created at Application level can be accessed through out all the documents which are there under Silverlight Project and can be applied to any control which is targeted.

So, Let’s create a style at document level by giving the style name as “TextBlockStyle”.

FontSize = 12,

FontWeight = Bold,

Foreground colour = #FFF3B2B2

Save the style which you have created and then return back to User Control.

4) Now as you are ready with the style, lets apply the same style to other TextBlock Controls. There are different ways of doing the same. For example you can Drag & drop the style from Resources Window on to the different TextBlock controls as shown bellow

Or you can go back to Object Menu –> Edit Style –> Apply Resource –> Style Name.

Now as you have seen how to Create and Apply Style for TextBlock, try similar thing with TextBox or some other controls.

Imp. Note: I will be creating No. of styles and templates during this Lab sessions. You can even try the same when you will be following these demos.

Now, let’s move towards creating templates. Follow the steps as bellow-

1) Make a choice of Button and create a empty data Template for Button as shown bellow-

2) Name the Template as Button Template -

3) Once you have created the Style Resource with the name ButtonTemplate, delete the following items from Object and TimeLine window-

i) Background.

ii) DisabledVisualItem.

iii) FocusVisualItem.

4) Draw the Border with Border Thickness of 2,Corner Radius with 10, Border colour White, Background colour LinearGradientBrush with Two colour combination as you like as shown bellow-

5) Make Border Opacity 60. That’s it you got a nice shape Button. Additionally you can add few Visual States which will show you how to give different effects to the Button Templates as you like- For Example -

<vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="CommonStates">
                                    <vsm:VisualState x:Name="Normal"/>
                                    <vsm:VisualState x:Name="MouseOver">
                                        <Storyboard/>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Pressed">
                                        <Storyboard/>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Disabled">
                                        <Storyboard/>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="FocusStates">
                                    <vsm:VisualState x:Name="Focused">
                                        <Storyboard/>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Unfocused"/>
                                </vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>

6) You can do lot many things when you talk about Styles and Templates- We will look at few more examples in future.

Now as you have completed writing the forth Silverlight Lab, let’s have a closer look on Fifth lab – “Encoding Media using Expression Encoder and testing with ASP.NET MediaPlayer control.”

Creating Deep Zoom Application for your Images

noreply@blogger.com (Pravinkumar) — Wed, 20 May 2009 12:13:00 +0000

In this lab we will have a closer look on using “Sea Dragon Technology” called “Silverlight Deep Zoom”. Basically used for Zooming and Panning Images.

To work with Sea Dragon you will have to download a tool called as “Deep Zoom Composer” from Microsoft download centre and install it-

http://www.microsoft.com/downloads/details.aspx?FamilyID=457B17B7-52BF-4BDA-87A3-FA8A4673F8BF&displaylang=en

This tool allows you to Zoom and Pan the images like never before. For that you must have High Resolution Images needs to be prepared.

Once you finished installing the Deep Zoom Composer tool, you are ready to use it and deploy the files with Silverlight 2.0. So, let’s get started-

1) Open Deep Zoom Composer tool as shown bellow-

2) This tool follows a simple workflow kind three steps-

i) Import –: Import Images like .jpg, .png etc.

ii) Compose –: Arrange the images as per the requirements. For example set height, width, overlaying images, alignment of images.

iii) Export –: Export Images will allow you to export the Images to DeepZoomPix Technology demonstration or Custom as a Single Image or Multiple Images.

3) So, let’s create a new application by the name DZCSLApplication and start importing few images in our first step to create deep zoom application.

4) I have imported five images as shown bellow-

5) Now let’s start looking at how to compose images and what are different tools available for the same-

If you watch it closely, you will see I have done the overlaying of images as highlighted by red box.

6) Once you finish with this have a closer look on a tool bar bellow which will allow you to align the images, and make height and width same with other images-

7) Now the last step is Export the composition as per your requirement. As mentioned earlier you can export the composition either DeepZoomPix Technology demonstration or Custom as a Single Image or Multiple Images.

8) We will export our composition to Silverlight as shown bellow-

As shown above, make a choice of “Silverlight Deep Zoom” option from Output Type. Name the output as SimpleDZCApplication. Image Settings make a choice of “Export as a Collection (multiple images)”. Click Export button.

9) Once Export is completed, Preview the output in Browser and have a closer look at View Project Folder as well.

10) Open the .sln file in Visual studio 2008 and have a closer look on the code which is there in Page.xaml and Page.xaml.cs file.

11) In Page.xaml you will see a control called MultiscaleImage

The Source="/GeneratedImages/dzc_output.xml" property value is coming from ClientBin Folder where the composition output is available.

12) Open Page.xaml.cs file and observe the code which is generated for you by default.

13) Now take a closer look on class file called “MouseWheelHelper.cs”. This will help you to see the Zoom-in or Zoom-out effect by using Mouse Wheel.

14) So, that’s all !! you are done with the assignment.

Now as you have completed writing the sixth Silverlight Lab, let’s have a closer look on seventh lab – “Creating and using Resources in Silverlight 2.0.”

Encoding Media using Expression Encoder and testing with ASP.NET MediaPlayer control

noreply@blogger.com (Pravinkumar) — Wed, 20 May 2009 12:07:00 +0000

In this lab we will have a closer look on Encoding Media by using Microsoft Expression Encoder 2.0. So, lets see how to encode Media and use it with ASP.NET control MediaPlayer-

Introduction – :

Make sure you have installed following tools as shown bellow-

1) Microsoft Expression Encoder 2.0 with SP1.

2) Microsoft Visual Studio 2008 With SP1.

1) So, let’s start by opening Microsoft Expression Encoder 2.0 .

2) Drag and Drop any .wmv file on the surface of Expression Encoder 2.0 as you like.

I took the Bear.wmv file in this lab.

3) Now if you observe carefully, you will see a “Orange Slider” which will allow you to play the video as per the time frame you would like to choose as shown bellow-

4) This Slider will allow you to choose time frame from where you would like to put the Book Marks and start playing the video from the Book Mark you would like to-

5) To add Book Marks into the video, move the slider as per you convenient timer. Make a choice of Metadata Window from Windows Menu as shown bellow-

6) Once you get the Metadata window you will see the Markers section (Group) within Metadata window.

7) By clicking “Add” button, you can add the book marks. Once you add the Book Marks, now you can name the “Value” as Marker1 and check the Thumb Nails checkbox as well.When you click the Thumb Nails, it actually creates a .JPG file for you which you can use further a head to play the video as per you requirement.

8) So, now let’s create few markers for our Bear.wmv video by moving a slider. Once you finished with adding markers, Click the Button “Encode” as shown bellow-

9) Once it is Encoded, Go to Output Window by making a choice of Window Menu-> Output

10) Make a choice of Directory as shown above and copy the path. Open the path in Windows Explorer and observer the directory. You will find the Encoded Video and few Thumb nails which we have created during our encoding procedure in a folder.

Now our Encoding is done. So, Let’s Create A Silverlight Project Or Simple ASP.NET web site.

11) Once you have created the Web site, you will find the Default.aspx page. Drag and drop the ScriptManager control on Default.aspx page. This is a mandatory step for showing the output of our Encoded Video.

12) Create an empty folder into web site you have created. Name it as MediaOutput and Copy the Encoded output ( Encoded Media .wmv file and .jpg files) in a folder.

13) After that go to Silverlight group from the tool box and drag and drop MediaPlayer Control on the Default.aspx page. Go to design view of Default.aspx page and adjust the Height and Width of the Silverlight MediaPlayer control.

14) Click the pin and click a link called Import Skin. You will see an Import Skin window from where you can make a choice of beautiful skins for MediaPlayer as per you choice. These are the default skins which are given by Microsoft. But If you want to build your own skins you can do the same and apply it to MediaPlayer.

15) Make a choice of a skin which you like and give the Media source as shown bellow-

16) Now go back to Default.aspx HTML source and type the following-

<asp:MediaPlayer ID="MediaPlayer1" runat="server" AutoPlay="True" 
        Height="496px" MediaSkinSource="~/Expression.xaml" 
        MediaSource="~/MediaOutput/Bear.wmv" Width="671px">
        <Chapters>
            <asp:MediaChapter Position="2.0" ThumbnailSource="~/MediaOutput/Bear_2.002.jpg" Title="Marker1" />
            <asp:MediaChapter Position="5.0" ThumbnailSource="~/MediaOutput/Bear_4.997.jpg" Title="Marker2" />
            <asp:MediaChapter Position="8.0" ThumbnailSource="~/MediaOutput/Bear_8.004.jpg" Title="Marker3" />
            <asp:MediaChapter Position="11.0" ThumbnailSource="~/MediaOutput/Bear_11.024.jpg" Title="Marker4" />
        </Chapters>

</asp:MediaPlayer>

17) And you are Done !! Hit F5 to test the Encoded media and you should see the output as bellow-

Now as you have completed writing the fifth Silverlight Lab, let’s have a closer look on sixth lab – “Creating Deep Zoom Application for your Images.”

Introduction to Layouts & Controls in Silverlight 2.0. Part - II

noreply@blogger.com (Pravinkumar) — Wed, 20 May 2009 11:51:00 +0000

We have seen Layout management in our previous lab. So, continuing with the same lab let’s have introduction to commonly used controls. In this lab, I’ll not be taking all controls.

Bellow is a controls list which we will try out-

1) Border Control : Try out following Example -

Most of the time you will see Border Control is used in templates. Important point to note down here is – If you try to add more than one control within border, you will get exception that “The property Child is set more than once”. So, you will see where ever you want to use more than one control inside border you will have to use some container which allows to include more than one control.

2) TextBolck Control : Try out following example -

TextBlock control is a lightweight control which is used to display messages or contents.

<UserControl x:Class="FirstSLApplication.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid Background="Black" x:Name="LayoutRoot" ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock x:Name="txtSimpleTxBlock" Foreground="Yellow" Text="This is Simple TextBlock" Grid.Row="0"/>
        <TextBlock x:Name="txtSimpleTxBlock" Foreground="Red" FontFamily="Times New Roman" Text="This is Simple TextBlock" Grid.Row="1"/>
        <TextBlock x:Name="txtSimpleTxBlock" Foreground="Green" FontSize="20" Text="This is Simple TextBlock" Grid.Row="2"/>
        <TextBlock x:Name="txtSimpleTxBlock" Foreground="White" FontSize="20" FontFamily="Comic Sans MS" Text="This is Simple TextBlock" Grid.Row="3"/>
        
    </Grid>
</UserControl>

3) Button Control : Try out following example -

This is not an ordinary Button control which you had seen in Win Forms or Web Forms. Silverlight Button control is a Container control which can hold other controls inside.

<UserControl x:Class="FirstSLApplication.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid Background="Black" x:Name="LayoutRoot" ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Content="Click Me !!" Background="Red" Height="50" Width="200" Grid.Row="0"/>
        <Button Height="50" Width="200" Grid.Row="1">
            <Button.Content>
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="Click Me" Foreground="Blue" FontWeight="Bold"/>
                </StackPanel>
            </Button.Content>
        </Button>
        <Button Height="50" Width="200" Grid.Row="2">
            <Button.Content>
                <StackPanel Orientation="Vertical">
                   <MediaElement Source="/Silverlight.wmv" AutoPlay="True"/>

                </StackPanel>
            </Button.Content>
        </Button>
        <Button Content="Click Me !!" Background="HotPink" Height="50" Width="200" Grid.Row="3" IsEnabled="False"/>
    </Grid>
</UserControl>

4) CheckBox Control : Try out following example -

CheckBox control is a Container control unlike the simple CheckBox you had seen in Win form and Web form.

<UserControl x:Class="FirstSLApplication.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid Background="Black" x:Name="LayoutRoot" ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <CheckBox Content="Click Me !!" Foreground="Yellow" Background="Red" Height="50" Width="100" Grid.Row="0"/>
        <CheckBox Height="50" Width="100" Grid.Row="1">
            <CheckBox.Content>
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="Click Me" Foreground="Blue" FontWeight="Bold"/>
                </StackPanel>
            </CheckBox.Content>
        </CheckBox>
        <CheckBox Height="50" Width="100" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center">
            <CheckBox.Content>
                <StackPanel Orientation="Vertical">
                    <MediaElement Source="/Silverlight.wmv" AutoPlay="True" Height="50" Width="100"/>
                </StackPanel>
            </CheckBox.Content>
        </CheckBox>
        <CheckBox Foreground="Red" Background="HotPink" Height="50" Width="100" Grid.Row="3" IsEnabled="False">
            <CheckBox.Content>
                <Image Source="Butterfly.jpg"/>
            </CheckBox.Content>
        </CheckBox>
    </Grid>
</UserControl>

5) RadioButton Control : Try out following example -

RadioButton control is a Container control unlike the simple CheckBox you had seen in Win form and Web form.

<UserControl x:Class="FirstSLApplication.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid Background="Black" x:Name="LayoutRoot" ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <RadioButton Content="Click Me !!" Foreground="Yellow" Background="Red" Height="50" Width="100" Grid.Row="0"/>
        <RadioButton Height="50" Width="100" Grid.Row="1">
            <RadioButton.Content>
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="Click Me" Foreground="Blue" FontWeight="Bold"/>
                </StackPanel>
            </RadioButton.Content>
        </RadioButton>
        <RadioButton Height="50" Width="100" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center">
            <RadioButton.Content>
                <StackPanel Orientation="Vertical">
                    <MediaElement Source="/Silverlight.wmv" AutoPlay="True" Height="50" Width="100"/>
                </StackPanel>
            </RadioButton.Content>
        </RadioButton>
        <RadioButton Foreground="Red" Background="HotPink" Height="50" Width="100" Grid.Row="3" IsEnabled="False">
            <RadioButton.Content>
                <Image Source="Butterfly.jpg"/>
            </RadioButton.Content>
        </RadioButton>
    </Grid>
</UserControl>

6) TextBox Control : Try out following example -

This is a Simple TextBox control-

<UserControl x:Class="FirstSLApplication.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid Background="Black" x:Name="LayoutRoot" ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBox Width="220" Text="This is Simple TextBox !!" Height="25"/>
        <TextBox Width="220" Foreground="Blue" FontWeight="Bold"  Text="TextBox with Foreground Color" Height="25" Grid.Row="1"/>
        <TextBox Width="220" Background="Yellow" FontWeight="Bold"  Text="TextBox with Background Color" Height="25" Grid.Row="2"/>
        <TextBox Width="220" Text="This is Formated TextBox !!" Height="25" Background="Gray" Foreground="Red" Grid.Row="3" />
    </Grid>
</UserControl>

7) Slider Control : Try out following example -

Slider control has few important property which you need to consider are as follows -

1) Minimum. 2) Maximum. and 3) Value.

The bellow example is using slider to change the Rotation Transform and Skew Transform of Ellipse programmatically on the ValueChanged Event of Slider.

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SLBlendFirstApp.Page"
    Width="640" Height="480" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

    <Grid x:Name="LayoutRoot" Background="#FF000000">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.500*"/>
            <ColumnDefinition Width="0.500*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="0.740*"/>
            <RowDefinition Height="0.260*"/>
        </Grid.RowDefinitions>
        <Slider  Grid.Row="1" Grid.Column="0" x:Name="Slider1" LargeChange="10" Maximum="360" ValueChanged="Slider1_ValueChanged" />
        <Slider  Grid.Row="1" Grid.Column="1" x:Name="Slider2" Maximum="100" LargeChange="10" ValueChanged="Slider2_ValueChanged"/>
        <Ellipse Margin="57,88,63,117" Fill="#FFFFF100" Stroke="#FF000000" Width="200" Height="150" Grid.Row="0" Grid.Column="0" x:Name="El1" RenderTransformOrigin="0.5,0.5">
            
        </Ellipse>
        <Ellipse Margin="57,88,63,117" Fill="#FF0040FF" Stroke="#FF000000" Width="200" Height="150" Grid.Row="0" Grid.Column="1" x:Name="El2"/>
        
    </Grid>
</UserControl>

Open your Page.xaml.cs file and write bellow code on Slider’s ValueChanged event.

private void Slider1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    RotateTransform rTransform=new RotateTransform();
    rTransform.Angle=Slider1.Value;
    El1.RenderTransform = rTransform;
}

private void Slider2_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    SkewTransform rTransform = new SkewTransform();
    rTransform.AngleX = Slider2.Value;
    El2.RenderTransform = rTransform;
}

8) ComboBox Control : Try out following example -

This is a container controls as bellow example show the same.

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SLBlendFirstApp.Page"
    Width="640" Height="480" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">

    <Grid Background="Black" x:Name="LayoutRoot" ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <ComboBox Height="50" Width="150" Background="Red" Grid.Row="0">
            <TextBlock Text="Pravinkumar"/>
            <TextBlock Text="Yash"/>
            <TextBlock Text="Priti"/>
            <TextBlock Text="Manish"/>
            <TextBlock Text="Ramakant"/>
        </ComboBox>
        <ComboBox Height="50" Width="150" Background="Purple" Grid.Row="1">
            <StackPanel Orientation="Horizontal">
                <TextBlock Foreground="Red" Text="Red Says Stop -          " FontSize="12"/>
                <Ellipse Height="20" Width="20" Fill="Red"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock Foreground="Yellow" Text="Yellow Says Slow -      " FontSize="12"/>
                <Ellipse Height="20" Width="20" Fill="Yellow"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock Foreground="Green" Text="Green Says Stop -       " FontSize="12"/>
                <Ellipse Height="20" Width="20" Fill="Green"/>
            </StackPanel>
        </ComboBox>
        <ComboBox Height="50" Width="150" Background="Purple" Grid.Row="2">
            <StackPanel Orientation="Horizontal">
                <TextBlock Foreground="Red" Text="Video - 1" FontSize="12"/>
                <MediaElement Height="20" Width="20" Source="/Silverlight.wmv" AutoPlay="True"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock Foreground="Yellow" Text="Video - 2" FontSize="12" />
                <MediaElement Height="20" Width="20" Source="/Silverlight.wmv" AutoPlay="True"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock Foreground="Green" Text="Video - 3" FontSize="12"/>
                <MediaElement Height="20" Width="20" Source="/Silverlight.wmv" AutoPlay="True"/>
            </StackPanel>
        </ComboBox>
        <ComboBox Height="50" Width="150" Background="Purple" Grid.Row="3">
            <Image Height="20" Width="20" Source="Butterfly.jpg"/>
            <MediaElement Height="20" Width="20" Source="/Silverlight.wmv" AutoPlay="True"/>
            <Ellipse Height="20" Width="20" Fill="Red"/>
            <Image Height="20" Width="20" Source="Butterfly.jpg"/>
            <Image Height="20" Width="20" Source="Butterfly.jpg"/>
        </ComboBox>
    </Grid>
</UserControl>

And like wise their are many more controls which you can use to design the better UX in Silverlight 2.0.

Imp. Note : I have not covered all the controls here. Controls even you can learn by your own. But just to give you a Sneak-Peak-Preview of Silverlight 2.0 Controls I took this opportunity!!

Now as you have completed writing the third Silverlight Lab, let’s have a closer look on Forth lab – “Creating and applying Styles & Templates in Silverlight 2.0 using Microsoft Expression Blend 2.0.”

Introduction to Layouts & Controls in Silverlight 2.0. Part - I

noreply@blogger.com (Pravinkumar) — Wed, 20 May 2009 11:48:00 +0000

In this third lab we will have introduction to Layout management in Silverlight 2.0. Below are the steps –:

In Silverlight 2.0 we have few Layouts as follows -

1) Grid Panel.

2) Canvas.

3) Stack Panel.

To work with these Panels, follow below steps -

1) Create Silverlight 2.0 Project as shown in previous Blog and give name to it as SLLayoutManagement.

2) Add an Image of your choice in Silverlight project as shown bellow -

3) We will first have a look at Grid Layout. By using Grid Layout you can arrange the contents in Rows and Columns by Specifying the Margin for the contents to appear perfect on your screen.

4) Open Page.xaml and Start typing bellow code -

<UserControl x:Class="FirstSLApplication.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" ShowGridLines="True" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Height="50"  Width="120" Content="Click To See Time" Grid.Column="0" Grid.Row="0"/>
        <Button Height="50"  Width="120" Content="Click To See Time" Grid.Column="0" Grid.Row="1"/>
        <Button Height="50"  Width="120" Content="Click To See Time" Grid.Column="0" Grid.Row="2"/>
        <Image Height="75" Width="120" Stretch="Fill" Source="Butterfly.jpg" Grid.Column="1" Grid.Row="0"/>
        <Image Height="75" Width="120" Stretch="Fill" Source="Butterfly.jpg" Grid.Column="1" Grid.Row="1"/>
        <Image Height="75" Width="120" Stretch="Fill" Source="Butterfly.jpg" Grid.Column="1" Grid.Row="2"/>
        <Ellipse Height="75" Width="120" Fill="Yellow" Grid.Column="2" Grid.Row="0"/>
        <Ellipse Height="75" Width="120" Fill="Yellow" Grid.Column="2" Grid.Row="1"/>
        <Ellipse Height="75" Width="120" Fill="Yellow" Grid.Column="2" Grid.Row="2"/>

    </Grid>
</UserControl>

5) Once you are done, hit F5 to test the application of Silverlight 2.0.

Note : If you want to Create new project, please follow the steps to create a new project of Silverlight Or modify the existing one. I am modifying existing one.

1) Now as you have seen how Grid Layout works, let’s have a look at Stack Panel . Stack Panel can be used to arrange the contents either Horizontally or Vertically. The default alignment of the contents using Stack Panel is Vertical.

2) If you are using the same project like I am doing in this demo, please comment out the Grid code and start typing the bellow code in Page.xaml-

<UserControl x:Class="FirstSLApplication.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" ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Vertical" Grid.Row="0" VerticalAlignment="Top" HorizontalAlignment="Center">
            <Ellipse Height="50"  Width="100" Fill="Red"/>
            <Ellipse Height="50"  Width="100" Fill="Green"/>
            <Ellipse Height="50"  Width="100" Fill="Blue"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center">
            <Ellipse Height="50"  Width="100" Fill="Yellow"/>
            <Ellipse Height="50"  Width="100" Fill="Wheat"/>
            <Ellipse Height="50"  Width="100" Fill="BurlyWood"/>
        </StackPanel>
    </Grid>
</UserControl>

3) Once you are done, hit F5 to test the application of Silverlight 2.0.

If you observe above code, we are actually using Stack Panel within Grid Panel !! Exciting !!

Note : If you want to Create new project, please follow the steps to create a new project of Silverlight Or modify the existing one. I am modifying existing one.

1) Now let’s have a look on Canvas Panel. Unlike Grid Panel Or Stack Panel Canvas allows us to place the contents as per our flexibility. So, when we use Canvas for content alignment, we have to remember few properties.

2) First property is : Canvas.Left

3) Second Property is : Canvas.Top

4) If you are using the same project like I am doing in this demo, please comment out the Grid code and start typing the bellow code in Page.xaml.

<UserControl x:Class="FirstSLApplication.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Canvas Background="Black" x:Name="LayoutRoot">
        <Ellipse Height="20" Width="20" Canvas.Left="200" Canvas.Top="15" Fill="AliceBlue"/>
        <Ellipse Height="20" Width="20" Canvas.Left="200" Canvas.Top="40" Fill="AntiqueWhite"/>
        <Ellipse Height="20" Width="20" Canvas.Left="200" Canvas.Top="65" Fill="Aqua"/>
        <Ellipse Height="20" Width="20" Canvas.Left="200" Canvas.Top="90" Fill="Aquamarine"/>
        <Ellipse Height="20" Width="20" Canvas.Left="200" Canvas.Top="115" Fill="Azure"/>
        <Ellipse Height="20" Width="20" Canvas.Left="200" Canvas.Top="140" Fill="Beige"/>
        
        <Ellipse Height="20" Width="20" Canvas.Left="175" Canvas.Top="15" Fill="BlanchedAlmond"/>
        <Ellipse Height="20" Width="20" Canvas.Left="150" Canvas.Top="15" Fill="Blue"/>
        <Ellipse Height="20" Width="20" Canvas.Left="125" Canvas.Top="15" Fill="BlueViolet"/>
        
        <Ellipse Height="20" Width="20" Canvas.Left="225" Canvas.Top="15" Fill="BurlyWood"/>
        <Ellipse Height="20" Width="20" Canvas.Left="250" Canvas.Top="15" Fill="Yellow"/>
        <Ellipse Height="20" Width="20" Canvas.Left="275" Canvas.Top="15" Fill="Gold"/>
    </Canvas>
</UserControl>

5) Once you are done, hit F5 to test the application of Silverlight 2.0.

Now as you have completed writing the third Silverlight Lab, let’s have few controls introduction and continue with our third Lab – “Introduction to Layouts & Controls in Silverlight 2.0.”

Using Microsoft Expression Blend 2.0 to Design Silverlight 2.0 applications.

noreply@blogger.com (Pravinkumar) — Wed, 20 May 2009 11:45:00 +0000

In this second Lab we will have a closer look on Microsoft Expression Blend 2.0 to create Silverlight 2.0 Application.

As most of you might be knowing that, this tool is majorly used by Designers. To have a better collaboration between Developer & Designer Microsoft has released Microsoft Expression Blend 2.0.

However make one note that if you are designing Silverlight 2.0 application by using Microsoft Expression Blend 2.0, you must first install Microsoft Expression Blend 2.0 SP1.

http://www.microsoft.com/downloads/details.aspx?FamilyId=EB9B5C48-BA2B-4C39-A1C3-135C60BBBE66&displaylang=en

So, Let’s get started with Expression Blend !!

1) Open Microsoft Expression Blend 2.0 and make a choice of Silverlight 2.0 application as below-

2) Specify application name as SLBlendFirstApp.

3) Now let’s see the different windows and a tool box which is available with Microsoft Expression Blend.

Following are the four different windows –:

i) Interaction window : It contents Two parts one is States and other is Objects and Timeline. State is nothing but a Visual State Manager to control the look and Feel of Silverlight controls which will appear on the screen. We will have a closer look on Creating Visual States latter.

Object and Timeline : it shows you what are all objects you have it on Silverlight Page and even it allows you to create, modify, delete Story Boards (Animation), Edit Styles, create styles, Create Templates.

ii) Project Window : Similar to your solution explorer in VS 2008.

iii) Properties Window : Allows you to modify properties of controls.

iv) Resources : Allows you to manage resources at Page Level or Application Level.

4) Now let’s have a look at Tool box –:

Now you can have a closer look on the tools and controls which are available. If you want to see more controls, Click Asset Library.

5) Now, let’s work as a Designer and build some nice UX (User Experience) using Expression Blend 2.0.

6) Make a choice of LayoutRoot from Objects and Timeline window. Go to property window and make a choice of background property with Gradient Brush as shown bellow-

7) You can Brush Transform to transform the colours as per your need. If you want you can change the colours which are in ARGB (Alpha, Red, Green, Blue) format.

8) Now design a screen like bellow-

When you design the screen like above, Expression Blend will automatically generate the XAML code for you.

10) Now, the final step is writing some logic on the Click Event of the Button which you can not do by using Microsoft Expression Blend 2.0. So, for that follow the bellow steps and complete your application -

11) In Project window of Expression Blend, Right Click to Project/Solution and make a choice of context menu to Edit in Visual Studio as shown bellow-

12) Once you do that, In visual studio, open Page.xaml and locate you Login button. Hook up a click event to the button and write a logic which you are suppose to write to finish the application.

<Button Height="60" Margin="280.457,0,145.543,74" VerticalAlignment="Bottom" Content="Login Now !!" FontSize="14" RenderTransformOrigin="0.5,0.5" Click="Button_Click">

13) Once you are done, hit F5 to test the First application of Silverlight 2.0.

Now as you have completed the second lab, let’s start with our third Lab – “Introduction to Layouts & Controls in Silverlight 2.0”

Writing First Silverlight 2.0 Program using Visual Studio 2008

noreply@blogger.com (Pravinkumar) — Wed, 20 May 2009 11:29:00 +0000

In this first lab we will create Silverlight 2.0 Application using Visual Studio 2008. Below are the steps –:

1) Create a new project using Visual Studio 2008 as shown below-

2) Give a Name to your Silverlight Project FirstSLApplication and click OK.

3) From the dialog box shown make a choice of Web Site and click OK as shown below-

4) This will create one solution which contains Silverlight Application and web site which is same as Simple ASP.NET 2.0 web site with one significant change that is it has one very special folder – ClientBin. This folder contains .XAP file. Which is a compressed format of Silverlight 2.0 application which will get deployed at client side.

5) Compile your Silverlight application and see that your ClientBin Folder contains .XAP file.

6) You can see what is there inside .XAP. Open ClientBin folder in windows explorer and rename the file extension from .XAP to .Zip. Extract that .zip file and observe it. It contains a .dll file by the name of your silverlight application and AppMenifest.xaml.

7) Now as you have seed what is there inside .XAP, let’s go and start writing our first Program.

8) In a silverlight Project, you will find Page.xaml and the code behind Page.xaml.cs/.vb file. Page.xaml will hold the design part of Silverlight application and Page.xaml.cs/.vb will contain the application logic. For example Button Click event, Page Load event.

9) Type the below code in Page.xaml-

<UserControl x:Class="FirstSLApplication.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">
        <TextBlock FontSize="12" Foreground="White" x:Name="txtName" Text="Show Date and Time"/>
        <Button x:Name="btnShowDateTime" Content="Show Date and Time" Height="50" Width="200" Click="btnShowDateTime_Click"/>
        
    </Grid>
</UserControl>

9) Now go to the code behind of Page.xaml.cs and write bellow code-

private void btnShowDateTime_Click(object sender, RoutedEventArgs e)
 {
      txtName.Text = "Current Date and Time - " + DateTime.Now.ToString();
 }

10) Once you are done, hit F5 to test the First application of Silverlight 2.0.

Now as you have completed writing the first Silverlight Application, let’s use the tool which is especially dedicated to Designers which is Microsoft Expression Blend 2.0 and start with our second Lab – “Using Microsoft Expression Blend 2.0 to Design Silverlight 2.0 applications.”

Silverlight 2.0 Lab Manuals For Beginners & Intermediates

noreply@blogger.com (Pravinkumar) — Wed, 20 May 2009 11:26:00 +0000

Hi All,

Today I have decided to create LAB Manuals for Silverlight 2.0. So that everybody should take the advantage of the new technologies to build Rich Internet Applications. Most of you might know all these examples but still for the people who are interested learning Silverlight 2.0, I am dedicating these labs for them.

Following is a list for all the labs which I will be preparing:

1	Writing First Silverlight 2.0 Program using Visual Studio 2008.
2	Using Microsoft Expression Blend 2.0 to Design Silverlight 2.0 applications.
3	Introduction to Layouts & Controls in Silverlight 2.0.
4	Creating and applying Styles & Templates in Silverlight 2.0 using Microsoft Expression Blend 2.0.
5	Encoding Media using Expression Encoder and testing with ASP.NET MediaPlayer control.
6	Creating Deep Zoom Application for your Images.
7	Creating and using Resources in Silverlight 2.0.
8	Working with MediaElement control in Silverlight 2.0.
9	Consuming Web Services in Silverlight 2.0.
10	Consuming WCF Services in Silverlight 2.0.
11	Querying data from Collection using LINQ and Silverlight 2.0.
12	Creating and using Splash Screen in Silverlight 2.0.
13	Using Custom Types in XAML.
14	Working with Background Worker in Silverlight 2.0.
15	Working with File Dialog box in Silverlight 2.0.
16	Working with HttpAsyncUpload and HttpAsyncDownload.
17	Communicating between Silverlight 2.0 and ASP.NET 2.0 and Vice versa.
18	Consuming XML Data in Silverlight 2.0.
19	Working with Animation in Silverlight 2.0.
20	Drag & Drop operation in Silverlight 2.0.
21	Introduction to Silverlight 3.0.

To work with these labs you should have following tools installed on your machine.

1) Microsoft Visual Studio 2008 with SP1.

2) Silverlight 2.0.

http://www.microsoft.com/downloads/details.aspx?FamilyID=c22d6a7b-546f-4407-8ef6-d60c8ee221ed&displaylang=en

3) Microsoft Expression Blend 2.0 with SP1.

4) Microsoft Expression Encoder 2.0 with SP1.

5) Microsoft Expression Designer 2.0.

6) Deep Zoom Composer.

http://www.microsoft.com/downloads/details.aspx?FamilyID=457B17B7-52BF-4BDA-87A3-FA8A4673F8BF&displaylang=en

So, Let’s get started !!!

Drag and Drop Simple Game in Silverlight 2.0

noreply@blogger.com (Pravinkumar) — Wed, 25 Mar 2009 07:50:00 +0000

Hi All,

If you want to see the capabilities of Drag and Drop in Silverlight 2.0, Here is a simple Game which I tried.

While doing this demonstration I have used ,

1) Microsoft Expression Design 2.0.

2) Microsoft Expression Blend 2.0.

3) Visual Studio 2008.

You can try this now !! (Drag and Drop the Images Bellow and make my Picture)

Steps :

1) First take a Image which you like (I took a Tiger Image) in Microsoft Expression Design as shown bellow.

2) Then Slice the image as per your requirement.For Slicing you can use bellow tool.

3) Then export your slice in .JPG format.

4) Now, As you got slices of the image, Create Silverlight 2.0 Application using Microsoft Expression Blend 2.0.

5) Add all slices in the project which you have just created.

6) Change the Panel of Page.xaml from Grid to Canvas and arrange all Images as shown bellow.

7) Now you are ready with the design, let’s write the code to make this work. So, open the same project in Microsoft Visual Studio 2008 and open you Page.xaml.cs.

8) First job is to make these images display in random format. I have used a very simple logic here. But if you want you can choose your own logic. To do so, I have written few functions.

ImageSource[] imgs = new ImageSource[12];
private void RandamizeImages()
{
int j = 0;

FillArray();
for (int i = 11; i >=0; i--)
{
ImageSource source = GetImage(i);
SetImage(j, source);
j++;
}
}
private void SetImage(int i,ImageSource image)
{
switch (i)
{
case 0:
Slice1.Source = null;
Slice1.Source = image;
break;
case 1:
Slice2.Source = null;
Slice2.Source = image;
break;
case 2:
Slice3.Source = null;
Slice3.Source = image;
break;
case 3:
Slice4.Source = null;
Slice4.Source = image;
break;
case 4:
Slice5.Source = null;
Slice5.Source = image;
break;
case 5:
Slice6.Source = null;
Slice6.Source = image;
break;
case 6:
Slice7.Source = null;
Slice7.Source = image;
break;
case 7:
Slice8.Source = null;
Slice8.Source = image;
break;
case 8:
Slice9.Source = null;
Slice9.Source = image;
break;
case 9:
Slice10.Source = null;
Slice10.Source = image;
break;
case 10:
Slice11.Source = null;
Slice11.Source = image;
break;
case 11:
Slice12.Source = null;
Slice12.Source = image;
break;
}
}
private void FillArray()
{
imgs[0] = Slice1.Source;
imgs[1] = Slice2.Source;
imgs[2] = Slice3.Source;
imgs[3] = Slice4.Source;
imgs[4] = Slice5.Source;
imgs[5] = Slice6.Source;
imgs[6] = Slice7.Source;
imgs[7] = Slice8.Source;
imgs[8] = Slice9.Source;
imgs[9] = Slice10.Source;
imgs[10] = Slice11.Source;
imgs[11] = Slice12.Source;

}
private ImageSource GetImage(int index)
{
return imgs[index];
}

9) Now call this RandamizeImages() function in the constructor of Page class.

public Page()
{
// Required to initialize variables
InitializeComponent();
RandamizeImages();
}

10) Now, If you try to run this application, you will see all images are getting rendered in Random order.

11) So now, let’s go and write our Drag and Drop logic which is the heart of this application.

12) First you need to declare few variables at class level as bellow.

public partial class Page : UserControl
{
bool IsDragging = false;
Point offset = new Point();
bool Flag=false;
Image img;

13) On every image which you took, you have to write three events as bellow:

a) MouseLeftButtonDown.
b) MouseMove.
c) MouseLeftButtonUp.
private void Slice_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
img = ((Image)sender);
IsDragging = true;
offset = e.GetPosition(img);
img.CaptureMouse();
}

private void Slice_MouseMove(object sender, MouseEventArgs e)
{

if (IsDragging)
{
img.SetValue(Canvas.TopProperty, e.GetPosition(LayoutRoot).Y - offset.Y);
img.SetValue(Canvas.LeftProperty, e.GetPosition(LayoutRoot).X - offset.X);
}

}

private void Slice_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
IsDragging = false;
img.ReleaseMouseCapture();
Flag = false;

}

14) Now the last step is make

bool Flag=false; variable True in the constructor of you Page class and you are done.

15) Run your application and See you game is working :).

Enjoy !!!

Silverlight 3.0 : 3D Page Turn Application

noreply@blogger.com (Pravinkumar) — Sat, 21 Mar 2009 05:54:00 +0000

Hi All,

I am really excited since I am writing my First Blog. As every one know that Silverlight 3.0 is available in Beta now and Microsoft Expression Blend 3.0 Preview is available with that.

I was looking for 3D implementation and Silverlight 3.0 has the capability of 3D. So, I tried one application which I was trying from last one year that is Page Turn Application.

I always enjoy working with Expression Blend although I am not a designer. So here is a demo of Page Turn Application. I hope you will like it.

Silverlight 3.0 Page Turn Application

Enjoy !!!