如何在MAUI应用中用列表数据初始化动态行数表格

1. 绑定ViewModel到页面 #

首先确保页面的BindingContext指向你的BuchungenViewModel，可通过后台代码或XAML设置：

后台代码（PZEAnwenderkorrekturen.xaml.cs） #

public PZEAnwenderkorrekturen()
{
    InitializeComponent();
    BindingContext = new BuchungenViewModel();
}

或在XAML中添加ViewModel命名空间引用并直接设置：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:vm="clr-namespace:MauiApp1" <!-- 替换为你的ViewModel命名空间 -->
             x:Class="MauiApp1.PZEAnwenderkorrekturen"
             Title="PZE Anwenderkorrekturen">
    <ContentPage.BindingContext>
        <vm:BuchungenViewModel />
    </ContentPage.BindingContext>
    <!-- 页面其他内容 -->
</ContentPage>

2. 替换表格区域的XAML结构 #

将原代码中<!-- The table should be here -->下方的空StackLayout替换为以下完整表格结构：

<!-- 固定表头 -->
<Grid BackgroundColor="{StaticResource Tertiary}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    
    <Label Grid.Column="0" Text="Tag" TextColor="Beige" 
           HorizontalTextAlignment="Center" VerticalTextAlignment="Center" 
           FontSize="Header" FontAttributes="Bold" Margin="2" />
    <Label Grid.Column="1" Text="Datum" TextColor="Beige" 
           HorizontalTextAlignment="Center" VerticalTextAlignment="Center" 
           FontSize="Header" FontAttributes="Bold" Margin="2" />
    <Label Grid.Column="2" Text="Fehlzeiten" TextColor="Beige" 
           HorizontalTextAlignment="Center" VerticalTextAlignment="Center" 
           FontSize="Header" FontAttributes="Bold" Margin="2" />
    <Label Grid.Column="3" Text="Von" TextColor="Beige" 
           HorizontalTextAlignment="Center" VerticalTextAlignment="Center" 
           FontSize="Header" FontAttributes="Bold" Margin="2" />
    <Label Grid.Column="4" Text="Bis" TextColor="Beige" 
           HorizontalTextAlignment="Center" VerticalTextAlignment="Center" 
           FontSize="Header" FontAttributes="Bold" Margin="2" />
    <Label Grid.Column="5" Text="Anw" TextColor="Beige" 
           HorizontalTextAlignment="Center" VerticalTextAlignment="Center" 
           FontSize="Header" FontAttributes="Bold" Margin="2" />
    <Label Grid.Column="6" Text="Soll" TextColor="Beige" 
           HorizontalTextAlignment="Center" VerticalTextAlignment="Center" 
           FontSize="Header" FontAttributes="Bold" Margin="2" />
    <Label Grid.Column="7" Text="GLZ" TextColor="Beige" 
           HorizontalTextAlignment="Center" VerticalTextAlignment="Center" 
           FontSize="Header" FontAttributes="Bold" Margin="2" />
    <Label Grid.Column="8" Text="Gesamt" TextColor="Beige" 
           HorizontalTextAlignment="Center" VerticalTextAlignment="Center" 
           FontSize="Header" FontAttributes="Bold" Margin="2" />
</Grid>

<!-- 滚动的动态行区域 -->
<ScrollView VerticalOptions="FillAndExpand" BackgroundColor="LightGray">
    <StackLayout BindableLayout.ItemsSource="{Binding Buchungs}">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <Grid HeightRequest="40" Margin="0,1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    
                    <!-- 绑定Buchung的各个属性到对应列 -->
                    <Label Grid.Column="0" Text="{Binding Tag}" TextColor="Black" 
                           HorizontalTextAlignment="Center" VerticalTextAlignment="Center" 
                           Margin="2" />
                    <Label Grid.Column="1" Text="{Binding Datum, StringFormat='{0:dd.MM.yyyy}'}" TextColor="Black" 
                           HorizontalTextAlignment="Center" VerticalTextAlignment="Center" 
                           Margin="2" />
                    <Label Grid.Column="2" Text="{Binding Fehlgrund}" TextColor="Black" 
                           HorizontalTextAlignment="Center" VerticalTextAlignment="Center" 
                           Margin="2" />
                    <Label Grid.Column="3" Text="{Binding Von}" TextColor="Black" 
                           HorizontalTextAlignment="Center" VerticalTextAlignment="Center" 
                           Margin="2" />
                    <Label Grid.Column="4" Text="{Binding Bis}" TextColor="Black" 
                           HorizontalTextAlignment="Center" VerticalTextAlignment="Center" 
                           Margin="2" />
                    <Label Grid.Column="5" Text="{Binding Anw}" TextColor="Black" 
                           HorizontalTextAlignment="Center" VerticalTextAlignment="Center" 
                           Margin="2" />
                    <Label Grid.Column="6" Text="{Binding Soll}" TextColor="Black" 
                           HorizontalTextAlignment="Center" VerticalTextAlignment="Center" 
                           Margin="2" />
                    <Label Grid.Column="7" Text="{Binding GLZ}" TextColor="Black" 
                           HorizontalTextAlignment="Center" VerticalTextAlignment="Center" 
                           Margin="2" />
                    <Label Grid.Column="8" Text="{Binding Gesamt}" TextColor="Black" 
                           HorizontalTextAlignment="Center" VerticalTextAlignment="Center" 
                           Margin="2" />
                </Grid>
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </StackLayout>
</ScrollView>

3. 关键修正说明 #

• 原实现错误：使用Orientation="Horizontal"的StackLayout绑定每行，且仅用单个Label绑定整个Buchung对象，无法展示多列数据。
• 正确逻辑：每个数据行是一个Grid，列数与表头完全对齐，分别绑定Buchung的各个属性。
• 用ScrollView包裹动态行区域，确保数据过多时可滚动查看。
• 对Datum属性添加StringFormat，将日期格式化为更友好的dd.MM.yyyy形式。

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