XAML 如何使用存储在MAUI应用程序列表中的数据初始化表?

3z6pesqy  于 2023-05-04  发布在  其他
关注(0)|答案(1)|浏览(158)

在我的应用程序中,我有几个页面,在其中一个页面中,我想初始化一个保存一些数据的表。
我的问题是我不知道会有多少行。头部应该是静态的,从一开始,在头部后,我想要一个表,持有各自的列的信息。
目前XAML文件看起来像这样:

<?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"
             x:Class="MauiApp1.PZEAnwenderkorrekturen"
             Title="PZE Anwenderkorrekturen">
    <StackLayout VerticalOptions="StartAndExpand" HorizontalOptions="CenterAndExpand" Padding="5,5,5,5">
        <Label Text="Kommen/Gehen" FontSize="40" HorizontalOptions="CenterAndExpand" FontFamily="Bold" />
        <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" Spacing="10">
            <Button Text="KOMMEN" 
                    TextColor="Black"
                    FontAttributes="Bold"
                    FontSize="Large"
                    WidthRequest="250" 
                    HeightRequest="150"
                    BackgroundColor="DarkSeaGreen" 
                    Clicked="Button_Clicked" 
                    BorderColor="Black" 
                    BorderWidth="2"
                    CornerRadius="50"
                    Margin="10"/>
            <Button Text="GEHEN"
                    TextColor="Black"
                    FontAttributes="Bold"
                    FontSize="Large"
                    WidthRequest="250" 
                    HeightRequest="150" 
                    BackgroundColor="OrangeRed" 
                    Clicked="Button_Clicked_1" 
                    BorderColor="Black" 
                    BorderWidth="2"
                    CornerRadius="50"
                    Margin="10"/>
        </StackLayout>
            
        <!-- The table should be here -->
        <StackLayout BackgroundColor="LightGray">
        </StackLayout>
    
        <StackLayout BackgroundColor="LightGray">
            <Label Text="Hier ist der dritte Bereich"></Label>
        </StackLayout>

        <StackLayout BackgroundColor="LightGray">
            <Label Text="Hier ist der vierte Bereich"></Label>
        </StackLayout>

    </StackLayout>
</ContentPage>

所以我创建了一个新的Buchung类,如下所示:

public class Buchung
{
    public string Tag { get; set; }
    public DateTime Datum { get; set; }
    public string Von { get; set; }
    public string Bis { get; set; }
    public string Fehlgrund { get; set; }
    public string Anw { get; set; }
    public string Soll { get; set; }
    public string GLZ { get; set; }
    public string Gesamt { get; set; }
}

在我有了Buchung类之后,我开始在ViewModel中创建它的示例,如下所示:

public class BuchungenViewModel
{
    public ObservableCollection<Buchung> Buchungs { get; set; } = new ObservableCollection<Buchung>
    {
        new Buchung
        {
            Tag = "Montag",
            Datum = DateTime.Today,
            Von = "07:00",
            Bis ="17:00",
            Anw = "10:00",
            Soll = "08:00",
            GLZ = "02:00",
            Gesamt = "10:00"
        },
        new Buchung
        {
            Tag = "Dienstag",
            Datum = DateTime.Today.AddDays(1),
            Von = "09:00",
            Bis ="17:00",
            Anw = "08:00",
            Soll = "08:00",
            GLZ = "00:00",
            Gesamt = "08:00"
        },
        new Buchung
        {
            Tag = "Mittwoch",
            Datum = DateTime.Today.AddDays(2),
            Von = "07:00",
            Bis ="12:00",
            Anw = "05:00",
            Soll = "08:00",
            GLZ = "-03:00",
            Gesamt = "05:00"
        }
    };
}

表头应类似于以下内容:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
        
    <Grid.RowDefinitions>
        <RowDefinition Height="50"></RowDefinition>
    </Grid.RowDefinitions>
    
    <Label Grid.Row="0" Grid.Column="0" Text="Tag" TextColor="Beige" BackgroundColor="{StaticResource Tertiary}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="Header" FontAttributes="Bold" Margin="2,2,2,2"></Label>
    <Label Grid.Row="0" Grid.Column="1" Text="Datum" TextColor="Beige" BackgroundColor="{StaticResource Tertiary}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="Header" FontAttributes="Bold" Margin="2,2,2,2"></Label>
    <Label Grid.Row="0" Grid.Column="2" Text="Fehlzeiten" TextColor="Beige" BackgroundColor="{StaticResource Tertiary}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="Header" FontAttributes="Bold" Margin="2,2,2,2"></Label>
    <Label Grid.Row="0" Grid.Column="3" Text="Von" TextColor="Beige" BackgroundColor="{StaticResource Tertiary}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="Header" FontAttributes="Bold" Margin="2,2,2,2"></Label>
    <Label Grid.Row="0" Grid.Column="4" Text="Bis" TextColor="Beige" BackgroundColor="{StaticResource Tertiary}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="Header" FontAttributes="Bold" Margin="2,2,2,2"></Label>
    <Label Grid.Row="0" Grid.Column="5" Text="Anw" TextColor="Beige" BackgroundColor="{StaticResource Tertiary}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="Header" FontAttributes="Bold" Margin="2,2,2,2"></Label>
    <Label Grid.Row="0" Grid.Column="6" Text="Soll" TextColor="Beige" BackgroundColor="{StaticResource Tertiary}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="Header" FontAttributes="Bold" Margin="2,2,2,2"></Label>
    <Label Grid.Row="0" Grid.Column="7" Text="GLZ" TextColor="Beige" BackgroundColor="{StaticResource Tertiary}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="Header" FontAttributes="Bold" Margin="2,2,2,2"></Label>
    <Label Grid.Row="0" Grid.Column="8" Text="Gesamt" TextColor="Beige" BackgroundColor="{StaticResource Tertiary}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="Header" FontAttributes="Bold" Margin="2,2,2,2"></Label>
</Grid>

Jason提到了一个BindableLayout,所以我试了一下:

<StackLayout BindableLayout.ItemsSource="{Binding Buchungs}" Orientation="Horizontal">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Label Text="{Binding .}" TextColor="Black" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="Body" FontAttributes="None" Margin="2,2,2,2"></Label>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

但它仍然不起作用。如果有人能帮我,我会非常感激的。

edqdpe6u

edqdpe6u1#

在这里使用BindableLayout是一个很好的方法,正如Jason所推荐的。
您需要确保正确绑定数据。不是将.传递给绑定,这意味着整个对象,而是需要绑定到对象的特定属性,例如。Tag,因为LabelText属性需要的是string,而不是Buchung

<StackLayout BindableLayout.ItemsSource="{Binding Buchungs}" Orientation="Horizontal">
    <BindableLayout.ItemTemplate>
        <DataTemplate x:DataType="model:Buchung">
            <Label Text="{Binding Tag}" TextColor="Black" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="Body" FontAttributes="None" Margin="2,2,2,2"></Label>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

请注意,您可能希望将StackLayoutOrientation更改为Vertical,或者直接使用VerticalStackLayout并将HorizontalStackLayoutGrid放置在DataTemplate中,以水平放置数据的不同属性。
这只是为了显示数据。您仍然需要添加表格标题的布局。

相关问题