Xarmain的listview

转载自官网https://developer.xamarin.com/guides/xamarin-forms/getting-started/introduction-to-xamarin-forms/，建议还是看官网指南。

该ListView控件负责在屏幕上显示一个项目集合 - 每个项目ListView将包含在一个单元格中。默认情况下，a ListView将使用内置TextCell模板并呈现单行文本。

下面的代码示例显示了一个简单的ListView示例：

var listView = new ListView{    RowHeight = 40};listView.ItemsSource = new string []{    "Buy pears", "Buy oranges", "Buy mangos", "Buy apples", "Buy bananas"};Content = new StackLayout{    VerticalOptions = LayoutOptions.FillAndExpand,    Children = { listView }};以下屏幕截图显示了结果ListView：

绑定到一个自定义的类

该ListView控件还可以使用默认TextCell模板显示自定义对象。
下面的代码示例显示了TodoItem该类：

public class TodoItem{    public string Name { get; set; }    public bool Done { get; set; }}

ListView可以按照以下代码示例中的说明填充该控件：

listView.ItemsSource = new TodoItem [] {    new TodoItem { Name = "Buy pears" },    new TodoItem { Name = "Buy oranges", Done=true} ,    new TodoItem { Name = "Buy mangos" },    new TodoItem { Name = "Buy apples", Done=true },    new TodoItem { Name = "Buy bananas", Done=true }};

可以创建一个绑定来设置由哪个TodoItem属性显示ListView，如以下代码示例所示：

listView.ItemTemplate = new DataTemplate(typeof(TextCell));listView.ItemTemplate.SetBinding(TextCell.TextProperty, "Name");

这将创建一个绑定，指定该TodoItem.Name属性的路径，并将导致以前显示的屏幕截图。

在ListView中选择一个项目

到到触摸在一个小区中的用户响应ListView，则ItemSelected事件应被处理，如在下面的代码示例表明：

listView.ItemSelected += async (sender, e) => {    await DisplayAlert("Tapped!", e.SelectedItem + " was tapped.", "OK");};

当包含在a中时NavigationPage，PushAsync可以使用该方法通过内置的后退导航来打开新的页面。该ItemSelected事件可以通过该e.SelectedItem属性访问与单元格关联的对象，将其绑定到新页面并使用显示新页面PushAsync，如以下代码示例所示：

listView.ItemSelected += async (sender, e) => {    var todoItem = (TodoItem)e.SelectedItem;    var todoPage = new TodoItemPage(todoItem); // so the new page shows correct data    await Navigation.PushAsync(todoPage);};

每个平台都以自己的方式实现内置的后向导航。有关更多信息，请参阅导航。

自定义单元格的外观

单元格的外观可以通过继承这个ViewCell类来定制，并且将这个类的类型设置为ItemTemplate属性ListView。
下面的屏幕截图中显示的单元格由一个Image和两个Label控件组成：

要创建这个自定义布局，ViewCell类应该被分类，如以下代码示例所示：

class EmployeeCell : ViewCell{    public EmployeeCell()    {        var image = new Image        {            HorizontalOptions = LayoutOptions.Start        };        image.SetBinding(Image.SourceProperty, new Binding("ImageUri"));        image.WidthRequest = image.HeightRequest = 40;        var nameLayout = CreateNameLayout();        var viewLayout = new StackLayout()        {           Orientation = StackOrientation.Horizontal,           Children = { image, nameLayout }        };        View = viewLayout;    }    static StackLayout CreateNameLayout()    {        var nameLabel = new Label        {            HorizontalOptions= LayoutOptions.FillAndExpand        };        nameLabel.SetBinding(Label.TextProperty, "DisplayName");        var twitterLabel = new Label        {           HorizontalOptions = LayoutOptions.FillAndExpand,           Font = Fonts.Twitter        };        twitterLabel.SetBinding(Label.TextProperty, "Twitter");        var nameLayout = new StackLayout()        {           HorizontalOptions = LayoutOptions.StartAndExpand,           Orientation = StackOrientation.Vertical,           Children = { nameLabel, twitterLabel }        };        return nameLayout;    }}

代码执行以下任务：
● 它添加一个Image控件并将其绑定到ImageUri该Employee对象的属性。有关数据绑定的更多信息，请参阅数据绑定。
● 它创建一个StackLayout垂直方向来保存两个Label控件。的Label控制被绑定到DisplayName与Twitter所述属性Employee对象。
● 它创建一个StackLayout将主持现有Image和StackLayout。它将使用水平方向安排孩子。
一旦自定义单元格已经被创建，它就可以被一个ListView控件通过将其包装在a中来使用DataTemplate，如以下代码示例所示：

List<Employee> myListOfEmployeeObjects = GetAListOfAllEmployees();var listView = new ListView{    RowHeight = 40};listView.ItemsSource = myListOfEmployeeObjects;listView.ItemTemplate = new DataTemplate(typeof(EmployeeCell));

此代码将提供List的Employee到ListView。每个单元格将使用EmployeeCell该类呈现。该ListView会的传递Employee对象给EmployeeCell它的BindingContext。

使用XAML创建和自定义列表

ListView下面的代码示例演示了上一节中的XAML等价物：

<?xml version="1.0" encoding="utf-8" ?><ContentPage xmlns="http://xamarin.com/schemas/2014/forms"             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"             xmlns:local="clr-namespace:XamarinFormsXamlSample;assembly=XamarinFormsXamlSample"             xmlns:constants="clr-namespace:XamarinFormsSample;assembly=XamarinFormsXamlSample"             x:Class="XamarinFormsXamlSample.Views.EmployeeListPage"             Title="Employee List">  <ListView x:Name="listView" IsVisible="false" ItemsSource="{x:Static local:App.Employees}" ItemSelected="EmployeeListOnItemSelected">    <ListView.ItemTemplate>      <DataTemplate>        <ViewCell>          <ViewCell.View>            <StackLayout Orientation="Horizontal">              <Image Source="{Binding ImageUri}" WidthRequest="40" HeightRequest="40" />              <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">                <Label Text="{Binding DisplayName}" HorizontalOptions="FillAndExpand" />                <Label Text="{Binding Twitter}" Font="{x:Static constants:Fonts.Twitter}"/>              </StackLayout>            </StackLayout>          </ViewCell.View>        </ViewCell>      </DataTemplate>    </ListView.ItemTemplate>  </ListView></ContentPage>

这个XAML定义了一个ContentPage包含a的ListView。ListView通过ItemsSource属性设置数据源。元素中的每一行的布局ItemsSource都是在ListView.ItemTemplate元素中定义的。