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  ☆聊ゾ聊☆  阅读(4076)  评论(15)  编辑  收藏  举报

导航