Xamarin新手-项目创建四

一 、新建列表页

• 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 运行效果