你的位置:首页 > ASP.net教程

[ASP.net教程]在 UWP 中实现 Expander 控件


    WPF 中的 Expander 控件在 Windows 10 SDK 中并不提供,本文主要说明,如何在 UWP 中创建这样一个控件。其效果如下图:

    首先,分析该控件需要的一些特性,它应该至少包括如下三个属性:

  •     Content: 最重要的属性,设置该属性,可以使 Expander 控件显示其内容;
  •     Header: 控件的 Header; 
  •     IsExpand: 当前是否展开。

    接下来是定义其 UI,在这里使用 Grid,添加两行,一行显示 Header,一行显示 Content,当 IsExpand 属性为 false 时,只要将 Content 那一行隐藏即可;此外,还需要一个 ToggleButton 用于控制该控件的展开与关闭。

    OK。思路弄清楚后,开始实践,    

1. 创建控件,并添加属性

    在项目中添加一个 Templaded 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>              <ContentControl VerticalAlignment="Center" Content="{TemplateBinding Header}" />            </StackPanel>            <ContentControl 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 is ContentPropertyAttribute?