Developing Web

Applications Using
Microsoft® Visual
Studio® 2008
Module 12: Delivering Dynamic Content with
Microsoft Silverlight
• Overview of Microsoft Silverlight

• Creating Silverlight-Based Applications with Visual Studio

2008
Lesson: Overview of Microsoft Silverlight
• Key Features of Microsoft Silverlight

• Tools for Designing and Developing Silverlight Applications

• Architecture of Silverlight

• XAML and Microsoft Silverlight

Key Features of Microsoft Silverlight
• Cross-browser, cross-platform implementation of the .NET
Framework
• Delivers rich media experiences and interactive
applications for the Web
• Provides a flexible programming model

• Integrates with existing Web applications

• Based on WPF and XAML technology

• Provides extensions to JScript

Tools for Designing and Developing
Silverlight Applications
• Microsoft Expression Studio
 Expression Design
 Expression Blend
 Expression Encoder

• Microsoft Visual Studio

 Silverlight Tools Alpha Refresh for Visual Studio
Architecture of Silverlight
• Core presentation
framework
• .NET Framework for
Silverlight
XAML and Microsoft Silverlight
What is XAML?
• XAML is a declarative language for user interface design

• XAML enables the separation of application design from

business logic
XAML and Silverlight
• A XAML file defines the user interface that appears as the
Silverlight content
 Typically has Canvas as the root element
 Includes namespaces for Silverlight-based applications
Lesson: Creating Silverlight-Based Applications
with Visual Studio 2008
• Creating a Silverlight Application

• Content of a Silverlight Application

• Implementing XAML Objects

• Handling Events

• Demonstration: Displaying Video Files in a Silverlight

Application
Creating a Silverlight Application
• Visual Studio 2008 provides project templates to create
Silverlight applications by using Visual C# and Visual Basic
• Creating an Application
 Create a Silverlight application by using Visual Studio 2008
 Add a new Silverlight page
Content of a Silverlight Application
• Page.xaml – UI for the Silverlight application:
 Page.xaml.cs or Page.xaml.vb – Event handling file

• Silverlight.js – Instantiates the Silverlight control

• TestPage.html – Incorporates the Silverlight control and

references the two JScript files
 TestPage.html.js – Specifies the size of the Silverlight plug-in
and references the XAML page.
Implementing XAML Objects
• Object element syntax
<Canvas>
<Rectangle>
</Rectangle>
</Canvas>

• Attribute syntax
<Canvas>
<Rectangle Width="150"Height="75"Fill="Red"/>
</Canvas>

• Text syntax
<Canvas>
<TextBlock Text="Hello"/>
</Canvas>
Handling Events
• Define a handler in the XAML file

• Write the handler in the code-behind file for the XAML file

• Compile the application

[Visual C#]
public void Page_Loaded(object o, EventArgs e)
{
...
Button1.MouseLeftButtonDown += new
MouseEventHandler(OnClick);
}

[Visual Basic]
Protected Sub Page_Load(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Me.Load
...
AddHandler Button1.MouseLeftButtonDown, _
AddressOf OnClick
End Sub
Demonstration: Displaying Video Files in a
Silverlight Application
• Add a video file to a Silverlight application

• Add a MediaElement object to the Canvas

• Watch the video in a browser

• Perform transformations on the video

Lab: Delivering Dynamic Content with
Microsoft Silverlight
• Exercise 1: Creating a Microsoft Silverlight-Based
Application
• Exercise 2: Adding Dynamic Content to a Microsoft
Silverlight Application

Logon information

Virtual machine 2310C-LON-DEV-12

User name Student
Password Pa$$w0rd

Estimated time: 45 minutes

Lab Scenario

HTML Test Page

TestPage.html
Benefits
Home Page
Page.xaml

Event Handling
Page.xaml.cs or
Page.xaml.vb
Lab Web
Application
Lab Review
Review Questions
• How can you create a square XAML object?

• How can you create a circular XAML object?

• How can you easily add event procedures for many

controls?
• Where is the code for the object animation?
Module Review and Takeaways
• Review Questions

• Real-World Issues and Scenarios

• Tools