1. Create a new list page
- 1.1 Using List Controls
Add the ListView control in the layout file (.xaml) of the blank page , and define the Item style of the list item.
Program description: The following is a brief description of several used ListView attribute fields
RowHeight: The attribute specifies the row height. Generally, the row height is not specified directly. Through HasUnevenRows="True", the row height of the ListView can be adapted according to the content of the Item.
SeparatorColor: The property specifies the color of the dividing line.
SeparatorVisibility: Whether to display the dividing line.
HasUnevenRows: Whether to make the Item highly adaptive.
ItemsSource: Binding data source. The data source type is generally ObservableRangeCollection<T> type.
ListView.Behaviors: Specifies the operation command of the ListView, where the Item click event command of the ListView is specified.
ViewCell: Specify the Item style, and the ViewCell can only contain one child control. The controls in the ViewCell can directly bind the relevant fields of the Item data object. For example, if you want the Label to display the name of the student, the field representing the name in the "Student" data model is "StudentName", then specify the Text property of the Label as Text= "{Binding StudentName}" is enough.
CLabel: This is a custom Label that can limit the maximum number of displayed lines. You can use Label directly.
For other related fields, you can directly search for the definition on the official website, or the explanations of other Baidu netizens, which will not be repeated here.
<?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:project name.Customer"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="ProjectName.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 Building the data model
The data model I use here is defined as follows:
public class Game : BindableBase
{
public int GameId { get; set; }
//title
public string Subject { get; set; }
//icon
public ImageSource Thumb { get; set; }
// host
public string Manager { get; set; }
//contact number
public string Phone { get; set; }
//brief
public string Decription { get; set; }
//condition
public string Status { get; set; }
// status color
private Color _statusColor;
public Color StatusColor
{
get { return _statusColor; }
set { SetProperty(ref _statusColor, value); }
}
public Game()
{
}
}
- 1.3 Implement data logic
Program Description:
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 (InvigationService navigationService): base (navigationService)
{
Title = "Schedule";
IniData ();
}
//The schedule collection, that is, the data source
public ObservableCollection<Game> Items { get; set; }
public override void OnNavigatedTo(NavigationParameters parameters)
{
base.OnNavigatedTo(parameters);
}
//Initialization data
private void InitData() {
this.Items = new ObservableCollection<Game>();
this.Items.Add(new Game()
{
Subject = "Title Title Title Title",
Thumb = ImageSource.FromResource("ic_default.png", Assembly.GetExecutingAssembly()),
Phone = "Contact phone number: *****",
Description = "Brief Description: Example Example Example Example Example",
Manager = "Organizer: TBD",
Status = "In Progress",
StatusColor = Color.Green,
});
this.RaisePropertyChanged("Items");
}
// schedule
private Game _gameItem;
public Game GameItem
{
get { return _gameItem; }
set { SetProperty(ref _gameItem, value); }
}
//Click command of the schedule list
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;
//processing logic of click event
});
}
}
}
}
- 1.4 Running effect
