# 一步一步学习使用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

1. unit EmployeeObjectU;
3. interface
5. uses
6.   System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
7.   FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, System.StrUtils;
9. type
10.   TEmployee = class
11.   private
12.     FContactBitmap: TBitmap;      //联系人图片
13.     FContactName: string;         //联系人名称
14.     FTitle: string;               //职位
15.     FHireDate: TDate;             //雇佣日期
16.     FSalary: Integer;             //薪水
17.     FAvailNow: Boolean;           //是否在职
18.   public
19.     constructor Create(const NewName: string;
20.                        const NewTitle: string;
21.                        const NewHireDate: TDate;
22.                        const NewSalary: Integer;
23.                        const NewAvail: Boolean);
24.     property ContactBitmap: TBitmap read FContactBitmap write FContactBitmap;
25.     property ContactName: string read FContactName write FContactName;
26.     property Title: string read FTitle write FTitle;
27.     property HireDate: TDate read FHireDate write FHireDate;
28.     property Salary: Integer read FSalary write FSalary;
29.     property AvailNow: Boolean read FAvailNow write FAvailNow;
30.   end;
32. type
33.   TEmployeeTitle = class
34.   private
35.     FContactTitle: string;                 //职位名称
36.     FTitleColor: Cardinal;                 //显示颜以
37.     TTitleImageIndex: Integer;             //显示图标索引
38.     TTitleDescription: string;             //职位描述
39.   public
40.     constructor Create(const NewTitle: string;
41.                        const NewTitleDesc: string;
42.                        const NewTitleColor: Cardinal;
43.                        const NewImageIdx: Integer);
44.     property ContactTitle: string read FContactTitle write FContactTitle;
45.     property TitleColor: Cardinal read FTitleColor write FTitleColor;
46.     property TitleImageIndex: Integer read TTitleImageIndex write TTitleImageIndex;
47.     property TitleDescription: string read TTitleDescription write TTitleDescription;
48.   end;
51. implementation
53. { TEmployee }
55. constructor TEmployee.Create(const NewName, NewTitle: string;
56.   const NewHireDate: TDate; const NewSalary: Integer; const NewAvail: Boolean);
57. var
58.   NewBitmap: TBitmap;
59.   ResStream: TResourceStream;
60. begin
61.   //将根据联系人名称姓来关联资源文件
62.   ResStream := TResourceStream.Create(HINSTANCE, 'Bitmap_' + LeftStr(NewName, Pos(' ', NewName) - 1), RT_RCDATA);
63.   try
64.     NewBitmap := TBitmap.Create;
65.     NewBitmap.LoadFromStream(ResStream);
66.   finally
67.     ResStream.Free;
68.   end;
70.   FContactName   := NewName;
71.   FTitle         := NewTitle;
72.   FContactBitmap := NewBitmap;       //来自资源的图片
73.   FHireDate      := NewHireDate;
74.   FSalary        := NewSalary;
75.   FAvailNow      := NewAvail;
76. end;
79. { TEmployeeTitle }
81. constructor TEmployeeTitle.Create(const NewTitle, NewTitleDesc: string;
82.   const NewTitleColor:Cardinal;const NewImageIdx: Integer);
83. begin
84.   FContactTitle   := NewTitle;
85.   FTitleColor     := NewTitleColor;
86.   TTitleImageIndex := NewImageIdx;       //来自TImageList的图片
87.   TTitleDescription:= NewTitleDesc;
88. end;
90. end.

复制代码

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

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

复制代码

在FormCreate中关联了List.

1. procedure TfrmMain.FormCreate(Sender: TObject);
2. begin
3.   LoadData;  //加载数据
4.   //设置员工列表
5.   bsEmployee.SetList(FEmployeeList, False);
6.   bsEmployee.Active := True;
7.   //设置员工编号列表
8.   bsEmployeeTitle.SetList(FEmployeeTitleList, False);
9.   bsEmployeeTitle.Active := True;
10. end;

复制代码

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

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

复制代码

显示效果如下所示：

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！