Now, let us discuss about the software that we need to
create a Silverlight Application. To build a Silverlight project using Visual
Studio, you need the following. Later in this article, you will see how you can
create Silverlight Applications without installing Orcas and Silverlight Tools
Alpha.
·
Microsoft
Visual Studio Code Name "Orcas" Beta 1
·
Microsoft
Silverlight Tools Alpha for Visual Studio Code Name "Orcas" Beta 1.
Depending upon your Internet connection, downloading Orcas
will take a while. The entire file size is around 5.5 GB. The whole download is
divided into 8 parts. I installed Orcas on my Pentium 3 laptop which has a
Processor speed of 1.13GHz with 1GB RAM. As per Microsoft, the minimum speed
was 1.6GHz. However, Orcas is running fine in my system so far.
The entire installation of Orcas took around 3 hours for me.
Along with the Orcas installation, you will get the latest .NET Framework
(version 3.5).
Once, you have installed Orcas and the Silverlight Tools
open Orcas and select File -> New Project. Select the project type as
Silverlight as shown below.
Figure 1
Once the project is created, your solution explorer should
look like the following.
Figure 2
You will notice a new type of file called XAML (Extensible
Application Markup Language). In Silverlight, a XAML file will be used to
represent the user interface screen. You can use the XAML file to design your
display content. An alluring feature of Orcas is that we can open the XAML file
in the design mode. To open up the Page.XAML in the design mode, you will have
to install Microsoft Expression Blend, which is free to download at http://www.microsoft.com/expression/products/overview.aspx?key=blend.
After the successful installation of Blend, all you have to
do is right click the Page.XAML file. When you right click the file, you should
see the following options.
Figure 3
Select the option, "Open in Expression Blend…".
Microsoft Expression Blend is now ready to design your web page. Initial screen
will look like as follows.
Figure 4
Using the control toolbar that you see in the left hand side
of the above screen shot, you can insert controls such as text, shapes, etc. Using
the rectangle object and the textblock object I created a simple user interface
which looked like as follows:
Figure 5
Now, you are ready to view your first Silverlight output in
your webpage. Switch to the Orcas and Click F5, you will see the output in your
default browser. The above project produced the following output in my Internet
Explorer.
Figure 6
If you notice the source code for your XAML file, you will
notice a bunch of XML tags. These XML tags are the ones which represents the
user interface. The XAML file for the above example will look like as follows:
Listing 1
<Canvas
xmlns="http://schemas.microsoft.com/client/2007 "
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml "
x:Name="parentCanvas"
Loaded="Page_Loaded"
x:Class="MySilver.Page;assembly=ClientBin/MySilver.dll "
Width="640"
Height="480"
Background="White" >
<Rectangle RenderTransformOrigin=" -0.142,-0.457" Fill= "#FF1C1818"
Stroke="#FF000000" Width= "352" Height=" 70" Canvas.Left=" 145" Canvas.Top=" 43"/>
<TextBlock Width=" 306" Height="35 " Canvas.Left=" 174" Canvas.Top=" 64"
FontFamily=" Verdana" FontSize=" 18" FontStyle=" Normal" FontWeight=" Bold"
Foreground=" #FFF50C25" Text=" My First Silverlight Project" TextWrapping="Wrap"/>
</Canvas>
In the above code snippet if you carefully notice, you can
see the reference to MySilver.dll. Each XAML file has its own code behind
file. You can change properties, invoke methods for the above rectangle object
and Textblock object from the code behind file. If we do not have any code
behind file, then we can remove the attribute, x:Class="………."
