[WPF]使用自定义Panel更好地控制Resize时的行为——之二

考虑下面这样的界面布局。

对于这个小窗口而言，东西少。可以把窗口定死在500*300这样。但是如果这个表单是属于一个大窗体的一个部分。情况就比较复杂了。

我们并不能把窗口定死大小。因为窗口有可能会需要在1920*1200到1024*768等不同的分辨率下运行。这样这个表单在不同情况下的大小就有可能有很大的差别。

一个比较好的方案是，当窗口变小，第一行放不下所有控件时。换到第二行。当窗口变大，第一行有多余地方时，把第二行的内容放在第一行上，使界面的右边不留空白。

有人会大叫这不就是WrapPanel做的事情吗？没有错，但是WrapPanel的每一行都是左对齐的，右边会有大片的留白，这在想要设计有良好用户体验的软件中，是不可接受的。

也就是说WPF自带的WrapPanel没有处理好下面这种情况。

第一行有多余的空间，但是又不足以把第二行的什么控件放上来。

这时，第一行的现有的控件应该充分利用第一行的所有可用空间，把第一行填满。这个是用WrapPanel做不到的。WrapPanel主要用于内部的Item的大小基本一样的情况。如果大小不一，WrapPanel就会造成不好的用户体验。还不如用Grid做等比例缩放好。

很可惜，现在我们又要自己写一个WrapPanel了。如下图所示。

图1. FillWrapPanel Demo

在这个Panel里的所有的Button都有 20的MinWidth和55的MaxWidth。并特意为3号Button设置了30的MaxWidth，为6号Button设置了100的MaxWidth。我们来看一下这个Panel在Resize时的行为。

图2. 再小就要换行了（原则是让所有控件都尽可能大，但是右边又不能留白）

图3. 缩到6号Button

图4. 缩到4号Button

图5. 最小

如果用WPF的WrapPanel呢？结果很简单。

图6. WPF的WrapPanel（Item的大小是确定的，不会变化，而且右边会留白）

系统的WrapPanel很适于实现Explorer里浏览文件、文件夹或是看图软件的缩略图模式。而本文中介绍的FillWrapPanel更适于实现类似表单的窗体。因为里面的东西大小很可能是各不相同的。