"WPF" Implementation of the group panel in QQ (2)--Add animation

In the previous article, introduced how to achieve similar QQ group panel function. This time, I'll explain how to implement this feature in another way and add animation effects.

In the way described in the previous article, the main technical point is actually the custom panel as Itemspanel. However, there are two main drawbacks to this way of implementation.

1. No virtualizing effect. Although there are no invisible items.

2. Not easy to add animation effect.

Here we'll show you another way to implement it. This is achieved with the very hot behavior of blend 3, and can be easily added to the animation effect.

The behavior principle is very simple, that is, dynamically calculating the height of the item in the listbox. This requires:

1. You cannot specify a different height for the item of the listbox.

2. Specify the height of a default contraction for each item.

A similar approach to height is presented on Rooijakkers's blog. However, the above approach does not take full advantage of the WPF features and writes unnecessary logic, such as the isexpanded properties of the control expander. And there's no animated support.

The simple step here is to add a custom behavior for the listbox, and then set the height of each item in the SelectionChanged event of the listbox. \ behavior The animation effect can be achieved easily with storyboard.

This behavior has two custom attributes. One is DefaultHeight, one is animationduration. As the name suggests, do not explain. The core code is shown below.

Core Logic

private void Onassociatedobjectselectionchanged (object sender, SelectionChangedEventArgs e)
{
Double selecteditemfinalheight = associatedobject.actualheight;
Storyboard Storyboard = new Storyboard ();
for (int i = 0; i < AssociatedObject.Items.Count; i++)
{
ListBoxItem item = AssociatedObject.ItemContainerGenerator.ContainerFromIndex (i) as ListBoxItem;
if (!item. isselected)
{
Selecteditemfinalheight-= DefaultHeight;
DoubleAnimation heightanimation = new DoubleAnimation ()
{
to = DefaultHeight,
Duration = new Duration (new TimeSpan (0, 0, 0, 0, animationduration))
};
Storyboard.settarget (heightanimation, item);
Storyboard.settargetproperty (Heightanimation, New PropertyPath (Frameworkelement.heightproperty));
STORYBOARD.CHILDREN.ADD (heightanimation);
}
}
The Padding of the ListBox.
Selecteditemfinalheight-= 4;
if (associatedobject.selectedindex >= 0)
{
ListBoxItem SelectedItem = AssociatedObject.ItemContainerGenerator.ContainerFromIndex ( Associatedobject.selectedindex) as ListBoxItem;
DoubleAnimation fillheightanimation = new DoubleAnimation ()
{
to = Selecteditemfinalheight,
Duration = new Duration (new TimeSpan (0, 0, 0, 0, animationduration))
};
Storyboard.settarget (Fillheightanimation, SelectedItem);
Storyboard.settargetproperty (Fillheightanimation, New PropertyPath (Frameworkelement.heightproperty));
STORYBOARD.CHILDREN.ADD (fillheightanimation);
}
Storyboard.begin (Associatedobject);
}

This example looks at the screenshot as described in the previous article. To see the animation effect or to try it yourself. In this code, the last example is included.

This article supporting source code