WPF中如何从数据库读取数据在Grid自动生成UserControl（一行对应一个控件）

你当前手动在C#代码中创建Grid、Border、TextBlock等UI元素、手动计算行列位置的写法，完全违背了MVVM的职责分离原则——业务逻辑层不应该直接操作UI元素，所有UI布局、渲染逻辑都应该放在View层通过XAML配合数据绑定实现，不需要写复杂的后台UI创建逻辑。

期望实现的效果参考：

1. 拆分Model层 #

Model层只存纯业务数据，不要包含任何和UI渲染相关的方法：

// 对应数据库单条记录的纯数据模型
public class ItemData
{
    public string Title { get; set; }
    public string Description { get; set; }
    // 其他数据库字段按需添加
}

2. 实现ViewModel层 #

ViewModel只负责数据读取、业务逻辑处理，对外暴露可绑定的数据集合，完全不需要关心UI的渲染、排布逻辑：

// 需引入CommunityToolkit.Mvvm包，使用官方MVVM基类简化实现
public partial class ItemListViewModel : ObservableObject
{
    public ObservableCollection<ItemData> ItemList { get; } = new();

    public ItemListViewModel()
    {
        // 此处替换为你实际的数据库读取逻辑
        var dataFromDb = DbHelper.QueryAllItems();
        foreach (var item in dataFromDb)
        {
            ItemList.Add(item);
        }
    }
}

提示：ObservableCollection自带集合变更通知，集合新增/删除条目时UI会自动更新，不需要手动刷新控件。

3. 实现View层（零后台UI代码） #

你需要的两列自动排布、单条记录对应一个自定义UserControl的效果，不需要手动计算行号列号、动态添加行列定义，直接用WPF自带的ItemsControl配合布局面板就能实现：

3.1 先创建单条记录对应的UserControl #

新建ItemCardControl.xaml，对应你原来手动拼接的单条条目样式，所有内容直接写XAML，通过绑定拿数据：

<UserControl x:Class="YourApp.Views.ItemCardControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Border Style="{StaticResource ListElBorder}" Padding="12" Margin="8">
        <StackPanel>
            <TextBlock Text="{Binding Title}" FontWeight="SemiBold" FontSize="15"/>
            <TextBlock Text="{Binding Description}" TextWrapping="Wrap" Margin="0 6 0 0" FontSize="13" Opacity="0.8"/>
            <StackPanel Orientation="Horizontal" Margin="0 10 0 0">
                <!-- 操作按钮的Command直接绑定ViewModel中的对应命令即可 -->
                <Button Content="编辑" Padding="8 4" Margin="0 0 8 0"/>
                <Button Content="删除" Padding="8 4"/>
            </StackPanel>
        </StackPanel>
    </Border>
</UserControl>

3.2 主页面用ItemsControl实现自动布局 #

在承载列表的页面XAML中，给ItemsControl绑定ViewModel中的数据集合，将布局面板设置为2列的UniformGrid，并指定条目模板为上面写的自定义UserControl即可，所有排布逻辑WPF会自动处理：

<Window x:Class="YourApp.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:YourApp.ViewModels"
        xmlns:v="clr-namespace:YourApp.Views"
        Title="列表页" Height="600" Width="900">
    <Window.DataContext>
        <vm:ItemListViewModel/>
    </Window.DataContext>
    <ScrollViewer VerticalScrollBarVisibility="Auto">
        <ItemsControl ItemsSource="{Binding ItemList}">
            <!-- 配置布局为2列自动填充，自动按顺序排列条目，不需要手动计算行列 -->
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="2" HorizontalAlignment="Stretch"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <!-- 配置每个条目使用自定义的卡片控件渲染 -->
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <v:ItemCardControl/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</Window>

方案优势 #

• 完全符合MVVM职责分离要求：数据、业务逻辑、UI渲染完全解耦
• 不需要写任何手动创建UI、计算位置的冗余代码，WPF自动完成布局
• 后续调整需求成本极低：改列数直接改UniformGrid的Columns属性，改卡片样式直接改ItemCardControl，数据增删直接操作ViewModel的ItemList集合即可，UI自动同步
• 可维护性远高于手动拼接UI的写法，不会出现行列索引计算错误、内存泄漏等问题

如果需要更灵活的流式布局（比如不同条目高度自适应、自动换行），可以把UniformGrid换成WrapPanel设置ItemWidth即可，实现逻辑完全一致。

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