This brings the new features from the Silverlight 4 version to developers who have a business reason to continue with Silverlight 3 development for the time being:

• Updated user interface
• Integrated “tag expression” support for selecting subsets of tests to run
• Performance improvements
• Removal of dependencies on XLinq and System.Windows.Browser assemblies

These are also the bits you want for Windows Phone testing.

Why wasn’t there one for Silverlight 3 already?

Since the April 2010 toolkit release was targeted for Silverlight 4 developers only, these bits were not released for version 3 (though were built from the same source).

Why doesn’t the April 2010 toolkit work for Windows Phone development & testing?

The Windows Phone development environment is based on a version of Silverlight 3 today, and so that means that you need to use Silverlight 3 binaries and class libraries when re-using Silverlight apps and code – not Silverlight 4.

These bits work well for phone developers and replace the older bits I had posted to my MIX talk site.

Download the binaries

[Silverlight 3 binaries for the Silverlight Unit Test Framework, Zip 452KB]
You may need to ‘unlock’ the binaries for security reasons once downloading and extracting the assemblies from the .Zip. To do this, right-click on the file and select the ‘Unlock’ button.

These binaries are strong named as before, but are not Authenticode signed, so they are not official. This helps work around some Windows Phone signing issues I’ve heard reports of.

Hope this helps,
Jeff

My ChildWindow style

Click on the window above to open a simple Silverlight 4 application that demonstrates the transitions and interactivity. Project download.

Some things to call out:

• I don’t include a Close button in the window chrome.
• I hook up to the OnKeyDown event in my sample implementation. I always try and do this with my ChildWindows so that the escape (ESC) key can be treated as a cancelation of the dialog. Personal preference but a usability win I believe.
• I like a light overlay color instead of a darkening experience, and went for that look.
• My actual implementation uses a value converter to capitalize the title. I’ve removed this from my template for the time being.

The story on my evolving, unnamed theme, and how it relates to “Cosmopolitan”

There’s an excellent “Cosmopolitan” Silverlight project template + theme available that makes building good-looking interfaces a snap, and I’d highly recommend it if you’re looking to modernize the look of a new Silverlight project. I believe it pulls from “codename Metro” design ideas. It just works and as a VS template it rocks!

I’ve built an alternative, but similar theme, over time that I use on many of my projects, and it also pulls from the inspiration of the clean, consistent Zune software design principals.

Now that the “Cosmopolitan” theme is out there, I’ve been taking the time to compare and contrast my similar theme with this, and see where I can make changes. Yeah, the things I do in my free time are baffling…

This is a good exercise because design is a two-way street, comparing and contrasting design decisions and implementations: I’ve learned that I should have been including validation templates in my theme (oops, haven’t used that feature enough). And I’ve shared some minor feedback on parts of the “Cosmopolitan” theme’s implementation details with its designers.

In the future I’ll present the complete theme for many controls, but until that develops, I’m going to continue to share small styles and templates, along with my comments along the way. Previously I blogged my context menu style.

If you’re wondering “why should I use ChildWindow?” – I used to wonder the same thing. But I’m using ChildWindow more now than ever. I’ve discovered the importance of the nice integration with Visual Studio (there’s an item template for child windows), and out-of-browser applications have many uses for a rich modal-style window for sharing information at runtime.

I’ve completely replaced the MessageBox in my out-of-browser applications to instead use a child window designed to replace the message box functionality, offering a consistent visual design even when a message box-like experience is needed. I even use extension methods to add methods to MessageBox to instead use my styled child window.

Other ChildWindow styles

Here’s the standard ChildWindow style and control template that is built into the Silverlight SDK. I’m displaying a password entry form adapted from an app I was experimenting with:

Here is the same window with the “Cosmopolitan” theme’s style applied:

Note: There’s a bug in ChildWindow implicit styling support

While working on creating themes, I did discover that there’s an unfortunate bug in Silverlight 4 where the implicit styles for ChildWindow are not picked up in certain XAML scenarios. Namely, if you use the handy item template in Visual Studio, the implicit style won’t be picked up.

Oddly, at times Visual Studio will show the proper implicit style, but at runtime it will revert to the standard control default style. Here’s a small screenshot – this is out-of-the-box “Cosmopolitan” theme with a ChildWindow item template.

At design time it looks fine:

At runtime:

It appears that this item template format, where the XAML file of the child window’s root is the child window, doesn’t allow the style that was implicitly defined to be picked up.

No worries. To workaround this, add a Style attribute to the root of the file and a static resource to ChildWindow name. If you’re working with “Cosmopolitan”, then here are the steps:

• Open the Assets/SDKStyles.xaml file
• Navigate to the implicit style for ChildWindow around line 2,440
• Add an x:Key to make the style explicit instead of implicit. x:Key=”ChildWindowStyle”
• Add this line after the (now explicit) style:

<Style TargetType="controls:ChildWindow" BasedOn="{StaticResource ChildWindowStyle}" />

• Open your ChildWindow XAML file (mine is called Password.xaml) and add the attribute Style=”{StaticResource ChildWindowStyle}” to the root element

And here’s it at runtime now with our fix/workaround:

Note that whenever defining implicit styles myself, I always start explicit, then provide the implicit in the file using BasedOn.

Download my sample project including the style

[ChildWindowTheme.zip, 71 KB] Includes the theme in App.xaml.

“My yet-to-be-named Zune-inspired theme” components

• ChildWindow (this post)
• ContextMenu

I took a few minutes to experiment with new Silverlight 4 features, including the new Silverlight Toolkit (April 2010 release) that includes a context menu control, to re-style/re-template the menu to look similar to a few other menus.

Here’s a quick look at some common context menu visuals – clearly there is some room for artistry in creating a consistent experience with your app.

The center context menu, with the Windows look, is what the default Silverlight Toolkit context menu looks most similar to.

New features used

• Right-click input event, added to the platform in Silverlight 4
• Context menu control from the Silverlight Toolkit
• Implicit styles support
• Local fonts

Consider checking out ‘Cosmopolitan’, too

There’s a theme that resembles the modern “codename Metro” design style, similar to that of the Zune user interface, that is available for Silverlight 4. More information is available on Tim’s blog.

What a context menu looks like in XAML

You need an xmlns for the input assembly in the Silverlight Toolkit. Then you setup the ContextMenuService, a ContextMenu instance, plus multiple MenuItem and Separator instances.

A MenuItem can optionally have an icon, though I believe the trend these days is moving away from the icon-heavy menu and toolbar world into a clean & crisp text-only experience… so I prefer a styled context menu that doesn’t optimize for icons.

The XMLNS for the context menu assembly is:

xmlns:controlsInputToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit"

You can directly wire up to the Click event, or use Commands. Here’s a sample context menu within a data template:

<ListBox.ItemTemplate>
    <DataTemplate>
        <ContentPresenter Content="{Binding}">
            <controlsInputToolkit:ContextMenuService.ContextMenu>
                <controlsInputToolkit:ContextMenu>
                    <controlsInputToolkit:MenuItem Header="Play" Click="OnMenuItemClick"/>

                    <controlsInputToolkit:Separator/>

                    <controlsInputToolkit:MenuItem Header="Download" Click="OnMenuItemClick"/>
                    <controlsInputToolkit:MenuItem Header="Buy" Click="OnMenuItemClick"/>
                    <controlsInputToolkit:MenuItem Header="Add to cart" Click="OnMenuItemClick"/>

                    <controlsInputToolkit:Separator/>

                    <controlsInputToolkit:MenuItem Header="Add to playlist" Click="OnMenuItemClick"/>
                    <controlsInputToolkit:MenuItem Header="Add to burn list" Click="OnMenuItemClick"/>
                    <controlsInputToolkit:MenuItem Header="Add to now playing" Click="OnMenuItemClick"/>
                    <controlsInputToolkit:MenuItem Header="Mark as favorite" Click="OnMenuItemClick"/>

                    <controlsInputToolkit:Separator/>

                    <controlsInputToolkit:MenuItem Header="Send" Click="OnMenuItemClick"/>

                </controlsInputToolkit:ContextMenu>
            </controlsInputToolkit:ContextMenuService.ContextMenu>
        </ContentPresenter>
    </DataTemplate>
</ListBox.ItemTemplate>

And here’s what it looks like:

To use the ContextMenu, make sure your project includes references to both the toolkit’s System.Windows.Controls.Input.Toolkit.dll as well as the SDK’s System.Windows.Controls.dll.

Now I’d like to make this look more Zune-like.

Using implicit styles

So there are multiple ways to have a style (predefined look, settings and template) on your object:

1. Default style key – the default template and style that the creator of the control had in mind. No work required.
2. Implicit styles defined in Resources – in Silverlight 4, a Style defined by a user, but without an x:Key property, will automatically apply to all scoped controls of that type.
3. Static resource styles defined in Resources – the standard experience up until now, having a Style with an x:Key, then setting the Style=”{StaticResource MyKeyName}” on any and all controls that want to use that style.
4. Setting properties directly on an object.

So here is a standard, simple style for a Button, with the key:

<UserControl.Resources>
    <Style TargetType="Button" x:Key="MyButtonStyle">
        <Setter Property="Background" Value="Blue"/>
    </Style>
</UserControl.Resources>

Here’s how you reference it:

<Button Style="{StaticResource MyButtonStyle}" Content="OK"/>

And now let’s make that into an implicit style for Silverlight 4. Just remove the x:Key:

<UserControl.Resources>
    <Style TargetType="Button">
        <Setter Property="Background" Value="Blue"/>
    </Style>
</UserControl.Resources>

And here’s how you reference that style – you don’t – it’s implicit:

<Button Content="OK"/>

Small caveat, fyi: there is a bug with implicit styles not necessarily being applied within data templates. To work around this, I had to move to explicit styles (adding an x:Key to the style, then setting the Style property in the DataTemplate’s XAML to the static resource’s key).

Local fonts

I also used a feature of Silverlight 4 that lets me pick up and use local fonts on the machine. I’m using the ‘Segoe UI’ font, a key part of the Windows 7 user experience and visual identity.

However I also define fallback fonts, just like you would in HTML:

<Setter Property="FontFamily" Value="Segoe UI, Tahoma, Arial"/>

My Zune-like context menu

Here are the templates I ended up creating using Expression Blend.

To achieve the fade-in effect, I faked a little and used a Loaded event trigger, so the first time any particular context menu is shown, it will quickly fade – but subsequent presentations of the same instance will not fade, for a faster, more performant feel.

ContextMenu Style

<Style TargetType="controlsInputToolkit:ContextMenu" x:Key="ZuneLikeContextMenu">
    <Setter Property="Background" Value="#FFFFFFFF"/>
    <Setter Property="BorderThickness" Value="0,1,0,1"/>
    <Setter Property="BorderBrush" Value="#0D000000"/>
    <Setter Property="Padding" Value="0,4,0,4"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="controlsInputToolkit:ContextMenu">
                <Border
                    x:Name="Menu"
                    Opacity="0"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Background="{TemplateBinding Background}"
                    CornerRadius="0">
                    <Border.Effect>
                        <DropShadowEffect
                            ShadowDepth="0" Opacity="0.6" BlurRadius="22"/>
                    </Border.Effect>
                    <Border.Triggers>
                        <EventTrigger RoutedEvent="Rectangle.Loaded">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation
                                        Duration="0:0:0.2"
                                        To="1"
                                        Storyboard.TargetProperty="Opacity"
                                        Storyboard.TargetName="Menu"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Border.Triggers>
                    <Grid>
                        <ItemsPresenter Margin="{TemplateBinding Padding}"/>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Separator Style

<Style TargetType="controlsInputToolkit:Separator" x:Key="ZuneLikeSeparator">
    <Setter Property="Background" Value="LightGray"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Margin" Value="6,2,6,2"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="controlsInputToolkit:Separator">
                <Border
                    BorderThickness="{TemplateBinding BorderThickness}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    Background="{TemplateBinding Background}"
                    Height="1"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

MenuItem Style

<Style TargetType="controlsInputToolkit:MenuItem" x:Key="ZuneLikeMenuItem">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="FontFamily" Value="Segoe UI, Tahoma, Arial"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Padding" Value="8,2,10,2"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="controlsInputToolkit:MenuItem">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="Presenter" Storyboard.TargetProperty="Opacity" To="0.5"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Unfocused"/>
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="Bg" Storyboard.TargetProperty="Opacity" To="1"/>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="IconPresenter" Storyboard.TargetProperty="Opacity" To="1"/>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="Presenter" Storyboard.TargetProperty="Opacity" To="1"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Rectangle
                        RadiusX="0"
                        RadiusY="0"
                        Fill="{TemplateBinding Background}"
                        Stroke="{TemplateBinding BorderBrush}"
                        StrokeThickness="{TemplateBinding BorderThickness}"/>
                    <Rectangle
                        x:Name="Bg"
                        RadiusX="0"
                        RadiusY="0"
                        StrokeThickness="0"
                        Opacity="0"
                        Fill="#11000000"/>
                    <Grid Margin="{TemplateBinding Padding}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition
                                Width="Auto"/>
                            <ColumnDefinition Width="2"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="17"/>
                        </Grid.ColumnDefinitions>
                        <ContentPresenter
                            x:Name="IconPresenter"
                            Content="{TemplateBinding Icon}"
                            Margin="1"
                            Opacity=".7"
                            VerticalAlignment="Center"/>
                        <ContentPresenter
                            x:Name="Presenter"
                            MinWidth="120"
                            Opacity=".7"
                            Content="{TemplateBinding Header}"
                            ContentTemplate="{TemplateBinding HeaderTemplate}"
                            Grid.Column="2"/>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

ZuneLikeContextMenuImplicitStyles.xaml.txt: XAML. Download all three in one file. The file contains both implicit styles plus defined style names.

Here’s a comparison, a screenshot of the Zune menu on the left, and my Silverlight 4 context menu on the right:

Hope this helps you create some nice modern-looking Silverlight apps!

Rich, modern user interface

The user interface no longer uses the antiquated HTML DOM bridge for displaying results, but now is a data bound, rich Silverlight application itself.

Rich results information is available, and a tree view control allows you to select results to be included in a test report that can be copied to the clipboard. Failures are automatically selected.

The results pane includes information about the tests that ran, as well as detailed information for failures.

Descriptive text helps identify negative tests, known test issues and bugs, and other important metadata that was not always exposed in the previous test framework.

Integrated tag expression support

The startup experience now allows you to enter a tag expression to select which tests to run, or not to run. You can add the Tag(“”) attribute to any test methods or classes to define your own tags. Also, the full and short names of tests and classes implicitly become test tags, as well as priorities.

This means that you can define tags such as:

Out of Browser support

The framework now supports running out-of-browser. Paired with the new Silverlight 4 Tools for Visual Studio 2010, you can press F5 to run a test project you have marked as an out-of-browser.

This also opens up an opportunity to do testing of elevated apps that make use of AutomationFactory and other advanced features on Windows.

Simplified dependencies

The test framework removed dependencies on System.Windows.Browser (from the platform) and System.Xml.Linq (XLinq, from the SDK).

Building blocks for Windows Phone testing support

This version also contains the full source to the phone testing interface, which is significantly different in visual design and experience to coincide with the Windows Phone device size.

However, the story for phone testing is still developing: in the meantime binaries designed for phone use can be found at http://jeffatmix.com/

New location for binaries

Since the new rich user interface contains a number of controls, the traditional design-time integration system conflicts and presents some issues.

As a result, we had to move the binaries from the Bin directory of the toolkit installation folder into a new Testing directory.

So the two test framework assemblies (Microsoft.Silverlight.Testing and Microsoft.VisualStudio.QualityTools.UnitTesting.Silverlight) have moved.

This location change could cause existing applications that reference the test assemblies to fail to compile due to the "missing" references.

If that happens, please delete the two broken references and create references to these assemblies in their new location. Everything else should continue to work as expected.

Simplified test project template

In alignment with the test project changes in Visual Studio 2010, which are more simplified, the unit test project template for Silverlight no longer includes a README.TXT file.

Known issues

Test service

I’ve received reports from a number of people about issues with the test service automation support. Some of the NDA/preview users of the framework reported issues that were corrected, but there may still be some bugs out there. I’m working to investigate and post a fix if and when I know more.

In the meantime I know that StatLight, a third party system, has been updated for the April release and is working well for automation.

Test panel and visuals

Please beware that some of your tests may need to be updated to use the new framework if your application, utility functions, or tests ever used the Application.Current.RootVisual (against the recommended pattern for interface testing).

The root visual is now the test framework application runner itself, and the tests run within the same TestPanel as before. Controls added to the test panel will not be located at the 0, 0 screen position, but likely near the bottom of the screen instead.

Hope this helps. To get started, download and install the April toolkit!

Although we had previously talked about a March 2010 release to coincide with the Silverlight 4 RC at MIX, we have decided not to ship an interim release for the RC, since the final release of Silverlight 4 is coming next month.

This is a good thing for developers, the time we save by not releasing goes toward a better release overall when Silverlight 4 is final.

In the meantime, the release of the toolkit in November, for Silverlight 3, still works great on Silverlight 4 RC.

I wanted to provide my own informal look at how it’s working with Silverlight for Windows Phone today.

Note that this information is only current as of today, 3/21, when used with the MIX-related CTP of the tools and emulator, and the November 2009 Silverlight Toolkit. A lot could change, and this is not exhaustive.

I’m also including some controls that are found in the Silverlight SDK today. I present these in order of how much I have used the components while building apps.

WrapPanel and DockPanel

Found in the Silverlight Toolkit, System.Windows.Controls.Toolkit.dll (SWC.Toolkit).

Work great.

If you just need the WrapPanel, and don’t want to include the entire toolkit assembly, you can just paste these source files into your application project instead (license: Ms-PL):

• OrientedSize.cs
• WrapPanel.cs

Charting and Data Visualization

There is a known issue with LINQ that prevents the controls today from working perfectly. A small, targeted fix has been made in the charting codebase and a future release will work well on the device.

Re-templating and styling the control is very important, and required, for working on the phone in an acceptable manner. I hope to share any decent templates I can come up with.

HeaderedItemsControl, HeaderedContentControl

Work great. Split between System.Windows.Controls (SWC) and SWC.Toolkit.

TreeView

SWC. Functional; requires massive re-templating and styling. Font sizes are much too small, and the theme and visuals do not appear code-name “Metro” compatible.

AutoCompleteBox

Found in the System.Windows.Controls.Input SDK library of the Silverlight 3 SDK.

Works OK, not ready for general development use.

Drop-down appears well. Major features all work. However, touching an entry in the drop down only performs selection. A second touch is required to verify the choice, effectively requiring a double-tap in use.

Calendar, DatePicker

SWC. Limited functionality, too small visually. Not designed for touch – not enough space to reliably click on a date. Require massive re-templating. Do not resemble the same experience as the date picker built into the Windows Phone operating system.

GridSplitter

Works, but may pose difficult to use on a device: requires much larger padding and custom templates to make the touch area visible and useful.

Not yet checked

DataGrid, DataPager, ChildWindow, Label, NumericUpDown, DomainUpDown, DataForm, Rating, TimePicker, TimeUpDown, GlobalCalendar, TransitioningContentControl, TreeMap, BusyIndicator, Viewbox, Expander, Accordion, drag and drop features, and many more.

We’re also still developing a story for the toolkit’s phone story moving forward. As there is a lot of momentum around the phone in the company, it’s very likely that some set of phone tools, samples, and toolkits come out.

Hope this helps.

An early preview set of bits are online at http://jeffatmix.com/ – and the next release of the Silverlight Toolkit when Silverlight 4 ships will contain support for the phone officially. Stay tuned for more.

Over the next few weeks, I’ll be blogging plenty on these subjects.

UNIT TESTING SILVERLIGHT AND WINDOWS PHONE APPLICATIONS
Jeff Wilcox in Lagoon B (Mandalay Bay)
Tuesday, March 16, 2010 2:05 PM (30 minutes)

Session materials, slides and code will be posted after the session at http://jeffatmix.com/.

Synposis from http://live.visitmix.com/MIX10/Sessions/CL59:

Learn how to create and maintain Silverlight and Windows Phone 7 Series applications using the Silverlight Unit Test Framework. See what tools are available to easily validate controls and application interfaces, add automatic testing to builds, and gain a solid understanding of test principles to deliver great experiences for your clients and customers.

What’ll be new at MIX for testing?

• Support for testing those Windows Phone 7 Series apps!
• New release of the Silverlight Unit Test Framework, with a modern user interface, Out of Browser support, and more.

Hope to see you all in Vegas! And if not – these sessions always make it online super quick. Let me know if there’s anything in particular you want covered in the talk.

Note: Turns out Paul Harrington already wrote one. Since I’m at least throwing my source out in public, I figure this blog post may still have some value. If you’re looking for a more baked solution, with some level of extensibility available, I’d recommend his. I’m not planning on building in a UI or offering this in the online extension guide for VS at this time since his works well.

Download the extension

VisualStudioGuides.vsix [111 KB, Visual Studio Extension Package, Signed]

I’ve set the guides to be red in this screenshot to make it clear what the feature offers. In practice, the guides are typically very lightly colored, a dotted line, and quite small, so it doesn’t get in your way.

This works with all non-express SKUs of Visual Studio 2010 RC.

Why use guides?

On the Silverlight Toolkit team we always have had a high level of “engineering excellence”: like all developers, we love a good hearty discussion about code guidelines and style.

One thing we’re clear on is that comments should never extend beyond the 80th character of a line, though we don’t mind source code extending beyond that guide. Hyper-compressed code often ends up looking messy, but having comments always within your viewport, or when printing, is a help.

I’ve heard that the Common Language Runtime team here used to have a preference of no code running beyond 110 characters in a line. So perhaps a good default set of guides is 80 at a minimum, and 110 if you like that idea.

Here’s what the unsupported guides looked like in a previous Visual Studio version; this same dotted-line, lightly-colored behavior is present in my implementation.

How the guides are set

Just as the old unsupported feature works, the registry contains these guide settings. There is a single string key that contains an RGB color definition, followed by any number of guides (integer column counts).

The format for the color is pretty self-explanatory.

In my implementation, if you don’t have any registry key set, it defaults to column 80 and gray.

If you want to easily add that decent default, save this text into a .reg file and execute it:

Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Microsoft\VisualStudio\10.0\Text Editor]
"Guides"="RGB(220,220,220) 80"

If the tool does not find a guide in the 10.0 folder, then it will also look in the 9.0 folder (used for Visual Studio 2008).

Source

Extension source and project for RC [Zip, 51K]

Since the source is Ms-PL (Microsoft Public License), feel free to use it to learn more about the extension features. The starting point for me writing this was actually the Text Adornment project starting template included with the Visual Studio 2010 RC SDK – you need the SDK to author extensions.

Installing the extension

The VSIX format is super easy to use: it’s really just a zip/package file. Just open the .vsix, read the terms, and click Install.

Managing Extensions

The improved extension system in 2010 is great: just go to Tools | Extension Manager, and you can uninstall, disable, and even find new extensions in the integrated online extension browser.

A WPF app that is running one of the AutoCompleteBox samples borrowed from the Silverlight Toolkit samples project, showing major airport names in a drop-down.

Download the WPF Toolkit (February 2010 Release)

Resources

• All of my AutoCompleteBox-related blog posts
• Posts about this release: David Anson’s, Patrick Danino’s

And a quick aside… when we began our Silverlight Toolkit journey a few years ago, we became immediate advocates within the organization for compatibility with WPF, often building our controls to cross-compile, even if we didn’t have an immediate shipping plan for the WPF builds. David sort of led the way here by offering his own unofficial gray market versions of his charting and data visualization controls for WPF.

It’s nice to see things get out there in a more official mechanism, I know of many people enjoying the new-and-improved WPF Toolkit.

Download a zip (7 KB) of them all and extract them into your Snippets folder, which is in your Documents folder: Documents\Visual Studio 2010\Code Snippets\Visual C#\My Code Snippets\. These also work with Visual Studio 2008.

To use a snippet

Inside the code editor, start typing the name of the snippet (such as dp, for a standard dependency property declaration section with a change handler). You should see it in the Intellisense drop-down.

Press tab to accept the value.

If there are editing helpers for the snippet, use tab to move through the fields as you fill them out.

Press Enter when you are finished. This should drop you right into the triple-slash comment field to fill that out.

Included snippets

Hope this helps.

New infrastructure & test tools ship in the Silverlight Toolkit

There is a lot in the release that is joining publicly for the first time, based on some of the internal tools and utilities that we use in building and testing the Silverlight Toolkit, plus things we’d like to have as typical Silverlight developers.

These tools join in the Experimental quality band, and over the next few posts, I’ll dig into the details. This post is a literal walkthrough of how you could go about seeing all the utilities in the meantime.

One important thing to call out is that, as an initial release, there are definitely some rough edges: the test tools are centered around Microsoft Build (msbuild) integration, instead of Visual Studio integration; there’s no add-in or nice right-click project support to use these tools today.

We’ll be collecting feedback along the way and making changes in future releases. Until then, hopefully some of you will find the infrastructure useful, if only to peak behind the curtain. We’re also shipping the full source to these tools, you’ll find an Infrastructure.zip file inside the toolkit install folder.

What we’ll do in this walkthrough

This walkthrough uses Silverlight 4, though the instructions are virtually identical if you’re using Silverlight 3.

• Install the Silverlight Toolkit
• Create a new Silverlight class library with a simple business object
• Add a Silverlight Unit Test Application using the new templates found in the Silverlight Toolkit
• Run the tests in Visual Studio
• Run the tests from the command line in various browsers
• Collect block-level code coverage information for the build

This is screen-shot heavy, as future posts will dig into the details. I appreciate your patience!

Requirements:

• Latest Silverlight Toolkit
• For test automation:

• MSBuild on the machine

• Visual Studio 2010 Beta 2 Ultimate

Installing the tools

When you install either Silverlight Toolkit drop from November, you’ll see that there’s a new feature listed in the setup: the Tools & Templates feature. It’s selected by default, and adds Visual Studio templates, installs the tools, and prepares the tools if your machine has the proper dependencies on it.

Create a Silverlight Class Library

Open Visual Studio 2010 Beta 2, after installing the toolkit. Create a new Silverlight Class Library project, we’ll store a simple business object in it.

Whichever flavor of Silverlight you use, remember to use the same flavor while creating future projects in the same solution!

Create a new Person.cs type, with a few properties and a method. Here’s the source:

using System;

namespace MyApplication
{
    public class Person
    {
        public string First { get; set; }
        public string Last { get; set; }

        public string FullName { get { return First + " " + Last; } }

        public bool MightBe(string substring)
        {
            return FullName.Contains(substring);
        }
    }
}

Add a Silverlight Unit Test Application

Right-click on the solution in the Solution Explorer and select Add New Project. Under the Visual C# (and also Visual Basic) languages node, select the Silverlight subgroup. You’ll see a Silverlight Unit Test Application project template.

You now have two projects:

Next up, we want to add a reference to the class library, so that the unit tests can access the library. Right-click on the new test project and then select the Add Reference option. Under the Project tab, choose the class library you created earlier.

Now, let’s add some unit tests. Clear out the content in the created Tests.cs file and drop this in:

using Microsoft.VisualStudio.TestTools.UnitTesting;
using MyApplication;

namespace PersonTestProject {
    [TestClass]
    public class Tests
    {
        [TestMethod]
        public void TestCtor()
        {
            Person p = new Person();
        }

        [TestMethod]
        public void TestSetName()
        {
            Person p = new Person { First = "Scott", Last = "Guthrie" };
            Assert.AreNotEqual(p.First, p.Last);
        }

        [TestMethod]
        public void TestGetFullName()
        {
            Person p = new Person { First = "Steve", Last = "Ballmer" };
            StringAssert.Equals("Steve Ballmer", p.FullName);
        }
    }
}

The tests are pretty simple, and exercise various simple PMEs on the type.

Run the unit tests from Visual Studio

Right-click on the test project and select Set as StartUp Project from the menu. Then, press F5 or click the Run button to begin execution.

The default web browser will open up, the tests will run, and the window will stay open. When you are satisfied, close the browser. You’ve just run some simple tests!

Running unit tests from the Visual Studio command line

More interesting is being able to automate the tests: through MSBuild, we’ve added a task that can control the browser and save out the log file(s) from the unit tests when they run.

To do this, you need a few things:

• The Visual Studio command prompt open.
• The full path to the test project.

Open the command prompt

Personally, I always pin the Visual Studio 2008 tools command prompt next to my Visual Studio taskbar icons.

You can start it from the Start Menu, under the tools for the Visual Studio version you are using.

Alternatively, make sure MSBuild is in your path.

Or, start a command prompt and then move to your 32-bit Program Files, then ‘Visual Studio 9.0’, then VC. Run ‘vcvarsall.bat x86’

Note: all these command prompts should be 32-bit, even on a x64 machine. Silverlight is a 32-bit world today.

Move to the test project

To get the full path to the test project, I just right-click on the test project in Visual Studio, then Open Folder in Windows Explorer. I copy the path from the resulting Explorer dialog’s crumb navigation bar.

Now, inside the command prompt window, move to that path:

pushd (PASTE PATH HERE) <enter>

To run the unit tests in the default browser, simply type

msbuild /t:test

and press Enter.

You’ll see the browser open, quickly run some tests, and then close. Here’s what it looks like, captured in the middle of the 5-second test run:

And afterwards, you’ll see that Msbuild reports success, and you can read the test to see that 3 passing tests were reported, out of 3 total tests.

Running tests in Google Chrome

It’s easy! Just set the browser property to Chrome.

msbuild /t:test /p:browser=chrome

And just like that, Chrome opens up and runs the tests.

Running tests in Mozilla Firefox

Just set the browser to Firefox.

msbuild /t:test /p:browser=firefox

Tag Expressions

A nice feature to help select a subset of tests is the Tag Expression syntax. By specifying a tag expression at the command prompt, you can include and exclude tests that are marked with the Tag attribute found in Microsoft.Silverlight.Testing.

Also, tags implicitly exist for all test method names, short and full.

So, let’s run the test called TestSetName from our project.

msbuild /t:test /p:tagexpression=TestSetName

You may briefly see indication in the test UI in the browser that a ‘Tag expression’ is in use.

And the build results show that just one test ran:

If you want to run all tests except that one, use this tag expression:

msbuild /t:test /p:tagexpression=!TestSetName

Cool, and easy!

Test results files

Another nice feature of running the tests through MSBuild is that you’ll see test result files (end in *.trx) inside the same folder as the test page for the application.

Similar and conformant to the Visual Studio *.trx format, you can parse and work with this data to understand execution times, results, and read other information. Unfortunately, you cannot open these files in Visual Studio 2010 Beta 2, but they do open in Visual Studio 2008. Note that there isn’t any real test integration with VS here: this is just an informative display.

Here’s a directory with several test result files (plus some coverage stuff we’ll get to later):

You can open up the TestResults trx file and see what kind of information is in it:

And here’s the results file opened in Visual Studio:

Preparing for Code Coverage

Ripe for a Visual Studio add-in, this process requires us modifying the test project’s .csproj file some. Instructions are the same for Visual Studio.

We need to manually select the assembly to be instrumented by setting a property. The assembly to be instrumented must not be signed, and not have a strong name. In this example, the assembly is SilverlightClassLibrary3.

To make changes to the test project, to specify this, first unload the project by right-clicking on the test project and selecting the Unload option:

Then, right-click the project file that is ‘(unavailable) and select ‘Edit’.

Now you’ll see the XML data for the project. Scroll down in the template to where there is a commented out ItemGroup, and some comments about the code coverage support. Remove the comments from the ItemGroup:

And now, change the Include statement from SilverlightClassLibrary1 to whatever your assembly to instrument is called. In our example here, it is called SilverlightClassLibrary3.

Now, that’s it. Let’s close the file and then right-click the project again and select Reload Project:

Now we’re ready to go!

Running Silverlight Code Coverage

Just like the msbuild /t:test from above, we have a similar target named CoverageTest and CoverageView. CoverageTest collects the data, while CoverageView collects the coverage data and then shows the results in an application that explores the hit and not hit portions of your source code.

Let’s collect coverage!

Note: This is assuming that you have a high-level SKU of Visual Studio 2010 Beta 2 installed. The coverage tools depend on the Static Analysis Tools that ship in the beta. You will receive an error if you run this on a machine without those tools. We’ll look for a better experience in the future.

Remember, the same properties from above – browser and tag expression – still can apply and work in the coverage targets.

msbuild /t:coveragetest

Here is what it will look like if everything line up. Unfortunately, the coverage experience is a very early preview and very flaky in some situations due to the dependency on beta components. We also haven’t had I admit enough time to iron out all the issues customers may experience.

You see the Instrumentation messages come out, then the RunTests target, then the coverage data is merged and things should be successful.

If that worked, it is safe to assume that the view target will also work. It will re-run all the tests and instrument again as well.

msbuild /t:coverageview

Now you’ll see the viewer popup, that lets you drill into types and methods to see what is hit (cyan) or not hit (red), to spot code that your tests are missing:

You’ll find a Coverage.xml file in the same directory where the test results go. This is the data that is used by the viewer application. You’ll see in the XML file a set of ‘visited’ blocks, and other information, in the file:

More to come soon!

Download the Silverlight Toolkit November 2009 Release Today

The Silverlight Toolkit is a collection of Silverlight controls, components and utilities that help make Silverlight development a little easier, more fun, and add value outside the regular Silverlight release cycle.

The sixth release of the Silverlight Toolkit, the November 2009 release targets Silverlight 3. There is also a release available that targets the new Silverlight 4 Beta for developers.

Resources of note:

• Learn more about the Silverlight Toolkit
• Download the November 2009 Release
• Get started with Silverlight development
• Participate in the controls community at Silverlight.net
• Check out questions and answers on Stack Overflow using the ‘silverlight-toolkit’ tag
• The Issue Tracker can be used to report issues, add to the feature wish list, and vote on the work to be done by the Microsoft team

Hope you enjoy our new release!

The Silverlight Control Browser is a one-stop resource for learning about the core controls in Silverlight, the controls in the Silverlight SDK (like DataGrid), and of course the value-add controls and features that are found in the extra Silverlight Toolkit download.

By installing the app on your machine, you can learn about the controls even when offline. Perfect for those long holiday flights that are coming up this next month, when your airline doesn’t provide wireless Internet. (Aside: I recently flew Delta and the wireless in-flight Internet rocked. Big time. I’ve never had a flight home to Seattle go by so quickly)

Another scenario: the infamous hipster coffee shops in Seattle whose wifi routers go down and never come up again. This morning I was in such a coffee shop without Internet, but was still able to fire up the sample app and grab a screen shot for the new BusyIndicator control that’s in the Silverlight Toolkit now.

Any interest in an Out of Browser Helper Control?

One thing I’ve been wondering if whether an ‘OutOfBrowserHelper’ control would be a useful, and quick, control for us to turn around inside the Silverlight Toolkit: something that has a very small scope, specific purpose, and will save developers time.

I’m imaging that this would wrap up the update logic, potentially offer the Install button, and other core services. I don’t know how practical it is, but I’d be interested in thoughts out there. Later in this post I talk about what all you need to do to enable the right Out of Browser update pattern in your apps.

I’ve created a Wishlist Feature request on the Silverlight Toolkit issue tracker to see if anyone else thinks it would be interesting…

A well-designed app that looks great in the browser looks great outside of it, too. What I like most about the Silverlight Out of Browser feature, compared to others, is that you don’t need to install anything else: no special runtime, no User Account Control permission, etc – since those apps run in the same security sandbox that Silverlight apps do while hosted in the Silverlight plugin.

This post is specific to that nice, simple Out of Browser support in Silverlight 3. For the hardcode developers out there, and some very interesting scenarios, Silverlight 4 adds a special elevated trust mode. That mode is outside the scope of this post.

Enabling Out of Browser for your own applications

A key feature in Silverlight 3, it takes about half an hour to enable Out of Browser if you’re a developer and looking to create your own graphics for the experience. Your users will notice that you have no design talent, but that is half the fun. Also, this is why “battleship gray” is so prevalent in Windows today.

If you have graphic assets from your designers, you can add the feature in about 2 minutes.

Here’s the technical set of hoops you need to do to define the Out of Browser metadata for your app.

Using Visual Studio 2008 or Visual Studio 2010 Beta 2

• First off, once you have the Silverlight Tools installed, just right-click on the project file in the Solution Explorer.
• Then, navigate to the Silvelright tab.
• Check the ‘Enable running application out of the browser’ option. This option will not be available if the ‘Reduce XAP size by using application library caching’ option is checked, fyi.
• Click the ‘Out-of-Browser Settings’ button.

This window will then allow you to set the Out of Browser information, such as a nice quick blurb about the app, the application title, and other basics. This data is all stored in the .\Properties\OutOfBrowserSettings.xml in your project directory structure.

You’ll need to have those icons ready at this point.

Click OK, and that is it: your application can now be taken out of the browser!

OutOfBrowserSettings.xml

This file should be placed inside your Properties folder of the Silverlight application project. Visual Studio will create it for you when you enable the experience, and in fact the Silverlight Tools even offer tooling to easily modify these properties. If you author it by hand, the file is of build type ‘None’, and hooked up inside the .csproj or VB project through these properties:

    <EnableOutOfBrowser>true</EnableOutOfBrowser>
    <OutOfBrowserSettingsFile>Properties\OutOfBrowserSettings.xml</OutOfBrowserSettingsFile>

Here’s what it looks like for the Silverlight Toolkit. We’ve defined the expected 16×16, 32×32, 48×48, and 128×128 brand icons. The icons are included in the project and marked as ‘Content’ in the Visual Studio properties dialog, so that they are in the Xap at the end of the build process.

<OutOfBrowserSettings ShortName="Silverlight Controls Browser" EnableGPUAcceleration="True" ShowInstallMenuItem="True">
  <OutOfBrowserSettings.Blurb>Sample explorer for the controls and features found in the Silverlight Toolkit and Silverlight SDK.</OutOfBrowserSettings.Blurb>
  <OutOfBrowserSettings.WindowSettings>
    <WindowSettings Title="Silverlight Controls Browser" />
  </OutOfBrowserSettings.WindowSettings>
  <OutOfBrowserSettings.Icons>
    <Icon Size="16,16">Toolkit16.png</Icon>
    <Icon Size="32,32">Toolkit32.png</Icon>
    <Icon Size="48,48">Toolkit48.png</Icon>
    <Icon Size="128,128">Toolkit128.png</Icon>
  </OutOfBrowserSettings.Icons>
</OutOfBrowserSettings>

Other options

There are several additional Out of Browser options to chose from. The Silverlight 4 Beta also adds the elevated trust option here.

Use GPU Acceleration: Check this to enable acceleration if your application will benefit from this.

Show install menu: By default selected, this adds the option to Install the app (and take it Out of Browser) to the right-click menu for your Silverlight application.

If you decide not to show the install menu, you’ll need to implement your own user interface to show an Install button or other experience.

The one included in the Silverlight Toolkit sample app is a good example – implemented in Welcome.xaml and Welcome.xaml.cs, it is aware of the state of the running application and whether to offer the install option or not.  

Implementing all the necessary things to make Out of Browser shine

Tim Heuer offers important information about making the Out of Browser experience world-class. For instance, you need to actually have you app asynchronously check for updates, and offer information about the availability of any updates.

• You need to call CheckAndDownloadAsync and react to that in your user interface
• You should check the InstallState if you want to offer different user interfaces depending on the Out of Browser state

Tim also has a recommended pattern for effectively forcing an app to only be available Out of Browser, similar to the experience you might find with other popular apps that live outside of the browser.

Here’s the App.xaml.cs file from the Silverlight Toolkit controls sample browser, to give you an idea of what we do. We’re only showing a MessageBox when an update becomes available, but you can make the experience a little richer if needed (see father down the post for that).

// (c) Copyright Microsoft Corporation.
// This source is subject to the Microsoft Public License (Ms-PL).
// Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
// All other rights reserved.

using System;
using System.Windows;
using System.Collections.Generic;
using System.Linq;

namespace System.Windows.Controls.Samples
{
    /// <summary>
    /// System.Windows.Controls samples application.
    /// </summary>
    public partial class App : Application
    {
        /// <summary>
        /// Initializes a new instance of the App class.
        /// </summary>
        public App()
        {
            if (App.Current.InstallState == InstallState.Installed)
            {
                App.Current.CheckAndDownloadUpdateCompleted += OnCheckAndDownloadUpdateCompleted;
                App.Current.CheckAndDownloadUpdateAsync();
            }

            Startup += delegate
            {
                RootVisual = new SampleBrowser(SampleTreeItems);
            };
            InitializeComponent();
        }

        /// <summary>
        /// Checks for the update completed event.
        /// </summary>
        /// <param name="sender">The source object.</param>
        /// <param name="e">The event arguments.</param>
        private void OnCheckAndDownloadUpdateCompleted(object sender, CheckAndDownloadUpdateCompletedEventArgs e)
        {
            if (e.UpdateAvailable)
            {
                MessageBox.Show("An application update has been downloaded and "
                              + "will be available the next time you start the "
                              + "sample application.");
            }
            else if (e.Error != null)
            {
                MessageBox.Show("While checking for an application update, the "
                              + "following message was encountered:"
                              + Environment.NewLine
                              + Environment.NewLine
                              + e.Error.Message);
            }
        }
    }
}

Offering a button experience for taking the app Out of Browser

Although you could just offer the experience in the right-click context menu of your Silverlight app in the browser, that’s not a very well-advertised and visual feature. For the samples app, we expose a button to “Install” the app on the machine.

We want to be able to update that offering UI in real-time, so once the user takes the app out of browser, the Install button is no longer visible.

We do this by subscribing in the Welcome.xaml.cs page to the OnInstallStateChanged event of the Application:

// Make sure that we are connected to the installation state change
// at least once.
Application.Current.InstallStateChanged += OnInstallStateChanged;

And our Button has an event handler attached to start the actual install. The install call needs to happen in a user-initiated action: you can’t just call it whenever you like, but instead it needs to be placed somewhere in response to the user making a conscious installation decision:

/// <summary>
/// Installs the application.
/// </summary>
/// <param name="sender">The source object.</param>
/// <param name="e">The event arguments.</param>
[SuppressMessage("Microsoft.Performance", "CA1811:AvoidUncalledPrivateCode", Justification = "Event connected in XAML.")]
private void InstallSamplesClick(object sender, RoutedEventArgs e)
{
    Application.Current.Install();
}

When they click that button, they’ll see the Consent Experience for the app. The clear and concise consent dialog is powered by Silverlight, but you’re able to customize the graphic displayed with your own designer brand asset:

And then we are able to react to that by manually changing text, enabled status, visibility, etc. I’m sure a data binding expert would be able to make this example a little more attractive looking, but the code works!

/// <summary>
/// Shows or hides the installation button.
/// </summary>
/// <param name="sender">The source object.</param>
/// <param name="e">The event data.</param>
private void OnInstallStateChanged(object sender, EventArgs e)
{
    switch (App.Current.InstallState)
    {
        case InstallState.Installing:
            InstallButton.Visibility = Visibility.Visible;
            InstallButton.IsEnabled = false;
            InstallButton.Content = "Installing...";
            break;

        case InstallState.Installed:
            InstallButton.Visibility = Visibility.Collapsed;
            InstallText.Text = "The samples have been installed on this computer.";
            break;

        case InstallState.NotInstalled:
            InstallButton.Visibility = Visibility.Visible;
            InstallButton.IsEnabled = true;
            break;

        case InstallState.InstallFailed:
            InstallButton.Visibility = Visibility.Collapsed;
            InstallText.Text = "The Out of Browser installation failed.";
            break;
    }

    InstallApplicationPanel.Visibility = App.Current.IsRunningOutOfBrowser ? Visibility.Collapsed : Visibility.Visible;
}

A smoother notification method

Since most users aren’t going to immediately want to close the app they are working with, when an update becomes available, you’ll realize that the MessageBox.Show(…) route for the notification is jarring and rather inappropriate.

If you instead embed that information inside of your user interface, it can be simple “FYI” that is not as abrupt.

Here’s a simple use: if your root visual for the app contains a DockPanel, you could have a collapsed user interface element for displaying important messages, such as the availablility of an update.

Here’s what my UI might look like when a new version is available:

This user interface is accomplished with the toolkit’s DockPanel control, plus a little code behind. Here is the main application XAML:

<controlsToolkit:DockPanel Background="White">
    <!-- Out of Browser Notification -->
    <Border Height="32"
            BorderBrush="#b4a555"
            BorderThickness="1"
            x:Name="OutOfBrowserNotification"
            Visibility="Collapsed"
            controlsToolkit:DockPanel.Dock="Top">
        <Grid>
            <Grid.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#fff6bd" Offset="0" />
                    <GradientStop Color="#ffec82" Offset="1" />
                </LinearGradientBrush>
            </Grid.Background>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition Width="24" />
            </Grid.ColumnDefinitions>
            <StackPanel Orientation="Horizontal">
                <TextBlock FontWeight="Bold"
                           VerticalAlignment="Center"
                           Text="Update Notification:"
                           Margin="5" />
                <TextBlock VerticalAlignment="Center">The next time you use
                    this app, you'll be on the hot new version.
                </TextBlock>
            </StackPanel>
            <TextBlock Grid.Column="1"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       FontWeight="Bold"
                       Text="X"
                       Padding="6"
                       MouseLeftButtonDown="OnCloseUpdateNotification"
                       />
        </Grid>
    </Border>

    <Grid x:Name="LayoutRoot">
        <Button Content="Your Application Goes Here"
                Opacity=".4"/>
    </Grid>
</controlsToolkit:DockPanel>

So, except when an update is available, the top notification section would not even be taking up any space. So here’s the code that responds to the application’s CheckAndDownloadUpdateCompleted event:

private void OnCheckAndDownloadUpdateCompleted(object sender, CheckAndDownloadUpdateCompletedEventArgs e)
{
    if (e != null && e.UpdateAvailable)
    {
        OutOfBrowserNotification.Visibility = System.Windows.Visibility.Visible;
    }
}

Behind the scenes, I’ve wired up a fake close button, so users can dismiss the window at their leisure:

private void OnCloseUpdateNotification(object sender, MouseButtonEventArgs e)
{
    OutOfBrowserNotification.Visibility = System.Windows.Visibility.Collapsed;
}

For more information about the Silverlight Out of Browser feature, please check out the official MSDN Library documentation, “Out-of-Browser Support”.

Out of Browser and Application Library Caching: Mutually Exclusive

You may have also read that we’re finally shipping the application library cache support files in the November 2009 release of the Silverlight Toolkit. Unfortunately, we haven’t enabled library cache support for the samples application, because we feel the value provided by Out of Browser trumps the cached library scenario.

When you setup Out of Browser support, you cannot enable Application Library Caching. The Visual Studio project properties are good about enforcing this.

The reason is that the Out of Browser experience requires that the entire Xap be self-contained, and when you enable application library caching for a project, it drops a bunch of .Zip files (zipped up versions of those dependent libraries) alongside the main app’s .Xap file. When Out of Browser, you may not always be able to download or grab those files.

Consider a Splash Screen if you have a large app that is Out-of-Browser enabled

I created a custom splash screen experience for the controls sample app that is hosted up on Silverlight.net, since the application is several megs. Your grandmother’s probably not interested in the control browser app, so don’t worry about those 14.4k modem users. My grandmother isn’t even interested, and she knows I work on this stuff!

The splash screen for the Silverlight Toolkit consists of a Silverlight Toolkit brand logo, a ton of TextBlocks, and I’m also using the native Grid to center the entire experience within the plugin. There’s a little JavaScript to update the text block with the percents, and the rest of the cycling animation is powered by several Storyboards that start when the page is initally loaded.

This is a good alternative to application library caching in some situations. Do remember to keep the splash screen small – users are much more interested in your app. Hopefully.

Download the Silverlight Toolkit November 2009 Release Today

The Silverlight Toolkit is a collection of Silverlight controls, components and utilities that help make Silverlight development a little easier, more fun, and add value outside the regular Silverlight release cycle.

The sixth release of the Silverlight Toolkit, the November 2009 release targets Silverlight 3. There is also a release available that targets the new Silverlight 4 Beta for developers.

Resources of note:

• Learn more about the Silverlight Toolkit
• Download the November 2009 Release
• Get started with Silverlight development
• Participate in the controls community at Silverlight.net
• Check out questions and answers on Stack Overflow using the ‘silverlight-toolkit’ tag
• The Issue Tracker can be used to report issues, add to the feature wish list, and vote on the work to be done by the Microsoft team

Hope you enjoy our new release!

It’s important to provide the user feedback that the UI is not hung, or crashed, but is in fact processing. This fills that void, and is really easy to get going with.

After some initial meetings with David, it became clear that the control would make a nice addition to the portfolio of valuable controls that are inside of the Silverlight Toolkit, so thanks to everyone who came together to get this added to the November release.

Quick guide to using the control

IsBusy

The key dependency property on the BusyIndicator control is the IsBusy bool property. It’s easy to data bind to your data model, or programmatically toggle on and off.

When toggled to true, the actual content of the BusyIndicator control (which itself is a ContentControl) will no longer be enabled.

Place your content inside the control

In the most simple use case, just place your content inside the control and bind to the model. When IsBusy is set to true, you’ll see the waiting user interface appear.

Your controls that are wrapped by the BusyIndicator control will not be enabled during the busy time, preventing the user from inadvertently altering the data state during the operation.

<Grid x:Name="LayoutRoot" Background="White">
    <controlsToolkit:BusyIndicator IsBusy="{Binding DataServicesAreBusy}">

        <!-- This button will not be enabled when IsBusy is set to True -->
        <Button Content="This is a button" HorizontalAlignment="Center"  VerticalAlignment="Center" Padding="8"/>

    </controlsToolkit:BusyIndicator>
</Grid>

Customizing the busy content

The entire thing is very customizable, you can use data templates and even retemplate the control. David Anson covered this in his post yesterday on the topic.

Here’s a quick example of changing the text that is displayed – the Content property can take any kind of content, so you could even put a quick game in there if you wanted to go overboard.

<Grid x:Name="LayoutRoot" Background="White">

    <controlsToolkit:BusyIndicator IsBusy="{Binding DataServicesAreBusy}">
            <controlsToolkit:BusyIndicator.BusyContent>
                <TextBlock Text="Reticulating Splines..."
                           FontSize="18"
                           FontWeight="Bold" />
            </controlsToolkit:BusyIndicator.BusyContent>

                <!-- This button will not be enabled when IsBusy is set to True -->
        <Button Content="This is a button" HorizontalAlignment="Center"  VerticalAlignment="Center" Padding="8"/>

    </controlsToolkit:BusyIndicator>
</Grid>

And here’s what that looks like in a real application when IsBusy is true:

Find out more in the Silverlight Controls Browser

Just like all other controls in the Silverlight core runtime, SDK, and the Silverlight Toolkit, you’ll find the Activity Control in the Silverlight Controls Browser. It is under the Toolkit tree view item, near the bottom of the list on the left part of the app.

Silverlight 3 samples are here.

Silverlight 4 Beta samples are here, if you’re a developer and have the Silverlight 4 Beta on your machine.

Where to find the control

You’ll find the BusyIndicator control in the System.Windows.Controls.Toolkit.dll assembly, documentation in the Silverlight Toolkit docs, a few unit tests, and yeah it’s in the sample browser as well. It lives in the System.Windows.Controls namespace.

Hope you enjoy having this control available in the Silverlight Toolkit!

Download the Silverlight Toolkit November 2009 Release Today

The Silverlight Toolkit is a collection of Silverlight controls, components and utilities that help make Silverlight development a little easier, more fun, and add value outside the regular Silverlight release cycle.

The sixth release of the Silverlight Toolkit, the November 2009 release targets Silverlight 3. There is also a release available that targets the new Silverlight 4 Beta for developers.

Resources of note:

• Learn more about the Silverlight Toolkit
• Download the November 2009 Release
• Get started with Silverlight development
• Participate in the controls community at Silverlight.net
• Check out questions and answers on Stack Overflow using the ‘silverlight-toolkit’ tag
• The Issue Tracker can be used to report issues, add to the feature wish list, and vote on the work to be done by the Microsoft team

Hope you enjoy our new release!

Kidding aside, yes, you can finally enable library caching when using the latest release. Since our installations are always side-by-side friendly, you should get this support immediately after installing the latest release that pairs with your Silverlight development environment.

Note that the Out of Browser feature of Silverlight is unavailable for your application if you use this feature, since key libraries need to be contained inside your Out of Browser Xap file.

Previously available only by blog, the application library cache files sit alongside the control, feature, and theme binaries for the Silverlight Toolkit and enable the Silverlight SDK to package up those components separately, improving application download and startup time in some situation for application users starting the second time they use your app.

Toolkit Libraries Supported

• Microsoft.Silverlight.Testing.dll
• Microsoft.VisualStudio.QualityTools.UnitTesting.Silverlight.dll
• System.ComponentModel.Composition.Packaging.Toolkit.dll (Silverlight 4 Toolkit Only)
• System.Reactive.dll (Note: This is a pre-release version of the Reactive Framework at this time and supports the Drag and Drop features introduced in the last release)
• System.Windows.Controls.Data.DataForm.Toolkit.dll
• System.Windows.Controls.Data.Toolkit.dll
• System.Windows.Controls.DataVisualization.Toolkit.dll
• System.Windows.Controls.Input.Toolkit.dll
• System.Windows.Controls.Layout.Toolkit.dll
• System.Windows.Controls.Theming.Toolkit.dll
• System.Windows.Controls.Toolkit.dll

Toolkit Themes Supported

• System.Windows.Controls.Theming.BubbleCreme.dll
• System.Windows.Controls.Theming.BureauBlack.dll
• System.Windows.Controls.Theming.BureauBlue.dll
• System.Windows.Controls.Theming.ExpressionDark.dll
• System.Windows.Controls.Theming.ExpressionLight.dll
• System.Windows.Controls.Theming.RainierOrange.dll
• System.Windows.Controls.Theming.RainierPurple.dll
• System.Windows.Controls.Theming.ShinyBlue.dll
• System.Windows.Controls.Theming.ShinyRed.dll
• System.Windows.Controls.Theming.TwilightBlue.dll
• System.Windows.Controls.Theming.WhistlerBlue.dll

Size differences

Here’s a simple application with a chart, you can see that the .Xap file weighs in around 345 KB:

After enabling the application library cache support, check it out:

The core .Xap is now 41 KB. Of course, there are no time savings on the first download: all those other .Zip files with the extensions are downloaded as well. But if you update your .Xap file, you likely do not need to refresh the .Zip files with the cached libraries. So your users only download the new 41 KB on next visit after a change, instead of hundreds of kilobytes.

Sorry!
In retrospect, I admit that it’s quite embarrassing that we didn’t offer application library caching support right off-the-bat alongside the Silverlight 3 release. Having limited time and resources to deliver for each release, we’re not always able to get it all done.

Keep letting us know what you want us to work on by voicing your opinion on our blogs and by voting on the CodePlex Work Item Tracker (it tracks both feature requests and bugs).

Download the Silverlight Toolkit November 2009 Release Today

The Silverlight Toolkit is a collection of Silverlight controls, components and utilities that help make Silverlight development a little easier, more fun, and add value outside the regular Silverlight release cycle.

The sixth release of the Silverlight Toolkit, the November 2009 release targets Silverlight 3. There is also a release available that targets the new Silverlight 4 Beta for developers.

Resources of note:

• Learn more about the Silverlight Toolkit
• Download the November 2009 Release
• Get started with Silverlight development
• Participate in the controls community at Silverlight.net
• Check out questions and answers on Stack Overflow using the ‘silverlight-toolkit’ tag
• The Issue Tracker can be used to report issues, add to the feature wish list, and vote on the work to be done by the Microsoft team

Hope you enjoy our new release!