Silverlight Overview

Silverlight

Microsoft Silverlight is a cross-browser, cross-platform implementation of the .NET Framework for building and delivering the next generation of media experiences and rich interactive applications (RIA) for the Web. You can also create Silverlight applications that run outside of the browser on your desktop. Finally, you use the Silverlight framework to create applications for Windows Phone. Silverlight uses the Extensible Application Markup Language (XAML) to ease UI development (e.g. controls, animations, graphics, layout, etc.) while using managed code or dynamic languages for application logic.

What Is Silverlight?

Silverlight enables you to create a state-of-the-art application that has the following features:

• It is a cross-browser, cross-platform technology. It runs in all popular Web browsers, including Microsoft Internet Explorer, Mozilla Firefox, and Apple Safari, Google Chrome, and on Microsoft Windows and Apple Mac OS X.
• It is supported by a small download that installs in seconds.
• It streams video and audio. It scales video quality to everything from mobile devices to desktop browsers to 720p HDTV video modes.
• It includes compelling graphics that users can manipulate—drag, turn, and zoom—directly in the browser.
• It reads data and updates the display, but it doesn't interrupt the user by refreshing the whole page.
• The application can run in the Web browser or you can configure it so users can run it on their computer (out-of-browser). In addition, In addition, you can use your knowledge of the Silverlight framework to create Windows Phone applications.

Silverlight application with rich graphics and user interaction

You can create Silverlight applications in a variety of ways. You can use Silverlight markup to create media and graphics, and manipulate them with dynamic languages and managed code. Silverlight also enables you to use professional-quality tools like Visual Studio for coding and Microsoft Expression Blend for layout and graphic design.

What Features Are in Silverlight?

---

Silverlight combines multiple technologies into a single development platform that enables you to select the right tools and the right programming language for your needs. Silverlight offers the following features:

• WPF and XAML. Silverlight includes a subset of the Windows Presentation Foundation (WPF) technology, which greatly extends the elements in the browser for creating UI. Silverlight lets you create immersive graphics, animation, media, and other rich client features, extending browser-based UI beyond what is available with HTML alone. XAML provides a declarative markup syntax for creating elements. For more information, see Layout, Input, and Printing, Graphics, Animation, and Media, and Controls.
• Extensions to JavaScript. Silverlight provides extensions to the universal browser scripting language that provide control over the browser UI, including the ability to work with WPF elements. For more information, see JavaScript API for Silverlight.
• Cross-browser, cross-platform support. Silverlight runs the same on all popular browsers (and on popular platforms). You can design and develop your application without having to worry about which browser or platform your users have. For more information, see Supported Operating Systems and Browsers.
• Integration with existing applications. Silverlight integrates seamlessly with your existing JavaScript and ASP.NET AJAX code to complement functionality you have already created. For more information, see Integrating Silverlight with a Web Page.
• Access to the .NET Framework programming model. You can create Silverlight applications using dynamic languages such as IronPython as well as languages such as C# and Visual Basic. For more information, see Managed API for Silverlight
• Tools Support. You can use development tools, such as Visual Studio and Expression Blend, to quickly create Silverlight applications. For more information, see Silverlight Designer for Visual Studio 2010 and Expression Blend.
• Networking support. Silverlight includes support for HTTP over TCP. You can connect to WCF, SOAP, or ASP.NET AJAX services and receive XML, JSON, or RSS data. For more information, see Networking and Web Services. In addition, you can build multicast clients with Silverlight. For more information, see Working with Multicast.
• LINQ. Silverlight includes language-integrated query (LINQ), which enables you to program data access using intuitive native syntax and strongly typed objects in .NET Framework languages. For more information, see XML Data.
  Running Silverlight Applications
  
  
  
  
  

  To run a Silverlight web application, users require a small plug-in in their browser. The plug-in is free. If users do not already have the plug-in, they are automatically prompted to install it. The download and installation take seconds and require no interaction from the user except permission to install.

  Silverlight makes sure that you can run your applications in all modern browsers, without having to create browser-specific code. Silverlight applications can run in the browser or outside the browser

Fundamentals of Silverlight

Introduction to XAML

XAML stands for Extensible Application Markup Language. Its a simple language based on XML to create and initialize .NET objects with hierarchical relations. Altough it was originally invented for WPF, it's reused in Silverlight but it can by used to create any kinds of object trees.

Today XAML is used to create user interfaces in WPF and Silverlight, in WCF, to declare workflows in WF and for electronic paper in the XPS standard.

All types in Silverlight have parameterless constructors and make excessive usage of properties. That is done to make it perfectly fit for XML languages like XAML.

Advantages of XAML

All you can do in XAML can also be done in code. XAML ist just another way to create and initialize objects. You can use Silverlight without using XAML. It's up to you if you want to declare it in XAML or write it in code. Declare your UI in XAML has some advantages:

• XAML code is short and clear to read
• Separation of designer code and logic
• Graphical design tools like Expression Blend require XAML as source.
• The separation of XAML and UI logic allows it to clearer separate the roles of designer and developer.

XAML vs. Code

As an example we build a simple StackPanel with a textblock and a button in XAML and compare it to the same code in C#.

<StackPanel>

    <TextBlock Margin="20">Welcome to the World of XAML</TextBlock>
<Button Margin="10" HorizontalAlignment="Right">OK</Button>
</StackPanel> 

The same expressed in C# will look like this:

// Create the StackPanel 

StackPanel stackPanel = new StackPanel();
this.Content = stackPanel;

// Create the TextBlock
TextBlock textBlock = new TextBlock();
textBlock.Margin = new Thickness(10);
textBlock.Text = "Welcome to the World of XAML";
stackPanel.Children.Add(textBlock);

// Create the Button
Button button = new Button();
button.Margin= new Thickness(20);
button.Content = "OK";
stackPanel.Children.Add(button);


As you can see is the XAML version much shorter and clearer to read. And that's the power of XAMLs expressiveness.

Properties as Elements

Properties are normally written inline as known from XML 

 <Button.Content>

   <Image Source="Images/OK.png" Width="50" Height="50" />
</Button.Content>
</Button> 

Implicit Type conversion

A very powerful construct of Silverlight are implicit type converters. They do their work silently in the background. When you declare a BorderBrush, the word "Blue" is only a string. The implicit BrushConverter makes aSystem.Windows.Media.Brushes.Blue out of it. The same regards to the border thickness that is beeing converted implicit into a Thickness object. Silverlight includes a lot of type converters for built-in classes, but you can also write type converters for your own classses.
<Border BorderBrush="Blue" BorderThickness="0,10">
</Border>

Markup Extensions

Markup extensions are dynamic placeholders for attribute values in XAML. They resolve the value of a property at runtime. Markup extensions are surrouded by curly braces (Example: Background="{StaticResource NormalBackgroundBrush}"). Silverlight has some built-in markup extensions, but you can write your own, by deriving from MarkupExtension. These are the built-in markup extensions:

Binding
To bind the values of two properties together.
StaticResource
One time lookup of a resource entry
TemplateBinding
To bind a property of a control template to a dependency property of the control
x:Static
Resolve the value of a static property.
x:Null
Return null

The first identifier within a pair of curly braces is the name of the extension. All preciding identifiers are named parameters in the form of Property=Value. The following example shows a label whose Content is bound to the Text of the textbox. When you type a text into the text box, the text property changes and the binding markup extension automatically updates the content of the label.

<TextBox x:Name="textBox"/>
<Label Content="{Binding Text, ElementName=textBox}"/> 

Namespaces

At the beginning of every XAML file you need to include two namespaces.
The first is http://schemas.microsoft.com/winfx/2006/xaml/presentation. It is mapped to all Silverlight controls in System.Windows.Controls.
The second is http://schemas.microsoft.com/winfx/2006/xaml it is mapped to System.Windows.Markupthat defines the XAML keywords.
The mapping between an XML namespace and a CLR namespace is done by the XmlnsDefinition attribute at assembly level. You can also directly include a CLR namespace in XAML by using the clr-namespace: prefix.
<Window xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
        xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”>
</Window> 

Whats new in Silverlight 4.0 Beta 1

Introduction

Silverlight 4.0 is the next future version of Microsoft Silverlight. It will be released around summer 2010. Currently the first Beta version is available.

Tons of New Features

• Broader Interaction capabilities
  • Printing support
  • Access to Microphone and WebCam
  • Audio and video recording
  • Copy and Paste or Drag and Drop from and to Silverlight applications
  • Mouse Wheel support for scrolling lists
  • Context Menu on Right-Click
  • Improved Multi-touch support with more gestures
• API enhancements
  • HTML Control to embed web content. It can even be used as a brush.
  • Improved DataBinding capabilities (Grouping,Binding to DependencyObjects,StringFormatting)
  • New Controls (RichTextBox, MaskedTextBox, Enhanced DataGrid)
  • WCF RIA Services to bring your business data to Silverlight with a few clicks
  • Encanced Localization including Right-To-Left
• Platform Enhancements
  • CLR compatibility between WPF and Silverlight
  • Performance optimizations (Applications run up to 200% faster)
  • Compatible with Google Chrome Browser
• Media Enhancements
  • Multicast networking
  • Content protection for H.264 media
• Trusted Applications
  • User Interface to request application privileges that exceed the silverlight sandbox
  • Read and write files to the user’s documents, music, pictures and videos folder
  • Run other desktop programs such as Office
  • Communicate with local devices by using COM automation
  • Full keyboard support in fullscreen mode
  • Cross-domain access without a security policy file
• Development Environment Enhancements
• Fully editable Silverlight designer in VS2010
• Wire-up DataBinding by Drag&Drop

Create a simple Silverlight Application

Introduction

In this article I will show you how to create a simple silverlight application that shows a text, when the user clicks on a button. The result will look like this:



1. Ensure that you have the Tools installed

To get this sample running on your machine, you need Visual Studio 2008 and the Silverlight 3.0 Tools installed. You can get a detailed installation manual here.

2. Create a new Silverlight Project

Start Visual Studio 2008 and create a new "Silverlight Application Project" by choosing "File" -> "New" -> "Project...". Choose the destination path and give your project a meaningful name, then hit OK to create the project.

Silverlight solutions always consist of two projects. One that is the silverlight application itself - and one, that embeds it in a web page. Visual Studio asks you, if you want to embed your silverlight application in a simple HTML page, or in a full ASP.NET web application. For this example we choose "ASP.NET Web Application Project".

If we look at the files that Visual Studio created, we see the two projects "HelloSilverlightDemo" which is our silverlight application, and "HelloSilverlightDemo.Web" which is an ASP.NET web application that embeds our silverlight app into a webpage.

When we compile our solution, VisualStudio packs all XAML and DLLs into a deployment package that is called "HalloSilverlight.XAP. Its actually just a ZIP file that has been renamed. If you want to deploy your Silverlight to a web server, this file contains all information to make it run.

3. Place the controls

Unfortunately Visual Studio 2008 does not include a visual designer for Silverlight. If you want to use a visual designer, you can use Expression Blend to design your project. In our simple case we write directly the XAML code. Open the "MainPage.xaml" file and past the following code snipped to it:

<UserControl
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 x:Class="HelloSilverlightDemo.MainPage"
 Width="400" Height="100"gt;

<Grid Background="#FFECEDF0">
    <Button Margin="144,56,152,20" Content="Say Hello..." 
                Click="Button_Click" />
    <TextBlock x:Name="textBlock" Margin="80,16,88,60" 
                   FontSize="16" FontWeight="Bold" />
</Grid>
</UserControl>

The XAML code looks a bit like HTML. We use a Grid layout panel to align a Button and a TextBlock control on the surface. We define a margin, that defines the position of the elements. The Click="Button_Click" registers a callback function, that is called, when the button gets clicked.


4. Wire-up the interaction logic

Every UserControl in Silverlight consists of a view that defines the appearance and a code-behind file that defines the interaction logic. The view is defined in XAML and the code-behind is written in C# or VB.NET.

In the code-behind we have to define the callback-function "Button_Click", that is called when the button gets clicked. In this function, we set the text of the textBlock to "Hello Silverlight".

public partial class MainPage : UserControl
{
  public MainPage()
  {
      InitializeComponent();
  }

  private void Button_Click(object sender, RoutedEventArgs e)
  {
      textBlock.Text = "Hello Silverlight!";
  }
}


5. Test your application in the Browser

Now, we have done all our work, and we are curious, to see if it works. To test your application just hit [F5] and wait until Visual Studio has compiled all sources. A browser window will open automatically and load a webpage including your Silverlight app. To do this trick, VisualStudio brings up a small development web server. You can see its icon in the system tray. Now you can debug and test your application.

Silverlight : Install the Tools

Install the Tools

To work with Silverlight, you have to install software on your computer. Choose one item from the following list and make your computer ready to get started with Microsoft Silverlight.

For Interested

If you don't want to develop Silverlight applications and just explore the samples, then you just need to install the Silverlight runtime, and you are done.

• Download Silverlight Runtime

For Developers

If you are a developer and you want to develop Silverlight applications using Visual Studio, you have to install the Silverlight Tools. It contains a special runtime that allows debugging and the SDK.

• Download Silverlight 4 Tools for VS2010
• Silverlight 4 Toolkit (additional controls)
• Download Visual Studio 2010 Express C#

For Designers

If you are an interaction or visual designer and you want to take full advantage of a graphical designer that allows a close collaboration with Adobe Tools, you have to use Expression Blend.

• Download Expression Blend 4 RC

Introduction to Microsoft Silverlight

Introduction

Microsoft Silverlight is a web application framework to build rich internet applications based on .NET. The end user needs to install a small (4MByte) browser plugin to use Silverlight. The installation is quick and simple.

The plugin is available on Windows and Mac OS, and in runs under Internet Explorer, FireFox and Safari, there is also an open source version for Linux called Moonlight (in dependence to Mono). Microsoft plans to bring the Silverlight platform to the mobile world. There will be a version for Windows Phone 7 and Symbian Series 60 available in 2010.

Develop Rich Internet Applications in C# and VB.NET

The Silverlight plugin includes a subset of the .NET framework. This allows developers of Silverlight to reuse their skills and knowledge and let them write code in their favorite programming language like C# or VB.NET.

To develop Silverlight applications you can use Visual Studio 2008 or 2010

The UI framework of Silverlight is a subset of the Windows Presentation Foundation. It allows you to write your views in a declarative XML syntax called XAML.

What's new in Silverlight 5

Only a few month ago, Microsoft released Silverlight 4, and already Silverlight 5 is on the way. Today (02.12.2010), Scott Guthrie, vice president of the Microsoft Developer Division announced Silverlight 5 at the Silverlight Firestarter event at Redmond. The new Version will include many demanded and cool new features like:

• Richer Media Support
• 3D Support
• P/Invoke
• Elevated rights in the browser
• Vector printing
• Multiple windows (out-of-Browser only)
• Improved DataBinding (almost like in WPF)
• Custom MarkupExtensions
• Debugging DataBinding
• UI Testing

A public beta will be available in spring 2011. The final version is expected in the end of 2011