Silverlight and Xaml

XAML is an XML-based language that is used to define the visual assets of your application.this includes UI's graphical assets ,Animations,Media,Controls and more.It's designed as discussed earlier to bridge the gap between designers and developers when creating applications.The XAML used in silverlight differs from that of WPF it is asubset that is focussed on Web-Oriented features.Xaml uses XML to define the UI using XML elements.At the root of every Silverlight Document there is a container element,Such as a Canvaswhih defines the spae on which your UIwill be drawn.Here is an example given below:
<Canvas
Xmlns="http://Schemas.microsoft.com/client/2007 "
Xmlns:X="http://Schemas.microsoft.com/Winfx/2006/Xaml"
Width="640" Height="480"
Background="White">
</canvas>

Xaml Supports Shapes

It supports number of shapes that can be combined together to form more complex objects.You'll find a lot of more details about using XAML now let me show the basic XAML shapes.

• Retangle:Allows you to define a rectangular shape on the screen.
• Ellipse: Allows you to define an ellipse or circle.
• Line: Draws a line connecting two points.
• Polygon:Draws a many-Sided shape.
• Polyline:Draws many line segments.
• Path: Allows you to create a non-linear path.

PointAnimation

This allows points that define a 2D space to be animated as you change the properties ,You can do it in a linear manner,in which you would define a number of milestones along which the animation occursand it animates the value of a Point property between two target values by using linear interpolation over a specified Duration.

ColorAnimation

Animates the value of a Color property between two target values by using linear interpolation over a specified Duration and this allows colored properties,Such as fills,to be transformed.

DoubleAnimation

This Allows numeric properties,Such as those used to determine location,to be animated.
Animates the value of a Double between two target values by using linear interpolation over a specified Duration.

Xaml supports Animation

It Supports Animation through defining how their properties are changed over time using a timeline.These timelines are continued within a storyboard.Different Types of animation Include:

• DoubleAnimation.
• ColorAnimation.
• PointAnimation.

Alternative input & Accessibility-Features Of WPF

• WPF supports digital Ink-related functionality.
• WPF Microsoft UI Automation to allow developers to create accessible interfaces.

Text-Features of WPF

• WPF includes a number of typographic and text rendering features that were not available in GDI. This is the first Windows programming interface to expose OpenType features to software developers, supporting OpenType, TrueType, and OpenType CFF (Compact Font Format) fonts.
• Support for OpenType typographic features includes:
• Ligatures Old-style numerals (for example, parts of the glyph hang below the text baseline)
• Swash variants Fractions
• Superscript and Subscript
• Small caps
• Line-level justification
• Ruby characters
• Glyph substitution
• Multiple baselines
• Contextual and Stylistic Alternates
• Kerning

WPF handles texts in Unicode, and handles texts independent of global settings, such as system locale. In addition, fallback mechanisms are provided to allow writing direction (horizontal versus vertical) handled independent of font name; building international fonts from composite fonts, using a group of single-language fonts; composite fonts embedding.

Documents-Features Of WPF

• WPF natively supports paginated documents. It provides the DocumentReader class, which is for reading fixed layout documents. The FlowDocumentReader class offers different view modes such as per-page or scrollable and also reflows text if the viewing area is re sized.
• Natively supports XML Page Specification documents.
• Supports reading and writing paginated documents using Open Packaging Convention.

Effects-Features Of WPF

• WPF provides for BitmapEffects, which are raster effects applied to a Visual. These raster effects are written unmanaged code and therefore force rendering of the Visual to be performed on the CPU and not hardware accelerated.
• In .NET Framework 3.5 SP1, one of the new additions was the Effect class, which is a Pixel-Shader 2.0 effect that can be applied to a visual, which allows all rendering to remain on the GPU .

Imaging-Feature Of WPF

• WPF can natively access Windows Imaging Component(WIC) code and APIs allowing developers to write image codecs for their specific image file formats.

Annotations-Features of WPF

• Annotations can be applied on a per-object basis, for objects in a Document or FlowDocument.
• WPF only provides the capability for creating, storing and managing annotations; each application must expose the UI on their own.

Data binding-Features of WPF

• WPF has a built-in set of data services to enable application developers to bind and manipulate data within applications.
• There exists support for three types of data binding:
• one time: where the client ignores updates on the server.
• one way: where the client has read-only access to data.
• two way: where client can read from and write data to the server.
• A set of built-in controls is provided as part of WPF, containing items such as button, menu, grids and list box.
• A powerful concept in the WPF is the logical separation of a control from its appearance.
• A control's template can be overridden to completely change its visual appearance.
  and a control can contain any other control or layout, allowing for unprecedented control over composition.
• Features retained mode graphics, so that applications do not have to be bothered with repainting the display.

Animations-Feature of Silverlight

• Time-based animation. Scene redraws are time triggered.
• Presentation timers are initialized and managed by WPF.
• Scene changes co-ordinated by using a Storyboard.
• Animations can be triggered by other external events, including user action.
• Animation effects can be defined on a per-object basis, which can be accessed directly from XAML markup.
• Ships with a set of predefined effects, such as fade out for all controls.

Media Services -Feature Of WPF

• WPF provides shape primitives for 2D graphics along with a built-in set of brushes, pens, geometries, and transforms.
• The 3D capabilities in WPF are a subset of the full feature set provided by Direct3D. However, WPF provides tighter integration with other features like user interface (UI), documents, and media. This makes it possible to have 3D UI, 3D documents, and 3D media.
• There is support for most common image formats.
• WPF supports the video formats WMV,MPEG and some AVI files by default, but since it is Windows Media Player running beneath, WPF can use all the codecs installed for it.
• WPF supports time-based animations, in contrast to the frame-based approach. This decouples the speed of the animation from how the system is performing.

Interoperability-Features Of WPF

• WPF provides interoperability with the Windows API: Via hosting, one can use Windows Presentation Foundation inside existing Win32 code, or one can use existing Win32 code inside Windows Presentation Foundation.
• Interoperability with Windows Forms is also possible through the use of the ElementHost and WindowsFormsHost classes.
  
  

Graphical Services-Feature of WPF

• All graphics, including desktop items like windows, are Direct3D applications.
  This aims to provide a unified avenue for displaying graphics, as well as more advanced graphical features.
• Routing the graphics through Direct3D allows Windows to offload some graphics tasks to the GPUfound on the computer's graphics card. This can reduce the workload on the computer's CPU.
• Supports vector-based graphics, which allow lossless scaling.
• Supports 3D model rendering and interaction in 2D applications.
• Interactive 2D content can be overlaid on 3D surfaces, natively.

Features of Windows Presentation Foundation

The features are:

• Graphical Services
• Interoperability
• Media Services
• Animations
• Data binding
• Annotations
• Imaging
• Effects
• Documents
• Text

Difference between FLASH and SILVERLIGHT

Flash:

• Timeline animation in Flash is frame based. It uses transformation matrix.
• Flash uses a 3rd party library to store shapes
• Flash supports multiple video formats/codec’s, however the output is proprietary
• Flash content can be created by using Adobe Flash.
• As a programming model, ActionScript has a huge learning curve and is not a common
• programming skill found in developers.
• Flash provides with 2D animation graphics.
• The cost of Media server licensing in Flash is more.
• Full screen video capabilities (720p) not available
• Flash content binary in nature.

Silverlight:

• Silverlight uses timeline (vector) based animation.
• Silverlight uses XAML.
• Silverlight uses an industry standard codec
• To create Silverlight content, you can use your existing tools like Visual Studio. Anotherdedicated tool is Expression Blend
• Silverlight has been developed from ground-up using the languages you are already familiar with as a .NET developer. Silverlight content can be created using XAML and a .NET language. This way, you can utilize your existing skills.
  So does Silverlight
• The cost is much lesser than Flash
• Scalable full screen video available up to HD (720p)
• Silverlight content is textual in nature
  

Connected to data, servers, and services

Benefits Of Silverlight:

• Create mash-ups by incorporating data and services from anywhere on the Web by using Silverlight support for LINQ and LINQ-to-XML. Access data with common protocols like JSON, RSS, POX, and REST.
• Increase discoverability of RIA content that can be indexed and searched, thanks to the Silverlight text-based XAML format.
• Rapidly scale Silverlight applications by using SilverlightTM Streaming by Windows Live.
  
  

High-quality media, low-cost delivery

Benefits of Silverlight:

• Unified media format scales from high definition (HD) to mobile with Windows Media Video (WMV), the Microsoft implementation of the Society of Motion Picture and Television Engineers (SMPTE) VC-1 video standard, as well as support for Windows Media Audio (WMA) and MP3 audio.
• Add vector-based graphics and overlays to media with support for integration of graphics that scale to any size and broadcast-style overlays for tickers and closed captioning.
• Flexible ad-insertion solutions with video and animation including the ability to deliver fluid, broadcast-style video or animated advertisements without any loss of visual fidelity or motion quality.

Flexible Programming Model with Collaboration Tools

Benefits of Silverlight:

• Based on the Microsoft .NET Framework, Silverlight enables developers and designers to easily use existing skills and tools to deliver media experiences and RIAs for the Web.
• Choice of programming languages such as AJAX, Visual Basic .NET, C#, Python, and Ruby offers developers and designers the flexibility to use their existing skills without the need to learn a new language.
• Simple integration with existing Web technologies and assets means Silverlight works with any back-end Web platform or technology. No "rip and replace" required. Silverlight integrates with your existing infrastructure and applications, including Apache and PHP, as well as with JavaScript and XHTML on the client.

Compelling cross-platform user experiences-Silverlight Benefits

• Deliver media experiences and rich interactive applications (RIA) for the Web that incorporate video, animation, interactivity, and stunning user interfaces (UIs).
• Seamless, fast installation for users, thanks to a small, on-demand, easy-to-install plug-in that is under 2 megabyte (MB) in size and works with all leading browsers.
  Consistent experiences on Windows and on Mac OS without any additional installation requirements.
• Create richer, more compelling Web experiences that take greater advantage of the client for increased performance.
• Stunning vector-based graphics, media, text, animation, and overlays enable seamless integration of graphics and effects into any existing Web application.
  Enhance existing standards/AJAX-based applications with richer graphics and media and improve their performance and capabilities by using Silverlight.

Benefits Of Silverlight

• Compelling cross-platform user experiences.
• Flexible Programming Model with Collaboration Tools
• High-quality media, low-cost delivery
• Connected to data, servers, and services

Rotate transform in a clockwise direction

We rotate it in a clockwise direction by setting angle to a negative value between 0 and -360,the following code shows an example for it.
<image.rendertransform>
<transformgroup>
<scaletransform/>
<skewtransform/>
<rotatetransform angle=" -45">
<translatetransform/>
</transformgroup>
</Image.RenderTransform>
</image>

Rotate transform

This allows you to adjust the rotation of the silverlight controland it is done by setting the angle property to adjust the angle of rotation
Height="200"Width="300"
RenderTransformOrigin=" 0.5,0.5">

Scale Transform

This allows you to adjust the horizontal and vertical scale of the Silverlight control.This is done by setting the scaleXproperty to adjust the horizontal scale and the scaleX property to adjust the vertical scale and the values are based on 1 being the current size of the control.For example the following code scales image control to twice the initial size.

<image.rendertransform>
<transformgroup>
<scaletransform scalex="2" scaley="2">
<skewtransform/>
<rotatetransform/>
<translatetransform/>
</transformgroup>
</Grid.RenderTransform>
</image>

Xaml Using Transformations

Transformations are defined in a TransformGroup block Consisting of one or more of the following :

• ScaleTransform
• SkewTransform
• RotateTransform
• TranslateTransform
  
  The following codeshows the basic framework needed to apply transformations on an image control:

<image.rendertransform>
<transformgroup>
<scaletransform/>
<skewtransform/>
<rotatetransform/>
<translatetransform/>
</transformgroup> <image.rendertransform/>

The centre point of the translation is based off the RenderTransformOrigin property of the control and this is based on two coordinates points.To render around the centre of the control, the following code is set for that:
RenderTransformOrigin=”0.5,0.5”

ListBox

The ListBox tag represents a Silverlight ListBox control in XAML.

The Width and Height attributes represent the width and the height of a ListBox. The x:Name attribute represents the name of the control, which is a unique identifier of a control.

The following code snippet sets the name, height, and width of a ListBox control.

DatePicker control

• This enables you to select a date by either typing it into a text field or by using a drop-down Calendar control.
• When you type a date directly into a text field, the Text property of the DatePicker control gets set.
• This is available in the Toolbox of any Silverlight application and you can use the drag and drop approach to add it to your XAML code.
• The DateValidationError event is raised if the DatePicker cannot convert whatever you typed to a valid date.
• Normally, this causes an exception, but you can set the ThrowException property to false in an event handler and prevent an exception from being raised.

How to Create a Checkbox Control

To create a checkbox, select the checkbox tool:
The mouse cursor changes to a checkbox image. Position the mouse cursor to the the upper left corner of where you want to draw your new checkbox created, press the left button, and drag it to the size you want.
When you release the button, the panel editor will ask for the checkbox properties.
Notice that the status bar contains the characteristics of your new checkbox control; the status bar content is updated whenever you move the mouse cursor over any control. It's a quick way to see the basic definition of a control.
You can try out your checkbox by selecting Panel/Execute from the menu.

Calender Events

The DisplayDateChanged event is fired where the DisplayDate property is changed. The DisplayModeChanged event is fired when the DisplayMode property is changed. The SelectedDatesChanged event is fired when the SelectedDate or SelectedDates properties are changed. The following code snippet sets these three events attributes.
x:Name="MonthlyCalendar"
SelectedDatesChanged="MonthlyCalendar_SelectedDatesChanged"
DisplayDateChanged="MonthlyCalendar_DisplayDateChanged"
DisplayModeChanged="MonthlyCalendar_DisplayModeChanged"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="10,10,0,0">

private void MonthlyCalendar_SelectedDatesChanged(object sender, SelectionChangedEventArgs e)
{
}
private void MonthlyCalendar_DisplayDateChanged(object sender, CalendarDateChangedEventArgs e)
{
}
private void MonthlyCalendar_DisplayModeChanged(object sender, CalendarModeChangedEventArgs e){
}

Calendar Events

Besides the normal control events, the Calendar control has three events calendar related events. These events are given below:

• DisplayDateChanged,
• DisplayModeChanged.
• SelectedDatesChanged.

Silverlight Calendar Control

The Silverlight Calendar control is great for scenarios where date selection by an end user is needed.It is very useful for Picking the dates by the exact month which is displayed.

Scroll Viewer Control

• This control encapsulates horizontal and vertical ScrollBar elements and a content container in order to display other visible elements in a scrollable area.
• You must build a custom object in order to use the ScrollBar element for content scrolling. However, you can use the ScrollViewer element by itself because it is a composite control that encapsulates ScrollBar functionality.
• This control responds to both mouse and keyboard commands, and defines numerous methods with which to scroll content by predetermined increments.
• You can use the ScrollChanged event to detect a change in a ScrollViewer state.
• It can only have one child, typically a Panel element that can host a Children collection of elements. The Content property defines the sole child of the ScrollViewer.

Predefined elements in Wpf Applications

There are two predefined elements that enable scrolling in WPF applications:

• ScrollBar
• ScrollViewer.

ItemViewer

This allows you to group similar items together in an area that will automatically wrap when resized and is easy to implement on your Silverlight driven website and is also customizable to provide a visual feel suitable for any site design and is used in our Silverlight Controls Demo to simulate a Windows File Explorer.

Indeterminate progress bar

This is used in situations where the extent of the task is unknown or the progress of the task cannot be determined in a way that could be expressed as a percentage. This bar uses motion or some other indicator to show that progress is taking place, rather than using the size of the filled portion to show the total amount of progress, making it more like a Throbber than a progress bar.

Pop up message box

This control is used to display the selected one which will appear in a second and this is why it is given in programs or any other application to get the immediate result.

Drop-down list

It is a User control GUI element, similar to a list box, which allows the user to choose one value from a list. When a drop-down list is inactive, it displays a single value. When activated, it displays a list of values, from which the user may select one. When the user selects a new value, the control reverts to its inactive state, displaying the selected value.

Dropdownbox in Silverlight

A drop-down list is a User interface control GUI element, similar to a list box, which allows the user to choose one value from a list. When a drop-down list is inactive, it displays a single value. When activated, it displays (drops down) a list of values, from which the user may select one. When the user selects a new value, the control reverts to its inactive state, displaying the selected value

Indeterminate Progressbar

This is used in situations where the extent of the task is unknown or the progress of the task cannot be determined in a way that could be expressed as a percentage. This bar uses motion or some other indicator to show that progress is taking place, rather than using the size of the filled portion to show the total amount of progress, making it more like a throbber than a progress bar.

How to Use the TextBox Control

<UserControl x:Class="TextBoxPlus.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas>
<TextBlock x:Name="userNameLabel" Canvas.Left="0" Canvas.Top="52" Text="User Name:" FontFamily="Arial" />
<TextBlock x:Name="passwordLabel" Canvas.Left="0" Canvas.Top="82" Text="Password:" FontFamily="Arial" />
<TextBox x:Name="userName" Canvas.Top="50" Canvas.Left="80" Width="150" MaxLength="20" TabIndex="0" />
<PasswordBox x:Name="password" Canvas.Top="80" Canvas.Left="80" Width="150" TabIndex="1" />
</Canvas>
</UserControl>

Silverlight TextArea

<UserControl x:Class="TextArea.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
Width="400" Height="300">
<Canvas>
<liquid:TextArea x:Name="textarea" Canvas.Top="20" Canvas.Left="20" Width="250" Height="250" TabIndex="1" Text="This is a test!" />
</Canvas>
</UserControl>

How to Use the Radio Button

<UserControl x:Class="RadioButtons.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas>
<RadioButton Canvas.Left="100" Canvas.Top="10" Content="Option 10" GroupName="group2" />
<RadioButton Canvas.Left="100" Canvas.Top="30" Content="Option 20" GroupName="group2" />
</Canvas>
</UserControl>

How to Use the NumericUpDown Control

<UserControl x:Class="NumericUpDown.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">

</Grid>
</UserControl>

How to Use the ListBox Control

<UserControl x:Class="ListBox_Test.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas>
<ListBox x:Name="list" Canvas.Top="10" Canvas.Left="10" Width="200" Height="200" SelectionChanged="list_ItemSelected">
<ListBoxItem Content="Australia" />
<ListBoxItem Content="Canada" />
<ListBoxItem Content="China" />
</ListBox>
</Canvas>
</UserControl>

How to Use the Date Picker Control

<UserControl x:Class="DatePicker.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
Width="400" Height="300">
<Canvas>
<liquid:DatePickerPlus x:Name="testPicker" Canvas.Left="10" Canvas.Top="10" Width="200" />
</Canvas>
</UserControl>

How to use Checkbox in Silverlight

<UserControl x:Class="Checkbox_Test.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas>
<CheckBox x:Name="testCheckBox" Canvas.Left="10" Canvas.Top="0" Content="This is a checkbox" Click="testCheckBox_Click" />
<CheckBox x:Name="testCheckBox2" Canvas.Left="10" Canvas.Top="20" Content="This is another checkbox" />
</Canvas>
</UserControl>

How to use Calender Control

<UserControl x:Class="Calendar.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
xmlns:extended="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
Width="400" Height="300">
<Canvas>
<extended:Calendar x:Name="testCal" Canvas.Top="10" Canvas.Left="10" />
</Canvas>
</UserControl>

Standard Controls of Silverlight

some standard controls of Silverlight is given below:
Calendar
CheckBox
Date Picker
DropDownList/ComboBox
ListBox
NumericUpDown
Radio Buttons
TextArea (Multi-line TextBox)
TextBox
Text Label

Viewer Control

<UserControl x:Class="Viewer.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:extended="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
xmlns:liquidRichText="clr-namespace:Liquid;assembly=Liquid.RichText"
Width="800" Height="600">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="4" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<liquid:Viewer Grid.Column="0" Minimum="0.4" Maximum="5">
<liquidRichText:RichTextBlock Width="600" RichTextURL="assets/RichText.xml" />
</liquid:Viewer>
<extended:GridSplitter x:Name="grsplSplitter" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Center" Width="4" Margin="0 2 0 2" Background="#00ffffff" />
<liquid:Viewer Grid.Column="2">
<Image Source="assets/reef.jpg" />
</liquid:Viewer>
</Grid>
</UserControl>

File Upload

<UserControl x:Class="FileUpload.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
Width="400" Height="300">
<Canvas>
<liquid:ProgressBarPlus x:Name="progress" Canvas.Left="8" Canvas.Top="8" Width="200" Height="24" />
<Button x:Name="startUpload" Canvas.Left="80" Canvas.Top="50" Content="Upload" Width="60" Height="32" Click="StartUpload_Click" />
</Canvas>
<UserControl>

Item viewer Control

<UserControl x:Class="ItemViewer.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
Width="400" Height="300">
<liquid:ItemViewer x:Name="myList" Width="400" Height="300" DoubleClick="Items_DoubleClick">
<liquid:ItemViewer.Items>
<liquid:FileItem Text="My File.pdf" OtherText="300KB" Icon="images/large/pdf.png" />
<liquid:FileItem Text="My File 2.doc" OtherText="360KB" Icon="images/large/doc.png" />
<liquid:FileItem Text="My File 3.xls" OtherText="100KB" Icon="images/large/xls.png" />
<liquid:FileItem Text="My File 4.xaml" OtherText="40KB" Icon="images/large/xaml.png" />
<liquid:FileItem Text="My File 5.jpg" OtherText="167KB" Icon="images/large/jpg.png" />
<liquid:FileItem Text="My File 6.mp3" OtherText="96KB" Icon="images/large/mp3.png" />
</liquid:ItemViewer.Items>
</liquid:ItemViewer>
</UserControl>

ProgressBar Control

A progress bar is a component in a graphical user interface used to convey the progress of a task, such as a download or file transfer. Often, the graphic is accompanied by a textual representation of the progress in a percent format.
<UserControl x:Class="ProgressBar.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
Width="400" Height="300">
<Canvas>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard x:Name="timer">
<DoubleAnimation x:Name="animation" BeginTime="00:00:00" Duration="00:00:0.02" Storyboard.TargetName="InvisibleRect" Storyboard.TargetProperty="Width" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
<Rectangle Visibility="Visible" x:Name="InvisibleRect" Width="1" Height="1" />
<liquid:ProgressBarPlus x:Name="progress" Canvas.Top="0" Canvas.Left="0" Width="128" Height="16" Text="Uploading"/>
</Canvas>
</UserControl>

Popup MessageBox Control

<UserControl x:Class="MessageBox.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquidPopup="clr-namespace:Liquid;assembly=Liquid.Popup"
Width="400" Height="300">
<Canvas x:Name="LayoutRoot" Background="White">
<Button x:Name="messageboxButton" Canvas.Left="16" Canvas.Top="8" Width="250" Height="32" Content="MessageBox Dialog" Cursor="Hand" Click="MessageBox_ButtonClick" />
<liquidPopup:MessageBox x:Name="messageBoxDialog" Canvas.Left="50" Canvas.Top="50" />
</Canvas>
</UserControl>

DropDown Control in Silverlight

<UserControl x:Class="DropDown.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
xmlns:liquidTreeView="clr-namespace:Liquid;assembly=Liquid.TreeView"
Width="400" Height="300">
Grid x:Name="LayoutRoot" Background="White">
<liquid:DropDown x:Name="dropDown" Width="100" Height="23" SelectedItemContent="Pick...">
<liquidTreeView:Tree x:Name="treeView" Width="150" Height="150" EnableLines="True" SelectionChanged="Tree_SelectionChanged">
<liquidTreeView:Node Title="Root Node">
<
<liquidTreeView:Node Title="Item 2" />
<liquidTreeView:Node Title="Item 3" />
<liquidTreeView:Node Title="Item 4" />
<liquidTreeView:Node Title="Item 5" />
</liquidTreeView:Node>
</liquidTreeView:Tree>
</liquid:DropDown>
</Grid>
</UserControl>

ColorSelector in Silverlight Controls

This Color Selector control provides the user with a simple way to select from a list of pre-defined colors.
This Silverlight only Color Selector Control is easy to implement on your Silverlight driven website and is also customizable to provide a visual feel suitable for any site design.

<UserControl x:Class="ColorSelector.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<liquid:ColorSelector x:Name="selectColor" SelectionChanged="selectColor_SelectionChanged" />
</Grid></UserControl>