编程实现窗体的半透明效果 (转)

本文介绍如何在Windows 2000环境下使用Delphi编程实现窗体的半透明及淡入淡出效果。核心在于使用SetLayeredWindowAttributes API函数,并添加WS_EX_LAYERED扩展属性。
编程实现窗体的半透明效果 (转)[@more@] 编程实现窗体的半透明效果 作者:罗蔷 发布时间:2001/03/16   文章摘要:   大家都知道 windows 2000支持淡入淡出的窗体显示效果。如何让自己的应用 程序也具备这种效果呢?下文对此问题做出了解答。  
正文: Javascript:window.close()"> 1165977838500.GIF  



编程实现窗体的半透明效果

  

  如果你不是使用Windows2000+Delphi编程的话,我不想浪费你的时间。如果是,请继续。
  大家都知道Windows 2000支持淡入淡出的窗体显示效果。如何让自己的应用程序也具备这种效果呢?前两天研究FormContainer的Form显示效果时(注:FormContainer是一个强大的Delphi特效处理控件,有兴趣的朋友可以访问http://www.billeniumsoft.com/),得高人告知,核心api函数就是SetLayeredWindowAttributes。
  要实现淡入淡出效果,就需要实现窗口的可调整的透明效果。传统的Windows应用程序想实现透明效果,一般来说需要处理自己的窗口的WM_Paint消息,程序员需要GetDC获取屏幕的HDC,调用BitBlt函数将屏幕将要被覆盖的区域拷贝到内存的TBitmap对象中,然后对该Tbitmap的ScanLine二维数组逐象素的修改rgbtRed、rgbtGreen和rgbtBlue值。天哪,实在是太麻烦了。
  Windows2000的API库中终于提供了半透明的窗体显示效果支持(虽然不是很完善)。要实现半透明的窗口效果,首先需要给创建的窗口添加WS_EX_LAYERED 扩展属性,这是一个新的窗口扩展属性,Delphi5并没有定义相应的常量和SetLayeredWindowAttributes函数,我们需要手工声明。

function SetLayeredWindowAttributes(Handle: HWND;
  COLORKEY: COLORREF; Alpha: BYTE; Flags: Dword): Boolean; stdcall; external 'USER32.DLL';

Const
  WS_EX_LAYERED = $80000;
  LWA_ALPHA = 2;

  我们调用GetWindowLong函数获取当前窗口的扩展属性,并调用SetWindowLong函数将新的WS_EX_LAYERED窗口扩展属性添加进去。

procedure TForm1.FormCreate(Sender: Tobject);
begin
  SetWindowLong(Handle,GWL_EXSTYLE,GetWindowLong(Handle,GWL_EXSTYLE) or WS_EX_LAYERED);
end;

  现在我们的窗口已经可以调用SetLayeredWindowAttributes函数,通过设置该函数的Alpha参数,我们就可以看到窗口的效果的变化。

procedure TForm1.Button1Click(Sender: TObject);
begin
  SetLayeredWindowAttributes(Form1.Handle, 0, 180, LWA_ALPHA);
end;

  以下的VCL控件代码封装了SetLayeredWindowAttributes函数,编程时动态改变AlphaValue值,您就可以看到窗口的透明效果了。控件屏蔽了设计期的显示效果,如果读者愿意可以改为设计期效果可见,不过那样的话,一不小心,您可能就会找不着你要设计的窗体了 8-)

unit TranForm; {DragonPC 2001.2.21 }

interface

uses
  Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms ;

type
  TTranFoRM = class(TComponent)
  private
   FAlphaValue : integer ;
   FParentFormHandle : HWND ;
  procedure SetFAlphaValue(Alpha:integer) ;
   protected
   procedure UpdateDisplay ;
public
  constructor Create(AOwner: TComponent); override;
published
  property AlphaValue : integer read FAlphaValue write SetFAlphaValue ;
end;

procedure Register;

function SetLayeredWindowAttributes(Handle: HWND; COLORKEY: COLORREF;
  Alpha: BYTE; Flags: DWORD): Boolean; stdcall; external 'USER32.DLL';

implementation

procedure Register;
begin
  RegisterComponents('Standard', [TTranForm]);
end;

procedure TTranForm.SetFAlphaValue(Alpha: integer);
  begin
   if (Alpha >= 0) and (Alpha < 256) then begin
   FAlphaValue := Alpha ;
   UpdateDisplay() ;
  end;
end;

procedure TTranForm.UpdateDisplay;
begin
 if (csDesigning in ComponentState) then Exit ;
 SetLayeredWindowAttributes(FParentFormHandle, 0, FAlphaValue, 2);
end;

constructor TTranForm.Create(AOwner: TComponent);
begin
  inherited;
  if (csDesigning in ComponentState) then Exit;
  FAlphaValue := 255 ;
  FParentFormHandle := TForm(AOwner).Handle ;
  SetWindowLong(FParentFormHandle,
         GWL_EXSTYLE,
         GetWindowLong(FParentFormHandle, GWL_EXSTYLE) or WS_EX_LAYERED);
end;

end.

  谢谢您的莫大耐心得以看完此文,此文纯粹本着赚取china-pub"假币"目的所写,万一各位看官有任何的疑问,欢迎信至dragonpc@21cn.com,谢谢。


作者会员名:dragonpc

 

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/10752043/viewspace-996062/,如需转载,请注明出处,否则将追究法律责任。

转载于:http://blog.itpub.net/10752043/viewspace-996062/

<think>我们正在处理用户关于ElementPlus的el-table-column组件标题居中的问题。 根据用户提供的引用内容,虽然引用了两段代码,但似乎当前问题关系不大。引用[1]是关于表格样式(vxe-table)的CSS,引用[2]是Python绘图代码。 因此,我们将忽略这些引用,直接针对ElementPlus的el-table-column标题居中问题提供解决方案。 在ElementPlus中,el-table-column组件的标题居中有几种方法: 1. 使用header-align属性:这是最直接的方式,设置header-align="center"即可将标题居中。 2. 使用CSS样式:可以通过自定义表头样式,使用CSS来实现居中。 注意:ElementPlus官方文档中,el-table-column组件提供了header-align属性用于设置表头内容的对齐方式。 具体操作如下: 方法1:使用header-align属性 在el-table-column中直接设置header-align="center",同时,如果希望列内容也居中,可以设置align="center"。 方法2:使用CSS 通过给表头单元格添加类名,然后在样式中设置文本居中。 示例代码(使用header-align属性): ```vue <el-table :data="tableData"> <el-table-column prop="date" label="日期" header-align="center"></el-table-column> </el-table> ``` 示例代码(使用CSS): 在el-table-column中使用header-class-name属性指定一个类名,然后在样式中设置文本居中。 ```vue <el-table :data="tableData"> <el-table-column prop="name" label="姓名" header-class-name="table-header-center"></el-table-column> </el-table> <style> .table-header-center { text-align: center; } </style> ``` 注意:如果遇到样式覆盖问题,可能需要使用深度选择器(如使用scoped时)或提高选择器优先级。 另外,如果整个表格的所有列标题都需要居中,可以直接在el-table上设置header-cell-class-name,为所有表头单元格添加同一个类名,然后定义居中样式。 例如: ```vue <el-table :data="tableData" :header-cell-class-name="&#39;header-cell-class&#39;"> <!-- 列定义 --> </el-table> <style> .header-cell-class { text-align: center; } </style> ``` 根据用户问题,我们推荐使用header-align属性,因为它更直接且符合组件的设计。 因此,针对用户的问题,我们给出以下答案: </think> 在 ElementPlus 中实现 `el-table-column` 标题居中,可以通过以下两种方法实现: ### 方法 1:使用 `header-align` 属性(推荐) 直接在 `el-table-column` 组件中添加 `header-align="center"` 属性: ```vue <el-table :data="tableData"> <el-table-column prop="name" label="姓名" header-align="center" <!-- 标题居中 --> align="center" <!-- 可选:内容居中 --> /> <el-table-column prop="age" label="年龄" header-align="center" /> </el-table> ``` ### 方法 2:自定义 CSS 样式 通过全局样式覆盖或 `header-class-name` 实现: ```vue <el-table :data="tableData"> <el-table-column prop="address" label="地址" header-class-name="custom-header-center" /> </el-table> <style> /* 全局样式 */ .custom-header-center .cell { text-align: center !important; justify-content: center !important; } /* 若使用 scoped,需穿透 */ ::v-deep(.custom-header-center) .cell { text-align: center !important; } </style> ``` ### 效果说明 - `header-align="center"` 是官方推荐方式,直接控制标题水平居中 - 若需要同时垂直居中,可添加 CSS:`display: flex; align-items: center;` -表格存在固定列(fixed)时,可能需要额外调整 `z-index` > **参考文档**: > ElementPlus Table 组件的[官方 API 文档](https://element-plus.org/zh-CN/component/table.html#table-column-attributes)明确支持 `header-align` 属性配置列标题对齐方式[^1]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值