第十九章:集合视图(三)

简介:

使用ListView渲染数据

让我们转到ListView,它是显示项目集合的主要视图,通常是相同类型的。 ListView始终在垂直列表中显示项目,并在必要时实现滚动。
ListView是唯一派生自ItemsView 的类,但是从该类继承它最重要的属性:IEnumerable类型的ItemsSource。对于该属性,程序设置可枚举的数据集合,并且它可以是任何类型的数据。因此,ListView是Model-View-ViewModel架构模式的View部分的主干之一。
ListView还支持单项选择。 ListView突出显示所选项目并使其可用作SelectedItem属性。请注意,此属性名为SelectedItem而不是SelectedIndex。该属性是object类型。如果ListView中当前未选择任何项,则该属性为null。当所选项更改时,ListView会触发ItemSelected事件,但通常您将使用与SelectedItem属性相关的数据绑定。
ListView定义了比Xamarin.Forms中的任何其他单个视图更多的属性。 本章的讨论从最重要的属性开始,然后逐步涵盖更隐蔽和不太常见的属性。
收藏和选择
ListViewList程序定义了一个显示17个Xamarin.Forms颜色值的ListView。 XAML文件实例化ListView,但将初始化留给代码隐藏文件:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ListViewList.ListViewListPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness"
                    iOS="10, 20, 10, 0"
                    Android="10, 0"
                    WinPhone="10, 0" />
    </ContentPage.Padding>
    <ListView x:Name="listView" />
 
</ContentPage>

此XAML文件的大部分用于设置Padding,以便ListView不会扩展到屏幕的左右边缘。 在某些情况下,您可能希望根据预期的最宽项目的宽度为ListView设置显式WidthRequest。
ListView的ItemsSource属性是IEnumerable类型,由数组和List类实现的接口,但默认情况下该属性为null。 与Picker不同,ListView不提供自己的集合对象。 那是你的责任。 ListViewList的代码隐藏文件将ItemsSource属性设置为使用Color值初始化的List 实例:

public partial class ListViewListPage : ContentPage
{
    public ListViewListPage()
    {
        InitializeComponent();
        listView.ItemsSource = new List<Color>
        {
            Color.Aqua, Color.Black, Color.Blue, Color.Fuchsia, 
            Color.Gray, Color.Green, Color.Lime, Color.Maroon,
            Color.Navy, Color.Olive, Color.Pink, Color.Purple, 
            Color.Red, Color.Silver, Color.Teal, Color.White, Color.Yellow 
        };
    }
}

当您运行此程序时,您会发现可以滚动项目并通过点击它来选择一个项目。 这些屏幕截图显示了如何在三个平台上突出显示所选项目:

201810201330180415
点击项目还会导致ListView同时触发ItemTapped和ItemSelected事件。 如果再次点击同一项,则会再次触发ItemTapped事件,但不会触发ItemSelected事件。 仅当SelectedItem属性更改时才会触发ItemSelected事件。
当然,这些物品本身并不是很吸引人。 默认情况下,ListView通过调用项目的ToString方法显示每个项目,这就是您在此ListView中看到的内容。 但请不要担心:本章中关于ListView的大部分讨论都集中在使项目看起来完全符合您的要求!

目录
相关文章
|
Android开发 iOS开发
|
XML JavaScript Android开发
|
Android开发 iOS开发