ASP.NET Wijmo的C1ComboBox显示动画效果

发布时间:2014/06/17 00:06 发布者:Alice

返回博客中心

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)


关于葡萄城

赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。

了解详情,请访问葡萄城官网