这篇文章模仿HTML中基于CSS的Button,通过Style实现自定义样式的Button。

前言

主要模仿的CSS代码如下:

CSS Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
a.button
{
    text-align:center;
    display:block;
    width:50px;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    line-height:1;
    background-color:#e33100;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -moz-box-shadow:0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
    text-shadow:0 -1px 1px rgba(0,0,0,0.25);
    border-bottom:1px solid rgba(0,0,0,0.25);
    position:relative;
    cursor:pointer;
    margin:10px auto 0;
    padding:5px 10px 6px;
}

a.button:hover
{
    background-color:#c33100;
}

1、创建一个Firmonkey应用

创建应用后,会创建默认的窗口,添加一个TLayout和TButton

其中

窗口大小设置:

BorderStyle = None
ClientHeight = 148
ClientWidth = 328

Layout的属性设置:

Align = Bottom
  Margins.Bottom = 23

Button的属性设置:

Align = Center
    Size.Width = 70.000000000000000000
    Size.Height = 22.000000000000000000

2、创建自定义Button的Style

在Button上点击鼠标右键,选择“Edit Custom Style…”,IDE会自动创建StyleBook并未进入Style编辑界面。

将StyleName改为a.button, 点击 “Apply and Close”,这时Button的StyleLookup还是之前的默认创建的StyleName,将其改为a.button

这时重新选择“Edit Custom Style…”,会自动进入a.button的Style编辑状态。

选择background和上面的删除按钮,将background删除。

在Tool Palette当中选择TRectangle,双击添加一个TRectangle到Style当中。

设置Rectangle属性如下:

Align = Contents

Fill.Color = #FFE33100

HitTest = False

Stroke.Kind = None

StyleName = background

选择background,添加一个TColorAnimation

属性设置如下:

选择text节点:

设置属性如下:

HotColor = White

NormalColor = White

PressedColor = White

TextSettings.FontColor = White

Shadow.Color = #40000000

Shadow.Offset.X = –1

Shadow.Offset.Y = 1

ShadowVisible = True

3、实际效果

4、总结

网上有很多优秀的CSS样式,这篇小文章演示了如何将CSS样式转换为Firemonkey的Style。

上述代码托管在以下地址:

https://github.com/zhaoyipeng/DelphiDemos/tree/master/BeautifulDialog

Firemonkey 自定义Button的Style的更多相关文章

  1. WPF 自定义Button控件及样式

    这次通过最近做的小例子说明一下自定义Button控件和样式. 实现的效果为:

  2. 【Android开发日记】之入门篇(十四)——Button控件+自定义Button控件

        好久不见,又是一个新的学期开始了,为什么我感觉好惆怅啊!这一周也发生了不少事情,节假日放了三天的假(好久没有这么悠闲过了),实习公司那边被组长半强制性的要求去解决一个后台登陆的问题,结果就是把 ...

  3. android中样式和自定义button样式

    1)自定义button样式 一.采用图片方式 首先新建Android XML文件,类型选Drawable,根结点选selector,自定义一个文件名. 随后,开发环境自动在新建的文件里加了select ...

  4. IOS开发之自定义Button(集成三种回调模式)

    前面在做东西的时候都用到了storyboard,在今天的代码中就纯手写代码自己用封装个Button.这个Button继承于UIView类,在封装的时候用上啦OC中的三种回调模式:目标动作回调,委托回调 ...

  5. ios基础篇(二十四)—— 文字、图片的绘制及其自定义Button

    这篇文章我们主要来拿官方的控件来研究一下,我们来仿照官方的控件,自己来实现它提供的控件: 首先来看看基本的图片与文字的绘制,很简单. 一.imageView 所有的视图都是继承自UIView,所以我们 ...

  6. iOS_Swift初识之使用三种回调方式自定义Button

    最近在学习Swift ,发现青玉伏案大神早期用OC写的一篇博客--IOS开发之自定义Button(集成三种回调模式)  很适合用来熟悉Swift的回调方式,于是我就用Swift翻版了一下,具体实现原理 ...

  7. 自定义Button 的图片设置不显示问题。

    如果你是自定义button  那么你设置图片就要用 button.imageView.image = [UIImage imageName:@""]; 如果你是给系统原生的butt ...

  8. wpf textblock 会覆盖 button里面字体样式的解决方法 还有button的style覆盖。。datepicker里面的按钮的style

    .(button使用contont写的时候) 当.button使用 <button.content><textBlock/></button.content>依然会 ...

  9. Android 自定义Button按钮显示样式(正常、按下、获取焦点)

    现在的用户对APP的外观看得很重要,如果APP内所有元件都用Android默认样式写,估计下面评论里就有一堆在骂UI丑的.今天学习自定义Button按钮样式.Button样式修改的是Button的背景 ...

随机推荐

  1. WTL---WxWidget---MFC 何去何从

    C++程序员打交道最多的就是MFC了,这个我不想多说,说来都是泪(C#年年更新,C++十年才出了一个featurePack还不是很好用) 现在另外两支队伍越来越庞大(所谓穷则思变,呵呵),一是WTL, ...

  2. UNIX环境高级编程——TCP/IP网络编程

    常用网络信息检索函数 gethostname() getppername() getsockname() gethostbyname() gethostbyaddr() getprotobyname( ...

  3. Qt 释放新建窗口资源

    当Widget *w = new Widget(); 不方便调用 delete w;时 Widget *w = new Widget(); w->setAttribute(Qt::WA_Dele ...

  4. 简单字符串处理 hdu2532 Engine

    本来可以把这篇文章放入上一篇文章里,不过做这个题花了一点时间,也有一点收获,同时觉得网上的这个题目可供参考的文章有些少,那么就单独成篇吧. 首先分析下题目思路: 这个题目是个模拟题,步骤也很清晰. 首 ...

  5. Android移动view动画问题

    http://www.cnblogs.com/eoiioe/archive/2012/08/29/2662546.html Android写动画效果不是一般的麻烦,网上找了好久,终于解决了动画的问题, ...

  6. 织梦sitemap模板获取文章列表

    分析了一下makehtml_map.php?dopost=site这个文件,发现生成视图用的是dedetag.class.php文件,有点简单.不能使用织梦的很多标签,例如: {dede:arclis ...

  7. 它们偷偷干了啥?教你监督APP的运行

    由于Android系统的开放性,很多APP都会在后台运行各种我们不知道的权限,不仅泄露我们隐私,也给系统本身带来极大安全隐患.而且现在很普遍的是,在安装APP时它总会索取特别多的权限,又是拍照又是地理 ...

  8. 面试中关于Java中涉及到知识点(转)

    本篇文章会对面试中常遇到的Java技术点进行全面深入的总结,帮助我们在面试中更加得心应手,不参加面试的同学也能够借此机会梳理一下自己的知识体系,进行查漏补缺. 1. Java中的原始数据类型都有哪些, ...

  9. SOLR搭建企业搜索平台

    一. SOLR搭建企业搜索平台  运行环境:  运行容器:Tomcat6.0.20  Solr版本:apache-solr-1.4.0  分词器:mmseg4j-1.6.2  词库:sogou-dic ...

  10. 最短路径A*算法原理及java代码实现(看不懂是我的失败)

    算法仅仅要懂原理了,代码都是小问题,先看以下理论,尤其是红色标注的(要源代码请留下邮箱,有測试用例,直接执行就可以) A*算法 百度上的解释: A*[1](A-Star)算法是一种静态路网中求解最短路 ...