infragistics 教程-建站教程-锦华智联科技

Infragistics 是一家专注于提供企业级、高性能、功能丰富的 UI 控件的公司，其产品主要分为两大平台：.NET 和 JavaScript。

（图片来源网络，侵删）

第一部分：概览与入门

什么是 Infragistics？

Infragistics 提供了一套完整的 UI 组件库，旨在帮助开发者快速构建现代化、数据密集且用户体验出色的桌面、Web 和移动应用程序。

.NET 平台: 主要用于开发 Windows Forms (WinForms), WPF, UWP, 以及最新的 .NET MAUI 桌面和移动应用。
JavaScript 平台: 用于开发现代 Web 应用，包括 React, Angular, Vue 和原生 JavaScript/HTML5。

核心优势

功能强大: 控件功能非常全面，例如数据网格支持无限滚动、虚拟化、复杂聚合、Excel 导入导出等。
性能卓越: 针对大数据量进行了高度优化，确保应用的流畅性。
视觉效果: 提供多种内置主题和样式，可以轻松打造美观的界面。
完整文档与示例: 官方网站提供了详尽的 API 文档和大量的在线示例，学习曲线相对平缓。
企业级支持: 提供专业的技术支持服务。

第二部分：.NET 平台教程 (以 WinForms 为例)

WinForms 是 Infragistics 最经典的支持平台之一，教程资源也最丰富。

步骤 1：环境准备

安装 Visual Studio: 确保您安装了 Visual Studio (Visual Studio 2025/2025)。
获取 Infragistics 控件:
- 试用版: 访问 Infragistics 官网，下载试用版。
- NuGet 包: 在 Visual Studio 中，通过 NuGet 包管理器搜索 Infragistics.Win 并安装，这是最推荐的方式。
许可证: 运行时需要有效的许可证文件，在开发环境中，通常可以使用试用版许可证或开发者许可证。

步骤 2：创建第一个 WinForms 项目

打开 Visual Studio，创建一个新的 "Windows Forms App (.NET Framework)" 项目。
在 "工具箱" (Toolbox) 中，您应该能看到 Infragistics 的控件，如果没有，可以右键点击工具箱 -> "选择项" -> "COM 组件" 或 ".NET Framework 组件"，然后找到并添加 Infragistics 控件，更简单的方式是，从 NuGet 安装后，它们通常会自动出现在工具箱中。

步骤 3：使用 UltraGrid 控件显示数据

UltraGrid 是 Infragistics 的旗舰数据网格控件。

示例：将数据绑定到 UltraGrid

（图片来源网络，侵删）

拖放控件: 从工具箱中将一个 UltraGrid 控件拖放到窗体上。
创建数据源: 我们使用一个简单的 DataTable 作为数据源。

using System;
using System.Data;
using System.Windows.Forms;
namespace InfragisticsWinFormsDemo
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
        private void Form1_Load(object sender, EventArgs e)
        {
            // 1. 创建一个 DataTable 作为数据源
            DataTable dt = new DataTable("Employees");
            dt.Columns.Add("ID", typeof(int));
            dt.Columns.Add("Name", typeof(string));
            dt.Columns.Add("Department", typeof(string));
            dt.Columns.Add("HireDate", typeof(DateTime));
            // 2. 添加一些示例数据
            dt.Rows.Add(1, "张三", "研发部", new DateTime(2025, 5, 10));
            dt.Rows.Add(2, "李四", "市场部", new DateTime(2025, 8, 22));
            dt.Rows.Add(3, "王五", "研发部", new DateTime(2025, 1, 15));
            dt.Rows.Add(4, "赵六", "人事部", new DateTime(2025, 11, 30));
            // 3. 将 UltraGrid 的 DataSource 设置为 DataTable
            this.ultraGrid1.DataSource = dt;
            // 4. (可选) 进行一些基本配置
            this.ultraGrid1.DisplayLayout.Override.RowSelectors = DefaultableBoolean.True; // 显示行选择器
            this.ultraGrid1.DisplayLayout.Override.AllowRowFiltering = DefaultableBoolean.True; // 允许行筛选
        }
    }
}

运行项目: 按 F5 运行，您将看到一个已经填充好数据的网格。

步骤 4：进阶 - 使用 UltraChart 控件

UltraChart 用于创建各种图表。

拖放控件: 从工具箱中拖放一个 UltraChart 到窗体上。
绑定数据: 使用上面的 DataTable 来创建一个柱状图。

// 在 Form1_Load 方法中添加以下代码
// 1. 为图表准备数据：按部门统计员工数
var deptCount = dt.AsEnumerable()
                  .GroupBy(row => row.Field<string>("Department"))
                  .Select(g => new { Department = g.Key, Count = g.Count() });
// 2. 设置图表的数据源
this.ultraChart1.DataSource = deptCount;
// 3. 配置图表
this.ultraChart1.DataChart.Type = Infragistics.Win.UltraWinChart.DataChartType.Column; // 设置为柱状图
// 4. 绑定数据成员
this.ultraChart1.DataChart.Series[0].MemberMappings.Add("Count"); // Y轴值
this.ultraChart1.DataChart.Series[0].MemberMappings.Add("Department", "Category"); // X轴类别
// 5. 设置标题
this.ultraChart1.Titles[0].Text = "各部门员工人数统计";

第三部分：JavaScript 平台教程 (以 React 为例)

Infragistics 的 JavaScript 产品线名为 Ignite UI。

步骤 1：环境准备

Node.js 和 npm: 确保您已安装 Node.js 和 npm。
创建 React 项目: 使用 Create React App 或 Vite。
```
npx create-react-app my-ig-app
cd my-ig-app
```

安装 Ignite UI:

# 安装核心包和 React 组件
npm install igniteui-react

步骤 2：使用 IgxGrid 显示数据

IgxGrid 是 Ignite UI 的核心数据网格组件。

示例：将数据绑定到 IgxGrid

修改 App.tsx: 清除默认内容，并引入必要的模块。

import 'igniteui-react/dist/css/themes/infragistics/infragistics.theme.css';
import 'igniteui-react/dist/igniteui-react.min.css';
import { IgxGridComponent, IgxColumnComponent } from 'igniteui-react';
import { employees } from './data'; // 假设我们有一个数据文件
function App() {
  return (
    <div style={{ padding: '20px' }}>
      <h1>员工列表</h1>
      <IgxGridComponent
        primaryKey="id"
        autoGenerateColumns="false"
        height="500px"
        data={employees}
      >
        <IgxColumnComponent field="id" header="ID" width="10%"></IgxColumnComponent>
        <IgxColumnComponent field="name" header="姓名" width="20%"></IgxColumnComponent>
        <IgxColumnComponent field="department" header="部门" width="20%"></IgxColumnComponent>
        <IgxColumnComponent field="hireDate" header="入职日期" width="20%" dataType="date"></IgxColumnComponent>
        <IgxColumnComponent field="isActive" header="在职" width="15%" dataType="boolean"></IgxColumnComponent>
      </IgxGridComponent>
    </div>
  );
}
export default App;

创建数据文件 src/data.ts:

// src/data.ts
export const employees = [
  { id: 1, name: '张三', department: '研发部', hireDate: new Date(2025, 4, 10), isActive: true },
  { id: 2, name: '李四', department: '市场部', hireDate: new Date(2025, 7, 22), isActive: true },
  { id: 3, name: '王五', department: '研发部', hireDate: new Date(2025, 0, 15), isActive: false },
  { id: 4, name: '赵六', department: '人事部', hireDate: new Date(2025, 10, 30), isActive: true }
];

运行项目:
```
npm start
```
您将在浏览器中看到一个功能齐全的数据网格,支持排序、筛选、分页等。

步骤 3：进阶 - 使用 IgxChart

IgxChart 用于在 React 应用中创建图表。

修改 App.tsx: 添加一个图表。

import 'igniteui-react/dist/css/themes/infragistics/infragistics.theme.css';
import 'igniteui-react/dist/igniteui-react.min.css';
import { IgxGridComponent, IgxColumnComponent } from 'igniteui-react';
import { IgxSparklineComponent } from 'igniteui-react'; // 引入图表组件
import { employees } from './data';
// ... (App 函数前面部分不变)
function App() {
  // 为图表准备数据
  const deptCounts = employees.reduce((acc, emp) => {
    acc[emp.department] = (acc[emp.department] || 0) + 1;
    return acc;
  }, {} as Record<string, number>);
  const chartData = Object.keys(deptCounts).map(dept => ({
    Department: dept,
    Count: deptCounts[dept]
  }));
  return (
    <div style={{ padding: '20px' }}>
      <h1>员工列表</h1>
      <IgxGridComponent
        primaryKey="id"
        autoGenerateColumns="false"
        height="500px"
        data={employees}
      >
        {/* ... 列定义 ... */}
      </IgxGridComponent>
      <h1 style={{ marginTop: '40px' }}>部门人数统计</h1>
      <IgxSparklineComponent
        width="100%"
        height="300px"
        dataSource={chartData}
        chartType="column" // 柱状图
        xMemberPath="Department"
        yMemberPath="Count"
      />
    </div>
  );
}
export default App;

第四部分：核心学习资源

官方资源是学习 Infragistics 的最佳途径。

官方文档与示例

.NET 平台:
- 产品页面: Infragistics .NET UI 控件
- 帮助文档: Infragistics UI 帮助 (按版本选择，内有详细的 API 参考和教程)
- 示例浏览器: 下载安装包后，会附带一个示例浏览器，里面有数百个可运行的示例代码。
JavaScript (Ignite UI) 平台:
- 产品页面: Ignite UI JavaScript 控件
- 官方文档: Ignite UI 文档 (这是最核心的资源，包含快速入门、API 参考、教程和交互式示例)
- GitHub 示例: Ignite UI GitHub 示例库 (包含大量基于不同框架的完整项目示例)

视频教程

YouTube 官方频道: 搜索 "Infragistics" 或 "Ignite UI"，官方会发布大量的功能演示、入门教程和高级技巧视频。
Pluralsight/Coursera: 这些平台有时也会有关于 Infragistics 的课程。

社区与支持

论坛: Infragistics 社区论坛 (遇到问题时，这里是寻求帮助和交流的最佳地方)。

总结与建议

明确平台: 首先确定您是在开发 .NET 应用还是 Web 应用。
从官方开始: 直接访问 Infragistics/Ignite UI 的官方文档和示例库，这是最权威、最及时的学习材料。
动手实践: 不要只看代码，亲手创建项目，拖拽控件，修改属性，绑定数据，这是最快的学习方式。
利用示例浏览器: 对于 .NET 开发者，示例浏览器是无价之宝，对于 JS 开发者，GitHub 上的示例项目是宝藏。
循序渐进: 先掌握基础控件（如 Grid, Combo Box），再尝试高级功能（如图表、调度器、数据可视化）。
关注主题: Infragistics 的主题系统非常强大，学会使用主题可以快速统一和美化你的应用界面。

希望这份指南能帮助您顺利上手 Infragistics！