最近在研发新的项目，遇到了一个桌面模式下的难点--展开动画。之前动画这方面没做过，也许很多人开始做的时候也会遇到相关问题，因此我把几个重点及实际效果图总结展示出来：
我的开发环境是在VS2017下进行的，这个工具条主要功能是：一个工具条，可进行拖拉。可进行拖拉展开，可在拖动之后不足展开并反向继续展开剩下的部分；
一、【拖动】 拖动的核心代码是通过矩阵进行定位和拖动的，定位是以父容器为模板的。以下是核心代码（及效果图）：
/// <summary>
/// 这里TitleBar代指最顶上的操作Bar
/// 桌面模式下默认展开工具栏-动画
/// </summary>
private void DesktopToolWindowClick()
{ //添加行为
var behaviors = System.Windows.Interactivity.Interaction.GetBehaviors(this);
behaviors.Clear(); behaviors = System.Windows.Interactivity.Interaction.GetBehaviors(this);
behaviors.Clear(); //添加拖拉事件
this._OnMouse = new MoveInContainerBehavior(MoveInContainerBehavior.MoveModes.Free, new Rect(, , WindowsWidth, WindowsHeight));
behaviors.Add(this._OnMouse);
} /// <summary>
/// 加载用户控件的时候订阅事件
/// </summary>
private void _OnRegisterUserControl()
{ //订阅鼠标按下控件的事件;
_OnMouse.MouseLeftButtonDown += new MoveInContainerBehavior.MouseLeftButtonDownEventHandler(_OnMouseDownEvent);
//订阅鼠标拖动控件的事件;
_OnMouse.MouseMove += new MoveInContainerBehavior.MouseMoveEventHandler(_OnMouseMoveEvent);
//订阅鼠标释放控件的事件;
_OnMouse.MouseLeftButtonUp += new MoveInContainerBehavior.MouseLeftButtonUpEventHandler(_OnMouseReleseEvent); } /// <summary>
/// 用该事件控制弹窗位置
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void _ToolBar_Opened(object sender, EventArgs e)
{
//计算出控件移动的距离
var Windows_Lengh = _UserControl_XEnd + this.PopMenu.ActualWidth;
if (this._UserControl.ActualWidth + Windows_Lengh >= WindowsWidth)
{
this._ToolBar.Placement = System.Windows.Controls.Primitives.PlacementMode.Left;
this._ToolBar.HorizontalOffset = -;
}
else
{
this._ToolBar.Placement = System.Windows.Controls.Primitives.PlacementMode.Right;
this._ToolBar.HorizontalOffset = ;
}
}
二、【拖拉改变样式】 通过样式库调用可以在动画开始的时候就更换主题样式通过backup更改样式而不是UI直接改变，以下是核心代码（及效果图）：
#region 更改样式为【展开时候的样式】
this._GridMain.Margin = new Thickness(, -, , );
this._GridRowsF.Height = new GridLength();
this.TitleBar.Background = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#4a94ff"));
this.TitleBar.Opacity = ;
this.TitleBar.Margin = new Thickness(-, -, -, );
this.Circle_Bar.Stroke = Brushes.White;
this.Circle_Bar.Margin = new Thickness(, -, , );
this._UserControl.Style = this.FindResource("Style.UserControl.PresentationMode.Desktop.Expand.UserControlStyles") as Style;
#endregion
三、【拖拉展开-边缘充足】 进行一个动画 那就是直接按照自定义的动画时间进行展开，以下是核心代码（及效果图）使用GridLengthAnimation动画类自行百度，下面是经过二次编译的类调用方法：
#region 尝试展开工具条--向下展开
GridLengthAnimation ExpandAnimate = new GridLengthAnimation();
ExpandAnimate.From = new GridLength(, GridUnitType.Pixel);
ExpandAnimate.To = new GridLength(_GridRowsSLength, GridUnitType.Pixel);
ExpandAnimate.Duration = TimeSpan.FromSeconds(0.3);
ExpandAnimate.AutoReverse = false;
this._GridMain.RowDefinitions[].BeginAnimation(RowDefinition.HeightProperty, ExpandAnimate); #endregion
四、【拖拉展开-边缘不足】 进行两个动画 1-先展开到边缘动画 2-再反弹反方向展开动画，以下是核心代码（及效果图）：
#region 先往下展开，展开结束之后再启用往上增加动画
GridLengthAnimation ExpandAnimate = new GridLengthAnimation();
ExpandAnimate.From = new GridLength(, GridUnitType.Pixel);
ExpandAnimate.To = new GridLength(WindowsHeight - ParentPoint.Y - , GridUnitType.Pixel);
ExpandAnimate.Duration = TimeSpan.FromSeconds(0.15);
ExpandAnimate.AutoReverse = false;
ExpandAnimate.Completed += StartMatrixExpandAnimate_Completed;
this._GridMain.RowDefinitions[].BeginAnimation(RowDefinition.HeightProperty, ExpandAnimate); #endregion /// <summary>
/// 当展开动画结束之后开始执行反向动画
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void StartMatrixExpandAnimate_Completed(object sender, EventArgs e)
{
//删除动画
this._GridMain.RowDefinitions[].BeginAnimation(RowDefinition.HeightProperty, null); #region 向上移动动画
// 1-向上移动
Storyboard storyboard = new Storyboard();
storyboard.FillBehavior = FillBehavior.Stop;
MatrixTransform matrixTransformOfOwner = this.RenderTransform as MatrixTransform;
if (matrixTransformOfOwner == null)
{
matrixTransformOfOwner = new MatrixTransform(this.RenderTransform.Value);
this.RenderTransform = matrixTransformOfOwner;
}
this._oldTransform = this.RenderTransform;
Matrix matrixOfOwner = this.RenderTransform.Value;
Matrix fromMatrix = matrixOfOwner;
Matrix toMatrix = new Matrix();
toMatrix.OffsetX = ParentPoint.X;
toMatrix.OffsetY = WindowsHeight - _GridRowsSLength - ; MatrixAnimation matrixAnimation = new MatrixAnimation(fromMatrix, toMatrix, TimeSpan.FromSeconds(0.3));
matrixAnimation.Completed += (s, ex) => { UnlockProperty(toMatrix); }; Storyboard.SetTarget(matrixAnimation, this);
Storyboard.SetTargetProperty(matrixAnimation, new PropertyPath("(UIElement.RenderTransform).(MatrixTransform.Matrix)")); storyboard.Children.Add(matrixAnimation);
storyboard.Begin(); #endregion }
五、【拖拉展开-到达边缘时】进行一个动画 反弹反方向展开动画，类似【四】 直接上效果图就不贴代码了。
