Silverlight Toolkit

The Silverlight Toolkit now includes several new features including:

  • A BusyIndicator control
  • A ContextMenu control
  • New release of the Silverlight Unit Test Framework
  • New stacked Series for DataVisualization
  • PanelDragDropTarget
  • New SystemColors theme
  • Improvements to Themes classes

BusyIndicator

The BusyIndicator control is a wrapper control (think of a Border) where you put all of your content inside of the BusyIndicator control. BusyIndicator exposes an IsBusy property which should be set to true (possibly via data binding) whenever the relevant portion of the application is busy and won't respond to user input. When this happens, BusyIndicator automatically disables its content and shows a simple UI to let the user know what's going on.

The BusyContent property displays a message to the user in the BusyIndicator. You can hard code this message to something like “Please wait …” or you can use data binding to set the message. The BusyContent is of type object, so you could display any custom content or user control, not just a string.

XAML

<controlsToolkit:BusyIndicator IsBusy="{Binding MyBusyProperty}" BusyContent="{Binding}"> <!-- Content goes here... --> <Border VerticalAlignment="Center" HorizontalAlignment="Center" Background="#FF669CC7" CornerRadius="20"> <Canvas Margin="8" Height="200" Width="300" Background="#FF669CC7"> <Button Content="Button" Height="23" Name="button2" Width="75" Canvas.Left="160" Canvas.Top="22" /> <TextBox Height="23" Name="textBox1" Width="120" Text="Hello World" Canvas.Left="24" Canvas.Top="22" /> </Canvas> </Border> </controlsToolkit:BusyIndicator>

You can also use a BusyContentTemplate and possibly replace the default ProgressBar. The example below defines a template that updates its ProgressBar and status message using bindings. Note that it also makes the default ProgressBar collapsed.

XAML

<controlsToolkit:BusyIndicator IsBusy="{Binding MyBusyProperty}" BusyContent="{Binding}"> <!-- Provide custom UI for busy display --> <controlsToolkit:BusyIndicator.BusyContentTemplate> <DataTemplate> <StackPanel> <TextBlock Text="Downloading Email" FontWeight="Bold" HorizontalAlignment="Center"/> <StackPanel Margin="6"> <TextBlock Text="{Binding MyStatus}"/> <ProgressBar Value="{Binding MyProgress}" Height="15"/> </StackPanel> <Button Content="Cancel" HorizontalAlignment="Center"/> </StackPanel> </DataTemplate> </controlsToolkit:BusyIndicator.BusyContentTemplate> <!-- Remove unnecessary default ProgressBar --> <controlsToolkit:BusyIndicator.ProgressBarStyle> <Style TargetType="ProgressBar"> <Setter Property="Visibility" Value="Collapsed"/> </Style> </controlsToolkit:BusyIndicator.ProgressBarStyle> <!-- Content goes here... --> </controlsToolkit:BusyIndicator>

ContextMenu

The ContextMenu class is an ideal control to use in combination with the Right Mouse Click support. The ContextMenu contains a set of MenuItem which can contain text and icons, if desired. The example below shows a ContextMenu using both a text header and an image as the icon content. It supports single level of nesting , therefore there is no support for sub items. The ContextMenu is a subclass of the ItemsControl so it does support ItemTemplate which means the items can be customized.

XAML

<Controls:ContextMenu HorizontalAlignment="Left" VerticalAlignment="Top" Width="110" FontWeight="Bold"> <Controls:MenuItem Header="Copy"> <Controls:MenuItem.Icon> <Image Source="/SilverlightApplication1;component/Copy.png"/> </Controls:MenuItem.Icon> </Controls:MenuItem> <Controls:MenuItem Header="Cut"> <Controls:MenuItem.Icon> <Image Source="/SilverlightApplication1;component/Cut.png"/> </Controls:MenuItem.Icon> </Controls:MenuItem> <Controls:MenuItem Header="Paste"> <Controls:MenuItem.Icon> <Image Source="/SilverlightApplication1;component/Paste.png"/> </Controls:MenuItem.Icon> </Controls:MenuItem> </Controls:ContextMenu>