膨胀控制在Silverlight工具包
介绍
我写的Silverlight工具包HeaderedContentControl和扩展。 它们都存在在WPF中，我写道：他们是与WPF兼容尽可能多。 但也有WPF和Silverlight之间的显着性差异，所以并不奇怪这两个平台上的控制以及不同。 大多是造成差异的DependencyProperty系统像TemplatePart和的VisualState WPF和Silverlight之间，和新的Silverlight创新的差异。 已经有几个搜索引荐的关键字为“Silverlight”，“扩展”到我的博客，我觉得我应该写一个有关设计和实施HeaderedContentControl和扩展后，所以在这里你走。
HeaderedContentControl
HeaderedContentControl继承自ContentControl的，加入两个DependencyProperty的头和HeaderTemplate中，两个受保护的虚拟功能OnHeaderedChanged和OnHeaderTemplateChanged。 下面是工具包在Silverlight和WPF HeaderedContentControl。 的分歧主要是在WPF 3.5中添加像HeaderStringFormat和OnHeaderStringFormatChanged新功能，WPF和Silverlight平台之间的差异，像HeaderTemplateSelector，LogicalChildren，HasHeader等
图1：在Silverlight工具包HeaderedContentControl
图2：在WPF HeaderedContentControl
你可以检查出HeaderedContentControl 概述和Silverlight工具包 CodePlex上页样本一起玩。
扩展
用户界面
扩展是HeaderedContentControl子类，添加扩展/折叠其内容区域的行为。 Silverlight工具包主页上有一个定制的扩展屏幕快照：
图3：定制HeaderedContentControl
和样品，你可以玩：
图4：HeaderedContentControl样品
（点击展开/折叠头/切换按钮）除了鼠标接口，扩展也有一个键盘接口：根据的ExpandDirection，左/右/向下/向上箭头键可展开或折叠扩展内容区。
实施
扩展增加了两个DependencyProperty的IsExpand ExpandDirection，两个事件展开和折叠，和他们相关的的保护OnExpanded和OnCollapsed虚拟方法。 以下是Silverlight工具包和WPF扩展实施：
图5：在Silverlight工具包的扩展
图6：在WPF扩展
控制合同与定制
什么是扩展新的Silverlight工具包，它的WPF，是控制合同：
图7：扩展控制合同模板部件和可视状态
扩展增加了两个新的视觉状态组，除了常见的焦点团体：
- ExpansionStates：扩大和折叠
如下图所示，默认模板的扩展展开和折叠状态的状态动画使用ObjectAnimationUsingKeyFrames要改变的内容区域的Visibility属性（代表由ExpandSite默认模板中的元素），以显示或隐藏的内容区域。 你可以自定义展开/折叠行为与混合容易，如添加过渡动画改变的内容区域的透明度，淡出和。
图8：扩大国家动画
- ExpandDirectionStates：ExpandDown，ExpandUp，ExpandLeft ExpandRight
扩展有四个不同ExpandDirection值，每个人都有不同的布局。 允许用户自定义扩展模板，必须在模板中指定的四个布局，所以扩展的代码，知道挑选哪一个组件显示/隐藏根据的ExpandDirection财产的一种方式。 如滑块和滚动条控件使用TemplatePart：
这种方法不能很好地扩展：扩展有四个布局，从而大量的模板部件。 每个布局必须分开处理展开/折叠的转变。 为了避免这个问题，我介绍了的ExpandDirectionStates视觉状态组，使用户可以自定义处理ExpandDirectionStates布局，其中混合提供了良好的支持。 我要指定一个模板的一部分：ToggleButton的头，因为Silverlight不允许双向绑定，让我联想到在扩展代码ToggleButton.IsChecked Expander.IsExpanded，为客户提供“展开/折叠的用户体验。 所以这种方式，控制合同是更清洁和更灵活的一样，很容易添加一个RotateTransform旋转
扩展到新的布局时ExpandDirection变化。 下面的屏幕截图显示了默认的模板如何处理所有四个布局：
- 整个头是一个模板的切换按钮，点击页眉反正可以展开/折叠的内容区域。
- 它采用2×2的网格布局标题和内容区。
- 它勾画出的扩展，根据以ExpandDirection通过国家ExpandDirectionStates动画：
- 它勾画出动画他们的Grid.Row和Grid.Column属性头和内容领域。
- 它吸引了头切换按钮正确通过改变它的模板。
图9：ExpandLeft国家动画
结论
一如往常，希望这有助于，意见/建议/反馈等欢迎。 谢谢！
最新评论