# 一步一步学习使用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的程序员，一定时会被其强大的自定义样式定义所吸引的，在接下来的课程中，将会讨论如何自定义样式。
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]