Tag Archives: Silverlight

Silverlight: What is inside a .xap?

Posted on by

Start a new silverlight application(File->New Project-> Silverlight Application), ensure “Host the Silverlight application in a new website” is checked. Now for time being just build the solution. After the build completion look for a file with.xap extension inside the “ClientBin” folder.
Ever wondered wat iteez? No – then here iteez: .xap is a package file and it is nothing but a compressed form of your silverlight dlls, which will be extracted at the runtime from the browser. So did that mean it is some form of .zip? Yeah – just rename the file’s extension to .zip and you should be able to extract it and see whats inside. Do let me know whats inside. iteezzzz ;)

Cheers!

Understanding Dependency Property

Posted on by

Everyone who get introduced to Windows Presentation Foundation(WPF) are familiar with this term. But lot many get confused on it or never get what it is. I will try and make this post very simple so that it is easier to understand. My intentions are not to provide the complete technical stuff behind the Dependency property, but to keep things simple to understand and to get started. You should probably work on this lot many times to understand it better.

If you are not new to .net or any other OOP language, you are not new to Property. Dependency property was introduced in .net 3.0 and it is all together new implementation of normal properties. Dependency property differ in terms of its storage mechanism, it uses Sparse Storage and its implementation saves per-instance memory compared to a typical .NET property. However benefits of dependency property is more than just storage. One of the significances of Dependency property is its support for notification change – that means any change in the value of the property is notified down the element tree in WPF. This point particularly becomes very important to understand this.

Before I completely get on with Dependency property, let me give a gist of what attached property is. Let me explain this in a way a lay man understands: Consider a “<Canvas></Canvas>” element in your XAML. Now if you want to add a child element “<TextBlock>” to it, how do you place them in the canvas? – Here it is:

<Canvas>
       <TextBlock Canvas.Top=”100″ Canvas.Left=”100″ Text=”Hello World”/>
</Canvas>

OR an example with a Grid

<Grid>
   <Grid.ColumnDefinitions>
      <ColumnDefinition/>
      <ColumnDefinition/>
   </Grid.ColumnDefinitions>
   <Grid.RowDefinitions>
      <RowDefinition/>
       <RowDefinition/>
   </Grid.RowDefinitions>
   <TextBlock Grid.Column=”0″ Grid.Row=”0″ Text=”Hello World  1″/>
   <TextBlock Grid.Column=”1″ Grid.Row=”0″ Text=”Hello World 2″/>
   <TextBlock Grid.Column=”0″ Grid.Row=”1″ Text=”Hello World 3″/>
   <TextBlock Grid.Column=”1″ Grid.Row=”1″ Text=”Hello World 4″/> 
 </Grid>

So what we do is we set the Canvas’s Top and Left property in the TextBlock child element or even the Grid’s Column and Row property in the child elements. This is achieved using attached property.

So here is the MSDN explanation: “An attached property is intended to be used as a type of global property that is settable on any object. One purpose of an attached property is to allow different child elements to specify unique values for a property that is actually defined in a parent element.”

In the above example, we see the property element of a parent is changed by the child, and the same gets reflected throughout the child elements. I have explained this so that you don’t confuse attached property with dependency property.

Let us extend couple of lines of code more and now understand dependency property.

And here it is:

<Canvas>
<Slider Canvas.Top=”10″ Canvas.Left=”10″ Name=”MySlider” Minimum=”10″ Maximum=”1000″ Ticks=”100″ Width=”300″/>
 <Ellipse Canvas.Top=”130″ Canvas.Left=”150″ Width=”{Binding ElementName=MySlider, Path=Value}” Height=”{Binding ElementName=MySlider, Path=Value}” Fill=”Red”/>
 </Canvas>

The output of the above example is: When the slider is moved, automatically the ellipse gets larger or smaller based on the value of the slider. So what we understand from this is without writing event handlers or any code behind to handle the slider movement and the ellipse height and width setters – we achieve this. This is because the property “Value” of the slider is a dependency property and it notifies the change to all the elements in the XAML, and since the Ellipse’s width and height are bound to the “Slider.Value” it automatically reflects the change.

This was just an introduction, there are couple of more things I want to cover like – creating your own dependency properties for the custom controls etc, which will be updated in the next post.

Cheers!

Silverlight for the Newbie!

Posted on by

It is been really long I have worked on Web development – close to 2 years and I really miss every bit of it. I have moved on to a world where it is just business logic. Though this is more challenging – as it involves developing performance efficient and highly object oriented codes, I still miss the art of developing rich User Experience(UX).  Words “Ajax”,”Silverlight” and few others revolve around me every night, as I take lot of time reading about them and mostly few minutes before my nap. And hence I started to explore myself. Since I had worked on Asp.net Ajax and WPF before, it was not that difficult for me to understand. The intention of this post is to help the newbie get started with the Microsoft’s Magic Web Wand called Silverlight – “Light up the Web!”.

What is Silverlight?

When the internet was born, it was primarily used for sharing static content over the network with the help of a simple web browser. But things have changed over a period of time. Internet moved on from static content –to- dynamic content –to- rich user experience. Let it be shopping online, social networking, banking or any other web activities, user demands a rich Experience. And thus the Silverlight. Silverlight is a client runtime which provides rich user experience. It runs on user’s browser with limited capabilities on the user’s system resources. It is a free downloadable one time installer. It supports all the latest browsers like IE, Mozilla, Safari etc on Windows, Mac, and Linux platforms.

Let us tackle couple of questions to understand better:

  1. Why Silverlight?
    Think about developing a website for a multimedia company/ad-agency where you need to show a gist of their actual work, do you think their clients at their web page expect to see some static content and get impressed of their work? Of course no, they want to see things more lively. Now think of developing a dynamic web page, which should create less load on the server, perform better on the client, show animations, stream videos, etc. I am sure this is not an impossible task, with Javascript and any server side code this is very much possible. But think of the time it takes to develop one. One more important thing which comes to your mind the moment you think about Javascript is browser and platform compatibility. Think of writing “If-else” statements over and again. Silverlight solves all these problems. You don’t have to worry about the client platform or the browser, you don’t have to think of including different players for the video streaming, and most importantly you don’t need to know javascript. All you need to know is simple C# and XAML and you are good to light up the web.
  2. How is it different from Ajax?
    Imagine the lines of code you need to write in Ajax to make an animation, stream media, etc. Since Silverlight uses WPF’s Subset UI programming, you can use the markup language XAML to do things for you. At user point of view Silverlight only differs from the point of execution – Silverlight uses the runtime to execute whereas a Ajax executes inside the web browser. Both the technologies are given equal prominence by Microsoft. With all of these technologies in place we are closely bridging the gap between a web application and a stand alone desktop application.
  3. Why should one not use Flash instead of Silverlight?
    The answer is pretty simple – Do you want to learn flash, or depend on a flash programmer to finish your application? Or simply add few more lines of code in XAML and C# – you may land up doing things better than a designer.

Versions of Silverlight(Release):

  • Silverlight 1.0
  • Silverlight 2.0
  • Silverlight 3.0

Prerequisites for development:

  1. Make sure you have .net 3.5 SP1 and above
  2. If you are using Visual Studio 2008 (any edition) – make sure you have VS 2008 SP1 installed.
  3. Install the Visual Studio tools for  Microsoft Silverlight 3 and SDK

In this post I have limited to the introduction in simple terms.

More posts to come on Silverlight architecture, CLR usage, WPF Subset UI usage etc.

Cheers!