自定义单元格

在cs代码中完成

自定义单元格

public class EmployeeCell : ViewCell { public EmployeeCell() { var image = new Image { HorizontalOptions = LayoutOptions.Start }; image.SetBinding(Image.SourceProperty, new Binding("ImageUri")); //设置宽高为40 image.WidthRequest = image.HeightRequest = 40; var nameLayout = CreateNameLayout(); var viewLayout = new StackLayout() { Orientation = StackOrientation.Horizontal, //加入图片、名称、推特 Children = { image, nameLayout } }; //把布局赋值给View View = viewLayout; } static StackLayout CreateNameLayout() { //新增Label var nameLabel = new Label { HorizontalOptions = LayoutOptions.FillAndExpand }; //绑定Employee的DisplayName属性 nameLabel.SetBinding(Label.TextProperty, "DisplayName"); var twitterLabel = new Label { HorizontalOptions = LayoutOptions.FillAndExpand }; twitterLabel.SetBinding(Label.TextProperty, "Twitter"); var nameLayout = new StackLayout() { HorizontalOptions = LayoutOptions.StartAndExpand, //设置为从上到下排列 Orientation = StackOrientation.Vertical, //将两个Label依次添加到Children中 Children = { nameLabel, twitterLabel } }; return nameLayout; } }

后台

List<Employee> EmployeeList = new List<Employee>(); EmployeeList.Add(new Employee() { DisplayName = "Jack", Twitter ="@fake4", ImageUri= "http://v1.qzone.cc/avatar/201406/24/21/03/53a977066f053731.jpg!200x200.jpg" }); EmployeeList.Add(new Employee() { DisplayName = "Tom", Twitter = "@mml1", ImageUri= "http://diy.qqjay.com/u2/2014/0628/da687c0fb5b3bb8cd31dec7d8865aea8.jpg" }); EmployeeList.Add(new Employee() { DisplayName = "Tony", Twitter = "@wood564", ImageUri= "http://v1.qzone.cc/avatar/201406/24/21/03/53a977066f053731.jpg!200x200.jpg" }); var listView = new ListView { RowHeight = 80 }; listView.ItemsSource = EmployeeList; //注意：此时指定模板为写好的EmployeeCell listView.ItemTemplate = new DataTemplate(typeof(EmployeeCell)); Content = new StackLayout { VerticalOptions = LayoutOptions.FillAndExpand, Children = { listView } };

Employee类

public class Employee { public string DisplayName { get; set; } public string Twitter { get; set; } public string ImageUri { get; set; } }

效果

  1

在xaml中完成

后台赋值

List<Employee> Employees = new List<Employee>(); //添加数据 BindingContext = Employees;

前端绑定对应属性名BindingContext已经赋值，ItemsSource直接绑定下来即可

<ListView x:Name="listView" ItemsSource="{Binding }"> <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}"/> </StackLayout> </StackLayout> </ViewCell.View> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView>

注意：Employee实不实现INotifyPropertyChanged接口，均可以展示，只是看你做不做双向绑定

示例代码

https://github.com/zLulus/NotePractice/tree/dev3/Xamarin.Forms/XamarinDemo/XamarinDemo/XamarinDemo/CustomizingCell

转载于:https://www.cnblogs.com/Lulus/p/8179077.html

相关资源：自定义单元格绘制组件DataGridViewCellPainter