第十九章：集合视图（十一）

ListView和交互性
应用程序可以通过多种方式与其ListView进行交互：如果用户点击一个项目，ListView将触发ItemTapped事件，如果该项目先前未被选中，则还会触发ItemSelected事件。程序还可以使用SelectedItem属性定义数据绑定。 ListView有一个ScrollTo方法，它允许程序滚动ListView以使特定项可见。在本章的后面，您将看到ListView实现的刷新工具。
Cell本身定义了一个Tapped事件，但您可能会将该事件与TableView而不是ListView结合使用。 TextCell定义了与Button和ToolbarItem相同的Command和CommandParameter属性，但您也可能将这些属性与TableView结合使用。您还可以在单​​元格上定义上下文菜单;这将在本章后面的“上下文菜单”部分中进行演示。
Cell衍生物也可能包含一些交互式视图。 EntryCell和SwitchCell允许用户与Entry或Switch进行交互。您还可以在ViewCell中包含交互式视图。
InteractiveListView程序在其XAML文件中包含名为listView的ListView。 代码隐藏文件将该ListView的ItemsSource属性设置为List 类型的集合，其中包含100个ColorViewModel实例 - 第18章“MVVM”中描述的类，可以在Xamarin.FormsBook中找到。 工具包库。 ColorViewModel的每个实例都初始化为随机颜色：

public partial class InteractiveListViewPage : ContentPage
{
    public InteractiveListViewPage()
    {
        InitializeComponent();
        const int count = 100;
        List<ColorViewModel> colorList = new List<ColorViewModel>(count);
        Random random = new Random();
        for (int i = 0; i < count; i++)
        {
            ColorViewModel colorViewModel = new ColorViewModel();
            colorViewModel.Color = new Color(random.NextDouble(),
                                             random.NextDouble(),
                                             random.NextDouble());
            colorList.Add(colorViewModel);
        }
        listView.ItemsSource = colorList;
    }
}

XAML文件中的ListView包含一个使用ViewCell的数据模板，该视图包含三个Slider视图，一个BoxView和一些Label元素，用于显示色调，饱和度和亮度值，所有这些值都绑定到ColorViewModel类的属性：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:toolkit=
                 "clr-namespace:Xamarin.FormsBook.Toolkit;assembly=Xamarin.FormsBook.Toolkit"
             x:Class="InteractiveListView.InteractiveListViewPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness"
                    iOS="10, 20, 10, 0"
                    Android="10, 0"
                    WinPhone="10, 0" />
    </ContentPage.Padding>
    <ContentPage.Resources>
        <ResourceDictionary>
            <toolkit:ColorToContrastColorConverter x:Key="contrastColor" />
        </ResourceDictionary>
    </ContentPage.Resources>
 
    <ListView x:Name="listView"
              HasUnevenRows="True">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid Padding="0, 5">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
 
                        <Slider Value="{Binding Hue, Mode=TwoWay}"
                                Grid.Row="0" Grid.Column="0" />
 
                        <Slider Value="{Binding Saturation, Mode=TwoWay}"
                                Grid.Row="1" Grid.Column="0" />
 
                       <Slider Value="{Binding Luminosity, Mode=TwoWay}"
                               Grid.Row="2" Grid.Column="0" />
                       <ContentView BackgroundColor="{Binding Color}"
                                    Grid.Row="0" Grid.Column="1" Grid.RowSpan="3"
                                    Padding="10">
 
                           <StackLayout Orientation="Horizontal"
                                        VerticalOptions="Center">
                               <Label Text="{Binding Hue, StringFormat='{0:F2}, '}"
                                      TextColor="{Binding Color, 
                                                  Converter={StaticResource contrastColor}" />
 
                               <Label Text="{Binding Saturation, StringFormat='{0:F2}, '}"
                                      TextColor="{Binding Color, 
                                                  Converter={StaticResource contrastColor}" />
 
                              <Label Text="{Binding Luminosity, StringFormat='{0:F2}'}"
                                     TextColor="{Binding Color, 
                                                 Converter={StaticResource contrastColor}" />
                           </StackLayout>
                       </ContentView>
                   </Grid>
               </ViewCell>
           </DataTemplate>
        </ListView.ItemTemplate> 
    </ListView>
</ContentPage>

Label元素位于BoxView的顶部，因此应将它们制作成与背景形成鲜明对比的颜色。 这是通过ColorToContrastColorConverter类（也在Xamarin.FormsBook.Toolkit中）完成的，它通过使用标准公式计算颜色的亮度，然后转换为Color.Black用于浅色，Color.White用于暗色：

namespace Xamarin.FormsBook.Toolkit
{
    public class ColorToContrastColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, 
                              object parameter, CultureInfo culture)
        {
            return ColorToContrastColor((Color)value);
        }
        public object ConvertBack(object value, Type targetType, 
                                  object parameter, CultureInfo culture)
        {
            return ColorToContrastColor((Color)value);
        }
        Color ColorToContrastColor(Color color)
        {
            // Standard luminance calculation.
            double luminance = 0.30 * color.R +
                               0.59 * color.G +
                               0.11 * color.B;
            return luminance > 0.5 ? Color.Black : Color.White;
        }
    }
}

这是结果：

每个项目独立地允许您操纵三个Slider元素以选择新颜色，虽然这个示例可能看起来有点人为，但是涉及相同视觉树的集合的真实示例并不是不可想象的。 即使集合中只有几个项目，使用ListView显示屏幕上的所有项目并且不滚动也许是有意义的。 ListView是XAML提供的最强大的工具之一，用于弥补其缺少编程循环。