是否可以在.net maui 中使用行详细信息？

Question

我正在寻找一种在 DataGrid 中显示行详细信息的方法。

我是应用程序开发新手，希望在行中显示一些数据并在行详细信息中显示一些相关详细信息。有没有办法在.NET MAUI中实现这个？

图像显示了它大致的样子：

Answer 1

您可以使用

CollectionView

IsVisible

设置来隐藏/显示细节来近似：

// CompanyInfo.cs
public partial class CompanyInfo : ObservableObject
{
    [ObservableProperty]
    private string? _companyName;
    [ObservableProperty]
    private string? _contactFirstName;
    [ObservableProperty]
    private string? _contactLastName;
    [ObservableProperty]
    private string? _email;
    [ObservableProperty]
    private string? _phone;
    [ObservableProperty]
    private string? _salesPerson;
    [ObservableProperty]
    private bool? _isSelected = false;
}

<!-- MainPage.xaml -->
<ContentPage>
    <CollectionView ItemsSource="{Binding Companies}" SelectionMode="Single">
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="local:CompanyInfo">
                <VerticalStackLayout Spacing="20">
                    <HorizontalStackLayout Spacing="20">
                        <Label Text="{Binding CompanyName}"/>
                        <Label Text="{Binding ContactFirstName}"/>
                        <Label Text="{Binding ContactLastName}"/>
                    </HorizontalStackLayout>
                    <VerticalStackLayout Spacing="10" IsVisible="{Binding IsSelected}">
                        <Label Text="{Binding Email, StringFormat='Email: {0}'}"/>
                        <Label Text="{Binding Phone, StringFormat='Phone: {0}'}"/>
                        <Label Text="{Binding SalesPerson, StringFormat='Sales Person: {0}'}"/>
                    </VerticalStackLayout>
                </VerticalStackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

// MainPage.xaml.cs
public partial class MainPage : ContentPage
{
    public ObservableCollection<CompanyInfo> Companies { get; } = new ObservableCollection<CompanyInfo>(
        new CompanyInfo[]
        {
            new CompanyInfo { CompanyName = "A Bike Store", ContactFirstName = "Orlando", ContactLastName = "Gee", Email = "e1@bike", Phone = "555-0100", SalesPerson = "Keith Harris" },
            new CompanyInfo { CompanyName = "A Great Bicycle Company", ContactFirstName = "Jodan", ContactLastName = "Jacobson", Email = "e2@bike", Phone = "555-0101", SalesPerson = "Keith Harris" },
            new CompanyInfo { CompanyName = "Acceptable Sales & Service", ContactFirstName = "Elisabeth", ContactLastName = "Keyser", Email = "[email protected]", Phone = "656-555-0173", SalesPerson = @"adventure-works\jose1", IsSelected=true },
        }
    );

    public MainPage()
    {
        InitializeComponent();
        BindingContext = this;
    }
}