# 一步一步学习使用LiveBindings（10） LiveBindings绑定到漂亮的TCombobox

一步一步学习使用LiveBindings（10） LiveBindings绑定到漂亮的TCombobox

这一课，将演示如何绑定到TCombobox，这个控件通常用来给用户提供选项列表。它们具有比VCL控件较强的定制性，可以使用样式窗口对每一个项进行外观的定制。

如果读者已经看过《一步一步学习使用LiveBindings（9）》，那应该会比较熟悉这一课的案例，因为笔者将上一节的案例LiveBindings_BindFormat的源代码复制到了这一节作为起点。

在上一节的员工管理窗口中，有一个Title职位字段，在真实的项目这个字段应该是一个下列拉表框供用户选择，而不是一个文本输入框，以避免用户胡乱输入太多的职位而无法管理，效果如下所示：

我们通常会有一个表来存放职位信息，接下来一步一步演示如何实现从数据源到Combobox下拉表列框的绑定。

1. 打开LiveBindings_BindFormat项目的主窗体，从工具栏中拖一个TProtoTypeBindSource控件到主窗体上，将其命名为TitleBindSource，然后右击该控件，打开Fields Editor，定义如下的几个字段和生成器。

几个字段的作用如下：

• ContactTitle：职位名称
• TitleImageIndex:职位的图片索引，演示如何给Combobox绑定一张图片。
• TitleDescription：职位描述
• TitleColor:将用于职位的颜色。

2. 在主窗体上右击鼠标，从弹出的菜单中选择“LiveBinding Wizard...”，使用向导，选择“Link a Control with a field”菜单项，创一个新的TCombobox到数据源TitleBindSource的连接，指定FieldName为ContactTitle，向导会自动将Combobox控件的Synch与TitleBindSource的*进行连接，并有一个指向Item.Text的单向连接。

绑定的连接是一个类型为TLinkListControlToField连接类型，FireMonkey的ListBox、ListView都会使用这种类型来绑定数据。

设计器中的Combobox除了Synch之外，还有如下的几个可绑定类型：

• SelectedValue：当选中项时，SelectedValue返回的给其他数据源的数据。
• Item.Text：显示在Combobox中的项的文本。
• Item.ImageIndex：显示在Combobox的图片索引。
• Item.LookupData：SelectedValue将返回的值类型，也就是要搜寻的数据。

在这里需要将SelectedValue连接到EmployeeBindSource控件的Title字段，以便将当前选中的Contact Title更新到EmployeeBindSource的底层表。

在设计器中拖动SelectedValue到EmployeeBindSource控件的Title字段，设计器会弹出一个提示：

向导会删除Synch到*的连接，接下来将如下图连接Item.ImageIndex，并指定Item.LookupData到ContactTitle，以确保SelectedValue会返回职位名称。

3. 选中Combobox控件，指定其Images属性为一个TImageList，这样就会在列表项左侧显示图片。

最终效果如下所示：

4. 在代码部分，更新了EmployeeObjectU.pas，添加了一个新的类TEmployeeTitle，现附上更新后的代码

EmployeeObjectU.pas

unit EmployeeObjectU;

interface

uses
  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, System.StrUtils;

type
  TEmployee = class
  private
    FContactBitmap: TBitmap;      //联系人图片
    FContactName: string;         //联系人名称
    FTitle: string;               //职位
    FHireDate: TDate;             //雇佣日期
    FSalary: Integer;             //薪水
    FAvailNow: Boolean;           //是否在职
  public
    constructor Create(const NewName: string;
                       const NewTitle: string;
                       const NewHireDate: TDate;
                       const NewSalary: Integer;
                       const NewAvail: Boolean);
    property ContactBitmap: TBitmap read FContactBitmap write FContactBitmap;
    property ContactName: string read FContactName write FContactName;
    property Title: string read FTitle write FTitle;
    property HireDate: TDate read FHireDate write FHireDate;
    property Salary: Integer read FSalary write FSalary;
    property AvailNow: Boolean read FAvailNow write FAvailNow;
  end;

type
  TEmployeeTitle = class
  private
    FContactTitle: string;                 //职位名称
    FTitleColor: Cardinal;                 //显示颜以
    TTitleImageIndex: Integer;             //显示图标索引
    TTitleDescription: string;             //职位描述
  public
    constructor Create(const NewTitle: string;
                       const NewTitleDesc: string;
                       const NewTitleColor: Cardinal;
                       const NewImageIdx: Integer);
    property ContactTitle: string read FContactTitle write FContactTitle;
    property TitleColor: Cardinal read FTitleColor write FTitleColor;
    property TitleImageIndex: Integer read TTitleImageIndex write TTitleImageIndex;
    property TitleDescription: string read TTitleDescription write TTitleDescription;
  end;

implementation

{ TEmployee }

constructor TEmployee.Create(const NewName, NewTitle: string;
  const NewHireDate: TDate; const NewSalary: Integer; const NewAvail: Boolean);
var
  NewBitmap: TBitmap;
  ResStream: TResourceStream;
begin
  //将根据联系人名称姓来关联资源文件
  ResStream := TResourceStream.Create(HINSTANCE, 'Bitmap_' + LeftStr(NewName, Pos(' ', NewName) - 1), RT_RCDATA);
  try
    NewBitmap := TBitmap.Create;
    NewBitmap.LoadFromStream(ResStream);
  finally
    ResStream.Free;
  end;

  FContactName   := NewName;
  FTitle         := NewTitle;
  FContactBitmap := NewBitmap;       //来自资源的图片
  FHireDate      := NewHireDate;
  FSalary        := NewSalary;
  FAvailNow      := NewAvail;
end;

{ TEmployeeTitle }

constructor TEmployeeTitle.Create(const NewTitle, NewTitleDesc: string;
  const NewTitleColor:Cardinal;const NewImageIdx: Integer);
begin
  FContactTitle   := NewTitle;
  FTitleColor     := NewTitleColor;
  TTitleImageIndex := NewImageIdx;       //来自TImageList的图片
  TTitleDescription:= NewTitleDesc;
end;

end.

在主窗体中，为TitleBindSource的OnCreateAdapter事件添加了如下的代码来：

procedure TfrmMain.TitleBindSourceCreateAdapter(Sender: TObject;
  var ABindSourceAdapter: TBindSourceAdapter);
begin
  bsEmployeeTitle:= TListBindSourceAdapter<TEmployeeTitle>.Create(self, nil, True);
  //赋值给TBindSourceAdapter
  ABindSourceAdapter := bsEmployeeTitle;
end;

在FormCreate中关联了List.

procedure TfrmMain.FormCreate(Sender: TObject);
begin
  LoadData;  //加载数据
  //设置员工列表
  bsEmployee.SetList(FEmployeeList, False);
  bsEmployee.Active := True;
  //设置员工编号列表
  bsEmployeeTitle.SetList(FEmployeeTitleList, False);
  bsEmployeeTitle.Active := True;
end;

最后，通过处理LinkFillControlToField.OnFillingListItem事件，让其在填充列表项时，指定一个列表项的样式：

procedure TfrmMain.LinkFillControlToFieldFillingListItem(Sender: TObject;
  const AEditor: IBindListEditorItem);
begin
  //指定列表项的样式
  (AEditor.CurrentObject as TListBoxItem).StyleLookup :='listboxitembottomdetail';
end;

显示效果如下所示：

选择使用FireMonkey的程序员，一定时会被其强大的自定义样式定义所吸引的，在接下来的课程中，将会讨论如何自定义样式。