# dotNet.ReoGrid 扩展库 - ReoGrid 内置单元格类型

ReoGrid 中的单元格可以包含单元格体（cell body），单元格体是一个接口，用于在单元格中显示自定义内容并与用户输入交互。自定义单元格体类必须继承自 `CellBody` 或实现 `ICellBody` 接口。更多关于单元格体的信息，请参阅[自定义单元格](../cell/custom-cell/ "自定义单元格".html)。

以下是可用的内置单元格体类型：

| **类名**         | **示例**                                   | **描述**                                                                 |
|-------------------|-------------------------------------------|-------------------------------------------------------------------------|
| ButtonCell        | ![按钮](../images/361.png)         | 普通按钮                                                                |
| CheckBoxCell      | ![复选框](../images/363.png)       | 复选框，可在 .NET 布尔值 true 和 false 之间切换单元格数据               |
| RadioButtonCell   | ![单选按钮](../images/365.png)     | 单选按钮，可在 true 和 false 之间切换单元格数据，同组单选按钮可互相切换 |
| HyperlinkCell     | ![超链接](../images/362.png)      | 超链接，可自动导航到指定 URL                                            |
| DropDownListCell  | ![下拉列表](../images/367.png)    | 下拉单元格，提供候选列表让用户选择单个项目作为单元格数据                 |
| ProgressCell      | ![进度条](../images/368.png)      | 进度单元格，根据单元格数据 0~1 显示进度条                               |
| NegativeProgressCell | ![负进度条](../images/370.png)  | 负进度单元格，可根据单元格数据 0~1 显示正负进度条                       |
| Image             | ![图像](../images/369.png)        | 图像单元格，在单元格中显示图像                                          |
| ImageButton       | ![图像按钮](../images/389.png)    | 图像按钮单元格，在单元格按钮上显示图像                                  |
| DatePickerCell    | ![日期选择器](../images/381.png)  | 日期选择器单元格，允许用户从下拉日历中选择日期                          |

要使用内置单元格类型，需要导入以下命名空间：

```aardio
import dotNet.ReoGrid;
```

## 按钮

`ButtonCell` 类表示工作表中的按钮控件。

![按钮单元格](../images/359.png)

```aardio
sheet1[1,2] = ReoGrid.CellTypes.ButtonCell("你好");
```

单元格体通常使用单元格的数据作为其标签，以下代码同样有效：

```aardio
sheet1[1,2] = ReoGrid.CellTypes.ButtonCell();
sheet1[1,2] = "你好";
```

### 按钮点击事件

当用户点击按钮时，会触发 `Click` 事件。

```aardio
var button = ReoGrid.CellTypes.ButtonCell("你好");
button.Click = function(sender,event){
    winform.msgbox("按钮被点击了");
}
```

### 模拟点击

可以使用 `PerformClick` 方法模拟点击事件，例如：

```aardio
button.PerformClick();
```

### 更改按钮文本颜色

通过更改单元格样式可以更改按钮标签的颜色，例如以下代码将按钮标签改为蓝色：

```aardio
var cell = sheet1.Cells["C3"];
cell.Style.TextColor = ReoGrid.Graphics.SolidColor.Blue;
var button = ReoGrid.CellTypes.ButtonCell("你好");
cell.Body = button;
```

![蓝色按钮](../images/358.png)

## 超链接

超链接使用单元格的数据作为其导航 URL。

![超链接示例](../images/p02.png)

```aardio
sheet1[1,2] = ReoGrid.CellTypes.HyperlinkCell("http://www.google.com");
// 或者
sheet1[1,2] = ReoGrid.CellTypes.HyperlinkCell();
sheet1[1,2] = "http://www.google.com";
```

### 自动导航

构造函数的第二个参数 `autoNavigate` 指定用户点击此超链接时是否自动导航到指定 URL。例如：

```aardio
sheet1[1,2] = ReoGrid.CellTypes.HyperlinkCell("http://www.google.com/", true);
```

### 超链接点击事件

当用户点击此超链接时触发 Click 事件。

如果 `autoNavigate` 参数为 true，则在触发此事件之前会先执行 URL 导航。要避免这种情况，请将 `autoNavigate` 设置为 false。

```aardio
var link = ReoGrid.CellTypes.HyperlinkCell("http://myurl.com", false);
link.Click = function(sender,event){
    // 执行自定义事件处理
};
```

### 模拟点击

可以使用 `PerformClick` 方法模拟点击事件，例如：

```aardio
link.PerformClick();
```

## 复选框

`CheckBoxCell` 类表示工作表中的复选框，但它不提供要在工作表上显示的标签。通常需要在复选框单元格前后放置标签，如下图所示：

![复选框示例](../images/p03.png)

```aardio
var checkboxCell = ReoGrid.CellTypes.CheckBoxCell();
// 添加复选框和文本标签
sheet1["C1"] = { checkboxCell, "5分钟后自动销毁" };
```

### 获取和设置选中状态

直接使用布尔值设置单元格数据来选中或取消选中复选框，或使用 `IsChecked` 属性获取选中状态。

```aardio
// 选中
sheet1[1, 2] = true;
// 取消选中
sheet1[1, 2] = false;
// 从工作表获取选中状态
var isChecked = sheet1["C1"] ? true : false;
// 从复选框获取或设置选中状态
var isChecked = checkboxCell.IsChecked;
```

### 点击和选中状态改变事件

当用户点击复选框时触发 `Click` 事件。当用户在单元格内按空格键时不会触发 `Click` 事件。

```aardio
checkboxCell.Click = function(sender,event){
    // 执行事件处理
};
```

当用户通过鼠标或键盘更改复选框状态时触发 `CheckChanged` 事件。

```aardio
checkboxCell.CheckChanged = function(sender,event){
    // 执行事件处理
};
```

### 单元格数据改变事件

由于复选框单元格将单元格数据更新为布尔值。当复选框状态改变时，也会触发 `CellDataChanged` 事件。

```aardio
sheet1.CellDataChanged = function(sender,event){
    if(event.Cell.Position == "C1"){
        winform.msgbox("复选框状态已更改: " + event.Cell.Data);
    }
};
```

### 复选框的自定义绘制

要自定义复选框的外观而不是使用内置样式，
我们可以在 aardio 中调用 C# 代码编译一个继承自 `ReoGrid.CellTypes.CellBody` 的 .NET 类，
并重写 `OnContentPaint` 方法。

请参考：[自定义单元格](custom-cell.html)

以下示例使用选中和未选中的图像绘制复选框：

```aardio
import win.ui;
/*DSG{{*/
var winform = win.form(text="ReoGrid - 自定义单元格")
/*}}*/

import dotNet.ReoGrid; 
var grid = ReoGrid.ReoGridControl(winform);
var sheet1 = grid.CurrentWorksheet;
 
import dotNet.ReoGrid.Compiler;
var compiler = dotNet.ReoGrid.Compiler();

//C# 源代码
compiler.Source = /***
using System;
using unvell.ReoGrid;
using unvell.ReoGrid.CellTypes;
using unvell.ReoGrid.Events;
using unvell.ReoGrid.Rendering;
using unvell.ReoGrid.Graphics;
using unvell.ReoGrid.Interaction;
using System.Drawing;

namespace aardio.ReoGrid {
    public class MyCheckBox : CheckBoxCell {
        Image checkedImage, uncheckedImage;
        public MyCheckBox(string checkPath,string unCheckPath) {
            checkedImage = Image.FromFile(checkPath);
            uncheckedImage = Image.FromFile(unCheckPath);
        }
        protected override void OnContentPaint(CellDrawingContext dc) {
            if (this.IsChecked) {
                dc.Graphics.DrawImage(checkedImage, this.ContentBounds);
            } else {
                dc.Graphics.DrawImage(uncheckedImage, this.ContentBounds);
            }
        }
    }
}
***/

//编译 C# 代码并生成程序集
compiler.CompileOrFail("/MyCheckBox.dll");

//加载程序集
var dll = dotNet.loadFile("/MyCheckBox.dll");

//在 aardio 中创建 .NET 对象
var MyCheckBox = dll.import("aardio.ReoGrid.MyCheckBox");

//加载到单元格
sheet1["C1"] = MyCheckBox(
	io.fullpath("\images\check.jpg"),
	io.fullpath("\images\unheck.jpg"),
);
 
winform.show();
win.loopMessage();
```

![自定义复选框](../images/360.png)

## 单选按钮

`RadioButtonCell` 类表示工作表中的单选按钮，它继承自 `CheckBoxCell` 类，因此单选按钮单元格的用法与复选框几乎相同。

![单选按钮示例](../images/p04.png)

要添加单选按钮，使用以下代码：

```aardio
var radio = ReoGrid.CellTypes.RadioButtonCell();
sheet1["C3"] = radio;
```

### 单选按钮组

将 `RadioButtonCell` 添加到 `RadioGroup` 或通过其 `RadioGroup` 属性指定，将使同组中的单选按钮自动互相切换。

```aardio
var radioGroup = ReoGrid.RadioButtonGroup();

sheet1[10, 2] = {
    { ReoGrid.CellTypes.RadioButtonCell({ RadioGroup = radioGroup }), "苹果" },
    { ReoGrid.CellTypes.RadioButtonCell({ RadioGroup = radioGroup }), "橙子" },
    { ReoGrid.CellTypes.RadioButtonCell({ RadioGroup = radioGroup }), "香蕉" }
};
```

### 点击和选中状态改变事件

处理 `Click` 事件：

```aardio
radio.Click = function(sender,event){
    // 执行事件处理
};
```

处理组中所有单选按钮的 `CheckChanged` 事件：

```aardio
radioGroup.RadioButtons.forEach(function(rb){
    rb.CheckChanged = function(sender,event){
        winform.msgbox("选中的单选按钮: " + sheet1[rb.Cell.Row, rb.Cell.Column + 1]);
    };
});
```

### 单元格数据改变事件

由于单选按钮单元格将单元格数据更新为布尔值。当单选按钮状态改变时，也会触发 `CellDataChanged` 事件。有关示例代码，请参阅上面的复选框部分。

## 下拉列表

下拉列表单元格由 `DropdownListCell` 类表示。

![下拉列表示例](../images/206.png)

在工作表中添加下拉列表单元格的代码：

```aardio
var dropdown = ReoGrid.CellTypes.DropdownListCell(
    "苹果", "橙子", "香蕉", "梨", "南瓜", "樱桃", "椰子"
);
sheet1["B2"] = dropdown;
```

### 下拉列表单元格事件

下拉列表单元格的 `SelectedItemChanged` 事件用于从下拉面板中获取选定的项目。

```aardio
dropdown.SelectedItemChanged = function(sender,event){
    // 处理选定项改变
};
```

与复选框单元格类似，下拉列表单元格也会更新单元格数据，可以通过处理 `CellDataChanged` 事件获取选定的项目：

```aardio
sheet1.CellDataChanged = function(sender,event){
    // 处理单元格数据改变
};
```

了解更多关于[下拉列表单元格](../cell/dropdown-list-cell.html)的详细信息。

## 自定义下拉列表

下拉单元格可以自定义，可以将 Windows 窗体兼容的控件放入下拉面板中。

![自定义下拉列表示例](../images/166.png)

参阅[如何创建自定义下拉单元格](../how-to/create-custom-drop-down-cell/ "如何创建自定义下拉单元格".html)。

## 图像

![图像单元格示例](../images/p07.png)

添加图像单元格的代码：

```aardio
import System.Drawing;
var image = System.Drawing.Image.FromFile("C:\\path\\to\\image.png");
sheet1[2, 6] = ReoGrid.CellTypes.ImageCell(image);
```

> 关键词: 图像 图片 picture picturebox image 

### 图像单元格的视图模式

`ImageCell` 有一个名为 `ViewMode` 的属性，用于决定如何在单元格内显示图像：

```aardio
// 通过指定视图模式创建 ImageCell
var imgCell = ReoGrid.CellTypes.ImageCell(img, ReoGrid.ImageCellViewMode.Zoom);
sheet1["F6"] = imgCell;
// 或者直接更改属性
imgCell.ViewMode = ReoGrid.ImageCellViewMode.Clip;
```

### 对齐方式

单元格的水平和对齐样式可用于决定图像显示的位置：

```aardio
var cell = sheet1.Cells["F6"];
cell.Style.HAlign = ReoGrid.ReoGridHorAlign.Center;
cell.Style.VAlign = ReoGrid.ReoGridVerAlign.Middle;
```

## 图像按钮单元格

在单元格 C3 创建图像按钮的代码：

```aardio
sheet1["C3"] = ReoGrid.CellTypes.ImageButtonCell(
    System.Drawing.Image.FromFile("C:\\PathToFile\\Save-32.png")
);
```

结果：

![图像按钮示例](../images/390.png)

> 关键词: 图像 图片 图标 图标按钮 picture picturebox image 

## 日期选择器

内置的日期选择器单元格。![日期选择器示例](../images/271.png)

要使用免费版 ReoGrid 创建自己的日期选择器单元格，请参阅[如何创建日期选择器单元格](../how-to/create-date-picker-cell.html)。

## 调整单元格体大小

单元格体的大小由其父单元格和填充样式值决定，也可以通过合并多个单元格使单元格变大。

## Windows 窗体和 WPF 版本

ReoGrid 在 WPF 版本中支持部分单元格类型，如下所示。

| **内置单元格体类型**       | **Windows 窗体** | **WPF**       |
|----------------------------|------------------|---------------|
| 按钮                       | 是               | 是            |
| 复选框                     | 是               | 是            |
| 单选按钮                   | 是               | 是            |
| 超链接                     | 是               | 是            |
| 图像单元格                 | 是               | 是            |
| 图像按钮单元格             | 是               | 是            |
| 进度条单元格               | 是               | 是            |
| 负进度条单元格             | 是               | 是            |
| 下拉单元格                 | 是               | 未实现        |
| 下拉列表单元格             | 是               | 未实现        |
| 自定义单元格体             | 是               | 是            |

### 从演示项目了解更多

演示项目中的内置单元格类型示例。

Windows 窗体版本

![Windows 窗体示例](../images/62.png)

WPF 版本

![WPF 示例](../images/352.png)