一 、新建列表页
- 1.1 使用列表控件
在空白页面的布局文件(.xaml)中添加ListView控件,并定义列表项Item样式。
程序说明:下面简单说明几个用到的ListView的属性字段
RowHeight:属性指定行高,一般不直接指定行高,通过 HasUnevenRows="True"可让ListView的行高根据Item内容自适应。
SeparatorColor:属性指定分割线颜色。
SeparatorVisibility:是否显示分割线。
HasUnevenRows:是否让Item高度自适应。
ItemsSource:绑定数据源。数据源类型一般为ObservableRangeCollection<T>类型。
ListView.Behaviors:指定ListView的操作命令,此处指定了ListView的Item点击事件命令。
ViewCell:指定Item样式,且ViewCell中只能包含一个子控件。ViewCell中的控件可直接绑定Item数据对象的相关字段,例如现在想让Label显示学生的姓名,“学生”这个数据模型中表示姓名的字段为“StudentName”,则指定Label的Text属性为 Text=“{Binding StudentName}”即可。
CLabel:这是自定义的Label,可以限制最大显示行数,大家直接用Label即可。
其他相关字段,可以直接在官网搜索释义,或百度其他网友的解说,这里不做赘述。
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
xmlns:b="clr-namespace:Prism.Behaviors;assembly=Prism.Forms"
xmlns:local="clr-namespace:项目名称.Customer"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="项目名称.Views.HomePage">
<ListView x:Name="listGame" RowHeight="200" SeparatorColor="LightGray"
SeparatorVisibility="None" HasUnevenRows="True"
ItemsSource="{Binding Items}}">
<ListView.Behaviors>
<b:EventToCommandBehavior EventName="ItemTapped"
Command="{Binding ItemCommand}"[
EventArgsParameterPath="Item"/>
</ListView.Behaviors>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!--Item-->
<RelativeLayout >
<Frame Margin="15, 20, 15, 0" OutlineColor="Gray" CornerRadius="5" BackgroundColor="White"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=1,Constant=0}">
<RelativeLayout x:Name="item" Margin="0,0,0,0">
<local:CLabel x:Name="subject" MaxLine="2" Text="{Binding Subject}" TextColor="Black" FontSize="Small" Margin="0,10,0,0"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-65}"
/>
<Label x:Name="status" Text="{Binding Status}" FontSize="Small" TextColor="{Binding StatusColor}" Margin="0,10,0,0" WidthRequest="60" HorizontalTextAlignment="End"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-60}"
/>
<BoxView x:Name="divider" HeightRequest="0.5" Margin="0,10,0,10" BackgroundColor="LightGray"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=subject, Property=Height, Factor=1,Constant=10}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=0}"
/>
<Image x:Name="thumb" Source="{Binding Thumb}" HeightRequest="80" WidthRequest="107" Margin="0,10,0,0"
RelativeLayout.XConstraint = "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0,Constant=0}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=divider, Property=Y, Factor=1,Constant=1}"
/>
<Label x:Name="manager" Text="{Binding Manager}" FontSize="Micro" TextColor="Gray" Margin="0,10,0,0"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=thumb, Property=Width, Factor=1, Constant=10}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=divider, Property=Y, Factor=1,Constant=1}"
/>
<Label x:Name="phone" Text="{Binding Phone}" FontSize="Micro" TextColor="Gray" Margin="0,10,0,0"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=thumb, Property=Width, Factor=1, Constant=10}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=manager, Property=Y, Factor=1,Constant=10}"
/>
<local:CLabel x:Name="description" MaxLine="3" Text="{Binding Decription}" FontSize="Micro" TextColor="Gray" Margin="0,10,0,0"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=thumb, Property=Width, Factor=1, Constant=10}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=phone, Property=Y, Factor=1,Constant=10}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-117}"
/>
</RelativeLayout>
</Frame>
<Image Source="icon_game.png" HeightRequest="40" WidthRequest="40" Margin="5,10,0,0"
RelativeLayout.XConstraint = "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0,Constant=0}"/>
</RelativeLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
- 1.2 构建数据模型
这里我用到的数据模型定义如下:
public class Game : BindableBase
{
public int GameId { get; set; }
//标题
public string Subject { get; set; }
//图标
public ImageSource Thumb { get; set; }
//主办方
public string Manager { get; set; }
//联系电话
public string Phone { get; set; }
//简述
public string Decription { get; set; }
//状态
public string Status { get; set; }
//状态颜色
private Color _statusColor;
public Color StatusColor
{
get { return _statusColor; }
set { SetProperty(ref _statusColor, value); }
}
public Game()
{
}
}
- 1.3 实现数据逻辑
程序说明:
using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Reflection;
using Xamarin.Forms;
using ****.Widgets;
namespace ****.ViewModels
{
public class HomePageViewModel : ViewModelBase
{
public HomePageViewModel(INavigationService navigationService) : base(navigationService)
{
Title = "赛程";
IniData();
}
//赛程集合,即数据源
public ObservableCollection<Game> Items { get; set; }
public override void OnNavigatedTo(NavigationParameters parameters)
{
base.OnNavigatedTo(parameters);
}
//初始化数据
private void InitData() {
this.Items = new ObservableCollection<Game>();
this.Items.Add(new Game()
{
Subject = "标题标题标题标题",
Thumb = ImageSource.FromResource("ic_default.png", Assembly.GetExecutingAssembly()),
Phone = "联系电话:*****",
Decription = "简述:例子例子例子例子例子",
Manager = "主办方:待定",
Status = "进行中",
StatusColor = Color.Green,
});
this.RaisePropertyChanged("Items");
}
//赛程
private Game _gameItem;
public Game GameItem
{
get { return _gameItem; }
set { SetProperty(ref _gameItem, value); }
}
//赛程列表的点击命令
private DelegateCommand<object> _itemsCommand;
public DelegateCommand<object> ItemsCommand
{
get
{
return _itemsCommand = _itemsCommand ?? new DelegateCommand<object>((x) =>
{
var item = x as Game;
if (item == null) return;
//点击事件的处理逻辑
});
}
}
}
}
- 1.4 运行效果