显示简单列表的 Xamarin 表单

Question

我有一个对象列表，我只想为每个项目显示几个标签。

在 asp.net 时代，我会使用带有标签的中继器。

我意识到 Xamarin Forms 中没有中继器，还是有？

我尝试使用 Listview 但它不起作用，因为在 IOS 中它会创建空行直到屏幕结束。

有没有 ListView 的替代品？

这就是想法：

<repeater:RepeaterView 
          ItemsSource="{Binding MyObject}">

              <Label Text="{Binding Prop1 }"/>
               <Label Text="{Binding Prop2 }"/>

 </repeater:RepeaterView>

如何在 Xamarin Forms 中实现这一点？

是否有实现此目的的本地方法或仅使用 3rd 方库？

谢谢

Answer 1

您可以使用名为 RepeaterView 的自定义控件来完成此操作，那里有几个类似的实现，但是 Xamarin MVP Houssem Dellai 做了很好的示例如何使用 RepeaterView，还有示例如何包含 Tapped 事件。

这里是 XAML 的用法 sn-p:

 <repeater:RepeaterView ItemsSource="{Binding YourCollection}">

            <repeater:RepeaterView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Padding="20"
                              Margin="10">

                            <Grid.GestureRecognizers>
                                <TapGestureRecognizer Tapped="Student_Tapped" />
                            </Grid.GestureRecognizers>

                            <Label Text="{Binding SomePropertyOfYourModel}"
                                   FontSize="36" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </repeater:RepeaterView.ItemTemplate>
        </repeater:RepeaterView>

您可以在他的 GitHub 页面上找到完整示例：https://github.com/HoussemDellai/Xamarin-Forms-RepeaterView

他使用的 Nuget：https://www.nuget.org/packages/XamarinForms.Plugin.Repeater/

还有他解释的 Youtube 视频：https://www.youtube.com/watch?v=UhoJktzceak

31.12.2019 编辑：

Xamarin.Forms 现在支持可绑定布局，因此您可以查看官方对此类行为的支持。

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/bindable-layouts

Answer 2

BindableLayout 已经提到过，但我想在单独的答案中强调它。不再需要使用自定义“中继器”。

<StackLayout BindableLayout.ItemsSource="{Binding User.TopFollowers}"
             Orientation="Horizontal"
             ...>
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <controls:CircleImage Source="{Binding}"
                                  Aspect="AspectFill"
                                  WidthRequest="44"
                                  HeightRequest="44"
                                  ... />
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

Answer 3

我尝试使用 Listview 但它不起作用，因为在 IOS 中它会创建空行直到屏幕结束。

正如 Vahid 所说，我们可以创建自定义渲染器来解决此问题。

[assembly: ExportRenderer(typeof(ListView), typeof(CustomListViewRenderer))]
namespace twoWayBinding.iOS
{
    class CustomListViewRenderer : ListViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<ListView> e)
        {
            base.OnElementChanged(e);

            if (Control == null)
                return;

            var tableView = Control as UITableView;
            tableView.TableFooterView = new UIView(frame: CGRect.Empty);
        }
    }
}

参考How to remove empty cells in UITableView?

Answer 4

我尝试使用 Listview 但它不起作用，因为它在 IOS 中创建 空行直到屏幕结束。

如果这是您不使用 ListView 的唯一原因，有一个简单的解决方案：在 Forms 端插入一个空页脚。虽然 Cole Xia 的想法是正确的，但您可以在没有自定义渲染器的情况下做到这一点：

<ListView ...>
  <ListView.Footer>
    <StackLayout></StackLayout>
  </ListView.Footer>

如果页脚为空，您将获得观察到的空行。所以需要有非空页脚，空的 StackLayout 可以避免空行。