Category Archives: Silverlight

Silverlight 5 Animations on the Composition Thread

Being a passionate front-end developer, I am constantly on the quest for creating the smoothest and most intuitive user experience possible. That’s why I was really excited when I heard about some of the performance features and enhancements coming in Silverlight 5. One of the most exciting was the concept of a Composition thread; an idea borrowed from Windows Phone 7 that allows certain elements and animations to be offloaded to the GPU and thus independent of the main UI thread.

Anybody who has ever had to pack the visual tree chock-full of elements in Silverlight knows that performance starts to suffer. A major pet peeve of mine is when the loading indicator stops animating when the UI thread is tied up with other processing (such as adding elements to a DataGrid, and rendering the individual rows). With the Silverlight 5 beta ready to go, I figured I’d try my hand at putting that composition thread to work.

Setting Everything Up

Firstly, I’d like to briefly outline what it takes to get up and running with the Silverlight 5 beta, and then what changes are necessary to be eligible to take advantage of the composition thread.

Step 1. Download Silverlight 5 beta SDK and tools for Visual Studio 2010. Make sure you have Service Pack 1 installed first.

Step 2. If you are working with an existing solution, target Silverlight 5 in all of your Silverlight projects:

Step 3. Now that your projects are targeting Silverlight 5, it’s now time to turn on GPU Acceleration. In the html (or aspx) page that hosts your Silverlight object, make sure the enableGpuAcceleration param is set to true:

[xml]<param name="enableGpuAcceleration" value="true" />[/xml]

At this point, your project is eligible to use the composition thread, but no 2d elements or animations will take advantage of it by default; there is still work to be done, and there are currently some very tricky gotchas that can occur along the way. I will talk about these quirks using a custom BusyIndicator control as an example.

Configure BusyIndicator for GPU Acceleration

Let’s start by showing the xaml for a stripped down version of the Silverlight Control Toolkit’s BusyIndicator:

[xml]
<Style TargetType="local:BusyIndicator">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="OverlayStyle">
<Setter.Value>
<Style TargetType="Rectangle">
<Setter Property="Fill" Value="Black"/>
<Setter Property="Opacity" Value="0.5"/>
</Style>
</Setter.Value>
</Setter>
<Setter Property="ProgressBarStyle">
<Setter.Value>
<Style TargetType="ProgressBar">
<Setter Property="IsIndeterminate" Value="True"/>
<Setter Property="Height" Value="15"/>
<Setter Property="Margin" Value="8,0,8,8"/>
</Style>
</Setter.Value>
</Setter>
<Setter Property="DisplayAfter" Value="00:00:00.1"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:BusyIndicator">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisibilityStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3">
<VisualTransition.GeneratedEasingFunction>
<ExponentialEase EasingMode="EaseInOut"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Hidden">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="overlay" />
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="busycontent" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="overlay">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="busycontent">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Visible">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="busycontent" />
<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="overlay" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
Storyboard.TargetName="overlay">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="BusyStatusStates">
<VisualState x:Name="Idle">
<Storyboard>
</Storyboard>
</VisualState>
<VisualState x:Name="Busy">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Duration="0:0:1.5" From="-180" To="180"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"
Storyboard.TargetName="LoadingIcon"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="overlay" Style="{TemplateBinding OverlayStyle}" />
<ContentPresenter x:Name="busycontent">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="4"/>
</Grid.Effect>
<Image x:Name="LoadingIcon"
Source="/MyProject;component/Assets/Images/refresh-yellow.png" Stretch="None"
RenderTransformOrigin="0.5,0.5" Margin="0,2,10,0" HorizontalAlignment="Right"
VerticalAlignment="Center">
<Image.RenderTransform>
<CompositeTransform/>
</Image.RenderTransform>
</Image>
</Grid>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
[/xml]

The goal here is to have the LoadingIcon image spin around while the VisualState is set to Busy, and we want that animation to be processed on the composition thread. The first step to this goal is to add set the CacheMode property on the desired element to “BitmapCache”. This tells the framework that the element (and it’s subtree of elements, if any) should be cached on the GPU. The first thing I tried was setting the CacheMode on the LoadingIcon element, since that was the animation that I wanted to be as consistent and smooth as possible. To verify whether or not it worked, I used a very archaic approach: Set IsBusy on the control to true, and then immediately invoke Thread.Sleep. In theory, if the animation is running on the composition thread, then a Thread.Sleep on the primary UI thread would not freeze the animation. Much to my dismay, the animation froze as soon as Thread.Sleep was executed. It turns out that the current Silverlight 5 beta has a bug in which an Image element will fail to properly cache as expected on the GPU. I received this answer by posting on the Silverlight 5 beta forum, which you can read about here.

Along with this bug, there are some rules about CacheMode that must be followed for your animations to be eligible for GPU caching, and thus the composition thread. I had a quick correspondence with Gerhard Schneider from Microsoft today, and this is what he had to say:

BitmapCache is not [currently] working on Image elements. It’s a bug that we will still try to fix for the release. Other than that, here are roughly the rules for BitmapCache and independent animations (animations on the composition thread).

You can set BitmapCache on any UIElement (ignoring the bug on image element – and I believe media element). This will render that element’s subtree into a video memory off-screen surface that we can then compose with independent animations (independent animations = animations on composition thread). To make sure things are fast we also cache the tree behind and in front of the element that has BitmapCache set.
Note that BitmapCache has no additional benefit when being nested. Only the BitmapCache flag closest to the root is respected.

Regarding independent animations, we currently support transform, perspective, and opacity animations. However, under certain tree configurations, we sometimes have to disable them. For example if used under a complex clip (complex being non-rectangular), we disable independent animations and BitmapCache. The exact rules will be published when we release SL5 since some of this is still changing.

So I followed his advice, and made a few changes:

  • Moved the CacheMode property up to the parent ContentPresenter element.
  • Removed the DropShadow effect, because it is not eligible for caching.

Unfortunately, I still encountered a freezing animation on Thread.Sleep. After another email to Gerhard, he had the answer:

If the animation is targeting a property under the cached element, it has to invalidate the cache and you will not get an independent animation. You need to move the animation to the Grid element. This assume that you are animating the CompositeTransform in the example below.

So the solution was to move the animation to the ContentPresenter, and point the VisualState animations to the ContentPresenter as well. Finally, the animation continued to spin on Thread.Sleep! And this makes sense, because the entire element and subtree will be cached as a bitmap, so any animations or unsupported settings on children will invalidate the bitmap. I think this is a key point that other Silverlight 5 articles failed to mention, and can be a real gotcha if just starting out with this stuff.

So here are the modified parts of BusyIndicator style that will run successfully on the Composite thread. Notice the DoubleAnimation points to busycontent:

[xml]
<ControlTemplate TargetType="local:BusyIndicator">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="BusyStatusStates">
<!– … –>
<VisualState x:Name="Busy">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Duration="0:0:1.5" From="-180" To="180"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"
Storyboard.TargetName="busycontent"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="overlay" Style="{TemplateBinding OverlayStyle}" />
<ContentPresenter x:Name="busycontent" CacheMode="BitmapCache" RenderTransformOrigin="0.5,0.5">
<Grid Height="25" Width="25"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Image x:Name="LoadingIcon"
Source="/MyProject;component/assets/images/refresh-yellow.png"
Stretch="None" HorizontalAlignment="Right"
VerticalAlignment="Center">
</Image>
</Grid>
<ContentPresenter.RenderTransform>
<CompositeTransform />
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
</ControlTemplate>
[/xml]

Taking full advantage of GPU Acceleration

Even though I was able to improve performance by moving some common animations to the composite thread, I am still weary of the work involved in order to take advantage of this feature in a large application. I really think that there should be an easier way to detect whether an element and it’s subtree are eligible for GPU caching, because there are quite a few limitations (not to mention bugs) that get in the way of implementation. Hopefully by the time Silverlight 5 goes RTW, the bugs will be ironed out and all limitations will be fully documented.

Further Reading

There were quite a few articles and blog posts that helped me get started with GPU acceleration in Silverlight 5. I strongly recommend reading through them if you are interested in this topic:

Silverlight 5: The Undisputed Champion for LOB Applications

In a previous post, I blogged about the struggles we’ve had with Silverlight that led me to consider WPF as an alternative for line of business applications. With the announcements made at today’s Silverlight Firestarter event about all the Silverlight 5 features, it seems like any incentive to make that switch to WPF has been eradicated. This post aims to take a look at some of those new features, and show how the gap is quickly closing between Silverlight 5 and WPF. Additionally, I’ll briefly dive into Silverlight’s exclusive features that ease development for LOB applications, yet are not present in WPF.

Performance!

Based on the Firestarter event, SL5 is cooking up even more improvements to the rendering pipeline that should alleviate scenarios where the visual tree gets overloaded. While exact details have yet to emerge, it seems that Silverlight will support an immediate graphics mode that will run rendering through the GPU. This was one of our largest blockers with Silverlight going forward, and it is a relief to hear that they have brought this WPF capability into the Silverlight realm.

DataBinding

If you’ve been working with Silverlight for awhile, you probably know that certain databinding scenarios can be a real pain. You probably also know that WPF has databinding facilities that solve these problems with ease. Well, the pain ends soon because Silverlight 5 now supports nearly all the features of it’s dying father, WPF.

One of my favorites is the Ancestor RelativeSource addition. As John Papa demonstrated in Firestarter today, there is a common scenario when performing bindings inside of a DataTemplate that don’t match your current DataContext. More often than not, you are forced to replicate properties/commands/collections on your child view models in order to satisfy your binding requirements, and often this can lead to redundant and confusing code. With Ancestor RelativeSource, you can find the DataContext of a parent element that is higher up in the visual tree hierarchy, and bind directly to it.

Another great feature is being able to bind to style setters. Often times there is a requirement to change visual properties of controls. But if you are trying to bind a style setter within Silverlight, it wasn’t possible without a heaping portion of hacky magic.

Finally, implicit data templates will make your annoying-converters-library much smaller. Often times when binding to a collection of dissimilar items, you are forced to use converters to get your data templates to render the intended layout. Of course, the more dissimilar your bound collection is, the more your library of one-off converters will grow. With implicit date templates, you have the option to bind to a list of different types, and let WPF dynamically determine which data template to use. This way your presentation logic can stay in xaml, and not in converter code.

Windows Integration

Another selling point for WPF is it’s ability to interactive with the windows environment from within your application, such as calling unmanaged libraries and Win32 APIs. A typical scenario is the process of exporting data to excel. In Silverlight right now, this workflow consists of the following steps:

  1. Prepare the xlsx filestream
  2. Offer the user SaveFileDialog to persist it to the local file system.
  3. The user types out an entire filename (since there is no way to specify a default in SL4)
  4. The user manually opens the file either from explorer/desktop or through excel

With Silverlight 5, you can skip the last three steps and open the file directly into Excel automatically! This is a huge time saver when your users constantly want to view their data in excel. And of course, there are so many more possibilities; in the Firestarter keynote, they demonstrated a Silverlight app that connected to a windows program to automatically import data off of a USB device. Rich OS integration used to be a major selling point for WPF, but with the advent of SL5, it has evaporated.

So far I’ve only touched on features that serve to even the playing field between Silverlight and WPF, but what puts SL5 over the top are the exclusive technologies and support that are actively being built around it:

  • WCF RIA Services – As I mentioned previously, there is no support in WPF for this great technology, and it isn’t coming anytime soon (if ever)
  • Fluid UI – Silverlight continues to build on the ability to easily create more natural applications. We see the beginnings of this with SL4′s ListBox support for Fluid UI, where you can effortlessly create transitions when adding and removing items. SL5 goes deeper and adds LoadTransitions. From the Firestarter event, this looks like the capabilities of the SL Toolkit’s TransitioningContentControl have been integrated into the VSM and animation system.
  • SL Toolkit – The state of WPF’s toolkit is a sad sad thing. With no release for the last 10 months (not even for the .NET 4 release), it looks to be nearly abandoned. Comparitively, there has been a .NET 4 release of the Silverlight toolkit, and it is much more feature complete and stable than it’s WPF counterpart.
  • Theming – This goes hand in hand with the previous bullet point, but there are a whole bunch of great themes continuing to be pumped out of Redmond. The WPF community has had to rely on rogue developers gracious enough to port the themes over.

Summary

There are many other improvements scheduled for Silverlight 5 that can help with LOB applications (Out of Browser, Testing tools, Text, Printing), but I’ll let the big dawgs like Scott Gu cover those details. For now, I think it’s safe to say that WPF is dead. But don’t fret; this just means that all of it’s most advantageous features are being reincarnated into future versions of Silverlight.

After last months scare that Microsoft might abandon Silverlight, I think it is safe to say that speculation could not be further from the truth; Silverlight is here to stay. It continues to get faster, leaner, stronger — and there is no better technology in the present or foreseable future that can be used to develop amazing line of business applications. With Silverlight 5′s release next summer and the beta still a few months out, there are going to be a swarm of developers clamoring to get their paws on these features (myself included). Until then, happy coding :)

WPF 4 vs. Silverlight 4: Which Do You Choose?

For the past year, I have led an initiative at my company to use Silverlight 4 and WCF RIA Services on the majority of our user interface projects. While these projects have been largely successful, we began running into serious performance problems when trying to squeeze large amounts of data onto our views. The problem wasn’t fetching the data, but rather scrolling and viewing the data in our DataGrids.

One of the largest optimizations we made was to set the windowless parameter back to false. But the root cause pointed to an overload of the Silverlight visual tree. Simply put, there’s only so much you can show on the screen at once, even with virtualization turned on. With a giant excel-like editable datagrid that sprawls the screen, there’s no getting around visual tree overload (especially when scrolling). We evaluated every commercial SL datagrid on the market, and chose the default SDK DataGrid from MS because it fared really well in our scenario.

In the end, we performed many optimizations to get the product to “acceptable” performance, but this motivated me to begin researching WPF as an alternative. I did a massive comparison of all the different WPF/Silverlight datagrids, and one theme remained the same: WPF has much more visual rendering power than Silverlight. These findings have made me dead-set on trying my best to see if WPF can be the platform-of-choice for major apps going forward, but it turns out that the performance honeymoon was short lived.

As I began to build a prototype in WPF, the giant glaring gaps quickly began to emerge. The first was that WPF doesn’t support RIA Services. This is a huge negative, and unless I find a hack to somehow get a client support for WPF, it will force us back to silverlight. The second big one was the validation story. Notice those “free” beautifully animated popout error messages in the datagrid and dataform controls in Silverlight? These are nowhere to be found in WPF. I have yet to find anyone who has replicated them in WPF, and I haven’t had time to try myself. Also, WPF does not have INotifyDataErrorInfo, so any async validation is going to be far less elegant.

And that isn’t the end. There are other smaller issues that deter me. For instance, WPF does not have Fluid UI like SL4, so there is no clean approach to adding natural animations to your data collections. I was hopeful that Blend’s FluidMoveBehavior would fill the gap, but I haven’t been able to get it working even in the most simple scenarios. Also, the WPF toolkit is in a sad state right now, with no updates since 9 months ago (aside from the Ribbon control). Silverlight is definitely getting more attention in this arena.

I really want to harness the power of WPF, but at this point it feels like Silverlight makes it much easier of an experience for developing LOB applications. With that said, I am still going to forge ahead and give my best shot at trying to make WPF work. But if I had to make a recommendation now, I would say that developers in similar circumstances should go for Silverlight first, while always keeping a hawk’s eye on performance. If your application isn’t doing a ton of CRUD on a remote data source, and thus validation and RIA Services aren’t necessary, then WPF becomes an easier sell.

In the event that I do make some breakthroughs with WPF, I’ll be sure to update this post. Stay tuned…