ASP.NET

The easiest way to start using Silverlight is to create an ordinary website with HTML pages and
no server-side code. Here’s how:

1. Select File ➤ New ➤ Project in Visual Studio, choose the Visual C# group of project
types, and select the Silverlight Application template. As usual, you need to pick a project
name and a location on your hard drive before clicking OK to create the project.
2. At this point, Visual Studio will prompt you to choose whether you want to create a
full-fledged ASP.NET website that can run server-side code or an ordinary website with
HTML pages .For now, choose the second option (“Automatically generates
a test page”) to create an ordinary website and click OK.

Every Silverlight project starts with a small set of essential files, as shown in above Figure . All
the files that end with the extension .xaml use a flexible markup standard called XAML
. All the files that end with the extension .cs hold the C# source
code that powers your application.

Here’s a rundown of the files created in project:
• App.xaml and App.xaml.cs. These files allow you to configure your Silverlight application.
They allow you to define resources that will be made available to all the pages in
your application ,and they allow you react to application events such as
startup, shutdown, and error conditions .In a newly generated project,
the startup code in the App.xaml.cs file specifies that your application should begin by
showing Page.xaml.
• Page.xaml. This file defines the user interface (the collection of controls, images, and
text) that will be shown for your first page. Technically, Silverlight pages are user
controls—custom classes that derive from UserControl. A Silverlight application can
contain as many pages as you need—to add more, simply choose Project ➤ Add New
Item, pick the Silverlight User Control template, choose a file name, and click Add.
• Page.xaml.cs. This file includes the code that underpins your first page, including the
event handlers that react to user actions.
Along with these four essential files, there are a few more ingredients that you’ll only find
if you dig around. Under the Properties node in the Solution Explorer, you’ll find a file named
AppManifest.xml, which lists the assemblies that your application uses. You’ll also find a file
named AssemblyInfo.cs, which contains information about your project (such as its name,
version, and publisher) that’s embedded into your Silverlight assembly when it’s compiled.
Neither of these files should be edited by hand—instead, they’re modified by Visual Studio
when you add references or set projects properties.

Lastly, the gateway to your Silverlight application is an automatically generated but
hidden HTML file named TestPage.html . To see this file, make sure you’ve
compiled your application at least once. Then, click the Show All Files button at the top of the
Solution Explorer, and expand the Bin\Debug folder (which is where your application is compiled)

Creating a Simple Silverlight Page

As you’ve already learned, every Silverlight page includes a markup portion that defines the
visual appearance (the XAML file) and a source code file that contains event handlers. To customize
your first Silverlight application, you simply need to open the Page.xaml file and begin
adding markup.
Visual Studio gives you two ways to look at every XAML file—as a visual preview (known
as the design surface) or the underlying markup (known as the source view). By default, Visual
Studio shows both parts, stacked one on the other. Figure  shows this view and points out
the buttons you can use to change your vantage point.

As you’ve no doubt guessed, you can start designing your XAML page by dragging controls
from the Toolbox and dropping them onto the design surface. However, this convenience
won’t save you from learning the full intricacies of XAML. In order to organize your elements
into the right layout containers, change their properties, wire up event handlers, and use Silverlight
features like animation, styles, templates, and data binding, you’ll need to edit the
XAML markup by hand.
To get started, you can try creating the page shown here, which defines a block of text and
a button. The portions in bold have been added to the basic page template that Visual Studio
generated when you created the project.
<UserControl x:Class="SilverlightApplication1.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="100">
<Grid x:Name="LayoutRoot" Background="White">
<StackPanel>
<TextBlock x:Name="lblMessage" Text="Hello world."
Margin="5"></TextBlock>
<Button x:Name="cmdClickMe" Content="Click Me!" Margin="5"></Button>
</StackPanel>
</Grid>
</UserControl>
This creates a page that has a stacked arrangement of two elements. On the top is a block
of text with a simple message. Underneath it is a button.

Adding Event Handling Code

You attach event handlers to the elements in your page using attributes, which is the same
approach that developers take in WPF, ASP.NET, and JavaScript. For example, the Button element
exposes an event named Click that fires when the button is triggered with the mouse or
keyboard. To react to this event, you add the Click attribute to the Button element, and set it to
the name of a method in your code:
<Button x:Name="cmdClickMe" Click="cmdClickMe_Click" Content="Click Me!"
Margin="5"></Button>

This example assumes that you’ve created an event handling method named cmd-
ClickMe_Click. Here’s what it looks like in the Page.xaml.cs file:
private void cmdClickMe_Click(object sender, RoutedEventArgs e)
{
lblMessage.Text = "Goodbye, cruel world.";
}
You can’t coax Visual Studio into creating an event handler by double-clicking an element
or using the Properties window (as you can in other types of projects). However, once you’ve
added the event handler, you can use IntelliSense to quickly assign it to the right event. Begin
by typing in the attribute name, followed by the equal sign. At this point, Visual Studio will pop
up a menu that lists all the methods that have the right syntax to handle this event, and currently
exist in your code behind class. Simply choose the right event
handling method.

You can also connect an event with code. The place to do it is the constructor for your
page, after the call to InitializeComponent(), which initializes all your controls. Here’s the code
equivalent of the XAML markup shown previously:
public Page()
{
InitializeComponent();
cmdClickMe.Click += cmdClickMe_Click;
}

event handler at some point during the lifetime of your window. By comparison, the events
you hook up in XAML are always attached when the window object is first instantiated. The
code approach also allows you to keep your XAML simpler and more streamlined, which is
perfect if you plan to share it with non-programmers, such as a design artist. The drawback is
a significant amount of boilerplate code that will clutter up your code files.
If you want to detach an event handler, code is your only option. You can use the -= operator,
as shown here:
cmdClickMe.Click -= cmdClickMe_Click;
It is technically possible to connect the same event handler to the same event more than
once. This is almost always the result of a coding mistake. (In this case, the event handler will
be triggered multiple times.) If you attempt to remove an event handler that’s been connected
twice, the event will still trigger the event handler, but just once.

Testing a Silverlight Application
You now have enough to test your Silverlight project. When you run a Silverlight application,
Visual Studio launches your default web browser and navigates to the hidden browser test
page, named TestPage.html. The test page creates a new Silverlight control and initializes it
using the markup in Page.xaml.

Above Figure  shows the previous example at work. When you click the button, the event handling
code runs and the text changes. This process happens entirely on the client—there is no
need to contact the server or post back the page, as there is in a server-side programming
framework like ASP.NET. All the Silverlight code is executed on the client side by the scaleddown
version of .NET that’s embedded in the Silverlight plug-in.