DevExpress Asp.net(5) ASPxCloudControl的基本使用

ASPxCloudPanel 使用指南

最新推荐文章于 2017-09-06 15:14:38 发布

原创最新推荐文章于 2017-09-06 15:14:38 发布 · 2.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#asp.net #random #object #server

DevExpress Asp.net 同时被 2 个专栏收录

7 篇文章

订阅专栏

.Net

4 篇文章

订阅专栏

本文介绍了ASPxCloudPanel控件的基本用法，包括通过数据绑定和自定义方式展示导航链接，并展示了如何设置控件样式及实现随机尺寸效果。

此控件最大的特点就是外观，如图：主要用于导航连接、标签等功能。可使用数据绑定、自定义项等方式展现数据。

其实ASPxCloudPanel的使用非常简单，可以通过数据绑定、自定义等方式来显示数据。

CloudControlItem Item1 = new CloudControlItem("Home", 5, "../default.aspx", "default"); CloudControlItem Item2 = new CloudControlItem("Products", 10, "/products"); CloudControlItem Item3 = new CloudControlItem("Contacts", 20, "/contacts"); CloudControlItem Item5 = new CloudControlItem("News", 30, "/news"); CloudControlItem Item4 = new CloudControlItem("About", 40); ASPxCloudControl1.Items.Add(Item1); ASPxCloudControl1.Items.Add(Item2); ASPxCloudControl1.Items.Add(Item3); ASPxCloudControl1.Items.Add(Item4); ASPxCloudControl1.Items.Add(Item5); ASPxCloudControl1.ItemBeginText = "{"; ASPxCloudControl1.ItemEndText = "}"; ASPxCloudControl1.ItemBeginEndTextColor = System.Drawing.Color.Brown; ASPxCloudControl1.MaxColor = System.Drawing.Color.Red; ASPxCloudControl1.MinColor = System.Drawing.Color.Green; ASPxCloudControl1.LinkStyle.HoverColor = System.Drawing.Color.Pink; ASPxCloudControl2.MaxColor = System.Drawing.Color.Red; ASPxCloudControl2.MinColor = System.Drawing.Color.Green; ASPxCloudControl2.LinkStyle.HoverColor = System.Drawing.Color.Pink;

数据绑定：

<dxcc:ASPxCloudControl ID="ASPxCloudControl2" runat="server" OnItemDataBound="ASPxCloudControl2_ItemDataBound" DataSourceID="AccessDataSource1" NameField="Capital" NavigateUrlField="Capital" NavigateUrlFormatString="default.aspx?id={0}" TextField="Capital"> <RankProperties> <dxcc:RankProperties></dxcc:RankProperties> <dxcc:RankProperties></dxcc:RankProperties> <dxcc:RankProperties></dxcc:RankProperties> <dxcc:RankProperties></dxcc:RankProperties> <dxcc:RankProperties></dxcc:RankProperties> <dxcc:RankProperties></dxcc:RankProperties> <dxcc:RankProperties></dxcc:RankProperties> </RankProperties> </dxcc:ASPxCloudControl>

我们还可以通过ItemDataBound事件随机设置每个的大小。

Random random = new Random(10); protected void ASPxCloudControl2_ItemDataBound(object source, CloudControlItemEventArgs e) { e.Item.Value = random.NextDouble() * 10; //设置大小 }