delphi xe 之路(14)使用FireMonkeyStyle

简介: <p>FireMonkey使用Style来控制控件的显示方式。</p> <p>每个控件都有一个StyleLookup属性,FireMonkey就是通过控件的这个属性来在当前窗体的StyleBook控件中查找匹配的Style,如果找到了这个Style,那么控件就使用这个Style来显示。</p> <p> </p> <p>StyleBook是一个Style的集合,里面可以有窗体的Styl

FireMonkey使用Style来控制控件的显示方式。

每个控件都有一个StyleLookup属性,FireMonkey就是通过控件的这个属性来在当前窗体的StyleBook控件中查找匹配的Style,如果找到了这个Style,那么控件就使用这个Style来显示。

 

StyleBook是一个Style的集合,里面可以有窗体的Style,按钮的Style,文本框的Style,等等。每个Style其实就是一个控件,像常用到的TLayout,TRectangle等等,只是这个控件需要设置它的StyleName。

比如我在StyleBook中设计这样一个按钮:

l Layout:TLayout(StyleName设置为“defaultbutton”)

n Rectangle:TRectangle(用来显示按钮背景)

u Text:TLabel(用来显示按钮标题)

 

那么这个Layout就表示了一个名为“defaultbutton”的Style。如果这时候,窗体上放一个Button,然后将它的StyleLookup属性为“defaultbutton”,FireMonkey就会从当前窗体的StyleBook中遍历我们设计的所有控件,查找StyleNameButton的StyleLookup属性值的控件,也就是StyleName为“defaultbutton”的控件,就是我们刚才设计的Layout控件,查找到了之后,就返回一个Layout的克隆,也就是复制一个Layout(它的子控件也会复制进去),然后在Button上显示出来。

 

原理就讲这些了,下面我用举个例子来演示一下这些步骤:

这个例子是在TListBoxItm控件上使用我们设计的Style,

1. 在组件面板(Tool Palette)上选择一个TStyleBook组件,将它拖放到窗体上,Name为StyleBook1,然后将窗体StyleBook属性设置为StyleBook1。

 

 

 

 

2. 在窗体上放一个TListBox组件,将它拖放到窗体上,Name为ListBox1。

 

 

设置ListBox1Align属性为alClient

并右击ListBox1,在弹出的菜单中选中Items Editor

 

点击Add Item按钮,会在ListBox1上面添加一个TListBoxItem

 

3. 双击StyleBook1,IDE会进入到Style Designer模式:

 

4. 设计Style,首先在组件面板(Tool Palette)中选择一个TLayout组件(Layouts分类),拖动到左上角,

 

这时候结构视图显示如下:

 

在属性查看器中设置LayoutStyleNamedefaultitemstyle:

 

然后我们在Layout下添加一个TRectangle做为背景:

 

将这个Rectangle的颜色设置为红色,也就是将它的Fill.Color设置为Red,并将RectangleLayout属性设置为alClient

 

5. 按一下FireMonkey Style Designer ToolBar上面的Apply and Close按钮,好了,一个名为defaultitemstyleStyle已经设计完成了。

6. 然后选中我们之前添加的ListBoxItem1,在属性查看器中的StyleLookup属性值更改为defaultitemstyle

看,这个ListBoxItem已经显示成我们设计的Style了(一个红色的矩形):

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

目录
相关文章
|
关系型数据库 MySQL
delphi xe 之路(27)XE7 Datasnap使用dbExpress连接MySQL
<p style="margin-top:14px; margin-bottom:14px; padding-top:0px; padding-bottom:0px; word-break:normal; word-wrap:break-word; font-size:16px; line-height:28px; font-family:simsun; text-indent:2em;
3763 0
|
Java Android开发 UED
delphi xe 之路(30)Delphi XE7 update1进步太大了
<span style="background-color:rgb(255,255,255)"><span style="color:rgb(64,64,64); font-family:'Microsoft YaHei','Helvetica Neue',SimSun; font-size:14px; line-height:21px">1.更新的bug列表并不全</span><br s
2612 0
|
SQL 存储 程序员
delphi xe 之路(19)clientdataset的详细介绍01
<div style="margin:0px; padding:0px; font-family:punctuation,微软雅黑,Tohoma; font-size:14px; line-height:22px"> <span style="margin:0px; padding:0px; color:rgb(12,12,12); font-family:simsun"><strong
4141 0
|
数据库 索引
delphi xe 之路(20)clientdataset的详细介绍02
<div style="margin:0px; padding:0px; font-family:punctuation,微软雅黑,Tohoma; font-size:14px; line-height:22px"> <span style="margin:0px; padding:0px; color:rgb(12,12,12); font-family:simsun">ClientD
2451 0
|
安全 Windows
Delphi XE之路(7)Mobile MessageDlg函数
<div style="margin:0px; padding:0px; font-family:punctuation,微软雅黑,Tohoma; font-size:14px; line-height:22px"> <span style="margin:0px; padding:0px; color:rgb(50,62,50); font-family:simsun">在用XE5创建
2747 0
|
Android开发
Delphi XE之路(9)Delphi XE android mutilistview
<p style="margin:10px auto; color:rgb(77,77,77); font-family:Tahoma,Geneva,Arial,Helvetica,sans-serif; font-size:13px; line-height:26px"> C:\Users\Public\Documents\RAD Studio\12.0\Samples\FireMon
4692 0
Delphi XE 之路(6)手势操作
<div style="margin:0px; padding:0px; font-family:punctuation,微软雅黑,Tohoma; font-size:14px; line-height:22px">  <span style="margin:0px; padding:0px; color:rgb(50,62,50); font-family:simsun">1.在窗体上
3276 0
|
Android开发
delphi xe 之路(26)xe7开发的安卓程序,体积宏大
<span style="font-family:verdana,'ms song',宋体,Arial,微软雅黑,Helvetica,sans-serif; line-height:21px">原因没找到,但似乎可以这样解决: </span><br style="margin:0px; padding:0px; font-family:verdana,'ms song',宋体,Arial,
3320 0
Delphi XE之路(4)横屏问题
<span style="font-family:punctuation,微软雅黑,Tohoma; font-size:14px; line-height:22px">    查资料,drawable-port下为竖屏,drawable-land为横屏。在工程文件里再次添加loading.png文件,设置输出路径为drawable-land,编译执行。横屏下也能执行了!</span><br
1908 0