.NET Maui桌面端如何放置两个Syncfusion DataGrid组件

• 核心思路：不需要新增独立的Content Page，直接在现有页面的布局容器中嵌入两个DataGrid组件，用Grid、VerticalStackLayout这类布局控件控制它们的排列方式即可。

• 步骤1：确认Syncfusion DataGrid依赖配置
  确保项目已安装Syncfusion.Maui.DataGrid NuGet包，并且在MauiProgram.cs中注册Syncfusion核心服务：

  using Syncfusion.Maui.Core.Hosting;
  
  var builder = MauiApp.CreateBuilder();
  builder
      .UseMauiApp<App>()
      .ConfigureSyncfusionCore()
      .ConfigureFonts(fonts =>
      {
          fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
      });
  
  return builder.Build();
  

• 步骤2：在页面XAML中添加布局与两个DataGrid
  以Grid布局为例（适合桌面端规整的行列划分），以下是完整示例：

  <?xml version="1.0" encoding="utf-8" ?>
  <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
               x:Class="YourProjectNamespace.MainPage">
  
      <!-- 用Grid分成两行，每行一个DataGrid，可根据需求调整比例 -->
      <Grid RowDefinitions="*,*" RowSpacing="12" Padding="16">
          <!-- 第一个DataGrid -->
          <syncfusion:SfDataGrid x:Name="FirstDataGrid"
                                 Grid.Row="0"
                                 AutoGenerateColumns="True"
                                 ItemsSource="{Binding FirstList}"/>
  
          <!-- 第二个DataGrid -->
          <syncfusion:SfDataGrid x:Name="SecondDataGrid"
                                 Grid.Row="1"
                                 AutoGenerateColumns="True"
                                 ItemsSource="{Binding SecondList}"/>
      </Grid>
  </ContentPage>
  

  如果需要水平排列两个DataGrid，只需将Grid的RowDefinitions替换为ColumnDefinitions="*,*"，然后给每个DataGrid设置Grid.Column属性即可。

• 步骤3：后台绑定数据源
  在对应页面的xaml.cs文件中准备两个数据源，直接绑定到DataGrid：

  using System.Collections.ObjectModel;
  
  namespace YourProjectNamespace;
  
  public partial class MainPage : ContentPage
  {
      public ObservableCollection<Product> FirstList { get; set; }
      public ObservableCollection<Order> SecondList { get; set; }
  
      public MainPage()
      {
          InitializeComponent();
          // 初始化第一个数据源
          FirstList = new ObservableCollection<Product>
          {
              new Product { Id = 1, Name = "笔记本电脑", Price = 5999 },
              new Product { Id = 2, Name = "无线鼠标", Price = 99 }
          };
          // 初始化第二个数据源
          SecondList = new ObservableCollection<Order>
          {
              new Order { OrderId = "ORD001", Customer = "张三", Amount = 6098 },
              new Order { OrderId = "ORD002", Customer = "李四", Amount = 198 }
          };
          BindingContext = this;
      }
  }
  
  // 示例模型类
  public class Product
  {
      public int Id { get; set; }
      public string Name { get; set; }
      public double Price { get; set; }
  }
  
  public class Order
  {
      public string OrderId { get; set; }
      public string Customer { get; set; }
      public double Amount { get; set; }
  }
  

• 额外提示：

  • 若需要自定义列，将AutoGenerateColumns设为False，手动添加Columns集合配置列信息
  • 桌面端可根据窗口尺寸调整布局容器的比例参数，优化适配效果
  • 确保Syncfusion的样式资源已正确加载，避免控件显示异常

内容的提问来源于stack exchange，提问作者user21591607