Wow!  What a week!  PDC, the Silverlight 4 Beta, and now the November 2009 release of the Silverlight Toolkit!  There’s been a ton of great news and exciting announcements, and now I can share with you that the Activity control, first blogged here, is now a part of the Silverlight Toolkit!

Awesome!  What does that mean for the Activity control?

During this transition, the Activity control underwent a few changes (thanks to my colleagues working on the Toolkit – David Anson and Jeff Wilcox) to make it more generally palatable:

• The control has been renamed from “Activity” to “BusyIndicator” in order to avoid confusion with the concept of an Activity (sounds a lot like “Task”)
• Similarly, “IsActive” is now “IsBusy”, and the visual states have been renamed appropriately as well.
• AutoBind and related properties have been removed once and for all.  They were a performance hog in the original versions, and they really only hit a very, very narrow scenario.  Instead, bind to a property that represents your busyness.
• MinDisplayTime has gone away.  If you’re looking to change the minimum display time, you can re-template the control and add a duration to the transition from visible back to hidden.
• OverlayBrush and OverlayOpacity have been replaced with a single OverlayStyle property where you can set the color/opacity of the overlay easily.
• DisplayAfter now defaults to 0.1s instead of 0.05s

Otherwise, the control is basically the same!  Give it a shot!

With this transition, the BusyIndicator control truly becomes accessible to anyone who’s using the Silverlight Toolkit.  You can report bugs through that project on codeplex, and we’ll make sure to keep an eye on any feedback we get from you on the control.

Great… So where can I find it?

It’s simple!  Just download the November 2009 Silverlight Toolkit for either Silverlight 3 or Silverlight 4.  There are a few ways to get it:

• Silverlight Toolkit Codeplex Page
• Web Platform Installer

The BusyIndicatorControl can be found in the System.Windows.Controls namespace in the System.Windows.Controls.Toolkit.dll assembly in the toolkit.

And… can I see it in action?

Yep!  David Anson created some awesome samples in the Toolkit Sample Browser for the BusyIndicator.  I’m a big fan of his work!

I hope you all enjoy using the BusyIndicator control in your applications!  Let me know what you think!

P.S. Thanks to Jeff Wilcox, who beat me to explaining this change   I’ve been super-busy with PDC, so it was good to have someone start getting the word out early.  Jeff gives a great overview of what the control is meant to do and has lots of resources regarding the Silverlight Toolkit.  Check out his blog!

Hi folks!  It’s been a little while since I’ve blogged, but fear not, I’m still watching and hoping to blog more in the coming weeks.

In the meantime, it’s been brought to my attention by a few people now that there are a few issues with the Activity control, and I wanted to address them.

1. Performance – A bit of a mea culpa on my part.  I included a feature for the control that I’ve called “AutoBind”, whereby it would watch for changes to the visual tree of its contents and subscribe to any control that has a property whose name matches “ActivityPropertyName”.  By default, this is great when working with .NET RIA Service’s DomainDataSource, since ActivityPropertyName is “IsBusy” by default, but it also turns out to be a hefty amount of work, constantly searching the visual tree and registering/unregistering event handlers.  This wouldn’t be so bad, except that AutoBind defaults to true, meaning even if you’re not using this functionality, the Activity control is doing the work.  Below, you’ll find a new version of the Activity control that amends the situation, making AutoBind default to false.  This is the only change to the control since my last post on the matter, but I’d love to hear if you have thoughts about the control, this feature, or other requests!
2. .NET RIA Services’ Business Application Template – So, the .NET RIA Services guys included with their July Preview a project template to help you get started with a RIA Services application.  In this template, they included a dll with the Activity control in it.  A few people have noted that it has a slightly different API than they’re used to seeing with the control, which is due to their use of the original version of the control that I posted (its API has changed a bit since then, and a number of bugs were fixed, including some layout issues).  Anyhoo, feel free to pick up the latest version below!

So there you have it – just a few changes and things to note.  You can find the control here:

• Activity Control
• Activity control demo project

Thanks for all the great feedback since I first posted this control.  As usual, let me know if you have questions or issues!

Well, it’s been a while since I first posted on this, but the feedback was incredible, and I got some great suggestions.  As a result, I’ve updated the Activity control and (finally) have a running sample on the web!  The fundamental idea of the control has remained the same, as well as the mechanisms by which it can work.  It’s still a prototype, but a very useful one at that!

To see the Activity control in action, take a look here: Activity Control Demo

The demo requires the Silverlight 3 beta to be installed on your machine, which can be found here: http://silverlight.net/getstarted/silverlight3/default.aspx

The demo application shows two examples of using the Activity control to display async/background activity (click the images for deep-links into the Silverlight application):

• With .NET RIA Services and the DomainDataSource, the Activity control uses element-to-element binding to indicate to the user that data is being loaded or submitted.  The demo page is running live on my server using the Northwind sample database.  Those of you who think you can play some dirty tricks by overwriting the data on my server (yes, I provided insert/update/delete functionality) – any attempts to do so will be quickly foiled, since the server will accept the requests, but ignore them!

• Any background activity might warrant using the activity control.  The second example I’ve provided uses the activity control while I use a simple statistical method of approximating PI (yes, very geeky).  It takes millions of iterations to get a mediocre approximation of PI (I know, I’m not using an efficient method, but it does do a lot of work!).  Here, I’ve augmented the Activity control to allow the work to be stopped/cancelled:

So by now I’m sure you’re asking: “What’s changed?”  Well, let me tell you!

• Thanks to feedback from a variety of folks, I’ve removed the all-encompassing template that included the pop-up window.  That’s now baked into the control template.  If you’d like to change it, you can use the Blend 3 Preview to re-template the control.  In its place, I’ve added:
  • A style for the progress bar.  If you’d like to hide it, use a style to collapse the progress bar.
  • A means for setting “ActiveContent”.  The Activity control works sort of like a HeaderedContentControl.  You now have ActiveContent and ActiveContentTemplate, which allow you to define in XAML what should appear above the progress bar.  You can put any content you like here, and it’s how I added the cancel button in my PI calculation example.  This is also great because it allows you to easily change the text from “Loading…” to whatever you prefer simply be setting the ActiveContent property to the string of your choice!
• The default template for the ActivityControl now sets IsHitTestVisible and IsEnabled to false on its content immediately when IsActive becomes true.  In my old prototype, this only happened when the Activity UI became visible, which meant users could continue to interact with the content while it was busy – a potentially dangerous combination if the user’s interactions can be overriden by the asynchronous work (such as editing values in a DataGrid when the data is being reloaded).  This was from a suggestion by Luke Tigaris in the comments on my last post.  Let me know what you think!
• You can now call ResetActivity() on the control to force it to honor the visibility of the control immediately rather than enforcing the display delay and minimum display time.  This way, if a user cancels the background work, you can force the Activity UI to be hidden immediately.

Anyhoo, let me know what you think of the changes!  I’ve gotten lots of great feedback on the control so far, and I’m sure folks will come up with more as time goes on.

• You can download the source for the control here: Activity Control Source
• You can also download the source for the demo here: Activity Control Demo

For both of these, you’ll need the Silverlight 3 Beta.  The Demo application is built using .NET RIA Services.

P.S.  Big thanks again to Corrina for providing the beautiful theme I used in my application.

P.P.S.  Isn’t navigation and deep-linking in the Silverlight 3 Beta cool?  That’s how I made those images link directly to the corresponding pages of my demo application.  I may post more on this in the future.  In the meantime, take a look at the code to see just how little it took to accomplish that! (hint: MainPage.xaml in the Silverlight Navigation Application project template that’s included with the Silverlight 3 Beta Tools for Visual Studio has pretty much everything that’s required)

Update 9/14/2009 – I’ve made a small update to the Activity control to fix a performance issue.  You can find it here.

Well, I told you there would be exciting news at MIX!  After months of working on Silverlight 3 Beta 1, it’s finally available for you to try!  Also coming live for MIX is the “.NET RIA Services” March 2009 Preview, which will assist in building multi-tiered applications and provides end-to-end support for things like data validation, authentication, and roles, as well as data access.

With the Silverlight 3 beta, you can build really rich user experiences for the web.  For the beta, we’ve added a number of controls and features to enable rich experiences when working with data (e.g. an DataForm, DataPager, ErrorSummary, an updated DataGrid, etc.), and the .NET RIA Services preview makes it much easier to bring the data on your servers down to your Silverlight client.

All of this presents a fairly common problem: what should you do with your UI while data is being loaded or work is being done in the background?  If the amount of work done or data to load is small and completes quickly, it would probably make sense to leave the experience uninterrupted for the user.  For larger amounts of work, however, leaving the user with an unresponsive UI or worse with a responsive UI that doesn’t work properly because data is in the midst of being reloaded is less than ideal.

Imagine, for example, that you’re using a DataGrid whose data takes 3 seconds to load (without taking any explicit steps to show activity).  When your user first loads his application, he sees this:

Not a terribly appealing user experience.  Is the data loading?  What is the user allowed to do with the app right now?  One could show a progress bar somewhere on the screen, but how do you tell the user not to touch the DataGrid until the data is fully loaded?

In the above application, the data is paginated in order to keep the load sizes small and thus speed up the browsing experience.  As a result, moving from page to page may cause load operations to happen as well.  At this point, it is clear that something is strange with the user experience during a page change.  The user would see something like this:

Even though the data in the DataGrid is the previous page’s data, everything is still interactive.  I can navigate from item to item and attempt to make changes, but in a few seconds everything will be wiped out when the data finishes loading.

There are a number of options for dealing with this:

• Progress bar
• Enable/disable controls
• Show/hide controls
• Combinations of these

I’ve been playing around with a slightly different idea: an “Activity” control.  This is a control that displays activity (when appropriate) over its content.  During active periods, it adds an overlay to its wrapped controls, graying them out, disabling them, and displaying a progress indicator, like so:

This way, the user knows which controls he can interact with, and he is also given some additional information (“Loading…” in this case) about why the application is busy.

The control I’m experimenting with itself is pretty straightforward.  Some of its more important features:

• IsActive property – this can be bound to a boolean value that represents activity.  With .NET RIA Services’ DomainDataSource, this is the “IsBusy” property.
• DisplayAfter property – this allows you to set a minimum amount of “active” time before the activity UI appears.  This way, tiny bouts of activity don’t interrupt your user’s workflow.
• MinDisplayTime property – this allows you to set a minimum amount of time to display the activity UI.  This way, users have enough time to digest why their screen changed, and the activity UI won’t just flash on and off the screen.
• AutoBind/ActivityPropertyName – if AutoBind is set to true (which is the default), the control will search its content for controls that have a property with the name specified (“IsBusy” by default), and will automatically hook itself up to display activity whenever any of its children are busy.  If no such children are found, the control will just use its IsActive property.
• ActiveContentTemplate property – allows you to set what is actually displayed (and defaults to what you see above!)

With this combination of features, the control makes it easy to add activity UI to your application.  In particular, it works pretty well with the DomainDataSource for .NET RIA Services, since it’s really easy to use ElementName binding to bind IsActive to the IsBusy property on the DDS.  Furthermore, if the DDS is actually inside of the activity control, it will automatically pick up the DDS’s activity:

<activity:Activity>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <riaControls:DomainDataSource x:Name="northwindData"
                              LoadMethodName="LoadProducts"
                              LoadSize="20"
                              AutoLoad="True">
            <riaControls:DomainDataSource.DomainContext>
                <northwind:NorthwindDomainContext />
            </riaControls:DomainDataSource.DomainContext>
        </riaControls:DomainDataSource>
        <data:DataGrid ItemsSource="{Binding Data, ElementName=northwindData}"
                       CanUserSortColumns="{Binding HasChanges, ElementName=northwindData, Converter={StaticResource boolConverter}}">
        </data:DataGrid>
        <dataControls:DataForm Grid.Column="1"
                               ItemsSource="{Binding Data, ElementName=northwindData}">
        </dataControls:DataForm>
    </Grid>
</activity:Activity>

Otherwise, it’s a simple matter of using ElementName binding to wire up your activity UI:

<activity:Activity IsActive="{Binding IsBusy, ElementName=northwindData}">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <data:DataGrid ItemsSource="{Binding Data, ElementName=northwindData}"
                       CanUserSortColumns="{Binding HasChanges, ElementName=northwindData, Converter={StaticResource boolConverter}}">
        </data:DataGrid>
        <dataControls:DataForm Grid.Column="1"
                               ItemsSource="{Binding Data, ElementName=northwindData}">
        </dataControls:DataForm>
    </Grid>
</activity:Activity>

With this control, it’s easy to have multiple controls all show activity at the same time (either by wrapping them all with the Activity control or by binding activity controls to the same value), and the “busy” experience can be consistent across the app.

This is just a simple prototype control, but I’d love to hear what you think!  Is there something important that’s missing?  Are there other user experience deficiencies you see (either when using SL3 for RIA applications generally or with the .NET RIA Services preview)?

In the meantime, if you’d like to play with my prototype/source, you can find it below.  This code is provided under the Microsoft Public License and is also provided "as is", without warranty of any kind.

• Activity Control (built on SL3 beta 1)
• Activity control demo project, shown above (requires SL3 beta 1 and .NET RIA Services)

Enjoy!

Update 6/11/2009 – A new version of the control is available here.

Update 7/11/2009 – Samples updated for Silverlight 3!

Update 9/14/2009 – I’ve made a small update to the Activity control to fix a performance issue.  You can find it here.

P.S. Thanks to CorrinaB for helping me snazz up the UI!