DevDave - Dave Relyea's Silverlight Blog : attached DependencyProperty

Layout Transitions - An Animatable WrapPanel

Dave Relyea — Thu, 17 Jul 2008 18:37:00 GMT

I've been playing around with RenderTransforms and decorators and such to make layout transitions, but for this WrapPanel, my goal was to introduce no additional UI elements, animations or transforms. I also wanted to use some easing equations to do some cool transitions, and separate that logic from the WrapPanel. I wanted the elements the be "live" while they were on the screen, and I wanted them to enter the screen in a nice fashion. I also wanted each element to animate individually. One of my earlier versions of this kept track of a single starting time for all animations, and it wasn't cool enough. Sometimes, it is important to be cool.

WrapPanels

A WrapPanel is a layout container that places its elements in rows. It fills up one row, then moves on to the next one. The logic isn't all that tough. What I wanted to do was to make the items move smoothly when the WrapPanel was resized, and also enter the WrapPanel from the upper left and move to their new position.

Below are some of the interesting bits of the panel.

Using a zero-duration Storyboard to simulate a per-frame callback

Not using animations was one of my requirements, since I wanted to use something other than linear interpolation. The AnimateableWrapPanel uses a zero-duration Storyboard to simulate a per-frame callback. Here's how that is done. In the constructor, an empty Storyboard is created and started.

public AnimatedWrapPanel()

{

// This sets up the per-frame callback that we use for animation.

_tick = new Storyboard();

_tick.Duration = new Duration(TimeSpan.Zero);

_tick.Completed += Tick;

_tick.Begin();

}

The Tick method does whatever I want to do each frame, and restarts the Storyboard.

/// <summary>

/// This tells the layout system to call Arrange on the Panel if there are any elements that

/// must be moved.

/// </summary>

private void Tick(object sender, EventArgs e)

{

// If there are still elements to be animated, make sure that ArrangeOverride will

// get called. Note that the InvalidateArrange may already have been called due to

// other operations, but calling it again does not hurt, and all of the work will

// be done in ArrangeOverride regardless of where the invalidation came from.

if (_animatingElements > 0)

{

InvalidateArrange();

}

// Restart the storyboard so we get called back on the next frame.

_tick.Begin();

}

This technique does not guarantee smooth animations. It is possible to overload the panel with too many elements for the framewrate to animate 100% smoothly, or maybe the rest of the app is doing so much work that the framerate slows down, but since I use the elapsed time to figure out where to put the elements, the animations will take the same amount of time on all machines. If there is too much going on in the panel and the app, on a low-end machine, the animation might be choppy, but will still finish in the specified time, or one frame longer if the timing is just off.

Using layout to "animate" the elements

I'm a little conflicted about this technique, but I have seen other people use it, so I thought I'd try it. It is a two stage process. The MeasureOverride call figures out where everything should go, and is the only place where the animations are started. This works because MeasureOverride will be called if the AnimatedWrapPanel changes size, or any of its children change size, or children are added or removed. So size changes, adding items etc. kicks off the animations. In ArrangeOverride, any element that is not where it is supposed to be is moved in that direction according to how much it should be done, and the interpolations. Here's what the ArrangeOverride looks like:

/// <summary>

/// A "normal" ArrangeOverride would just put things where they belong. What this one does

/// is to move the children towards their destinations according to the virtual animation

/// data that has been attached to each element. When they get there, the virtual animation

/// is turned off.

/// </summary>

protected override Size ArrangeOverride(Size finalSize)

{

DateTime now = DateTime.Now;

foreach (UIElement child in Children)

{

AnimatedWrapPanelAttachedData data = GetAnimatedWrapPanelAttachedData(child);

TimeSpan elapsed = data.GetElapsed(now);

if (elapsed < Duration || data.TargetPosition != data.CurrentPosition)

{

// The virtual animation is not done yet, so figure out how far along it is...

double progress = (Duration.TimeSpan != TimeSpan.Zero) ? Math.Min(elapsed.TotalMilliseconds / Duration.TimeSpan.TotalMilliseconds, 1.0) : 1;

// ...and what the next position is.

Point newPosition = BlendPoint(_interpolation, data.StartPosition, data.TargetPosition, progress);

child.Arrange(new Rect(newPosition.X, newPosition.Y, child.DesiredSize.Width, _rowHeights[data.Row]));

data.CurrentPosition = newPosition;

}

else

{

// This element is not animating, but it might have become invalid on its own, so it still

// needs to be arranged. The layout system will do as little as possible.

child.Arrange(new Rect(data.CurrentPosition.X, data.CurrentPosition.Y, child.DesiredSize.Width, _rowHeights[data.Row]));

if (data.IsAnimating)

{

--_animatingElements;

// This is the only place where IsAnimating is set to false. This turns off the virtual animation.

data.IsAnimating = false;

}

return finalSize;

}

Attached property bag

Rather than have a bunch of hash tables or something in the panel itself, I wanted to keep all of the state that I needed on the elements, which sounded like a job for attached DependencyProperties. However, I got tired of creating and modifying them as I changed my mind, and decided that it would be easier at design-time and more efficient at run-time if I had a single attached property that was actually a class that had a bunch of properties--an attached property bag. This would be efficient because I always used all of the properties for each element.

Interpolations using easing equations

Rather then hard-coding animations into the panel, or using a simple linear interpolation, I wanted to use pluggable interpolations. The interpolations take a double that indicates progress, where zero is "just starting" and one is "completed". They return a number (alpha) where zero refers to the start position, and one refers to the end position, although the number may be less than zero or greater than one. The general equation is:

alpha = fn(progress)

The linear interpolation is the simplest: it just gives returns the progress, i.e. alpha = progress.

In practice, the interpolations are used to blend the starting and target positions. Here's how the intermediate points are arrived at:

/// <summary>

/// Given an interpolation, the starting and ending positions and a number from 0-1 that represents how

/// far along the virtual animation is, calculate the new position.

/// </summary>

Point BlendPoint(Interpolation interpolation, Point from, Point to, double progress)

{

Point p = new Point();

double alpha = interpolation.GetAlpha(progress);

p.X = from.X + alpha * (to.X - from.X);

p.Y = from.Y + alpha * (to.Y - from.Y);

return p;

}

I used some standard interpolations, but it is possibly and easy to define your own, and then just plug them into the panel. I set up the interpolations with some default values that I thought looked nice, but it is possible to get quite creative.

Using the demo app

This should be pretty self-explanatory, but you can add pretty, randomly-colored Rectangles, text and image thumbnails. Clicking on a Rectangle deletes it from the panel. You can also change the size of all of the children, select the duration of the animations, and the interpolation that will be used. Resize the browser to watch the UI move around. I had wanted to have UI to modify the interpolation parameters, but at some point, you have to stop polishing and move one. Shipping is the art of stopping. So that bit of UI is left as an exercise for the developer.

Update:

Karen Corby has posted a live version of my sample app, and a version of her FlickrViewr that she modified to use the AnimatingWrapPanel, here. I love how the images come in as they are downloaded.

Using VS Snippets to Add DependencyProperties and Attached DependencyProperties

Dave Relyea — Sat, 28 Jun 2008 17:41:00 GMT

It can be a little tedious to type in everything that you need to define a DependencyProperty but you can use VS 2008's snippets to make is easy. The snippets are designed to work with WPF, but they can be made to work with Silverlight with one small change.

First, you need to insert the snippet. In the VS 2008 editor, right-click at the location in your class file where you want to define the DependencyProperty, and select "Insert Snippet" from the context menu.

When I do that, I get another menu with "NetFX30", "Other", and "C#" options. Select "NetFX30".

Now, you'll get another menu with "Define a DependencyProperty" and "Define an attached DependencyProperty". Choose whichever one you like.

You'll see something like the code below. You can tab between the highlighted text (the border indicates which one you are updating), and enter your own values.

public int MyProperty

{

get { return (int)GetValue(MyPropertyProperty); }

set { SetValue(MyPropertyProperty, value); }

}

// Using a DependencyProperty as the backing store for MyProperty. This enables animation, styling, binding, etc...

public static readonly DependencyProperty MyPropertyProperty =

DependencyProperty.Register("MyProperty", typeof(int), typeof(ownerclass), new UIPropertyMetadata(0));

When you change a value, VS will update the rest of the snippet. Once you have entered the property type, name, and ownerclass, you need to decide what to do with the UIPropertyMetadata. Silverlight does not support that class, so if you want to add a PropertyChangedCallback, you'll have to change the type from UIPropertyMetadata to PropertyMetadata, and pass the delegate to the ctor. This looks like this:

// Using a DependencyProperty as the backing store for Foo. This enables animation, styling, binding, etc...

public static readonly DependencyProperty FooProperty =

DependencyProperty.Register("Foo", typeof(double), typeof(CustomAttachedDP), new PropertyMetadata(OnFooChanged));

private void OnFooChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)

{

}

If you don't want a PropertyChangedCallback, just pass null instead of the PropertyMetadata.

It is pretty easy to modify snippets and create your own. For example, you could make copies of the snippets above, change UIPropertyMetadata to PropertyMetadata, and add the property changed notification handler. Here is a link that will take you to all you ever wanted to know about snippets: http://msdn.microsoft.com/en-us/library/ms165392.aspx. Below is what my new snippet (added to the My Snippets folder) looks like, with changes and additions highlighted.

[Clarification: The example above is for a "regular" DependencyProperty; the modified snippet below is for an attached DependencyProperty. The principle is the same.]

<?xml version="1.0" encoding="utf-8" ?>

<Title>Define an attached DependencyProperty (Silverlight)</Title>

<Shortcut>spropa</Shortcut>

<Description>Code snippet for an attached property using DependencyProperty as the backing store</Description>

<Author>Microsoft Corporation</Author>

<SnippetType>Expansion</SnippetType>

</SnippetTypes>

</Header>

<ToolTip>Property Type</ToolTip>

</Literal>

<ID>property</ID>

<ToolTip>Property Name</ToolTip>

<Default>MyProperty</Default>

</Literal>

<ID>ownerclass</ID>

<ToolTip>The owning class of this Property. Typically the class that it is declared in.</ToolTip>

<Default>ownerclass</Default>

</Literal>

<ID>defaultvalue</ID>

<ToolTip>The default value for this property.</ToolTip>

</Literal>

</Declarations>

<![CDATA[

public static $type$ Get$property$(DependencyObject obj)

{

return ($type$)obj.GetValue($property$Property);

}

public static void Set$property$(DependencyObject obj, $type$ value)

{

obj.SetValue($property$Property, value);

}

// Using a DependencyProperty as the backing store for $property$. This enables animation, styling, binding, etc...

public static readonly DependencyProperty $property$Property =

DependencyProperty.RegisterAttached("$property$", typeof($type$), typeof($ownerclass$), new PropertyMetadata(On$property$Changed));

private void On$property$Changed(DependencyObject d, DependencyPropertyChangedEventArgs e)

{

}

$end$]]>

</Code>

</Snippet>

</CodeSnippet>

</CodeSnippets>

Using an Attached DependencyProperty to Implement Pixel Snapping as an Attached Behavior

Dave Relyea — Sun, 22 Jun 2008 20:30:00 GMT

In a previous post, I introduced the Snapper element, which is a UserControl subclass that snaps its Content to an integer pixel. Now I'll show how to implement snapping as an attached behavior using a custom attached DependencyProperty.

To use the Snapper element, you put it into your tree, and "wrap" the element that you want to snap, like this:

<local:Snapper>
<Rectangle Height="40" Width="40" Stroke="Black" Margin="2"/>
</local:Snapper>

That's not bad, but there's a cooler way to do it. We can add pixel snapping to any element by using an attached property to attach a behavior, like this:

Attached Properties

Using XAML's attached properties, it is possible to put a property on an element that doesn't know about the property at compile time. In other words, "normal" properties have to be implemented on an element's class or base classes. Attached properties do not have this restriction. Some examples of attached properties include Canvas.Left, Canvas.Top, Canvas.ZIndex, Grid.Row, Grid.Column, etc. (If you have to put a "dot" in the property name, it is an attached property.) You can also create your own attached properties, and get and set their values on other objects. Before describing how to create your own attached properties, let's review regular DependencyProperties.

Dependency Properties

A "regular" DependencyProperty is a property that you define for a given class, and it is only valid on that class, like a CLR property. You register the DependencyProperty, and define a CLR property for it. A change notification callback is optional--you can pass null instead of the PropertyMetadata. Here are the elements needed to define a DependencyProperty. Note that the property and the change notification are static. Also note that the class you define the property on must descend from DependencyObject. In this case, I'm using a UserControl.

public class DPExample : UserControl

{

static DependencyProperty DistanceProperty = DependencyProperty.Register("Distance", typeof(double), typeof(DPExample), new PropertyMetadata(OnDistanceChanged));

static private void OnDistanceChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)

{

Debug.WriteLine("Distance property changed from {0} to {1}", e.OldValue, e.NewValue);

}

public double Distance

{

get { return (double)GetValue(DistanceProperty); }

set { SetValue(DistanceProperty, value); }

}

You use the DPExample.Distance property like you would use any CLR property, but the underlying storage is provided by the Silverlight property system. You can set the property in code, in XAML, etc. and you will get change notification. You can also animate it if it is of a type that can be animated.

Attached DependencyProperties

An attached DependencyProperty is defined on one class, but made to by used (mostly) on instances of other classes. It is not necessary for the other classes to know about this property at compile time, so you can set an attached DependencyProperty on any object that descends from DependencyObject--even objects provided in the Silverlight framework. The property is now registered with RegisterAttached (the parameters are the same.) The property get has been replaced by a public static void Get<propertyName> method, and the property setter has been replaced by a public static <type> Set<propertyName> method.

static DependencyProperty MassProperty = DependencyProperty.RegisterAttached("Mass", typeof(double), typeof(DPExample), new PropertyMetadata(OnMassChanged));

static private void OnMassChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)

{

Debug.WriteLine("Mass property changed from {0} to {1}", e.OldValue, e.NewValue);

}

public static void SetMass(DependencyObject obj, double value)

{

obj.SetValue(MassProperty, value);

}

public static double GetMass(DependencyObject obj)

{

object result = obj.GetValue(MassProperty);

return result != null ? (double)result : DefaultMass;

}

public const double DefaultMass = 1;

You will notice that when the GetMass method calls GetValue, it does not immediately cast to a double. This is because if the property has not been set on the instance passed in by the obj parameter, GetValue will return null. In this case, it is typical to return a default value (as above) or some value that signals "not set". This attached DependencyProperty can be set in code by calling the SetMass method, set in XAML, and animated.

Attached Behaviors

If we define a behavior as "doing something" then when we attach a behavior to an element, we are getting it to do something that it could not do before. This is typically done by attaching an event handler or handlers to an elements events. The behavior is in the event handler, which is defined elsewhere. This is obviously easy enough to do in code, but it can also be done in XAML (and code) by leveraging attached DependencyProperties. When an attached DependencyProperty is set on an instance, the property changed notification method is called. This is where you can hook into the element's events.

The Code

Here is a class that implements pixel snapping as an attached behavior.

using System;

using System.Collections.Generic;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

using System.Diagnostics;

namespace CustomAttachedDP

{

public class PixelSnapBehavior

{

// Define the attached DependencyProperty

public static DependencyProperty PixelSnapProperty = DependencyProperty.RegisterAttached(

"PixelSnap", typeof(PixelSnapType), typeof(PixelSnapBehavior), new PropertyMetadata(SnapPropertyChanged));

// In the property changed notification method, we will add the element to a list of objects that will

// be snapped when we get a LayoutUpdated event. We have to do a bunch of fancy stuff with weak references,

// our own list, etc. because there is no Unloaded event.

public static void SnapPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)

{

PixelSnapType newSnap = (PixelSnapType)e.NewValue;

int index = 0;

while (index < _objects.Count)

{

if (_objects[index].Target == d)

break;

++index;

}

if (index < _objects.Count)

{

if (newSnap == PixelSnapType.None)

{

if (_objects[index].IsAlive)

{

Debug.WriteLine("Removing RenderTransform");

((FrameworkElement)_objects[index].Target).RenderTransform = null;

}

_objects.RemoveAt(index);

}

else if (newSnap != PixelSnapType.None)

{

_objects.Add(new WeakReference(d));

}

if (!_attached && _objects.Count > 0)

{

FrameworkElement element = d as FrameworkElement;

if (element != null)

{

element.LayoutUpdated += new EventHandler(LayoutUpdated);

_attached = true;

}

else if (_attached && _objects.Count == 0)

{

FrameworkElement element = d as FrameworkElement;

if (element != null)

{

element.LayoutUpdated -= new EventHandler(LayoutUpdated);

_attached = false;

}

// The attached DependencyProperty setter

public static void SetPixelSnap(DependencyObject obj, PixelSnapType value)

{

obj.SetValue(PixelSnapProperty, value);

}

// The attached DependencyProperty getter

public static PixelSnapType GetPixelSnap(DependencyObject obj)

{

object result = obj.GetValue(PixelSnapProperty);

return result == null ? PixelSnapType.None : (PixelSnapType)result;

}

// A utility method to remove all snapped objects from the list.

public static void RemoveAll()

{

while (_objects.Count > 0)

{

if (_objects[0].IsAlive)

{

SetPixelSnap((DependencyObject)_objects[0].Target, PixelSnapType.None);

}

else

{

_objects.RemoveAt(0);

}

// The event handler for the LayoutUpdated event. It will snap everything that it thinks is

// still alive. This is not 100% bulletproof but it should work in most scenarios.

private static void LayoutUpdated(object sender, EventArgs e)

{

int index = 0;

while (index < _objects.Count)

{

if (_objects[index].IsAlive == false)

{

_objects.RemoveAt(index);

}

else

{

Snap(_objects[index].Target as FrameworkElement);

++index;

}

// Try to align an element on an integer pixel

private static void Snap(FrameworkElement target)

{

if (target == null)

return;

PixelSnapType snap = PixelSnapBehavior.GetPixelSnap(target);

// Remove existing transform

TranslateTransform savedTransform = target.RenderTransform as TranslateTransform;

if (savedTransform != null)

{

target.RenderTransform = null;

}

// Calculate actual location

MatrixTransform globalTransform = target.TransformToVisual(Application.Current.RootVisual) as MatrixTransform;

Point p = globalTransform.Matrix.Transform(_zero);

double deltaX = snap == PixelSnapType.Closest ? Math.Round(p.X) - p.X : (int)p.X - p.X;

double deltaY = snap == PixelSnapType.Closest ? Math.Round(p.Y) - p.Y : (int)p.Y - p.Y;

// Set new transform

if (deltaX != 0 || deltaY != 0)

{

if (savedTransform == null)

savedTransform = new TranslateTransform();

target.RenderTransform = savedTransform;

savedTransform.X = deltaX;

savedTransform.Y = deltaY;

}

private static readonly Point _zero = new Point(0, 0);

private static List<WeakReference> _objects = new List<WeakReference>();

private static bool _attached = false;

}

public enum PixelSnapType

{

None,

Closest,

TopLeft

}