自定义单元格 - zLulus/My_Note GitHub Wiki

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 }
};

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

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

<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>