Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
Graphics, Animation, and Splines
Graphics objects, those from the MSAvalon.Windows.Shapes namespace, can be manipulated through a number of different types of animations. Some of these were discussed in the last article, “XAML Custom Controls and Animation.” However, the animation itself can be changed in the way it is executed.
The InterpolationMethod property of animation classes, such as the LengthAnimation in the provided sample, allows the Longhorn developer to change the way in which the animation will run. Possible choices for InterpolationMethod are Discrete, Linear, Paced, and Spline. Of these, Spline holds much potential for a majority of applications relying on animation.
Splines are used to make Bezier curves, and can be used to form the direction and behaviors of animations. By setting the animation interpolation method of x and y location of a control on the canvas, the developer can make a control follow a set path smoothly without having to do intense calculation to find each cartesian point on the curve. The Longhorn API wraps this similar to the way SVG (scalable vector graphics) do today. It is wrapped functionality such as this which will allow RAD components to roll out with rich features in a truly rapid fashion.
The sample code provided binds a splined interpolation to a LengthAnimation, by using LengthKeyFrames. These key frames can mark the point on the spline where the animation should be when the timeline is on the key frame. For example, if the code says that the Length property is animated from 0 to 50, with a keyframe at 25, frames 0-24 and 26-50 can be interpolated automatically through the framework.
DataBinding and Manipulation
I was amazed when I came across the Transformer property of the Bind tag in XAML. This simple tag can allow you to do complex data manipulation post-binding. For example, if your data is bound to an XMLDataSource (such as in the provided example, you have the option of changing that data before it reaches the actual User Interface.
Because the OS and API are in very early stages, some of this may change, such as the location of the data source, and where a binding context is set, but for now, this provides an accurate (and working) sample of the things to come. First, for our canvas object, we are going to bind it to data by doing three things: putting a data source reference in the canvas’ resources, adding a transformer, and adding a control to bind the transformed data to.
<Canvas ID="MainPanel">
<Canvas.Resources>
<XmlDataSource def_Name="SongData" XPath="/Notes" >
<Notes >
<Note><Type>quarter</Type></Note>
</Notes>
</Canvas.Resources>
</Canvas>
Here is a simple way of adding our data right into the user interface, mostly for static data. In practice, the data would most likely be inserted programmatically, and just referenced with the XAML tag. The above example illustrates the use of XPath navigation tags to bind to specific locations within XML. It says that the data binding is to the root of the Notes node off of the absolute root of the XML document.
<Canvas.DataContext>
<Bind DataSource="{SongData}" Path="Note" BindType="OneWay" />
</Canvas.DataContext>
This tag, added to the MainPanel canvas, sets the context for all databound controls within that canvas. It further specifies a deeper location within the DataSource’s root (defined by the XPath property). The DataSource property on the binding is in the same format as references to styles, or any other sort of object defined within the XAML document. By surrounding the ID, or in this case the def:Name with curly-braces, the XAML parser knows to look in the resources for the appropriate object.
<TransformerSource def_Name="NoteTransformer" TypeName="DTransform.NoteTransformer" />
A TransformerSource also needs to be added to the MainPanel canvas’ resources if the data is not to be displayed verbatim from the DataSource. In our example, we are taking a code for a note type, such as “quarter,” and displaying it as a proper string “Quarter Note.” The TypeName refers to the class that implements an IDataTransformer interface, as will be discussed later.
<SimpleText>
<SimpleText.Text>
<Bind Path="Type" Transformer="{NoteTransformer}" />
</SimpleText.Text>
</SimpleText>
This binds the data from the DataContext through the NoteTransformer class into the text property of the SimpleText control. This can be useful for any number of things, from data cleaning (imagine online message boards running their comment data source through a “clean language” filter) to formatting (different colors of an item based on prices for an online retailer’s smart client application), to language translation for accessibility.
Inside the codebehind, one needs to declare the NoteTransformer class for the example to work properly. The class must inherit from IDataTransformer, and have methods for InverseTransform, and Transform. Transform takes the data from the source and transforms it for the target control. InverseTransform does the opposite; it transforms data from the target to the source.
The truly important things passed to the transform class are the object, which is the actual bound information from the data source (in this case, this is a string); and the DependencyProperty. The DependencyProperty provides a way for a single transformer to act differently based on which control property the data was bound to. For example, a price could be bound to both the color and the text properties of a SimpleText control. When bound to the color, the transformer could change a low price to green, and a high price to red. At the same time, the same transformer could take a price and render it to the client’s localized currency format and display that as the text in the control.
There are very interesting things that can be done through both data binding and transformation, including localization of data based on simple XAML.
A Look Ahead
Next month, we’ll get a closer look at the Longhorn Speech API, and see how you can develop a simple speech-to-text application.
One Last Note
All of the provided code compiles under PDC builds of Longhorn (4051), Whidbey (m2.030828-1205), .NET Framework (1.2.30703), and the Longhorn SDK. The sample applications provided, DTransform, and AnimPath, show what can be done by implementing the techniques mentioned in the article.
