.NET MAUI如何在界面展示数据库记录？替代WinForms UserControl方案

替代WinForms UserControl的方案：ContentView #

MAUI里没有UserControl，但可以用ContentView实现完全相同的可复用自定义控件效果，用来封装标签、进度条这类组合元素。

具体实现步骤 #

1. 创建自定义ContentView（对应你的WinForms UserControl）

新建一个ContentView（比如命名为ProjectItemView），在XAML里定义需要的界面元素并绑定数据属性：

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourAppName.ProjectItemView">
    <Frame Margin="5" Padding="10" CornerRadius="8">
        <Grid ColumnDefinitions="*, Auto">
            <!-- 项目名称标签 -->
            <Label Grid.Column="0" Text="{Binding ProjectName}" FontSize="16" FontAttributes="Bold"/>
            <!-- 进度条 -->
            <ProgressBar Grid.Column="0" Grid.Row="1" Progress="{Binding CompletionRate}" Margin="0,5,0,0"/>
            <!-- 进度百分比标签 -->
            <Label Grid.Column="1" Grid.Row="1" Text="{Binding CompletionPercent}" Margin="10,5,0,0"/>
        </Grid>
    </Frame>
</ContentView>

代码后台直接继承ContentView即可：

namespace YourAppName;

public partial class ProjectItemView : ContentView
{
    public ProjectItemView()
    {
        InitializeComponent();
    }
}

2. 定义数据模型和ViewModel

先创建对应数据库表结构的项目数据模型：

public class Project
{
    public int Id { get; set; }
    public string ProjectName { get; set; }
    public float CompletionRate { get; set; } // 0-1区间的数值，对应进度条进度
    public string CompletionPercent => $"{CompletionRate * 100:F0}%";
}

再创建ViewModel负责从数据库加载数据（以SQLite-net-pcl为例，也可使用EF Core MAUI）：

public class ProjectsViewModel : INotifyPropertyChanged
{
    public ObservableCollection<Project> Projects { get; set; } = new();

    public ProjectsViewModel()
    {
        LoadProjectsFromDatabase();
    }

    private async void LoadProjectsFromDatabase()
    {
        // 替换为你的实际数据库查询逻辑
        var db = new SQLiteAsyncConnection("your_db_path.db3");
        var projects = await db.Table<Project>().ToListAsync();
        
        foreach (var project in projects)
        {
            Projects.Add(project);
        }
    }

    // 实现INotifyPropertyChanged接口（可通过CommunityToolkit.Mvvm的ObservableObject简化）
    public event PropertyChangedEventHandler? PropertyChanged;
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

提示：用CommunityToolkit.Mvvm库的ObservableObject基类，能省去手动编写INotifyPropertyChanged事件代码的麻烦。

3. 用CollectionView展示多个条目（自动生成新行）

在主页面XAML中，通过CollectionView绑定ViewModel的Projects集合，将自定义的ProjectItemView作为每个条目的模板：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppName"
             x:Class="YourAppName.MainPage">
    <ContentPage.BindingContext>
        <local:ProjectsViewModel/>
    </ContentPage.BindingContext>

    <CollectionView ItemsSource="{Binding Projects}"
                    Margin="10">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <local:ProjectItemView/>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

CollectionView默认是垂直列表布局，每个项目会自动生成一行，完全替代WinForms里循环添加UserControl到Panel的逻辑。

对应WinForms ListProjects方法的逻辑转换

假设你的WinForms代码类似这样：

private void ListProjects()
{
    var projects = GetProjectsFromDatabase(); // 数据库查询逻辑
    panelProjects.Controls.Clear();
    foreach (var project in projects)
    {
        var projectControl = new ProjectUserControl();
        projectControl.lblProjectName.Text = project.Name;
        projectControl.progressBar.Value = (int)(project.CompletionRate * 100);
        projectControl.lblPercent.Text = $"{project.CompletionRate * 100}%";
        panelProjects.Controls.Add(projectControl);
    }
}

在MAUI中，这段逻辑被数据绑定+CollectionView替代：ViewModel负责把数据库数据加载到ObservableCollection，CollectionView自动遍历集合，为每个项目创建ProjectItemView实例，通过绑定自动填充标签和进度条的值，无需手动创建和添加控件。

额外注意点 #

• 数据库操作优先用异步方法，避免阻塞UI线程
• 如果需要更复杂的布局（比如多行多列），可修改CollectionView的ItemsLayout属性，改用GridItemsLayout
• 可以给ContentView添加自定义绑定属性，让数据绑定更灵活

内容的提问来源于stack exchange，提问作者João Vitor Delaia