WPF 控件库——可拖动选项卡的TabControl

Posted 2021-01-05 lonelyxmas

原文:WPF 控件库——可拖动选项卡的TabControl

一、先看看效果

 

二、原理

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;
}    

　　假设现在的容器宽度是108，选项卡还是10个，通过 MeasureOverride 方法处理后，前八个的宽度则是11，后两个是10。如果 IsEnableTabFill = false 则不要平分了，直接放入容器即可。

　　现在选项卡大小搞定了，位置呢？太简单了，一个for循环不断叠加每个选项卡的宽度就可以了： 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 用途比较特殊，在用户拖动选项卡时，我们最好等待一个粘滞距离，比如20个单位宽度，也就是说，在水平方向鼠标移动了超过20个像素无关单位后，选项卡才开始被拖动。

　　在一开始的gif中可以看到，被拖动的选项卡改变位置时，其余的选项卡也会动态改变位置，那么位置改变的时机是如何确定的呢？很简单，只要将被拖动的选项卡到容器（TabPanel）左边界的这个距离除以 ItemWidth ，结果四舍五入就是这个选项卡当前应该所处的位置，紧接着下一步就是要把这个位置上的选项卡和当前被拖动的换个位置。此刻我们终于可以用动画来实现了，由于这个系列的文章多次讲过动画的代码了，所以就不再赘述。

　　上面一段讲的是换位置，那么添加选项卡、删除选项卡呢？其实有个捷径可以走，就是使用 FluidMoveBehavior ，把他往样式里一塞，好了，效果出来了！

　　但是这里有一个坑要注意， FluidMoveBehavior 虽然可以化简一部分动画逻辑，但是它有点越权了，它把你位置移动的逻辑也给做了，你会发现，如果不加处理，在你自己的动画结束后它还会再来一遍它的动画。可以将 FluidMoveBehavior 的 Duration 属性暂时归零来解决这个问题： FluidMoveDuration = new Duration(TimeSpan.FromSeconds(0)); 。

　　这篇文章只是大致介绍一下实现的过程和思路，感兴趣的可以下载源码，多多交流，共同提高。

 

三、源码

　　本文所讨论的控件源码已经在github开源：https://github.com/NaBian/HandyControl