Silverlight

Comparing Differences Between WPF in Visual Studio and Silverlight 2

Ged Mead — Wed, 17 Jun 2009 22:24:00 GMT

This will be something of a 'Work in Progress' blog item, as I plan to jot down differences between WPF and Silverlight as I find them, either in my own work or from other sources. It can be difficult to keep up to speed on what the precise differences are at any given time. The SDKs, Toolkits, roll out of new editions of both platforms, etc all cause the sands to keep on shifting. Anyhow, I hope those that I do identify will be of help to those of you who are familiar with WPF, but maybe not so much with Silverlight.

The topic headings are listed alphabetically.

Button Content
In WPF, you can create a Button and assign its Content in the following way:

 <Button Margin="5" >SilverlightButton>

In Silverlight, you don't have this facility and have to explicitly identify the Content property:

 <Button Margin="5" Content="Silverlight">Button>

Button ClickMode
This is more a matter of user expectation than different properties. The WPF Button has a ClickMode property. This is available in both WPF and Silverlight. The three available values are:

Hover
Press
Release

As you would expect, when the Click event of the button will fire depends on this particular setting.
The reason why I include it as a difference is that I think it is unlikely that you will often use the 'Hover' option in a desktop application, because that isn't a reaction your users will expect. In a Silverlight, browser based environment, of course, it may well be that users will be happy with a button click firing when they hover over a button. (Actually, I'm not sure that 'hover' is totally accurate. It really seems to fire on the immediate mouse enter action and I haven't found a setting that allows a built in delay.)

The default value - both for WPF and Silverlight - is 'Release'.

Chrome and Decorators
Most of the Chromes and Decorators, which can be used to fine tune control templates to a very detailed level, are not available in Silverlight2.

Commands
Silverlight 2 does not support the WPF Commands structure. It does however support the ICommand interface.

Controls (Visual Elements)
It's hard to keep up with the permutations and changes, but I think the following breakdown is accurate:

1. Available in WPF (.NET 3.5, Visual Studio SP1), but not in Silverlight 2:

FlowDocument Readers
Frame
Glyph
GroupBox
InkCanvas
ListView
Menu
NavigationWindow *
Page *
PageFunction *
RichTextBox
StatusBar
UniformGrid
VirtualizingStackPanel
WebBrowser
Window
WindowsFormsHost

* These items are not necessary in Silverlight, because it is browser based.

2. Available in Silverlight 2 , but not in WPF with Visual Studio 2008:

DataGrid *
DatePicker *
HyperlinkButton
MultiScaleImage

* These are not included in WPF in Visual Studio 2008, but are downloadable as part of the WPF Toolkit and will almost certainly ship with VS 2010. You can see info and download the WPF Toolkit from here.

3. Available in the Silverlight 2 Toolkit and in WPF in Visual Studio 2008.

Calendar
Expander
GridSplitter
TabControl
TreeView
ViewBox
WrapPanel

4. Available in the Silverlight 2 Toolkit, but not in WPF.

Accordion
AutoCompleteBox
ButtonSpinner
Data Visualization/Chart Tools
DomainUpDown
NumericUpDown
TimePicker
TransitioningContentControl

5. Available in the WPF SDK, but not in Silverlight 2.

Ribbon

DataBinding

Silverlight 2 does not support One-Way To Source binding.
With WPF, the default binding mode is dependent upon the dependency property, but is usually TwoWay. The default binding mode in Silverlight 2 is OneWay.
Silverlight does not support Explicit DataBinding. It does however support the key approaches of LostFocus and PropertyChanged.
Silverlight 2 does not support MultiBinding.
Silverlight 2 does not support Element Binding (e.g. Binding a Slider value directly to a property on another element).
Silverlight 2 does not support the ObjectDataProvider.

DependencyProperties
Silverlight 2 does not support Read Only DependencyProperties.

Deployment Options
A Silverlight application is deployed to a web server and hosted in a web browser. (The next version of Silverlight should also include the ability to view the application offline). WPF applications may be deployed as a standard installed application or via Click Once. WPF also offers a browser hosted version - the XAML Browser Application (XBAP). In view of the limitations of XBAPs it is likely that most developers would now choose Silverlight over WPF for browser hosted applications.

DrawingBrush
The WPF DrawingBrush is not supported in Silverlight 2. However, there is little that this brush does that can't be achieved with other approaches. The key loss would be the ability to tile, but there are workarounds for this.

Effects
Effects (as opposed to BitmapEffects, which are no longer recommended for use) are only available in WPF. The next version of Silverlight should have the ability to create Pixel Shaders, and therefore Effects.

File Access
WPF has full access to local files in the same way as other .NET desktop applications. Silverlight runs in a Low Trust environment, so Users have restricted access to local files. Access to files in Silverlight is only available by means of the OpenFileDialog and even then is effectively only Read Only access. In Silverlight 2, saving data to file can only be achieved by using Isolated Storage.

Hardware Acceleration
By default, WPF hands off much of the heavy duty graphics work to the GPU, assuming that the graphics card meets the minimum specification. Silverlight uses software rendering.

Hyperlinks
In WPF you can create a Hyperlink by using the Hyperlink element. Generally you use these in Page based applications and FlowDocuments. Silverlight uses the HyperlinkButton.
Both elements use the NavigateUri property to assign the address of the link. The Silverlight version seems to be more versatile. Although it is called 'button', it doesn't have the standard rectangular button appearance. In fact, if you drag one from the Toolbox, you will see its markup in the XAML pane, but nothing shows in the Design pane.
The intention is that you use the HyperlinkButton as a canvas (with a small 'c', not a Canvas element). You then add Content to the button and this is what creates the interface that the user sees. The Content can be anything from a simple single element to a more complex interface - such as a StackPanel which contains multiple elements:

<HyperlinkButton NavigateUri="http://www.devcity.net" Width="60" 
                Margin="15" HorizontalAlignment="Left"
                VerticalAlignment="Top">
      <HyperlinkButton.Content>
        <StackPanel>
          <Image Source="ShelfUnit_WithCans.png">Image>
          <TextBlock>  Click Me! TextBlock>
        StackPanel>
      HyperlinkButton.Content>
    HyperlinkButton>

Isolated Storage
There are significant differences between the implementation of local isolated storage in Silverlight 2 and WPF. Silverlight 2 restricts the availability of disk space. The default setting is 1 MB. This may be increased with explicit user authorization.

Key Enumeration
WPF contains more precise Keyboard Key definitions in its Key enumeration. For example, it

KeyEventArgs
WPF implements several properties in KeyEventArgs; Silverlight implements two - Key and PlatformKeyCode.
WPF does not implement PlatformKeyCode. This is used in Silverlight to identify non-Windows keys.

Markup Extensions
Silverlight only supports a small sub-set of markup extensions. They are:

Binding
StaticResource
TemplateBinding
x:Null

It is not possible to create your own markup extensions in Silverlight.

Mouse Events
Silverlight supports a limited set of Mouse events:

LostMouseCapture
MouseEnter
MouseLeave
MouseLeftButtonDown
MouseLeftButtonUp
MouseMove

This means that Silverlight doesn't support mouse wheel, left/right mouse button differentiation or any of the PreviewXX mouse events that are available in WPF.

Network
Silverlight 2 is limited to asynchronous network calls.
Silverlight 2 can communicate to Network Resources via Sockets.
Silverlight 2 supports only SOAP 1.1 over HTTP, and does not support other web services not compliant with WS-I Basic Profile 1.0.

Path Based Animations
This feature is not available in Silverlight 2. Linear interpolated and KeyFrame animations are available.

Printing
No PrintDialog or Printing facility in Silverlight 2.

Resources
Silverlight 2 does not support MergedDictionaries.
Silverlight 2 does not include the FindResource method.

RoutedEvents
Silverlight 2 only supports Bubbling and Direct Routed Events. WPF also supports Tunneling Events.

Security
WPF desktop applications require FullTrust permission in order to run. XBAPs run with partial trust. Silverlight 2 applications run in low trust.

Styles
WPF offers the choice of Named Styles and Typed Styles. Named Styles allow you to set the Style on an element by using its Key. Typed Styles do not have a Key and all elements of the TargetType within scope of the Style will be assigned the Style.
Silverlight doesn't recognize Typed Styles and if they are used, the assignment of the Style will fail silently.
Silverlight doesn't allow the use of the 'BasedOn' feature to inherit from Styles.
When setting the TargetType, Silverlight does not use the markup extension. You simply assign the name of the TargetType in double quotes. If you forget, and force of habit makes you add the curly braces and markup extension in Silverlight, you won't get a design time error, but it will fail at run time.

3D Graphics
Silverlight doesn't have the full range of 3D creation tools that are available in WPF.

Tiled Brushes
Silverlight 2 doesn't support the TileMode in ImageBrush.

Transitions
Silverlight will not accept Triggers and uses the Visual State Manager (VSM) to organize animations and transitions for user interaction. VSM's capabilities currently are limited to the equivalent of standard Style Triggers and EventTriggers. There are no features equivalent to DataTriggers or MultiTriggers in Silverlight.
VSM for WPF will be available soon.

Validation
WPF supports the creation of ValidationRules. This feature is not available in Silverlight 2.

Visual Brush
Silverlight2 doesn't support WPF's Visual Brush. As this is a brush of very limited use, it's not likely to be much of a problem.

Visual State Manager (VSM)
Currently this is a Silverlight only feature. It will be introduced into WPF in the future.

Visual Studio Designer
Visual Studio 2008 has the facility for you to drag and drop, reposition, resize, etc, elements in the Design pane with WPF. For Silverlight it seems to offer editing tools only in the XAML pane. The Design pane is a kind of 'Read Only' version of what is created in the markup.

VisualTreeHelper
This class exists in both WPF and Silverlight 2, but because of differences in the underlying base classes of the two platforms they have different implementations. The key difference is that WPF offers the HitTest method, whereas Silverlight2 uses FindElementsInHostCoordinates.
With the exception of GetChild, GetParent and GetChildrenCount, Silverlight2 doesn't support any of the GetXXX methods found in WPF.

Watermarked TextBox
This is a Silverlight only control. The name says it all - basically a TextBox that allows you to include light shaded text to help the user. If memory serves, this was in Kevin's famous Bag o'Tricks.

Note: Most of the differences described above are also included in an excellent White paper comparison document published by Wintellect. You can download a copy from here.

First Steps in Silverlight 2 and Expression Blend 2

Ged Mead — Sun, 14 Jun 2009 09:50:00 GMT

As a Developer, Visual Studio is my comfort zone but I thought the time had come to see what the experience of creating a Silverlight 2 project in Expression Blend would be like. Having spent the past six months working almost exclusively on Windows Presentation Foundation, I was particularly interested to find out how different the WPF and Silverlight experience would be.

The first thing I had to do was update my copy of Expression Blend 2. Out of the box, your only Silverlight option is a Silverlight 1 site. But if you go to the download site here you can download the latest Service Pack. This incorporates the changes that were available in the Blend 2.5 Beta, the main one being that you can build a Silverlight 2 Application.

Probably the biggest difference between the two versions of Silverlight is that Silverlight 2 gives you the option of using C# or Visual Basic as the code-behind. If, like me, you're not a Javascript expert, but have served your time on the .NET learning curve, this is a really welcome option.

If you have used WPF, you will know that by default when you create a new WPF Application you are presented with a Window instance containing a Grid as the root element on which to start creating your UI. In Silverlight 2, the default is a user control, again containing a Grid as the root element. As Silverlight is a browser plug in*, rather than the desktop application of WPF, this approach makes sense. However, I have to doubt the wisdom of this User Control being named "Page.xaml" by default, as this might cause confusion to those of us who have also created Pages in WPF Applications and think of Pages as being, well, er, pages!.

To add some elements to the User Control, you simply drag them from the Asset Library on to the design surface. I added a TextBlock, an Image and a Button.

If you are not familiar with Expression Blend, the Asset Library - where you drag your elements from - is the last icon on the left, which I have circled in Red. I added the png file which is used as the Source property of the Image to the project files.

A Button that does nothing when clicked won't impress anyone, so my next task was to fix this. My inclination was to switch straight away to Visual Studio, but I thought I would see what Blend had to offer in the way of event handler creation.

The Properties Pane in Blend has a button which causes the Properties to be listed (the default choice) and next to that there is a button for events. You can see this in the screenshot below.

Expression Blend is essentially a tool for creating visual user interfaces. So, unsurprisingly, all you get when you choose that Events pane button is a list of common events for the particular element or control. What is quite impressive though is that if you type in the proposed name for the event handler (as I have done in the example below) and then hit the Enter key, not only does this cause Visual Studio to fire up, but when you look at the code-behind page you will see that a handler of the name you input will be created and it will have the correct signature. You can then simply insert whatever code for what you want to happen as a result of the button click.

One thing I was keen to try out was Silverlight's Visual State Manager, about which I had heard much, but understood nothing. As it seems certain that WPF will have VSM soon, I wondered how much easier (or not) VSM would be compared to the current WPF Storyboard and Triggers approach.

I experimented by adding a simple animation to a button, transforming its size when the mouse entered its area. (I will be writing a full article on Visual State Manager soon, which will include VSM for controls which have CommonStates built in for you in Blend - such as the Button - as well as VSM for those that don't, such as Images.)

The steps for the Button are as follows:

Drag a Button from the Asset Library on to the drawing surface (Note to self: Must get used to calling this the 'Artboard').
Right click on the button and choose 'Edit Control Parts (Template)'.
Select 'Edit a Copy'.
Rename the Key if you want to.
Click OK.

If you now look at the States Pane :-

you will see that a standard set of States for a Button object are displayed for you. These are the four main CommonStates

Normal
MouseOver
Pressed
Disabled

and two FocusStates:

Focused
Unfocused

If you want the visual state to change when the Button is pressed, you add a Transition to the Pressed State in that pane. This is done by clicking on the small 'Arrow and plus symbol' icon to the right of the word 'Pressed' in the States Pane. When you left click on this icon you will see a context menu which shows combinations of state changes. Select the first one - '*>Pressed'. The area round the Artboard should now have a red border and the "State recording is on" message appears at the top left corner. (If for any reason it is not on, simply click the mouse over the dot to the left of the "State recording is off" message.)

As my initial experiment, I wanted to reduce the width and height of the Button by 15% when it is pressed. Here are the steps:

Select the part of the Button that you want to animate.
Go to the Properties pane.
Scroll down until you reach the 'Transform' section.
Select the Scale transform icon (the arrow coming out of a rectangle).
Change the value of X to 0.85.
Change the value of Y to 0.85.
Press F5 to test the project.
Click on the button to ensure that the animation works.
Close the Browser.
In the Objects and Timeline pane in Blend, click on the 'Return Scope to [UserControl]' icon at the right hand side of the Style name.

I had quite a lot of trouble with this. I found that if I clicked on the button on the Artboard and made the transformations (or any other animations, for that matter), I was not getting the results I expected. I eventually worked out that the trick is to select the exact element you want to animate from the Objects and Timeline pane. In the case of the button transformation, the item to select is the parent grid. In some cases, you may need to expand the dropdown list to get to the exact item you need and you may have to experiment some before you get it right. I think this kind of problem is only likely to occur where you stick with the standard template; clearly, if you build up your own set of elements on the Artboard to make a styled button of your own, you will be more familiar with exactly which part(s) you want to animate.

Another little thing to watch out for which might confuse at first, is that the States pane seems to 'remember' the last set of States you dealt with. If you then select a different object, (for example, the TextBlock in my initial user Control) and the States haven't been changed or set for this object, you will still see the States from the preceding object in the pane.

Because I was familiar with the Triggers and Storyboard approach, I did want to see if this was still available as an option in Blend. It doesn't seem to be, but of course I can always do this in XAML in Visual Studio, using an EventTrigger. However, I can see that the Visual State Manager is going to be an easy beast to tame, so I don't think I'll need to revert to the old way very often.

So at this stage, my first impression is that I will be content to use Blend for complex graphics and animations, gradients and visual states. For most other things, I think I will still be using Visual Studio whenever possible.

* At least it is a browser plug in for the time being. Silverlight 3, which is coming up fast, is going to offer an out-of-browser experience. That is, you will be able to include code that will let the user access the Silverlight User Control when offline. My first thought was "Isn't that what WPF does?", but then realized that Silverlight is cross-browser, cross-platform whereas WPF is not. It will be interesting to see where this leads in the long term.