Wednesday, June 22, 2011

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#.
    <TextBlock Margin="20">Welcome to the World of XAML</TextBlock>
<Button Margin="10" HorizontalAlignment="Right">OK</Button>
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";

// Create the Button
Button button = new Button();
button.Margin= new Thickness(20);
button.Content = "OK";
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
   <Image Source="Images/OK.png" Width="50" Height="50" />

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">

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}"/> 


At the beginning of every XAML file you need to include two namespaces. The first is It is mapped to all Silverlight controls in System.Windows.Controls. The second is 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=””

Whats new in Silverlight 4.0 Beta 1


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


No comments:

Post a Comment