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

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 - 下拉菜单隐藏时生效。

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

参考代码如下：

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

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

本文Demo的源代码如下：

C1ComboBox-animation.7z (3.85 mb)

关于葡萄城

葡萄城是专业的软件开发技术和低代码平台提供商，以“赋能开发者”为使命，致力于通过表格控件、低代码和BI等各类软件开发工具和服务，一站式满足开发者需求，帮助企业提升开发效率并创新开发模式。葡萄城开发技术始于1980年，40余年来始终聚焦软件开发技术，有深厚的技术积累和丰富的产品线。是业界能够同时赋能软件开发和低代码开发的企业。凭借过硬的产品能力、活跃的用户社区和丰富的伙伴生态，与超过3000家合作伙伴紧密合作，产品广泛应用于信息和软件服务、制造、交通运输、建筑、金融、能源、教育、公共管理等支柱产业。