在 UWP 中实现 Expander 控件
WPF 中的 Expander 控件在 Windows 10 SDK 中并不提供，本文主要说明，如何在 UWP 中创建这样一个控件。其效果如下图：
首先，分析该控件需要的一些特性，它应该至少包括如下三个属性：
- Content: 最重要的属性，设置该属性，可以使 Expander 控件显示其内容；
- Header: 控件的 Header；
- IsExpand: 当前是否展开。
接下来是定义其 UI，在这里使用 Grid，添加两行，一行显示 Header，一行显示 Content，当 IsExpand 属性为 false 时，只要将 Content 那一行隐藏即可；此外，还需要一个 ToggleButton 用于控制该控件的展开与关闭。
OK。思路弄清楚后，开始实践，
1. 创建控件，并添加属性
在项目中添加一个 Templated Control（模板化控件），名称为 Expander。为其添加三个依赖属性，代码如下：
public static readonly DependencyProperty ContentProperty =
DependencyProperty.Register("Content", typeof(object), typeof(Expander), new PropertyMetadata(null)); public static readonly DependencyProperty HeaderProperty =
DependencyProperty.Register("Header", typeof(object), typeof(Expander), new PropertyMetadata(null)); public static readonly DependencyProperty IsExpandProperty =
DependencyProperty.Register("IsExpand", typeof(bool), typeof(Expander), new PropertyMetadata(true)); /// <summary>
/// 控件的内容
/// </summary>
public object Content
{
get { return (object)GetValue(ContentProperty); }
set { SetValue(ContentProperty, value); }
} /// <summary>
/// 控件的标题
/// </summary>
public object Header
{
get { return (object)GetValue(HeaderProperty); }
set { SetValue(HeaderProperty, value); }
} /// <summary>
/// 返回或设置控件是否展开
/// </summary>
public bool IsExpand
{
get { return (bool)GetValue(IsExpandProperty); }
set { SetValue(IsExpandProperty, value); }
}
2. 定义UI
在 Generic.xaml 中，找到 <Style TargetType="controls:Expander"> 节点，添加如下代码：
<Style TargetType="controls:Expander">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:Expander">
<Grid x:Name="grid"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<ToggleButton x:Name="toggleButton"
Width="32"
Height="32"
Margin="0,0,4,0"
BorderThickness="0"
IsChecked="{Binding IsExpand,
RelativeSource={RelativeSource Mode=TemplatedParent},
Mode=TwoWay}">
<Path x:Name="arrow"
Width="16"
Height="16"
Data="M15.289001,0L20.484007,0 31.650999,15.953003 29.055021,19.658005 20.415007,32 15.35501,32 15.289001,31.906998 24.621,18.572998 0,18.572998 0,13.326004 24.621,13.326004z"
Fill="#DDFFFFFF"
RenderTransformOrigin="0.5,0.5"
Stretch="Uniform">
</Path>
</ToggleButton>
<ContentPresenter VerticalAlignment="Center" Content="{TemplateBinding Header}" />
</StackPanel>
<ContentPresenter Grid.Row="1"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
Content="{TemplateBinding Content}"
Visibility="{Binding IsExpand,
RelativeSource={RelativeSource Mode=TemplatedParent},
Converter={StaticResource BooleanToVisibilityConverter},
Mode=TwoWay}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
可以看出：
a) ToggleButton 的 IsChecked 属性绑定了控件的 IsExpand 属性， 绑定表达式 {Binding IsExpand,RelativeSource={RelativeSource Mode=TemplatedParent}} 是 {TemplateBinding IsExpand} 的另一种写法，在这种写法中，我们可以添加 Binding 对象的其它属性，如这里的 Mode=TwoWay，这样可以实现 ToggleButton 与 控件的 IsExpand 属性彼此互相的控制；
b) ContentControl 的 Visibility 与 a） 同理，略微复杂的是，这里用了一个 Converter，用于在 Bool 和 Visibility 枚举之间转换；
c) 我们为 ToggleButton 控件的 Content 属性设置了一个 Path 用来形象地表达 Expander 当前的状态。
3. 定义 VisualState
我们为该控件定义两个 VisualState，分别代表正常状态和展开状态，即 Normal 与 Expanded，通过切换这两种状态可以完成该控件的UI变化，这里主要是对 ToggleButton 的 Content 进行动画设置。
在 Path 中为其添加 RotateTransform，代码如下：
<Path x:Name="arrow"
Width="16"
Height="16"
Data="M15.289001,0L20.484007,0 31.650999,15.953003 29.055021,19.658005 20.415007,32 15.35501,32 15.289001,31.906998 24.621,18.572998 0,18.572998 0,13.326004 24.621,13.326004z"
Fill="#DDFFFFFF"
RenderTransformOrigin="0.5,0.5"
Stretch="Uniform">
<Path.RenderTransform>
<RotateTransform x:Name="pathRotate" />
</Path.RenderTransform>
</Path>
在 Grid 中添加 VisualState，代码如下：
<Grid x:Name="grid"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Normal"
GeneratedDuration="0:0:0.2"
To="Expanded" />
<VisualTransition From="Expanded"
GeneratedDuration="0:0:0.2"
To="Normal" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Duration="0:0:0"
Storyboard.TargetName="pathRotate"
Storyboard.TargetProperty="Angle"
To="0">
<DoubleAnimation.EasingFunction>
<QuinticEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState>
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Duration="0:0:0"
Storyboard.TargetName="pathRotate"
Storyboard.TargetProperty="Angle"
To="90">
<DoubleAnimation.EasingFunction>
<QuinticEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
...
这里，我们可以看到，除了两个 VisualState 外，我们还定义了两个 VisualTransition，用来设置切换此两种状态时的过度时间。
提示：关于 Content 区域的隐藏与显示，也可以通过在 VisualState 添加动画来控制，不过在上面的代码中，我们利用了 ToggleButton 以及它的 IsCheced 属性来控制其显示与隐藏，较为简洁地了实现这一功能。
接下来，我们需要在代码中来控制何时在这两种状态间切换，在 Expander.cs 中添加如下代码：
private ToggleButton button;
protected override void OnApplyTemplate()
{
base.OnApplyTemplate();
button = GetTemplateChild("toggleButton") as ToggleButton;
button.Loaded += (s, e) => { ChangeControlState(false); };
button.Checked += (s, e) => { ChangeControlState(); };
button.Unchecked += (s, e) => { ChangeControlState(); };
}
/// <summary>
/// 改变控件的 VisualState
/// </summary>
/// <param name="useTransition">是否使用 VisualTransition，默认使用</param>
private void ChangeControlState(bool useTransition = true)
{
if (button.IsChecked.Value)
{
VisualStateManager.GoToState(this, "Expanded", useTransition);
}
else
{
VisualStateManager.GoToState(this, "Normal", useTransition);
}
}
可以看出，我们为 ToggleButton 添加事件响应来切换状态。之所以在 Load 时也来改检查并更改状态，是因为，如果在使 Expander 控件时，如果为它设置 IsExpand 为 true 时，那么加载时，会及时更新控件状态为 Expanded ，否则将默认为 Normal。
最后，我们为控件添加一个 ContentPropertyAttribute，并设置其 Name 为 Content，这样，该控件的 Content 属性就作为此控件的内容属性（ContentPropery）。简言之，可以省去 <xxx:Expander.Content> 这个节点，类似在 Button 中直接添加其 Content 一样。代码如下：
[ContentProperty(Name = "Content")]
public sealed class Expander : Control
至此，一个 Expander 控件就完成了，至于你还有额外、其它的需求（如样式的修改等），则可在此基础上进行修改。
如果你有什么更好的建议或其它观点，请留言，互相交流。
参考资料：
What's the difference between ContentControl and ContentPresenter?
Difference between ContentControl, ContentPresenter, ContentTemplate and ControlTemplate? (Bob_Bao's answer)
What is ContentPropertyAttribute?
最新文章
- 模板函数(template function)出现编译链接错误(link error)之解析
- java分享第七天-02（读取文件）
- TableView didSelectRowAtIndexPath 不执行
- 彩色的Shell
- Objective-c基础学习
- 用原生javascript做的一个打地鼠的小游戏
- Jquery实现文本框输入提示
- (转)对DotNet分布式应用搭建的考虑
- Spark Streaming揭秘 Day8 RDD生命周期研究
- Volatile变量
- Ext.Net学习笔记20：Ext.Net FormPanel 复杂用法
- Basic Wall Maze
- 用CSS创建小三角形问题（笔试题常考）
- mysql 建表、查表、查表结构
- IOS 取值控件(UIPicker)的使用方法
- Kruskal算法的简单实现
- 修改替换/system/framework/framework.jar后重启手机为何没有效果？
- pandas数据结构练习题（部分）
- canvas 模拟时钟
- WordPress版微信小程序3.2版发布