.NET Multi-platform App UI (.NET MAUI)的DataGrid控件

.NET MAUI并没有自带的DataGrid控件，所以我们采用的是TelerikUI 的DataGrid控件

适用于 .NET MAUI DataGrid 的 Telerik UI 是一个功能强大的控件，可用于在 .NET MAUI 应用程序中可视化和编辑表格表示的数据。

Internet 上的大多数数据都存储在数据库中的表中。Telerik UI for .NET MAUI DataGrid 对数据提供相同的抽象 - 它具有列和行，行和列的交集称为单元格。

当数据库中的数据被发送到客户端时，通常转换为业务对象（或所谓的 ），其中每个实例表示一个表行，对象的每个属性表示原始表中的一列。DataGrid 还支持交替使用行颜色，以便用户可以区分一行和另一行。ViewModel

DataGrid 优化的数据层支持快速分组、排序和过滤操作。用户界面对其行和单元格元素使用虚拟化，这意味着仅在需要时创建可视元素，并且仅针对当前可见的单元格创建可视元素。

Telerik .NET MAUI 网格的主要功能

定义控件

1. 设置 .NET MAUI 应用程序后，即可将 DataGrid 控件添加到页面。

• XAML

<span style="color:#656565"><span style="background-color:#f8f8f8"><span style="color:#333333"><span style="background-color:#f8f8f8"><code><span style="color:#000088"><telerik:RadDataGrid</span> <span style="color:#660066">x:Name</span><span style="color:#666600">=</span><span style="color:#008800">"dataGrid"</span><span style="color:#000088">/></span></code></span></span></span></span>

2. 添加以下命名空间：

• XAML

<span style="color:#656565"><span style="background-color:#f8f8f8"><span style="color:#333333"><span style="background-color:#f8f8f8"><code><span style="color:#000000">xmlns</span><span style="color:#666600">:</span><span style="color:#000000">telerik</span><span style="color:#666600">=</span><span style="color:#008800">"http://schemas.telerik.com/2022/xaml/maui"</span></code></span></span></span></span>

3. 通过在项目文件的方法中调用的扩展方法注册 Telerik 控件：Telerik.Maui.Controls.Compatibility.UseTelerikCreateMauiAppMauiProgram.cs

• C#

<span style="color:#656565"><span style="background-color:#f8f8f8"><span style="color:#333333"><span style="background-color:#f8f8f8"><code><span style="color:#000000">using </span><span style="color:#660066">Telerik</span><span style="color:#666600">.</span><span style="color:#660066">Maui</span><span style="color:#666600">.</span><span style="color:#660066">Controls</span><span style="color:#666600">.</span><span style="color:#660066">Compatibility</span><span style="color:#666600">;</span>

<span style="color:#000088">public</span> <span style="color:#000088">static</span> <span style="color:#000088">class</span> <span style="color:#660066">MauiProgram</span>
<span style="color:#666600">{</span>
    <span style="color:#000088">public</span> <span style="color:#000088">static</span> <span style="color:#660066">MauiApp</span> <span style="color:#660066">CreateMauiApp</span><span style="color:#666600">()</span>
    <span style="color:#666600">{</span>
        <span style="color:#000088">var</span><span style="color:#000000"> builder </span><span style="color:#666600">=</span> <span style="color:#660066">MauiApp</span><span style="color:#666600">.</span><span style="color:#660066">CreateBuilder</span><span style="color:#666600">();</span><span style="color:#000000">
        builder
            </span><span style="color:#666600">.</span><span style="color:#660066">UseTelerik</span><span style="color:#666600">()</span>
            <span style="color:#666600">.</span><span style="color:#660066">UseMauiApp</span><span style="color:#666600"><</span><span style="color:#660066">App</span><span style="color:#666600">>()</span>
            <span style="color:#666600">.</span><span style="color:#660066">ConfigureFonts</span><span style="color:#666600">(</span><span style="color:#000000">fonts </span><span style="color:#666600">=></span>
            <span style="color:#666600">{</span><span style="color:#000000">
                fonts</span><span style="color:#666600">.</span><span style="color:#660066">AddFont</span><span style="color:#666600">(</span><span style="color:#008800">"OpenSans-Regular.ttf"</span><span style="color:#666600">,</span> <span style="color:#008800">"OpenSansRegular"</span><span style="color:#666600">);</span>
            <span style="color:#666600">});</span>

        <span style="color:#000088">return</span><span style="color:#000000"> builder</span><span style="color:#666600">.</span><span style="color:#660066">Build</span><span style="color:#666600">();</span>
    <span style="color:#666600">}</span>
<span style="color:#666600">}</span>           </code></span></span></span></span>

可视化示例数据

DataGrid 提供 UI 虚拟化，因此它需要其可视父级为控件提供垂直或水平空间以适应控件。以下方案将测量具有无限宽度和高度约束的 DataGrid，虚拟化将不起作用：

• C#

<span style="color:#656565"><span style="background-color:#f8f8f8"><span style="color:#333333"><span style="background-color:#f8f8f8"><code><span style="color:#000088">public</span> <span style="color:#000088">class</span> <span style="color:#660066">Data</span>
<span style="color:#666600">{</span>
    <span style="color:#000088">public</span> <span style="color:#000088">string</span> <span style="color:#660066">Country</span> <span style="color:#666600">{</span><span style="color:#000000"> get</span><span style="color:#666600">;</span> <span style="color:#660066">set</span><span style="color:#666600">;</span> <span style="color:#666600">}</span>
    <span style="color:#000088">public</span> <span style="color:#000088">string</span> <span style="color:#660066">Capital</span> <span style="color:#666600">{</span><span style="color:#000000"> get</span><span style="color:#666600">;</span> <span style="color:#660066">set</span><span style="color:#666600">;</span> <span style="color:#666600">}</span>
<span style="color:#666600">}</span></code></span></span></span></span>

创建自定义对象集合后，必须将其分配给 DataGrid 的属性：ItemsSource

• C#

<span style="color:#656565"><span style="background-color:#f8f8f8"><span style="color:#333333"><span style="background-color:#f8f8f8"><code><span style="color:#000088">this</span><span style="color:#666600">.</span><span style="color:#000000">dataGrid</span><span style="color:#666600">.</span><span style="color:#660066">ItemsSource</span> <span style="color:#666600">=</span> <span style="color:#000088">new</span> <span style="color:#660066">List</span><span style="color:#666600"><</span><span style="color:#660066">Data</span><span style="color:#666600">></span>
<span style="color:#666600">{</span>
    <span style="color:#000088">new</span> <span style="color:#660066">Data</span> <span style="color:#666600">{</span> <span style="color:#660066">Country</span> <span style="color:#666600">=</span> <span style="color:#008800">"India"</span><span style="color:#666600">,</span> <span style="color:#660066">Capital</span> <span style="color:#666600">=</span> <span style="color:#008800">"New Delhi"</span><span style="color:#666600">},</span>
    <span style="color:#000088">new</span> <span style="color:#660066">Data</span> <span style="color:#666600">{</span> <span style="color:#660066">Country</span> <span style="color:#666600">=</span> <span style="color:#008800">"South Africa"</span><span style="color:#666600">,</span> <span style="color:#660066">Capital</span> <span style="color:#666600">=</span> <span style="color:#008800">"Cape Town"</span><span style="color:#666600">},</span>
    <span style="color:#000088">new</span> <span style="color:#660066">Data</span> <span style="color:#666600">{</span> <span style="color:#660066">Country</span> <span style="color:#666600">=</span> <span style="color:#008800">"Nigeria"</span><span style="color:#666600">,</span> <span style="color:#660066">Capital</span> <span style="color:#666600">=</span> <span style="color:#008800">"Abuja"</span> <span style="color:#666600">},</span>
    <span style="color:#000088">new</span> <span style="color:#660066">Data</span> <span style="color:#666600">{</span> <span style="color:#660066">Country</span> <span style="color:#666600">=</span> <span style="color:#008800">"Singapore"</span><span style="color:#666600">,</span> <span style="color:#660066">Capital</span> <span style="color:#666600">=</span> <span style="color:#008800">"Singapore"</span> <span style="color:#666600">}</span>
<span style="color:#666600">};</span></code></span></span></span></span>

 

• 不同的列类型 - MAUI DataGrid 提供一组内置列，例如文本、布尔值、数字、ComboBox、日期、时间和模板。这些预定义的模板允许您处理不同的数据类型和用户方案，每个方案都有其特定的编辑器。

• 按需加载 - 在某些情况下，当控件已显示时，可能需要在 .NET MAUI DataGrid 中加载数据，因为这可以提高应用程序的性能。一旦用户滚动到最后一条可用记录，或者通过显示可自定义的按钮来启动更多数据项的加载，DataGrid 就会提供自动数据加载。

• 编辑 - 您可以允许用户编辑 .NET MAUI DataGrid 中显示的数据。根据列数据类型，相关编辑器允许最终用户在友好的环境中编辑内容。例如，如果其中一列是日期，则将使用日期选取器在日期字段中提供更改。

• 排序、筛选和分组 - 使用控件的便捷 API 对数据执行 SORT、FILTER 和 GROUP 操作。

• 选择模式 - DataGrid 具有单个或多个项目选择功能，并提供用于控制单元格或行选择单元的选项，从而启用您希望 MAUI 应用程序用户拥有的任何选择方案。

• 列设置 - .NET MAUI DataGrid 提供了许多与其列相关的功能和配置选项，以提供灵活且可用的用户体验。例如，您可以启用列重新排序和调整大小，允许用户锁定列并将重要信息始终放在顶部，以及向组件添加列页脚。

• 键入时搜索 - DataGrid 通过使用其内置搜索功能，提供了在其中搜索特定数据的功能。ItemsSource

• 行高 - 手动设置网格行高 应用行高来控制内容在格网单元格内的容纳方式。

• 行详细信息 - 表示行中数据的附加信息。

• 聚合支持 - 您可以使用公开的 API 来应用聚合函数。

• 键盘导航支持 - 在 MAUI DataGrid 控件中使用键盘键进行导航。此功能在 WinUI 和 MacCatalyst 上可用。

• 空模板 - 当控件没有任何数据（为 null 或集合为空）时，将在 DataGrid 中显示一个空模板。ItemsSource

• 命令 - DataGrid 允许您附加命令，例如 、 、 等，这些命令将在发生某些操作时执行。ColumnHeaderTapCellTapBeginEdit

• 灵活的样式 API - 如果您希望使用自己的样式，则可自定义 .NET MAUI DataGrid。

• 本地化支持 - 将“筛选”UI、“分组”面板等中显示的文本翻译成其他语言，以便您的应用程序可以适应不同的区域性。
   

  .NET MAUI DataGrid 入门

  本指南提供了通过将控件添加到项目来开始使用 Telerik UI for .NET MAUI DataGrid 所需的信息。

  最后，您将获得以下结果。

  

  先决条件

  在添加 DataGrid 之前，您需要：

• 设置 .NET MAUI 应用程序。

• 下载适用于 .NET MAUI 的 Telerik UI。

• 安装适用于 .NET MAUI 的 Telerik UI。

• 将 DataGrid 定位在包装在 ScrollView 中的 ScrollView 中。StackLayout
• 将 DataGrid 定位在 ScrollView 中。

.NET MAUI DataGrid 定义列

Telerik UI for .NET MAUI DataGrid 提供了三种方法来定义不同的列：

手动列定义

使用内置的列自动生成并不适合所有方案。在这种情况下，您可以手动定义所需的列。定义列时，可以在多种列类型之间进行选择：

对于类型化列（Text、Numerical、Boolean、Date、Time 和 ComboBox），可以通过以下方式定义该列表示的基础数据对象的属性：

下面的示例演示 RadDataGrid 了各种类型的列。此外，这两个 PropertyName 和 DataMemberBinding 都用于不同的列，以设置每个列所表示的属性。

1. 使用以下代码片段在 XAML 中声明 a RadDataGrid ：

• XAML

<span style="color:#656565"><span style="background-color:#f8f8f8"><span style="color:#333333"><span style="background-color:#f8f8f8"><code><span style="color:#000088"><telerik:RadDataGrid</span> <span style="color:#660066">x:Name</span><span style="color:#666600">=</span><span style="color:#008800">"grid"</span> 
                     <span style="color:#660066">ItemsSource</span><span style="color:#666600">=</span><span style="color:#008800">"{Binding Clubs}"</span> 
                     <span style="color:#660066">AutoGenerateColumns</span><span style="color:#666600">=</span><span style="color:#008800">"False"</span><span style="color:#000088">></span>
    <span style="color:#000088"><telerik:RadDataGrid.BindingContext></span>
        <span style="color:#000088"><local:ViewModel</span> <span style="color:#000088">/></span>
    <span style="color:#000088"></telerik:RadDataGrid.BindingContext></span>
    <span style="color:#000088"><telerik:RadDataGrid.Columns></span>
        <span style="color:#000088"><telerik:DataGridTextColumn</span> <span style="color:#660066">PropertyName</span><span style="color:#666600">=</span><span style="color:#008800">"Name"</span> 
                                    <span style="color:#660066">HeaderText</span><span style="color:#666600">=</span><span style="color:#008800">"Name"</span><span style="color:#000088">></span>
            <span style="color:#000088"><telerik:DataGridTextColumn.CellContentStyle></span>
                <span style="color:#000088"><telerik:DataGridTextCellStyle</span> <span style="color:#660066">TextColor</span><span style="color:#666600">=</span><span style="color:#008800">"#018383"</span> 
                                               <span style="color:#660066">FontSize</span><span style="color:#666600">=</span><span style="color:#008800">"15"</span> 
                                               <span style="color:#660066">SelectedTextColor</span><span style="color:#666600">=</span><span style="color:#008800">"#A55200"</span><span style="color:#000088">/></span>   
            <span style="color:#000088"></telerik:DataGridTextColumn.CellContentStyle></span>
        <span style="color:#000088"></telerik:DataGridTextColumn></span>
        <span style="color:#000088"><telerik:DataGridNumericalColumn</span> <span style="color:#660066">DataMemberBinding</span><span style="color:#666600">=</span><span style="color:#008800">"{Binding StadiumCapacity, StringFormat='{0:N0}'}"</span> 
                                         <span style="color:#660066">HeaderText</span><span style="color:#666600">=</span><span style="color:#008800">"Stadium Capacity"</span><span style="color:#000088">/></span>
        <span style="color:#000088"><telerik:DataGridBooleanColumn</span> <span style="color:#660066">DataMemberBinding</span><span style="color:#666600">=</span><span style="color:#008800">"{Binding IsChampion, Converter={StaticResource BoolToValueConverter}}"</span> 
                                       <span style="color:#660066">HeaderText</span><span style="color:#666600">=</span><span style="color:#008800">"Champion"</span><span style="color:#000088">/></span>
        <span style="color:#000088"><telerik:DataGridDateColumn</span> <span style="color:#660066">PropertyName</span><span style="color:#666600">=</span><span style="color:#008800">"Established"</span> 
                                    <span style="color:#660066">HeaderText</span><span style="color:#666600">=</span><span style="color:#008800">"Date Established"</span><span style="color:#000088">/></span>
        <span style="color:#000088"><telerik:DataGridComboBoxColumn</span> <span style="color:#660066">PropertyName</span><span style="color:#666600">=</span><span style="color:#008800">"Championship"</span>
                                        <span style="color:#660066">HeaderText</span><span style="color:#666600">=</span><span style="color:#008800">"Championship"</span>
                                        <span style="color:#660066">ItemsSourcePath</span><span style="color:#666600">=</span><span style="color:#008800">"Championships"</span><span style="color:#000088">/></span> 
        <span style="color:#000088"><telerik:DataGridTemplateColumn</span> <span style="color:#660066">HeaderText</span><span style="color:#666600">=</span><span style="color:#008800">"Location"</span><span style="color:#000088">></span>
            <span style="color:#000088"><telerik:DataGridTemplateColumn.CellContentTemplate></span>
                <span style="color:#000088"><DataTemplate></span>
                    <span style="color:#000088"><Grid></span>
                        <span style="color:#000088"><VerticalStackLayout</span> <span style="color:#660066">InputTransparent</span><span style="color:#666600">=</span><span style="color:#008800">"True"</span><span style="color:#000088">></span>                                        
                                <span style="color:#000088"><Label</span> <span style="color:#660066">Text</span><span style="color:#666600">=</span><span style="color:#008800">"{Binding Country}"</span>
                                       <span style="color:#660066">TextColor</span><span style="color:#666600">=</span><span style="color:#008800">"#009688"</span>
                                       <span style="color:#660066">Margin</span><span style="color:#666600">=</span><span style="color:#008800">"0, 5, 0, 5"</span>
                                       <span style="color:#660066">HorizontalOptions</span><span style="color:#666600">=</span><span style="color:#008800">"Center"</span>
                                       <span style="color:#660066">VerticalTextAlignment</span><span style="color:#666600">=</span><span style="color:#008800">"Center"</span><span style="color:#000088">/></span>                                       
                            <span style="color:#000088"><Label</span> <span style="color:#660066">Text</span><span style="color:#666600">=</span><span style="color:#008800">"{Binding City}"</span>
                                   <span style="color:#660066">TextColor</span><span style="color:#666600">=</span><span style="color:#008800">"#80CBC4"</span>
                                   <span style="color:#660066">HorizontalOptions</span><span style="color:#666600">=</span><span style="color:#008800">"Center"</span>
                                   <span style="color:#660066">VerticalTextAlignment</span><span style="color:#666600">=</span><span style="color:#008800">"Center"</span>
                                   <span style="color:#660066">FontSize</span><span style="color:#666600">=</span><span style="color:#008800">"12"</span><span style="color:#000088">/></span>  
                        <span style="color:#000088"></VerticalStackLayout></span>
                    <span style="color:#000088"></Grid></span>
                <span style="color:#000088"></DataTemplate></span>
            <span style="color:#000088"></telerik:DataGridTemplateColumn.CellContentTemplate></span>
        <span style="color:#000088"></telerik:DataGridTemplateColumn></span>
        <span style="color:#000088"><telerik:DataGridNumericalColumn</span> <span style="color:#660066">DataMemberBinding</span><span style="color:#666600">=</span><span style="color:#008800">"{Binding Path=Revenue, StringFormat='{0:C}', TargetNullValue='N/A'}"</span>
                                         <span style="color:#660066">HeaderText</span><span style="color:#666600">=</span><span style="color:#008800">"Revenue (in millions)"</span><span style="color:#000088">/></span>
    <span style="color:#000088"></telerik:RadDataGrid.Columns></span>
<span style="color:#000088"></telerik:RadDataGrid></span></code></span></span></span></span>

2. 其中命名 telerik 空间如下：

• XAML

<span style="color:#656565"><span style="background-color:#f8f8f8"><span style="color:#333333"><span style="background-color:#f8f8f8"><code><span style="color:#000000">xmlns</span><span style="color:#666600">:</span><span style="color:#000000">telerik</span><span style="color:#666600">=</span><span style="color:#008800">"http://schemas.telerik.com/2022/xaml/maui"</span></code></span></span></span></span>

3. 该 ViewModel 类声明如下：

• C#

<span style="color:#656565"><span style="background-color:#f8f8f8"><span style="color:#333333"><span style="background-color:#f8f8f8"><code><span style="color:#000088">public</span> <span style="color:#000088">class</span> <span style="color:#660066">ViewModel</span>
<span style="color:#666600">{</span>
    <span style="color:#000088">private</span> <span style="color:#660066">ObservableCollection</span><span style="color:#666600"><</span><span style="color:#660066">Club</span><span style="color:#666600">></span><span style="color:#000000"> clubs</span><span style="color:#666600">;</span>

    <span style="color:#000088">public</span> <span style="color:#660066">ObservableCollection</span><span style="color:#666600"><</span><span style="color:#660066">Club</span><span style="color:#666600">></span> <span style="color:#660066">Clubs</span> <span style="color:#666600">=></span><span style="color:#000000"> clubs </span><span style="color:#666600">??</span> <span style="color:#666600">(</span><span style="color:#000000">clubs </span><span style="color:#666600">=</span> <span style="color:#660066">CreateClubs</span><span style="color:#666600">());</span>

    <span style="color:#000088">private</span> <span style="color:#660066">ObservableCollection</span><span style="color:#666600"><</span><span style="color:#660066">Club</span><span style="color:#666600">></span> <span style="color:#660066">CreateClubs</span><span style="color:#666600">()</span>
    <span style="color:#666600">{</span>
        <span style="color:#000088">return</span> <span style="color:#000088">new</span> <span style="color:#660066">ObservableCollection</span><span style="color:#666600"><</span><span style="color:#660066">Club</span><span style="color:#666600">></span>
        <span style="color:#666600">{</span>
            <span style="color:#000088">new</span> <span style="color:#660066">Club</span><span style="color:#666600">(</span><span style="color:#008800">"UK Liverpool "</span><span style="color:#666600">,</span> <span style="color:#000088">new</span> <span style="color:#660066">DateTime</span><span style="color:#666600">(</span><span style="color:#006666">1892</span><span style="color:#666600">,</span> <span style="color:#006666">1</span><span style="color:#666600">,</span> <span style="color:#006666">1</span><span style="color:#666600">),</span> <span style="color:#006666">54074</span><span style="color:#666600">,</span> <span style="color:#008800">"England"</span><span style="color:#666600">,</span> <span style="color:#008800">"Liverpool"</span><span style="color:#666600">,</span> <span style="color:#008800">"Premier League"</span><span style="color:#666600">,</span> <span style="color:#000088">null</span><span style="color:#666600">),</span>
            <span style="color:#000088">new</span> <span style="color:#660066">Club</span><span style="color:#666600">(</span><span style="color:#008800">"Manchester Utd."</span><span style="color:#666600">,</span> <span style="color:#000088">new</span> <span style="color:#660066">DateTime</span><span style="color:#666600">(</span><span style="color:#006666">1878</span><span style="color:#666600">,</span> <span style="color:#006666">1</span><span style="color:#666600">,</span> <span style="color:#006666">1</span><span style="color:#666600">),</span> <span style="color:#006666">74310</span><span style="color:#666600">,</span> <span style="color:#008800">"England"</span><span style="color:#666600">,</span> <span style="color:#008800">"Manchester"</span><span style="color:#666600">,</span> <span style="color:#008800">"Premier League"</span><span style="color:#666600">,</span> <span style="color:#006666">594.3</span><span style="color:#666600">)</span> <span style="color:#666600">{</span> <span style="color:#660066">IsChampion</span> <span style="color:#666600">=</span> <span style="color:#000088">true</span> <span style="color:#666600">},</span>
            <span style="color:#000088">new</span> <span style="color:#660066">Club</span><span style="color:#666600">(</span><span style="color:#008800">"Chelsea"</span><span style="color:#666600">,</span> <span style="color:#000088">new</span> <span style="color:#660066">DateTime</span><span style="color:#666600">(</span><span style="color:#006666">1905</span><span style="color:#666600">,</span> <span style="color:#006666">1</span><span style="color:#666600">,</span> <span style="color:#006666">1</span><span style="color:#666600">),</span> <span style="color:#006666">42055</span><span style="color:#666600">,</span> <span style="color:#008800">"England"</span><span style="color:#666600">,</span> <span style="color:#008800">"London"</span><span style="color:#666600">,</span><span style="color:#008800">"UEFA Champions League"</span><span style="color:#666600">,</span> <span style="color:#006666">481.3</span><span style="color:#666600">),</span>
            <span style="color:#000088">new</span> <span style="color:#660066">Club</span><span style="color:#666600">(</span><span style="color:#008800">"Barcelona"</span><span style="color:#666600">,</span> <span style="color:#000088">new</span> <span style="color:#660066">DateTime</span><span style="color:#666600">(</span><span style="color:#006666">1899</span><span style="color:#666600">,</span> <span style="color:#006666">1</span><span style="color:#666600">,</span> <span style="color:#006666">1</span><span style="color:#666600">),</span> <span style="color:#006666">99354</span><span style="color:#666600">,</span> <span style="color:#008800">"Spain"</span><span style="color:#666600">,</span> <span style="color:#008800">"Barcelona"</span><span style="color:#666600">,</span> <span style="color:#008800">"La Liga"</span><span style="color:#666600">,</span> <span style="color:#006666">540.5</span><span style="color:#666600">)</span>
        <span style="color:#666600">};</span>
    <span style="color:#666600">}</span>
<span style="color:#666600">}</span></code></span></span></span></span>

4. 以及用于以下用途 NotifyPropertyChangedBase 的命名空间：

• C#

<span style="color:#656565"><span style="background-color:#f8f8f8"><span style="color:#333333"><span style="background-color:#f8f8f8"><code><span style="color:#000000"> using </span><span style="color:#660066">Telerik</span><span style="color:#666600">.</span><span style="color:#660066">Maui</span><span style="color:#666600">.</span><span style="color:#660066">Controls</span></code></span></span></span></span>

• 自动 - 通过将属性设置为 AutoGenerateColumns True （默认值）。
• 手动 - 通过向 DataGrid Columns 的集合添加列并将 AutoGenerateColumns 属性设置为 False 。
• 混合 （Mixed） - 通过向 Columns 集合中添加列并设置 AutoGenerateColumns to True （默认值）。

  
  自动生成色谱柱

  默认情况下，DataGrid 将根据基础数据类型自动生成类型化列。例如，当您将 ItemsSource 的 RadDataGrid 设置为俱乐部的集合时（请参阅下面的示例代码），该控件将为 Club 对象的每个公共属性创建一个单独的列。

  例如，让我们有一个示例 Club 对象：

  • XAML

  <span style="color:#656565"><span style="background-color:#f8f8f8"><span style="color:#333333"><span style="background-color:#f8f8f8"><code><span style="color:#000088">public</span> <span style="color:#000088">class</span> <span style="color:#660066">Club</span>
  <span style="color:#666600">{</span> 
      <span style="color:#000088">public</span> <span style="color:#000088">string</span> <span style="color:#660066">Name</span> <span style="color:#666600">{</span> <span style="color:#000088">get</span><span style="color:#666600">;</span> <span style="color:#000088">set</span><span style="color:#666600">;</span> <span style="color:#666600">}</span>
      <span style="color:#000088">public</span> <span style="color:#660066">DateTime</span> <span style="color:#660066">Established</span> <span style="color:#666600">{</span> <span style="color:#000088">get</span><span style="color:#666600">;</span> <span style="color:#000088">set</span><span style="color:#666600">;</span> <span style="color:#666600">}</span>
      <span style="color:#000088">public</span> <span style="color:#000088">bool</span> <span style="color:#660066">IsChampion</span> <span style="color:#666600">{</span> <span style="color:#000088">get</span><span style="color:#666600">;</span> <span style="color:#000088">set</span><span style="color:#666600">;</span> <span style="color:#666600">}</span>
  <span style="color:#666600">}</span></code></span></span></span></span>

  通过自动列生成，DataGrid 将创建以下列：

• DataGridTextColumn Name 对于物业。
• DataGridDateColumn Established 对于物业。
• DataGridBooleanColumn IsChampion 对于物业。
• 文本列 - 表示将每个关联单元格的内容转换为 System.String 对象的列。
• 数值列 （Numerical Column） - 表示显示数值数据（ int 和 double 类型）的扩展 DataGridTextColumn 。
• 布尔列 - 显示布尔数据的扩展 DataGridTextColumn 实现。
• 日期列 （Date Column） - 显示 DateTime 类型为 的数据的扩展 DataGridTextColumn 。
• 时间列 （Time Column） - 表示显示类型的扩展 DataGridTextColumn TimeOfDay 。 DateTime
• ComboBox 列 - 表示扩展 DataGridTextColumn 的单元格值编辑器是 Telerik.Maui.Controls.RadComboBox 控件。
• 模板列 （Template Column） - 表示使用 来 DataTemplate 描述每个关联格网单元格的内容的列。
• ToggleRowDetails 列 - 表示允许用户显示和隐藏项目的行详细信息的列。
• PropertyName - 指定在列单元格中显示的数据对象的属性的名称。
• DataMemberBinding - 定义指向列单元格中显示的基础对象的数据成员的绑定。使用 DataMemberBinding ，您可以控制数据在 DataGrid 单元格中的格式和显示方式，例如，您可以添加字符串格式化程序或值转换器。
  
• 5. Club 和自定义对象：
  • C#

  <span style="color:#656565"><span style="background-color:#f8f8f8"><span style="color:#333333"><span style="background-color:#f8f8f8"><code><span style="color:#000088">public</span> <span style="color:#000088">class</span> <span style="color:#660066">Club</span> <span style="color:#666600">:</span> <span style="color:#660066">NotifyPropertyChangedBase</span>
  <span style="color:#666600">{</span>
      <span style="color:#000088">private</span> <span style="color:#000088">string</span><span style="color:#000000"> name</span><span style="color:#666600">;</span>
      <span style="color:#000088">private</span> <span style="color:#660066">DateTime</span><span style="color:#000000"> established</span><span style="color:#666600">;</span>
      <span style="color:#000088">private</span> <span style="color:#660066">int</span><span style="color:#000000"> stadiumCapacity</span><span style="color:#666600">;</span>
      <span style="color:#000088">private</span><span style="color:#000000"> bool isChampion</span><span style="color:#666600">;</span>
      <span style="color:#000088">private</span> <span style="color:#000088">string</span><span style="color:#000000"> country</span><span style="color:#666600">;</span>
      <span style="color:#000088">private</span> <span style="color:#000088">string</span><span style="color:#000000"> city</span><span style="color:#666600">;</span>
      <span style="color:#000088">private</span> <span style="color:#000088">string</span><span style="color:#000000"> championship</span><span style="color:#666600">;</span>
      <span style="color:#000088">private</span> <span style="color:#000088">double</span><span style="color:#666600">?</span><span style="color:#000000"> revenue</span><span style="color:#666600">;</span>
  
      <span style="color:#000088">public</span> <span style="color:#660066">Club</span><span style="color:#666600">(</span><span style="color:#000088">string</span><span style="color:#000000"> name</span><span style="color:#666600">,</span> <span style="color:#660066">DateTime</span><span style="color:#000000"> established</span><span style="color:#666600">,</span> <span style="color:#660066">int</span><span style="color:#000000"> stadiumCapacity</span><span style="color:#666600">,</span> <span style="color:#000088">string</span><span style="color:#000000"> country</span><span style="color:#666600">,</span> <span style="color:#000088">string</span><span style="color:#000000"> city</span><span style="color:#666600">,</span> <span style="color:#000088">string</span><span style="color:#000000"> championship</span><span style="color:#666600">,</span> <span style="color:#000088">double</span><span style="color:#666600">?</span><span style="color:#000000"> revenue</span><span style="color:#666600">)</span>
      <span style="color:#666600">{</span>
          <span style="color:#660066">Name</span> <span style="color:#666600">=</span><span style="color:#000000"> name</span><span style="color:#666600">;</span>
          <span style="color:#660066">Established</span> <span style="color:#666600">=</span><span style="color:#000000"> established</span><span style="color:#666600">;</span>  
          <span style="color:#660066">StadiumCapacity</span> <span style="color:#666600">=</span><span style="color:#000000"> stadiumCapacity</span><span style="color:#666600">;</span>
          <span style="color:#660066">Country</span> <span style="color:#666600">=</span><span style="color:#000000"> country</span><span style="color:#666600">;</span>
          <span style="color:#660066">City</span> <span style="color:#666600">=</span><span style="color:#000000"> city</span><span style="color:#666600">;</span>
          <span style="color:#660066">Championship</span> <span style="color:#666600">=</span><span style="color:#000000"> championship</span><span style="color:#666600">;</span>
          <span style="color:#660066">Revenue</span> <span style="color:#666600">=</span><span style="color:#000000"> revenue</span><span style="color:#666600">;</span>
      <span style="color:#666600">}</span>
  
      <span style="color:#000088">public</span> <span style="color:#000088">string</span> <span style="color:#660066">Name</span>
      <span style="color:#666600">{</span><span style="color:#000000">
          get </span><span style="color:#666600">{</span> <span style="color:#000088">return</span> <span style="color:#000088">this</span><span style="color:#666600">.</span><span style="color:#000000">name</span><span style="color:#666600">;</span> <span style="color:#666600">}</span>
          <span style="color:#660066">set</span> <span style="color:#666600">{</span> <span style="color:#000088">this</span><span style="color:#666600">.</span><span style="color:#660066">UpdateValue</span><span style="color:#666600">(</span><span style="color:#000088">ref</span> <span style="color:#000088">this</span><span style="color:#666600">.</span><span style="color:#000000">name</span><span style="color:#666600">,</span><span style="color:#000000"> value</span><span style="color:#666600">);</span> <span style="color:#666600">}</span>
      <span style="color:#666600">}</span>
      <span style="color:#000088">public</span> <span style="color:#660066">DateTime</span> <span style="color:#660066">Established</span>
      <span style="color:#666600">{</span><span style="color:#000000">
          get </span><span style="color:#666600">{</span> <span style="color:#000088">return</span> <span style="color:#000088">this</span><span style="color:#666600">.</span><span style="color:#000000">established</span><span style="color:#666600">;</span> <span style="color:#666600">}</span>
          <span style="color:#660066">set</span> <span style="color:#666600">{</span> <span style="color:#000088">this</span><span style="color:#666600">.</span><span style="color:#660066">UpdateValue</span><span style="color:#666600">(</span><span style="color:#000088">ref</span> <span style="color:#000088">this</span><span style="color:#666600">.</span><span style="color:#000000">established</span><span style="color:#666600">,</span><span style="color:#000000"> value</span><span style="color:#666600">);</span> <span style="color:#666600">}</span>
      <span style="color:#666600">}</span>
  
      <span style="color:#000088">public</span> <span style="color:#660066">int</span> <span style="color:#660066">StadiumCapacity</span>
      <span style="color:#666600">{</span><span style="color:#000000">
          get </span><span style="color:#666600">{</span> <span style="color:#000088">return</span> <span style="color:#000088">this</span><span style="color:#666600">.</span><span style="color:#000000">stadiumCapacity</span><span style="color:#666600">;</span> <span style="color:#666600">}</span>
          <span style="color:#660066">set</span> <span style="color:#666600">{</span> <span style="color:#000088">this</span><span style="color:#666600">.</span><span style="color:#660066">UpdateValue</span><span style="color:#666600">(</span><span style="color:#000088">ref</span> <span style="color:#000088">this</span><span style="color:#666600">.</span><span style="color:#000000">stadiumCapacity</span><span style="color:#666600">,</span><span style="color:#000000"> value</span><span style="color:#666600">);</span> <span style="color:#666600">}</span>
      <span style="color:#666600">}</span>
  
      <span style="color:#000088">public</span><span style="color:#000000"> bool </span><span style="color:#660066">IsChampion</span>
      <span style="color:#666600">{</span><span style="color:#000000">
          get </span><span style="color:#666600">{</span> <span style="color:#000088">return</span> <span style="color:#000088">this</span><span style="color:#666600">.</span><span style="color:#000000">isChampion</span><span style="color:#666600">;</span> <span style="color:#666600">}</span>
          <span style="color:#660066">set</span> <span style="color:#666600">{</span> <span style="color:#000088">this</span><span style="color:#666600">.</span><span style="color:#660066">UpdateValue</span><span style="color:#666600">(</span><span style="color:#000088">ref</span> <span style="color:#000088">this</span><span style="color:#666600">.</span><span style="color:#000000">isChampion</span><span style="color:#666600">,</span><span style="color:#000000"> value</span><span style="color:#666600">);</span> <span style="color:#666600">}</span>
      <span style="color:#666600">}</span>
  
      <span style="color:#000088">public</span> <span style="color:#000088">string</span> <span style="color:#660066">Country</span>
      <span style="color:#666600">{</span><span style="color:#000000">
          get </span><span style="color:#666600">{</span> <span style="color:#000088">return</span> <span style="color:#000088">this</span><span style="color:#666600">.</span><span style="color:#000000">country</span><span style="color:#666600">;</span> <span style="color:#666600">}</span>
          <span style="color:#660066">set</span> <span style="color:#666600">{</span> <span style="color:#000088">this</span><span style="color:#666600">.</span><span style="color:#660066">UpdateValue</span><span style="color:#666600">(</span><span style="color:#000088">ref</span> <span style="color:#000088">this</span><span style="color:#666600">.</span><span style="color:#000000">country</span><span style="color:#666600">,</span><span style="color:#000000"> value</span><span style="color:#666600">);</span> <span style="color:#666600">}</span>
      <span style="color:#666600">}</span>
  
      <span style="color:#000088">public</span> <span style="color:#000088">string</span> <span style="color:#660066">City</span>
      <span style="color:#666600">{</span><span style="color:#000000">
          get </span><span style="color:#666600">{</span> <span style="color:#000088">return</span> <span style="color:#000088">this</span><span style="color:#666600">.</span><span style="color:#000000">city</span><span style="color:#666600">;</span> <span style="color:#666600">}</span>
          <span style="color:#660066">set</span> <span style="color:#666600">{</span> <span style="color:#000088">this</span><span style="color:#666600">.</span><span style="color:#660066">UpdateValue</span><span style="color:#666600">(</span><span style="color:#000088">ref</span> <span style="color:#000088">this</span><span style="color:#666600">.</span><span style="color:#000000">city</span><span style="color:#666600">,</span><span style="color:#000000"> value</span><span style="color:#666600">);</span> <span style="color:#666600">}</span>
      <span style="color:#666600">}</span>
  
      <span style="color:#000088">public</span> <span style="color:#000088">string</span> <span style="color:#660066">Championship</span>       
      <span style="color:#666600">{</span><span style="color:#000000">
          get </span><span style="color:#666600">{</span> <span style="color:#000088">return</span> <span style="color:#000088">this</span><span style="color:#666600">.</span><span style="color:#000000">championship</span><span style="color:#666600">;</span> <span style="color:#666600">}</span>
          <span style="color:#660066">set</span> <span style="color:#666600">{</span> <span style="color:#000088">this</span><span style="color:#666600">.</span><span style="color:#660066">UpdateValue</span><span style="color:#666600">(</span><span style="color:#000088">ref</span> <span style="color:#000088">this</span><span style="color:#666600">.</span><span style="color:#000000">championship</span><span style="color:#666600">,</span><span style="color:#000000"> value</span><span style="color:#666600">);</span> <span style="color:#666600">}</span>
      <span style="color:#666600">}</span>
  
      <span style="color:#000088">public</span> <span style="color:#000088">double</span><span style="color:#666600">?</span> <span style="color:#660066">Revenue</span>
      <span style="color:#666600">{</span><span style="color:#000000">
          get </span><span style="color:#666600">{</span> <span style="color:#000088">return</span> <span style="color:#000088">this</span><span style="color:#666600">.</span><span style="color:#000000">revenue</span><span style="color:#666600">;</span> <span style="color:#666600">}</span>
          <span style="color:#660066">set</span> <span style="color:#666600">{</span> <span style="color:#000088">this</span><span style="color:#666600">.</span><span style="color:#660066">UpdateValue</span><span style="color:#666600">(</span><span style="color:#000088">ref</span> <span style="color:#000088">this</span><span style="color:#666600">.</span><span style="color:#000000">revenue</span><span style="color:#666600">,</span><span style="color:#000000"> value</span><span style="color:#666600">);</span> <span style="color:#666600">}</span>
      <span style="color:#666600">}</span>
  
      <span style="color:#000088">public</span> <span style="color:#660066">List</span><span style="color:#008800"><string></span> <span style="color:#660066">Championships</span> <span style="color:#666600">=></span> <span style="color:#000088">new</span> <span style="color:#660066">List</span><span style="color:#008800"><string></span> <span style="color:#666600">{</span> <span style="color:#008800">"UEFA Champions League"</span><span style="color:#666600">,</span> <span style="color:#008800">"Premier League"</span><span style="color:#666600">,</span> <span style="color:#008800">"La Liga"</span> <span style="color:#666600">};</span>
  <span style="color:#666600">}</span></code></span></span></span></span>

  6. 将 添加到 BoolToValueConverter 页面的资源中：

  • XAML

  <span style="color:#656565"><span style="background-color:#f8f8f8"><span style="color:#333333"><span style="background-color:#f8f8f8"><code><span style="color:#000088"><telerik:BoolToValueConverter</span> <span style="color:#660066">x:Key</span><span style="color:#666600">=</span><span style="color:#008800">"BoolToValueConverter"</span> <span style="color:#660066">FalseValue</span><span style="color:#666600">=</span><span style="color:#008800">"No"</span> <span style="color:#660066">TrueValue</span><span style="color:#666600">=</span><span style="color:#008800">"Yes"</span> <span style="color:#000088">/></span></code></span></span></span></span>

  检查下图中的结果：

 色谱柱功能

在下面找到 DataGrid 的列功能的快速概述。

 列标题

列的顶部单元格称为 Header。其用途是为列设置标题，用于描述其中显示的数据。.NET MAUI DataGrid 提供完全可自定义的列标题，有关详细信息，请查看列标题。

 列单元格模板

DataGrid 提供了一组预定义的列类型，例如文本列、数字列等。如果需要扩展列的功能，例如自定义默认外观或添加更多 UI 元素，请使用公开的模板 - CellContentTemplate 和 CellEditTemplate 。有关详细信息，请参阅列单元格模板主题。

 列页脚

DataGrid 允许您显示适用于位于控件底部的特定行中的列的其他信息。此行由每列的单独页脚单元格组成。有关详细信息，请查看列页脚。

 调整列大小

默认情况下，Telerik .NET MAUI DataGrid 中的列可调整大小。该功能仅在桌面 - WinUI 和 MacCatalyst 上可用。有关详细信息，请参阅列大小调整主题。

 列宽

DataGrid 提供了一种灵活的机制，用于通过列和 SizeMode Width 属性设置列的宽度。有关详细信息，请参阅列宽主题。

 冷冻柱

可以通过将 IsFrozen 属性设置为列来固定 DataGrid 左侧的列。默认情况下，该值为 False 。当它设置为 True 混凝土柱时，它会使柱子冻结。有关详细信息，请参阅冻结列主题。

 列重新排序

DataGrid 公开了重新排序功能，允许用户拖放列并更改其顺序。

更多请见Telerik官网.NET MAUI DataGrid 文档 - 入门 - Telerik UI for .NET MAUI