一、先看看效果
二、原理
1、选项卡大小和位置
这次给大家介绍的控件是比较常用的TabControl，网上常见的TabControl样式有很多，其中一部分也支持拖动选项卡，但是带动画效果的很少见。这也是有原因的，因为想要做一个不失原有功能，还需要添加动画效果的控件可不是一行代码的事。要做成上图中的效果，我们不能一蹴而就，最忌讳的是一上来就想实现所有效果。
一开始，我们最好先用Blend看看原生的TabControl样式模板部分是如何实现的，这样我们也好有个参考。我们先从资产面板中拖一个TabControl放到窗体中，调整好合适的大小：
然后在它上面右键，编辑模板->编辑副本->确定，在自动生成的xaml代码中关键部分是这里：
可以看到，所有的选项卡（也就是TabItem）其实都是放在TabControl内部维护的一个TabPanel中，知道这些就够了，我们完全可以做一个定制的TabPanel来替换它： public class TabPanel : Panel 。既然这个TabPanel是一个容器，所以它必须负责计算TabItem的大小还要安排它的位置，我们可以重载父类Panel的 MeasureOverride 方法来处理这些逻辑： protected override Size MeasureOverride(Size constraint) 。在这个方法中我们通过 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;
}