The Silverlight Toolkit is innovative in many ways, not least of which is that controls are released in one of four quality bands:
- Mature: ready for release
- Stable: suitable for most scenarios
- Preview: suitable for most basic usage scenarios, may have moderate number of breaking changes as the control is developed.
- Experimental: intended for evaluation purposes
The control I’ll be considering today was developed (and described here) by Ruurd Boeke and is currently in the Experimental band. You can expect that the API will change quite a bit, but that said, it is an enormously useful control right now; and thus I’ve submitted a video and this write-up.
What’s It For?
The goal of the Transitioning Content control is to make it easy to add animation when you are changing content within a control as demonstrated here. [You’ll need to click on DomainUpDown on the left (and surprisingly, not on TransitioningContent!) and Animations on top. The following cropped image illustrates where to click, but provides only a shadow of the impact
Getting There In 3 Steps
To make this crystal clear, and to show how easy it really is to use this control, we’ll build the example three times: first with a Content Control, then with a Transitioning Content Control, and finally, adding data binding and the ability to transition more complex objects.
Starting Simple
Version 0 begins with a grid with two columns. The left column contains a ContentControl and the right a button. Here is the complete Xaml:
<UserControl x:Class="tccDemo.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="300" Height="150"> <StackPanel Background="Bisque">
<ContentControl x:Name="cc1" Content="Click button to change." HorizontalAlignment="Center" Margin="20" FontSize="18" />
<Button x:Name="doChange" Content="Change" Width="80" Height="30" HorizontalAlignment="Center" FontSize="14"/> </StackPanel></UserControl>
The job of the ContentControl is to hold a single piece of content: in this case a string. The button’s job is to cause that content to change, which we do programmatically in the button’s click event handler in MasterPage.xaml.cs, shown in full:
using System;using System.Windows;using System.Windows.Controls;
namespace tccDemo{ public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); doChange.Click += new RoutedEventHandler( doChange_Click ); }
void doChange_Click( object sender, RoutedEventArgs e ) { Random random = new Random(); cc1.Content = random.NextDouble().ToString(); } } // end class} // end namespace
Each time the button is clicked, a new value is displayed.
