Charles Petzold

My Wednesday blog entry demonstrated a Silverlight class named PointCollectionInterpolator that interpolates between two sets of points based on an animatable Progress property. As a demonstration of this interpolation, I've been using two PointCollection objects that spell out the words "No" and "Yes" in a simple script stroke font:

My real goal was to incorporate this technique in a template for a CheckBox control, like I did for a WPF CheckBox in an MSDN article two years ago.

And therein lies a problem: PointCollectionInterpolator is designed to be instantiated as a resource, which allows for both a binding to be defined on a Polyline element, and the Progress property to be animated. But templates in Silverlight do not have local resources. A template can reference resources defined outside the template, but the animations in the template are local to the template, and thus can't touch external resources.

My solution to this quandary was to define a wrapper class for PointCollectionInterpolator derived from UserControl. This wrapper class I called InterpolatedPolylineControl and here's the XAML part:

<UserControl x:Class="TextMorphCheckBoxDemo.InterpolatedPolylineControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:src="clr-namespace:TextMorphCheckBoxDemo">

    <UserControl.Resources>
        <src:PointCollectionInterpolator x:Key="interpolatorKey" />
    </UserControl.Resources>
    
    <Polyline Name="polyline"
              Points="{Binding Source={StaticResource interpolatorKey},
                               Path=InterpolatedPoints}"
              StrokeStartLineCap="Round"
              StrokeEndLineCap="Round"
              StrokeLineJoin="Round" />
</UserControl>

The control has an embedded Polyline with a binding to the PointCollectionInterpolator resource. This is not quite the same PointCollectionInterpolator from Wednesday's blog entry: I added a Transform property of type Transform.

The C# code file for the InterpolatedPolylineControl class isn't very interesting. Like PointCollectionInterpolator, InterpolatedPolylineControl defines properties named Points1, Points2, Progress, and Transform. When these properties change, the control transfers their values to the corresponding properties in the PointCollectionInterpolator resource. InterpolatedPolylineControl also defines properties named Stroke and StrokeThickness, and when these properties change, the control transfers their values to the corresponding properties in the embedded Polyline.

The advantage of the InterpolatedPolylineControl is that you can use it in a CheckBox template:

<ControlTemplate x:Key="textMorphTemplate"
                 TargetType="CheckBox">
    <Border Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}">
        <Border Background="Transparent">
            <src:InterpolatedPolylineControl 
                    Name="interPolyCtrl"
                    Points1="{StaticResource noPts}"
                    Points2="{StaticResource yesPts}"
                    StrokeThickness="5">
                <src:InterpolatedPolylineControl.Stroke>
                    <SolidColorBrush x:Name="brush" />
                </src:InterpolatedPolylineControl.Stroke>
                <src:InterpolatedPolylineControl.Transform>
                    <ScaleTransform ScaleX="5" ScaleY="5" />
                </src:InterpolatedPolylineControl.Transform>
            </src:InterpolatedPolylineControl>
        </Border>

        <vsm:VisualStateManager.VisualStateGroups>
            <vsm:VisualStateGroup x:Name="CheckStates">
                <vsm:VisualState x:Name="Checked">
                    <Storyboard>
                        <DoubleAnimation 
                             Storyboard.TargetName="interPolyCtrl"
                             Storyboard.TargetProperty="Progress"
                             To="1" Duration="0:0:0.5" />
                        <ColorAnimation 
                             Storyboard.TargetName="brush"
                             Storyboard.TargetProperty="Color"
                             To="Green" Duration="0:0:0.5" />
                    </Storyboard>
                </vsm:VisualState>

                <vsm:VisualState x:Name="Unchecked">
                    <Storyboard>
                        <DoubleAnimation 
                             Storyboard.TargetName="interPolyCtrl"
                             Storyboard.TargetProperty="Progress"
                             To="0" Duration="0:0:0.5" />
                        <ColorAnimation 
                             Storyboard.TargetName="brush"
                             Storyboard.TargetProperty="Color"
                             To="Red" Duration="0:0:0.5" />
                    </Storyboard>
                </vsm:VisualState>
            </vsm:VisualStateGroup>
        </vsm:VisualStateManager.VisualStateGroups>
    </Border>
</ControlTemplate>

WPF programmers accustomed to using Trigger objects in the template will have to become familiar with the Silverlight VisualStateManager, which performs much of the same functions, including initiating animations. A CheckBox referencing this template can be defined like so:

<CheckBox HorizontalAlignment="Center"
          VerticalAlignment="Center"
          Background="LightGray"
          BorderBrush="Gray"
          BorderThickness="1"
          Template="{StaticResource textMorphTemplate}" />

You can download all the source code — besides the two custom classes, everything else I've done is in Page.xaml — and try it out here:

TextMorphCheckBoxDemo.html

It's a CheckBox so click on it!

You'll notice that the CheckBox gets larger as the text morphs from "No" to "Yes" because the size of the control is based on the size of the embedded Polyline inside the template, and the "No" and "Yes" polylines are different sizes. If this is undesirable, setting explicit Width and Height properties on the CheckBox will override the content size in determining the dimensions of the control.

Much worse was an earlier version that didn't include the Transform property in the PointCollectionInterpolator and InterpolatedPolylineControl classes, and instead relied on the RenderTransform property of Polyline to increase the size of the text: Because RenderTransform affects only the rendered visual of the element and does not affect layout, the CheckBox sized itself based on the untransformed size of the polylines.