expander菜单控件_[WPF 自定义控件]自定义Expander

1. 前言

上一篇文章介绍了使用Resizer实现Expander简单的动画效果，运行效果也还好，不过只有展开/折叠而缺少了淡入/淡出的动画(毕竟Resizer模仿Expander只是附带的功能)。这篇继续Measure的话题，自定义了一个带有动画的ExtendedExpander。

2. ExtendedExpander的需求

使用Resizer实现的简易Expander没办法在折叠时做淡出动画，因为ControlTemplate中的ExpandSite在Collapsed状态下直接设置为隐藏。一个稍微好看些的Expander的状态改变动画要满足下面的需求：

拉伸

淡入淡出

上面两个效果都可以用XAML定义

最终运行效果如下：

3. 实现思路

模仿SilverlightToolkit，我也用一个带有Percentage属性的ExpandableContentControl控件控制Expander内容的拉伸。(顺便一提，SilverlightToolkit的Expander没有拉伸动画，ExpandableContentControl用在AccordionItem里面)。ExpandableContentControl的Percentage属性控制这个控件的展开的百分比，1为完全展开，0为完全折叠。

在ControlTemplate中使用VisualState控制Expanded/Collapsed的动画。VusialState.Storyboard控制VisualState的最终值，过渡动画由VisualStateGroup.Transitions控制，这在以前的 这篇文章 中有介绍过：

Margi