自定义panel实现，并实现item更改和移除动画。
原地址：https://www.cnblogs.com/yk250/p/10043694.html 无图无真相：
1，重写panel类（模拟实现一个竖直方向排列的panel，相当于默认的StackPanel实现的效果）：
其中 availableSize 是xaml中传入的大小。调用child的Measure方法测量后得到DesiredSize用于计算实际返回的大小。
public class VStackPanel: Panel
{
protected override Size MeasureOverride(Size availableSize)
{
Size size = new Size(Double.PositiveInfinity, Double.PositiveInfinity);
Size measureSize = new Size() { Width = availableSize .Width};
foreach (UIElement item in InternalChildren)
{
item.Measure(size);
measureSize.Height += item.DesiredSize.Height;
}
return measureSize;
}
protected override Size ArrangeOverride(Size finalSize)
{
double height = 0;
foreach (UIElement item in InternalChildren)
{
Point Point = new Point(0, height);
item.Arrange(new Rect(Point, item.DesiredSize));
height += item.RenderSize.Height;
}
return finalSize;
}
}
Xaml中我们使用一个简单的ItemsControl做测试（重写ItemsPanelTemplate，使用自定义的 VStackPanel）：
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<local:VStackPanel></local:VStackPanel>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
添加数据项后显示和普通的StackPanel并无区别。
2，给 Add，Insert，Move统一制作布局动画。（Remove操作需要单独处理。）
首先，写一个AnimateBasePanel 的抽象类（只能被继承不能被实例化）基于Panel，用户布局更改的操作：
public abstract class AnimateBasePanel : Panel { }
然后，定义一个附加属性对象 AnimatePanelItemData，用于记录child布局前后位置的变化：
public class AnimatePanelItemData
{
public Point Target;
public Point Current;
}
public static AnimatePanelItemData GetData(DependencyObject obj) { return (AnimatePanelItemData)obj.GetValue(DataProperty); } public static void SetData(DependencyObject obj, AnimatePanelItemData value) { obj.SetValue(DataProperty, value); } // Using a DependencyProperty as the backing store for Data. This enables animation, styling, binding, etc... public static readonly DependencyProperty DataProperty = DependencyProperty.RegisterAttached("Data", typeof(AnimatePanelItemData), typeof(AnimateBasePanel), new PropertyMetadata(null));
当新增child时，定义一个可被重载的虚方法：（新增时，将AnimatePanelItemData附加到child上并且设置child的RenderTransform作为动画起始位置，最后使用 child.Arrange(bounds)定位child在panel中的位置和大小。）
protected virtual void ArrangeNewChid(UIElement child, Rect bounds)
{
var data = new AnimatePanelItemData();
child.SetValue(DataProperty, data);
child.RenderTransformOrigin = new Point(0.5, 0.5);
TransformGroup group = new TransformGroup();
group.Children.Add(new TranslateTransform() { X = -child.DesiredSize.Width, Y = child.DesiredSize.Height });
child.RenderTransform = group;
data.Current = new Point();
data.Target = bounds.Location;
child.Arrange(bounds);
CreateTransition(child, new Point(), TimeSpan.FromMilliseconds(200), null).Begin();
}
对已经存在的child当布局发生改变时，即Insert，Move时定义一个同样的虚方法。（获取附加属性值，然后计算布局前后的TranslateTransform的X,Y的偏移量，最后同样使用child.Arrange(bounds)定位child在panel中的位置和大小。）
protected virtual void ArrangeExistsChid(UIElement child, Rect bounds) { AnimatePanelItemData data = (AnimatePanelItemData)child.GetValue(DataProperty); data.Current = new Point(data.Target.X, data.Target.Y); data.Target = bounds.Location; child.RenderTransformOrigin = new Point(0.5, 0.5); TransformGroup group = new TransformGroup(); child.RenderTransform = group; group.Children.Add(new TranslateTransform() { X = -(data.Target.X - data.Current.X), Y = -(data.Target.Y - data.Current.Y) }); child.Arrange(bounds); CreateTransition(child, new Point(), TimeSpan.FromMilliseconds(200), null).Begin(); }
其中 CreateTransition 为最后布局更新时执行的动画：
internal static Storyboard CreateTransition(UIElement element, Point newLocation, TimeSpan _duration, EasingFunctionBase easing) { var duration = new Duration(_duration); var sb = new Storyboard { Duration = duration }; var translateAnimationX = new DoubleAnimation { To = newLocation.X, Duration = duration }; var translateAnimationY = new DoubleAnimation { To = newLocation.Y, Duration = duration }; if (easing != null) { translateAnimationX.EasingFunction = easing; translateAnimationY.EasingFunction = easing; } Storyboard.SetTarget(translateAnimationX, element); Storyboard.SetTarget(translateAnimationY, element); Storyboard.SetTargetProperty(translateAnimationX, new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)")); Storyboard.SetTargetProperty(translateAnimationY, new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)")); sb.Children.Add(translateAnimationX); sb.Children.Add(translateAnimationY); return sb; }
最后统一处理（用于子类调用）：
protected virtual void ArrangeChild(UIElement child, Rect bounds) { AnimatePanelItemData data = (AnimatePanelItemData)child.GetValue(DataProperty); if (data == null) { ArrangeNewChid(child, bounds); } else { ArrangeExistsChid(child, bounds); } }
3，我们使用AnimateBasePanel代替VStackPanel的基类（使用AnimateBasePanel的方法代替ArrangeChild代替item.Arrange方法。）：
public class VStackPanel: AnimateBasePanel { protected override Size MeasureOverride(Size availableSize) { Size size = new Size(Double.PositiveInfinity, Double.PositiveInfinity); Size measureSize = new Size() { Width = availableSize .Width}; foreach (UIElement item in InternalChildren) { item.Measure(size); measureSize.Height += item.DesiredSize.Height; } return measureSize; } protected override Size ArrangeOverride(Size finalSize) { double height = 0; foreach (UIElement item in InternalChildren) { Point Point = new Point(0, height); ArrangeChild(item, new Rect(Point,item.DesiredSize)); height += item.RenderSize.Height; } return finalSize; } }
也可以重载AnimateBasePanel的 ArrangeNewChid或ArrangeExistsChid方法：
protected override void ArrangeNewChid(UIElement child, Rect bounds)
{
var data = new AnimatePanelItemData();
child.SetValue(DataProperty, data);
child.RenderTransformOrigin = new Point(0.5, 0.5);
TransformGroup group = new TransformGroup();
child.RenderTransform = group;
group.Children.Add(new TranslateTransform() { X = -child.DesiredSize.Width, Y = 0 });
data.Current = new Point();
data.Target = bounds.Location;
child.Arrange(bounds);
CreateTransition(child, new Point(), TimeSpan.FromMilliseconds(200), null).Begin();
}
到此为止，除了remove的布局没有完全实现外，其他布局已经能正常表现了。
4，使用blend库进行删除动画的制作：
首先使用mvvm模式定义好ModelBase（CallerMemberName属性需要使用C#新特性。）
public class ModelBase : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; public void RaisePropertyChanged([CallerMemberName] string propertyName = null) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } }
然后定义每一项item的数据模型：（只使用一个用于显示的Name属性和用于删除的IsDelete属性和一个Delete方法。）
public class TestModel : ModelBase { public virtual void Delete() { IsDelete = true; } public string Name { get; set; } private bool _isDelete; /// <summary> /// _isDelete /// </summary> public bool IsDelete { get { return _isDelete; } set { _isDelete = value; RaisePropertyChanged(); } } }
接着，定义一个简单的ViewModel:
public class MainViewModel : ModelBase { public MainViewModel() { TestModels = new ObservableCollection<TestModel>() { }; } private ObservableCollection<TestModel> _TestModels; /// <summary> /// _TestModels /// </summary> public ObservableCollection<TestModel> TestModels { get { return _TestModels; } set { _TestModels = value; RaisePropertyChanged(); } } }
前台Xaml 随意写一下：（实现当remove删除某一项的时候，先调用Delete把动画执行完成以后再使用RemoveItemInListBoxAction删除该项。
）
<ItemsControl ItemsSource="{Binding TestModels}" BorderBrush="Red" BorderThickness="1"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <local:VStackPanel></local:VStackPanel> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Border BorderBrush="Red" BorderThickness="1" Height="30" x:Name="br" RenderTransformOrigin=".5,.5" Loaded="br_Loaded"> <Border.RenderTransform> <TransformGroup> <ScaleTransform/> <SkewTransform/> <RotateTransform/> <TranslateTransform/> </TransformGroup> </Border.RenderTransform> <i:Interaction.Triggers> <ei:DataTrigger Binding="{Binding IsDelete}" Value="true"> <ei:ControlStoryboardAction x:Name="StoryboardAction"> <ei:ControlStoryboardAction.Storyboard> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="br"> <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="{Binding ElementName=br,Path=ActualWidth}"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="br"> <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </ei:ControlStoryboardAction.Storyboard> </ei:ControlStoryboardAction> </ei:DataTrigger> <ei:StoryboardCompletedTrigger Storyboard="{Binding ElementName=StoryboardAction,Path=Storyboard}"> <pi:RemoveItemInListBoxAction></pi:RemoveItemInListBoxAction> </ei:StoryboardCompletedTrigger> </i:Interaction.Triggers> <TextBlock VerticalAlignment="Center" HorizontalAlignment="Stretch" Text="{Binding Name}"></TextBlock> </Border> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl>
其中 xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" xmlns:pi="http://schemas.microsoft.com/prototyping/2010/interactivity" 引用一下。
代码 ：https://files.cnblogs.com/files/yk250/CustomPanelTest.rar