ASP.NET Wijmo的C1ComboBox将一个可编辑的文本框与一个可以自动搜索的下拉列表结合到了一起,通过设置 Items 属性,用户可以控制 C1ComboBox 的外观和下拉菜单列表的条目。当显示或者隐藏下拉菜单的时候,C1ComboBox 能够显示动画效果。

具体如下步骤。

将C1ComboBox添加到页面。

设置下拉菜单列表条目

通过设置 Items 属性,可以控制 C1ComboBox 的外观和下拉菜单列表的条目。代码如下:

<Items>
<wijmo:C1ComboBoxItem Text="c++" Value="c++" />
<wijmo:C1ComboBoxItem Text="java" Value="java" />
<wijmo:C1ComboBoxItem Text="php" Value="php" />
<wijmo:C1ComboBoxItem Text="coldfusion" Value="coldfusion" />
<wijmo:C1ComboBoxItem Text="javascript" Value="javascript" />
<wijmo:C1ComboBoxItem Text="asp" Value="asp" />
<wijmo:C1ComboBoxItem Text="ruby" Value="ruby" />
<wijmo:C1ComboBoxItem Text="python" Value="python" />
<wijmo:C1ComboBoxItem Text="c" Value="c" />
<wijmo:C1ComboBoxItem Text="scala" Value="scala" />
<wijmo:C1ComboBoxItem Text="groovy" Value="groovy" />
<wijmo:C1ComboBoxItem Text="haskell" Value="haskell" />
<wijmo:C1ComboBoxItem Text="perl" Value="perl" />
</Items>

 

设置动画效果

下列选项被设置为相应的值,就可以显示或者隐藏动画效果:

  • ShowingAnimation - 下拉菜单可见时生效。
  • HidingAnimation - 下拉菜单隐藏时生效。

ShowingAnimationHidingAnimation属性被设置的话,页面加载后就能够看到动画效果。 本文附件中的Demo是将ShowingAnimation显示效果设置为Scale淡入,显示速度为1000。将HidingAnimation隐藏效果设置为explode爆炸,隐藏速度为1000。

参考代码如下:

<ShowingAnimation Duration="1000">
<Animated Effect="Scale" />
</ShowingAnimation>
<HidingAnimation Duration="1000">
<Animated Effect="explode" />

 

加载页面,当打开下拉框会有动画效果,下拉菜单里会出现各个可选项目。下拉框关闭也有动画效果,如下图。

C1ComBox-animination

 

本文Demo的源代码如下:

C1ComboBox-animation.7z (3.85 mb)