Exclusive Silverlight Interview Questions and Answers (29)

XAML files are usually compiled rather than parsing on runtime. But it also supports parsing during runtime. When we build a XAML based project, you will see it creates g.cs extension in obi\Debug folder. Therefore, for every XAMl file you will find a g.cs file. For instance, a Shiv.XAML will have Shiv.g.cs file in obi\Debug folder. In short, in runtime you actually do not see the XAML file. But if you want to do runtime, parsing of XAML file it also allows that to be done.
 

This is one of the most important features of WPF, separating the XAML from the code to be handled. So designers can independently work on the presentation of the application and developers can actually write the code logic independent of how the presentation is.

 XAML and behind code in action

Above is the code snippet, which shows a XAML file and the code completely detached from the XAML presentation. In order to associate a class with XAML file you need to specify the x: Class attribute. Any event specified on the XAML object can be connected by defining a method with sender and event values. You can see from the above code snippet we have linked the MyClickEvent to an event in the behind code.
 

Note: - You can get a simple sample in WindowsSimpleXAML folder. Feel free to experiment with the code… experimenting will teach you much more than reading something theoretical.

To access XAML objects in behind code you just need to define them with the same name as given in the XAML document. For instance in the below code snippet we named the object as objtext and the object is defined with the same name in the behind code.

 Accessing XAML object

Note: - You can get the source code in WindowsAccessXAML folder.

Silver light is a web browser plug-in by which we can enable animations, graphics and audio video. You can compare silver light with flash. We can view animations with flash and it’s installed as a plug-in in the browser.
 

Yes, animations made in SilverLight can run in other platforms other than window. In whatever platform you want run you just need the SilverLight plug-in.

 

Yes there is something called as WPF browser application which can run WPF in browser. For WPF browser application you need .Net framework to be installed in the client location while for silver light you need only the plug-in. So in other words WPF browser applications are OS dependent while SilverLight is not. SilverLight plug-in can run in other OS other than windows while we all know .NET framework only runs in windows.
 

As explained previously XAML is a XML file which defines the UI elements. This XML file can be read by WPF framework or Silver light framework for rendering. Microsoft first developed WPF and they used XAML files to describe the UI elements to the WPF framework. Microsoft then extended WPF and made WPF/e which helped to render the UI in the browser. WPF/e was the code name for Silver Light. Later Microsoft launched Silver Light officially.
So the XAML just defines the XML structure to represent the UI elements. Both the frameworks i.e. WPF and Silverlight then reads the UI elements and renders the UI elements in the respective platform.

Before we talk about silver light architecture let’s discuss what is silver light is really made of technically. Silver light has borrowed lot of things from existing Microsoft technologies. We can think silver light plug-in as a combination of some technologies from core .NET framework, vector animations, media and JavaScript.

So we can visualize the silver light architecture as combination of some functionalities from core .NET framework , Ajax and some functionalities like animation , media etc provided by core silver light framework.
We can think silver light architecture as a combination of four important blocks:-
• Some .NET framework components: - Silver light uses some components from .NET framework. One of the main components is WPF. Many of the UI components ( check box , buttons , text boxes etc) , XAML parsing etc are taken from the core WPF system. It also has taken components like WCF to simplify data access. It also have CLR for memory management, safety checking and garbage collection. The base class libraries of Net are used for string manipulations, algorithms, expressions, collections and globalization.
• Presentation core: - The core presentation framework has functionalities to display vector 2d animations, images, media, DRM and handle inputs like mouse and keyboard.
• Other technologies: - Silver light interacts with other technologies like Ajax and javascript. So it also borrows some functionalities from there technologies.
• Hosting: - Silver light animations finally run under the browser environment. So it has a the hosting functionality which helps to host the application the browser , expose a DOM by which JavaScript can manipulate the silver light components and it also has a installer functionality which helps to install silver light application and plug-in in the browser environment.
One of the things which you can notice from the architecture diagram is that the presentation core reads from the XAML file for rendering. The XAML is a component which is a part of the .NET framework and the rendering part is done by the presentation core.

The application is a typical HTML which runs under the browser. There are markups which instantiates the silver light plug-in. Now when user interacts with the silver light application it sends event to JavaScript system or the .NET system. This depends on which programming language you are using. The program code which is either in JavaScript of .NET can make calls to the silver light run-time and achieve the necessary functionalities. XAML will be read and parsed by the silver light runtime and then rendered accordingly to the browser.

This sample we are making using VS 2008 web express edition and .NET 3.5. It’s a 6 step procedure to run our first silver light application. So let’s go through it step by step.

Step1:- The first thing we need to do is install silverlight SDK kit from http://www.microsoft.com/downloads/details.aspx?familyid=FB7900DB-4380-4B0F-BB95-0BAEC714EE17&displaylang=en 

Step 2:- Once you install the silver light SDK you should be able to use the silver light template. So when you go to create a new project you will see a ‘SilverLight application’ template as shown in the below figure.

Step 3 :- Once you click ok you will see a dialog box as shown below which has three options.

Add a ASP.NET web project to the solution to host silver light: - This option is the default option, and it will create a new Web application project that is configured to host and run your Silverlight application. If you are creating a new silver light application then this is the option to go.

Automatically generate Test Page To Host Silverlight at build time: - This option will create a new page at run time every time you try to debug and test your application. If you want to only concentrate on your silver light application then this option is worth looking at.

Link This Silverlight Control Into An Existing Web Site :- If you have a existing silver light application then this option helps to link the silver light application with the existing web application project. You will not see this option enabled to new projects , you need to have an existing web application.

For this example we have selected the first option. Once you click ok you should see the full IDE environment for silver light.

So let’s run through some basic points regarding the IDE view what we see. You will see there are two projects one is your web application and the other is the silver light application. In the silver light application we two XAML files one is App.XAML and the other is Page.XAML.
App.XAML has the global level information.

Step 4:- Now for simplicity sake we just use the TextBlock tag to display a text. You can see as we type in the Page.XAML its displayed in the viewer.

Step 5 :- Now we need to consume the silver light application in a ASPX page. So in the HTML / ASPX page we need to first refer the silver light name space using the ‘Register’ attribute.

 

<%@Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls" TagPrefix="asp" %>

We also need to refer the script manager from the silver light name space. The script manager control is functionality from AJAX. The main purpose of this control is to manage the download and referencing of JavaScript libraries.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

Finally we need to refer the silver light application. You can see that in the source we have referred to the XAP file. XAP file is nothing but a compiled silver light application which is compressed and ZIP. It basically has all the files that’s needed for the application in a compressed format. If you rename the file to ZIP extension you can open the same using WINZIP.

<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/MyFirstSilverLightApplication.xap" MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />

So your final ASPX / HTML code consuming the silver light application looks something as shown below.

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="System.Web.Silverlight" Namespace="System.Web.UI.SilverlightControls"

TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">

<head runat="server">

<title>MyFirstSilverLightApplication</title>

</head>

<body style="height:100%;margin:0;">

<form id="form1" runat="server" style="height:100%;">

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<div style="height:100%;">

<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/MyFirstSilverLightApplication.xap" 

MinimumVersion="2.0.31005.0" Width="100%" Height="100%" />

</div>

</form>

</body>

</html>

Step 6 :- So finally set the web application as start up and also set this page as start up and run it. You should be pleased to see your first silver light application running.
 

Animation is modification of a value over a period of time. Due to the modification of value over a period of time it creates an illusion of animation. For instance you can place a circle and modify the ‘Canvas.Right’ property to create an animation which moves the circle to the right.
 

Figure: - Canvas right direction
 

Time represents a segment/unit of time on which the animation will move. The unit of time can be in seconds, minutes or hours. The unit depends on the animation nature. ‘System.Windows.Media.Animation.Timeline’ class represents the time line.
 

As said previously animation is all about a start value and the moving towards some new value and thus providing illusion. Silver light uses three properties for it ‘From’, ‘To’ and ‘By’. ‘From’ specifies the start of the animation and ‘To’ specifies till where the animation should run. ‘By’ is relative animation. When we specify the ‘From’ and “By’ animation progresses from the value specified by the ‘From’ property to the value specified by the sum of the ‘From’ and ‘By’ properties.
 

Figure :- Different kind of animations
 

Now again using ‘From’, ‘By’ and ‘To’ you can have linear animation or you can non-linear animation. In linear animation everything is straight forward while non-linear animation changes as per animation needs.
 

Figure :- Linear and Non-linear
 

As discussed in the previous question silverlight animation is all about specifying ‘From’ ,’To’ and ‘By’ value for a property. Now the property can be a simple double value, can be color or can be a point. Silverlight has categorized these properties in to three sections as explained below.

‘DoubleAnimation’ uses properties with double value, for instance Rectangle.Height or width. You can specify double values by using 'From','To' and 'By'.

‘PointAnimation’ uses point value i.e. X, Y values for line segments and curves.

‘ColorAnimation’ helps to alter the value of color value of an object.
 

Storyboard is sequence of snapshots / sketches which depict changes over a period of time. You can visualize storyboard as a time line which we have discussed in one of our previous questions. Storyboard has collection of animations grouped together. The collection of animation is because storyboard uses sketches to depict changes over a period of time.

For instance you can see there are four sketches used in the below animation to depict clash of two arrows with a boom boom at the end. So basically storyboard will have collection of four animation objects which will be shown rapidly over a period of time.

Figure: - Arrow Sketches
 

Let’s create a simple animation shown below. We will create a rectangle object whose height will increase in an animated manner. You can see from the below figure how the animation will look like. We will execute this animation using ‘DoubleAnimation’ object

Figure :- Rectangle height animation
 

So the first step is to define the rectangle object. Below is the XAML code snippet for which defines the rectangle object with height and width equal to 100 and chocolate background.
 

<Grid x:Name="LayoutRoot" Background="White">

<Rectangle x:Name="RectAnimated" Fill="Chocolate" Stroke="Black"

Width="100" Height="100">



</Rectangle>

</Grid> 

As a second step we need to define when the animation will be trigger. You can see from the below code snippet we have defined that the story board will be invoked when the rectangle object is loaded.
 

<Grid x:Name="LayoutRoot" Background="White"> 

<Rectangle x:Name="RectAnimated" Fill="Chocolate" Stroke="Black"

Width="100" Height="100">

<Rectangle.Triggers>

<EventTrigger RoutedEvent="Rectangle.Loaded">

<BeginStoryboard>



</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

</Rectangle>

</Grid>

Finally we have put in the ‘DoubleAnimation’ object which uses the ‘Height’ as the target property which will be animated ‘100’ value to ‘300’ value in 5 seconds. Also note that target name is the rectangle object ‘RectAnimated’. We have also define ‘AutoReverse’ as ‘true’ which means once it reaches ‘300’ it will restart from ‘100’.
 

<Grid x:Name="LayoutRoot" Background="White">




<Rectangle x:Name="RectAnimated" Fill="Chocolate" Stroke="Black"


Width="100" Height="100">


<Rectangle.Triggers>


<EventTrigger RoutedEvent="Rectangle.Loaded">


<BeginStoryboard>


<Storyboard x:Name="myStoryboard">


<DoubleAnimation


Storyboard.TargetName="RectAnimated"


Storyboard.TargetProperty="Height"


From="100" By="300" Duration="0:0:5" 


AutoReverse="True" 


RepeatBehavior="Forever" />


</Storyboard>


</BeginStoryboard>


</EventTrigger>


</Rectangle.Triggers>


</Rectangle>


</Grid>