Silverlight Exclusive Interview Questions and Answers (29) - Page 1

  • A joint initiative from DotNetFunda.Com and Questpond.
  • A one stop place on the internet to get trusted and proven Interview Questions (based on more than a decade of experience in this field) to ensure the success of the candidates.
  • You will find almost all Interview questions from Questpond here and this list is growing day by day with all latest and updated interview questions.

29 records found.

Get 650+ Questpond's Interview videos on discount

Are XAML file compiled or built on runtime?

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.
 


Can you explain how we can separate code and XAML?

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.


How can we access XAML objects in behind code?

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.


What is SilverLight?

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.
 


Can SilverLight run in other platforms other than window?

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.

 


Come on, even WPF runs under browser why SilverLight?

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.
 


What is the relationship between Silver Light, WPF and XAML?

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.



Can you explain Silver Light architecture?

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.



 


What are the various basic steps to make a simple Silver Light application?

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.
 



What is the definition of animation from SilverLight perspective?

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
 


What is a timeline in SilverLight?

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.
 


What are the different kinds of animation supported by SilverLight?

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
 


Can you explain doubleanimation, coloranimation and pointanimation?

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.
 


What is a story board?

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
 


Can we see a simple silverlight animation to just get started?

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>


What are the different ways in which silver light does transformation?

There are times when you want to transform your object in various ways. For example you would like to tilt the object in 45 degree; you would like skew the object or rotate the object. Below are some important transformation example which you can achieve using Silverlight.




























Below is a simple example which uses ‘RotateTransform’ to tilt the text at 45 degree.
<TextBlock HorizontalAlignment="Center" 

Text="Text
rotated by 45 degree">
<TextBlock.RenderTransform>
<RotateTransform Angle="45" />
</TextBlock.RenderTransform>
</TextBlock>


                        S

Below is a simple example which uses ‘ScaleTransform’ to scale the text to ‘2’.
<TextBlock VerticalAlignment="Center"

HorizontalAlignment="Center"
Text="Text scaled with 2">
<TextBlock.RenderTransform>
<ScaleTransform ScaleX="2"/>
</TextBlock.RenderTransform>
</TextBlock>

Below is a simple example which uses ‘RenderTransform’ to position your text at a particular X and Y position.
<TextBlock VerticalAlignment="Center" 

HorizontalAlignment="Center" Text="Text
with X/Y values">
<TextBlock.RenderTransform>
<TranslateTransform X="-100" Y="-100"/>
</TextBlock.RenderTransform>
</TextBlock>

In case you want skew your object, below is a simple XAML code snippet which
skews you rectangle object at 45 degree.
<Rectangle Fill="Chocolate" 

Stroke="Black" Width="100" Height="100">
<Rectangle.RenderTransform>
<SkewTransform AngleX="45"/>
</Rectangle.RenderTransform>
</Rectangle>

There situations when you would like to apply two or more transformation types
 on an object. In those scenarios you can use ‘TransformGroup’ to apply multiple transformation.
Below is a code snippet which shows ‘SkewTransform’ and ‘RotateTransform’ applied in a group to
 the rectangle object.
<Rectangle Fill="Chocolate" 

Stroke="Black" Width="100" Height="100">
<Rectangle.RenderTransform>
<TransformGroup>

<SkewTransform AngleX="45"/>
<RotateTransform Angle="45"/>

</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>


 


Can you explain one way and two way bindings?

One way binding


As the name so the behavior. In one way bindings data flows only from object to UI and not vice-versa. For instance you can have a textbox called as ‘TxtYear’ which is binded with an object having property ‘Year’. So when the object value changes it will be reflected on the silverlight UI, but the UI cannot update the year property in the object.



 


 


 


 


 


It’s a three step procedure to implement one way binding. First create your class which you want to bind with the silverlight UI.  For instance below is a simple class called as ‘ClsDate’ with a ‘Year’ property.

public class clsDate

{
private int _intYear;
public int Year
{
set
{
_intYear = value;
}
get
{
return _intYear;
}
}
}

In the second step you need to tie up the ‘Year’ property with a silver light UI text box. To bind the property you need to specify ‘Binding Path=Year’ in the text property of the text box UI object. ‘Year’ is the property which we are binding with the text box UI object.

<TextBox x:Name="txtCurrentYear" Text="{Binding Path=Year}" Height="30" Width="150" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBox>


The final step is to bind the text box data context with the date object just created.

public partial class Page : UserControl

{
public Page()
{
InitializeComponent();
clsDate objDate = new clsDate();
objDate.Year = DateTime.Now.Year;
txtCurrentYear.DataContext = objDate;
}
}

Two way binding


Two way binding ensure data synchronization of data between UI and Objects. So any change in object is reflected to the UI and any change in UI is reflected in the object.



 


 


 


 


 



To implement two way binding there are two extra steps with addition to the steps provided for ‘OneWay’.  The first change is we need to specify the mode as ‘TwoWay’ as shown in the below XAML code snippet.

<TextBox x:Name="txtEnterAge" Text="{Binding Path=Age, Mode=TwoWay}" Height="30" Width="150" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBox>

Second change is we need to implement ‘INotifyPropertyChanged’ interface. Below is the class which shows how to implement the ‘INotifyPropertyChanged’ interface. Please note you need to import ‘System.ComponentModel’ namespace.

public class clsDate : INotifyPropertyChanged

{
public event PropertyChangedEventHandler PropertyChanged;
private int _intYear;
public int Year
{
set
{
_intYear = value;
OnPropertyChanged("Year");
}
get
{
return _intYear;
}
}
private void OnPropertyChanged(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this,new PropertyChangedEventArgs(property));
}
}}

The binding of data with data context is a compulsory step which needs to be performed.


Can you explain One time binding?

In one time binding data flows from object to the UI only once. There is no tracking mechanism to update data on either side. One time binding has marked performance improvement as compared to the previous two bindings discussed. This binding is a good choice for reports where the data is loaded only once and viewed.

<TextBox x:Name="txtEnterAge" Text="{Binding Path=Age, Mode=OneTime}" Height="30" Width="150" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBox>

Can you demonstrate a Simple example of OneWay and TwoWay?

Below is a simple sample code where in we have two text boxes one takes in the age and the other text box calculates the approximate birth date.



 


 


 


 


 


 


 


Below is a simple class which has both the properties. We have implemented ‘INotifyPropertyChanged’ interface so that we can have two way communication for the year property.

using System;

using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
//
using System.ComponentModel;
namespace SilverLightBinding
{
public class clsDate : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;

private int _intYear;
private int _intAge;
public int Year
{
set
{
_intYear = value;
OnPropertyChanged("Year");

}
get
{
return _intYear;
}

}
public int Age
{
set
{
_intAge = value;
Year = DateTime.Now.Year - _intAge;
}
get
{
return _intAge;
}
}
private void OnPropertyChanged(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this,
new PropertyChangedEventArgs(property));
}
}

}
}
Finally we have also binded the SilverLight UI objects with the class properties.  Below is the XAML snippet for the same. One point to be noted is that ‘Age’ is bounded using two way mode as we need to modify the same from the user interface.
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center"> Enter your age in the below text box</TextBlock>


<TextBox x:Name="txtEnterAge" Text="{Binding Path=Age, Mode=TwoWay}" Height="30" Width="150" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBox>

<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">Your approximate birth date</TextBlock>

<TextBox x:Name="txtCurrentYear" Text="{Binding Path=Year}" Height="30" Width="150" VerticalAlignment="Center" HorizontalAlignment="Center"></TextBox>

 


What are the different ways provided to do layout in SilverLight?

There are three ways provided by Silverlight for layout management Canvas, Grid and Stack panel. Each of these methodologies fit in to different situations as per layout needs. All these layout controls inherit from Panel class. In the further sections we will go through each of them to understand how they work.


More SILVERLIGHT Interview Questions & Answers here

Found this useful, bookmark this page to the blog or social networking websites. Page copy protected against web site content infringement by Copyscape

 Exclusive Interview Questions and Answers Categories