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元素中定义的。

来源：CSDN

作者：啵啵j

链接：https://blog.csdn.net/weixin_40132006/article/details/78701104

标签

listview

单元格