一、先看看效果
二、原理
1、选项卡大小和位置
这次给大家介绍的控件是比较常用的TabControl，网上常见的TabControl样式有很多，其中一部分也支持拖动选项卡，但是带动画效果的很少见。这也是有原因的，因为想要做一个不失原有功能，还需要添加动画效果的控件可不是一行代码的事。要做成上图中的效果，我们不能一蹴而就，最忌讳的是一上来就想实现所有效果。
一开始，我们最好先用Blend看看原生的TabControl样式模板部分是如何实现的，这样我们也好有个参考。我们先从资产面板中拖一个TabControl放到窗体中，调整好合适的大小：
然后在它上面右键，编辑模板->编辑副本->确定，在自动生成的xaml代码中关键部分是这里：
public class 。既然这个TabPanel是一个容器，所以它必须负责计算TabItem的大小还要安排它的位置，我们可以重载父类Panel的 MeasureOverride 方法来处理这些逻辑： protected override 。在这个方法中我们通过 InternalChildren 这个只读属性来获取选项卡，选项卡的高度我们由 TabItemHeight 属性指定，由于TabPanel对用户是透明的，所以我们还要定制一个TabControl，里面加上 TabItemHeight 属性，让它和TabPanel的绑定。之后的 TabItemWidth 和 IsEnableTabFill 也同理。而选项卡的宽度则要分情况讨论了，如果 IsEnableTabFill = true 我们则要平分宽度，例如容器宽度为100，选项卡有10个，那么每个选项卡的宽度就是10。在这里要注意的是，选项卡的宽度最好不要有小数点，虽然有诸如 UseLayoutRounding
public static int[] DivideInt2Arr(int num, int count)
{
var arr = new int[count];
var div = num / count;
var rest = num % count;
for (int i = 0; i < count; i++)
{
arr[i] = div;
}
for (int i = 0; i < rest; i++)
{
arr[i] += 1;
}
return arr;
}MeasureOverride 方法处理后，前八个的宽度则是11，后两个是10。如果 IsEnableTabFill = false
size.Width += tabItem.ItemWidth; 。最后通过调用 Element.Arrange
var rect = new Rect
{
X = size.Width - tabItem.BorderThickness.Left,
Width = itemWidth,
Height = TabItemHeight
};
tabItem.Arrange(rect);因为选项卡左右都有边距，减去一个左边距，两者间的间隔就是一个边距了。
选项卡大小和位置的逻辑处理大致是上述的过程，由于篇幅有限，加之我不喜欢一贴一大段代码，所以只挑重点来讨论，完整的代码还要考虑各种情况，这里就不再赘述了。
2、动画处理
_isDragging 、 _isDragged 、 _dragPoint 、 _isWaiting ，前两个我就不说了，都是字面意思，第三个则用来暂存鼠标移动时的位置，每次进入选项卡的 OnMouseMove 事件，都要将 _isDragged 和其旧值作差，以求得当前选项卡应该移动的距离。 _isWaiting
ItemWidth
FluidMoveBehavior
FluidMoveBehavior 虽然可以化简一部分动画逻辑，但是它有点越权了，它把你位置移动的逻辑也给做了，你会发现，如果不加处理，在你自己的动画结束后它还会再来一遍它的动画。可以将 FluidMoveBehavior 的 Duration 属性暂时归零来解决这个问题： FluidMoveDuration = new Duration(TimeSpan.FromSeconds(0));
这篇文章只是大致介绍一下实现的过程和思路，感兴趣的可以下载源码，多多交流，共同提高。
三、源码
本文所讨论的控件源码已经在github开源：https://github.com/NaBian/HandyControl
