[WPF自定义控件库]了解WPF的布局过程，并利用Measure为Expander添加动画

1. 前言

这篇文章介绍WPF UI元素的两步布局过程，并且通过Resizer控件介绍只使用Measure可以实现些什么内容。

我不建议初学者做太多动画的工作，但合适的动画可以引导用户视线，提升用户体验。例如上图的这种动画，这种动画挺常见的，在内容的高度改变时动态地改变自身的高度，除了好看以外，对用户体验也很有改善。可惜的是WPF本身没有默认这种这方面的支持，连Expander的展开/折叠都没有动画。为此我实现了一个可以在内容大小改变时以动画的方式改变自身大小的Resizer控件(想不到有什么好的命名，请求建议)。其实老老实实从Silverlight Toolkit移植AccordionItem就好，但我想通过这个控件介绍一些布局(及动画)的概念。Resizer使用方式如下XAML所示：

<StackPanel>
    <kino:KinoResizer HorizontalContentAlignment="Stretch">
        <Expander Header="Expander1">
            <Rectangle Height="100"
                       Fill="Red" />
        </Expander>
    </kino:KinoResizer>
    <kino:KinoResizer HorizontalContentAlignment="Stretch">
        <Expander Header="Expander2">
            <Rectangle Height="100"
                       Fill="Blue" />
        </Expander>
    </kino:KinoResizer>
</StackPanel>

2. 需要了解的概念

为了实现这个控件首先要了解WPF UI元素的布局过程。

2.1 两步布局过程

WPF的布局大致上分为Measure和Arrange两步，布局元素首先递归地用Measure计算所有子元素所需的大小，然后使用Arrange实现布局。

以StackPanel为例，当StackPanel需要布局的时候，它首先会得知有多少空间可用，然后用这个可用空间询问Children的所有子元素它们需要多大空间，这是Measure；得知所有子元素需要的空间后，结合自身的布局逻辑将子元素确定