NetAdvantage 设计友好UI--WebCombo

    NetAdvantage 设计了好多界面漂亮友好的控件,而且还很好的应用了AJAX技术。最新版本的NetAdvantage 可以到官方网站下载:http://www.infragistics.com/。下载安装后点击程序菜单里的Create NetAdvantage Visual Studio Toolbo 将在.NET中为NetAdvantage 添加一个选项卡,NetAdvantage 所有的控件都放在里边了。

      WebCombo 是一个用于网页上的组合框,利用他可以创建一个多列的下拉框。程序代码:NetAdvantageGrid.rar
      一、新建一个.NET2005 Web 项目。
      二、向Default.aspx页面添加一个WebCombo 控件。
      三、选中控件,点击控件右上角的小三角,在Actions选项中为控件选择一个你喜欢的风格。
      三、右键菜单中选择   Quick Design 弹出设计对话框。

      四、点击Edit Data Structure,然后点击Edit Columns按钮,进入列设计视图。这里默认已经添加了一列,你可以选中该列,再右侧的属性栏里修改他的属性。通过Header下的Caption可以修改列的标题。也可以在属性栏的上方点击新建按钮,来创建列。这里,我创建了两个列,分别为姓名和年龄列。
      五、选择Data Structure 下的Edit Data Structure   ,然后点击Edit Columns按钮Edit Rows,在你创建的列里边添加信息。完成后点击OK按钮确认修改。
      六、生成代码如下:
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Infragistics2.WebUI.WebCombo.v6.3, Version=6.3.20063.53, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
    Namespace
="Infragistics.WebUI.WebCombo" TagPrefix="igcmbo" %>
<%@ Register Assembly="Infragistics2.WebUI.UltraWebGrid.v6.3, Version=6.3.20063.53, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
    Namespace
="Infragistics.WebUI.UltraWebGrid" TagPrefix="igtbl" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    
<title>无标题页</title>
    
<link href="~/ig_common/20063CLR20/Styles/Office2007Silver/ig_WebCombo.css " rel="Stylesheet"
        type
="text/css" />
    
<link href="~/ig_common/20063CLR20/Styles/Office2007Black/ig_WebCombo.css " rel="Stylesheet"
        type
="text/css" />
</head>
<body>
    
<form id="form1" runat="server">
    
<div>
        
<igcmbo:WebCombo ID="WebCombo1" runat="server" BorderColor="#A9B1B8" CssClass="igWebComboMain"
            DropImage1
="~/ig_common/20063CLR20/Styles/Office2007Black/WebCombo/office2007ddup.gif"
            DropImage2
="~/ig_common/20063CLR20/Styles/Office2007Black/WebCombo/office2007dddown.gif"
            DropImageXP1
="~/ig_common/20063CLR20/Styles/Office2007Black/WebCombo/office2007ddup.gif"
            DropImageXP2
="~/ig_common/20063CLR20/Styles/Office2007Black/WebCombo/office2007dddown.gif"
            HideDropDowns
="False" SelBackColor="232, 234, 236" SelForeColor="Black" Version="4.00">
            
<ExpandEffects ShadowColor="LightGray" />
            
<Rows>
                
<igtbl:UltraGridRow Height="">
                    
<cells>
<igtbl:UltraGridCell Text="☆聊ゾ聊☆ 22"></igtbl:UltraGridCell>
<igtbl:UltraGridCell Text="22"></igtbl:UltraGridCell>
</cells>
                
</igtbl:UltraGridRow>
                
<igtbl:UltraGridRow Height="">
                    
<cells>
<igtbl:UltraGridCell Text="☆聊ゾ聊☆ 23"></igtbl:UltraGridCell>
<igtbl:UltraGridCell Text="23"></igtbl:UltraGridCell>
</cells>
                
</igtbl:UltraGridRow>
                
<igtbl:UltraGridRow Height="">
                    
<cells>
<igtbl:UltraGridCell Text="☆聊ゾ聊☆ 24"></igtbl:UltraGridCell>
<igtbl:UltraGridCell Text="24"></igtbl:UltraGridCell>
</cells>
                
</igtbl:UltraGridRow>
                
<igtbl:UltraGridRow Height="">
                    
<cells>
<igtbl:UltraGridCell Text="☆聊ゾ聊☆ 25"></igtbl:UltraGridCell>
<igtbl:UltraGridCell Text="25"></igtbl:UltraGridCell>
</cells>
                
</igtbl:UltraGridRow>
            
</Rows>
            
<DropDownLayout AllowSorting="OnClient" BorderCollapse="Separate" DropdownHeight="500px"
                DropdownWidth
="600px" GridLines="Horizontal" HeaderClickAction="SortSingle" RowHeightDefault="20px"
                Version
="4.00">
                
<HeaderStyle BorderStyle="None" CssClass="igWebComboDropDownGridHeaderBlack2k7">
                    
<BorderDetails WidthLeft="0px" WidthTop="0px" />
                
</HeaderStyle>
                
<Images ImageDirectory="~/ig_common/20063CLR20/Styles/Office2007Black/WebCombo/">
                
</Images>
                
<RowSelectorStyle CssClass="igwgRowSlctrBlack2k7">
                
</RowSelectorStyle>
                
<ImageUrls ImageDirectory="~/ig_common/20063CLR20/Styles/Office2007Black/WebCombo/" />
                
<RowAlternateStyle CssClass="igwgRowAltBlack2k7">
                
</RowAlternateStyle>
                
<FrameStyle CssClass="igWebComboDropDownFrameBlue2k7" Cursor="Default" Height="500px"
                    Width
="600px">
                
</FrameStyle>
                
<RowStyle CssClass="igwgRowBlack2k7">
                    
<BorderDetails WidthLeft="0px" WidthTop="0px" />
                
</RowStyle>
                
<SelectedRowStyle CssClass="igwgRowSelBlack2k7" />
            
</DropDownLayout>
            
<Columns>
                
<igtbl:UltraGridColumn HeaderText="姓名">
                    
<header caption="姓名"></header>
                
</igtbl:UltraGridColumn>
                
<igtbl:UltraGridColumn HeaderText="年龄">
                    
<header caption="年龄">
<RowLayoutColumnInfo OriginX="1"></RowLayoutColumnInfo>
</header>
                    
<footer>
<RowLayoutColumnInfo OriginX="1"></RowLayoutColumnInfo>
</footer>
                
</igtbl:UltraGridColumn>
            
</Columns>
        
</igcmbo:WebCombo>
        
&nbsp;&nbsp;</div>
    
</form>
</body>
</html>
     七、保存项目,运行。在组合框的下拉列表里可以看到一个表格,表格中的行可以被选中。

posted on 2007-02-08 11:39  ☆聊ゾ聊☆  阅读(4077)  评论(15编辑  收藏  举报

导航