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

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



其实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;     //设置大小
}