Xamarin 将网格绑定到 ListView 中的 ViewCell

Question

我在代码中动态（必须是动态的）构建一个 Grid，并希望 Grid 成为 ListView 中唯一的东西。创建 Grid 的代码工作正常（经过测试），但现在我想将 Grid 放在 ListView 中，这样我就可以使用 ListView 的“下拉刷新”功能。

我的代码如下所示：

// ... Build the Grid

// Set the item source of the ListView to this one Grid
MatrixCells.ItemsSource = new ObservableCollection<Grid>(new List<Grid> { grid });

我的 Xaml 如下所示：

<ListView
    x:Name="MatrixCells"
    IsPullToRefreshEnabled="True"
    RefreshCommand="{Binding ReloadProjectCommand}"
    IsRefreshing="{Binding IsLoading, Mode=OneWay}">

    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <!-- WHAT GOES HERE ?? -->
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

我的问题是如何将 ListView 中的整个项目绑定到我创建的网格？请参阅“这里发生了什么？？”。

我试过了：

<Grid BindingContext="{Binding}" />

我知道这没有意义......还有其他一些事情，但无法让网格显示。 有什么想法吗？
谢谢。

Answer 1

这是刷新内容的另一种方式，您可以使用PullToRefresh 包。 用滚动视图包裹你的网格，定义你的命令并像这样使用

xmlns:controls="clr-namespace:Refractored.XamForms.PullToRefresh;assembly=Refractored.XamForms.PullToRefresh"

<controls:PullToRefreshLayout
      IsPullToRefreshEnabled="True"
      RefreshCommand="{Binding RefreshCommand}"
      IsRefreshing="{Binding IsBusy}"
      RefreshColor="Blue">
    <ScrollView
      HorizontalOptions="FillAndExpand"
      VerticalOptions="FillAndExpand">
        <Grid>....</Grid>
    </ScrollView>
</controls:PullToRefreshLayout>

您也可以查看github

Answer 2

它现在正在工作。我的 Xaml 如下所示：

<ListView
    x:Name="MatrixCells"
    HasUnevenRows="True"
    IsPullToRefreshEnabled="True"
    RefreshCommand="{Binding ReloadProjectCommand}"
    IsRefreshing="{Binding IsLoading, Mode=OneWay}">

    <ListView.ItemTemplate>
        <DataTemplate>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

相关代码如下：

        var matrix = GetMatrix();

        MatrixCells.ItemsSource = new List<Grid> { matrix };
        MatrixCells.ItemTemplate = new DataTemplate(() => new ViewCell { View = matrix, Height = MatrixCells.Height });

HasUnevenRows="True" 并将 Height 设置为与 new ViewCell { View = matrix, Height = MatrixCells.Height } 中的 ListView 相同的高度是非常很重要。

Answer 3

由于您有一个可观察的 Grid 集合，因此在您的 ViewCell 中将网格列表添加到 ViewCells 视图属性中，如下所示，确保您有 HasUnevenRows="True"您的 ListView 属性：

 <ListView.ItemTemplate>
    <DataTemplate>
        <ViewCell View="{Binding .}"/>                       
    </DataTemplate>
</ListView.ItemTemplate>

编辑

我刚查了一下，好像View不是可绑定属性，给您带来的不便，敬请见谅……

您可以做的是从 C# 端创建 DataTemplate 并将其分配给 ListView，如下所示：

public class WithDataTemplatePageCS : ContentPage
{
public WithDataTemplatePageCS()
{
    ...
    var people = new List<Person>
    {
        new Person { Name = "Steve", Age = 21, Location = "USA" },
        ...
    };

    var personDataTemplate = new DataTemplate(() =>
    {
        var grid = new Grid();
        ...
        var nameLabel = new Label { FontAttributes = FontAttributes.Bold };
        var ageLabel = new Label();
        var locationLabel = new Label { HorizontalTextAlignment = TextAlignment.End };

        nameLabel.SetBinding(Label.TextProperty, "Name");
        ageLabel.SetBinding(Label.TextProperty, "Age");
        locationLabel.SetBinding(Label.TextProperty, "Location");

        grid.Children.Add(nameLabel);
        grid.Children.Add(ageLabel, 1, 0);
        grid.Children.Add(locationLabel, 2, 0);

        return new ViewCell { View = grid };
    });

    Content = new StackLayout
    {
        Margin = new Thickness(20),
        Children = {
            ...
            new ListView { ItemsSource = people, ItemTemplate = personDataTemplate, Margin = new Thickness(0, 20, 0, 0) }
        }
    };
}
}

有关这方面的更多信息，请查看Micorsoft docs