Wednesday, May 20, 2009

Consuming WCF Services in Silverlight 2.0.

 
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-

WCFCreateService

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-

AddWCFService

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.

AddEntityFrame

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-



OutputofWS



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.

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-


















CustomerIDVARCHAR(5)
CustomerNameVARCHAR(20)
AddressVARCHAR(30)
ContactNoINT
CityVARCHAR(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-


CreateWebService


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-


CustomerEntry


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.


AddServiceRef


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 ????
PolicyException




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-
CopyClientAccessPolicyfile






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


OutputofWS


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.

 

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-

MediaElementDesign

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.

 

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-

BlendScreenForStyle

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-

ObjectMenuStyle

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.

CreateStyleResource

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

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

DragNDropStyle

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

ApplyStyle 

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-

ControlTemplate

2) Name the Template as Button Template -

ButtonTemplate

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-

DrawingTamplate

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

 

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-

DeepZoomScreen

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-

ImportImages 

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

ComposingImages

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-

DZCToolBar

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-

ExportDZCComposition

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

 <MultiScaleImage x:Name="msi" Source="/GeneratedImages/dzc_output.xml"/>

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

 

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-

EncoderSlider

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-

MetaDataWindow

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

MarkerSection

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-

EncodeButton

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

image

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-

MediaProperties

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-



MediaOutput



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