今天你写控件了吗?----ASP.net控件开发系列(六)

博客围绕扑克控件花色属性的UI设计展开。介绍了让属性窗口在用户选择花色后呈现对应图标,通过EditorAttribute关联Editor实现画示意小图功能。还讲述了制作合适小窗口定制交互界面,以及如何扩充Editor实现URL编辑器、颜色选择交互界面等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

UITypeEdit

“我要红桃”


 假如,你现在在做一个“扑克”控件,扑克牌有个属性--花色,你想在用户选择花色这个属性后,属性窗口呈现的不仅仅是文字,还有一个小小的花色图标来表示花色,“红桃”就有个小“红桃”图标在前面显示,“黑桃”就有个“黑桃”图标在前面显示,就像你选择其它控件的BackColor时,颜色前还有个小方色块来表示选定的颜色,多体贴人的设计啊。
 现在,我们就来做这件事:

None.gifpublic class Squeezer
ExpandedBlockStart.gifContractedBlock.gif
dot.gif{
InBlock.gif dot.gifdot.gif.
InBlock.gif 
InBlock.gif 
public CardTypes CardType
ExpandedSubBlockStart.gifContractedSubBlock.gif 
dot.gif{
InBlock.gif  dot.gifdot.gif
ExpandedSubBlockEnd.gif }

ExpandedBlockEnd.gif}

None.gif[Editor(
typeof(CardTypesEditor), typeof(System.Drawing.Design.UITypeEditor))]
None.gif
public class CardTypes
ExpandedBlockStart.gifContractedBlock.gif
dot.gif{
InBlock.gif dot.gifdot.gif..
ExpandedBlockEnd.gif}

None.gif
None.gif 
public class CardTypesEditor : UITypeEditor
ExpandedBlockStart.gifContractedBlock.gif 
dot.gif{
InBlock.gif  
public override bool GetPaintValueSupported(ITypeDescriptorContext context) 
ExpandedSubBlockStart.gifContractedSubBlock.gif  
dot.gif{
InBlock.gif   
return true;//支持画小图
ExpandedSubBlockEnd.gif
  }

InBlock.gif
InBlock.gif  
public override void PaintValue(PaintValueEventArgs pe) //定义根据值画小图的逻辑
ExpandedSubBlockStart.gifContractedSubBlock.gif
  dot.gif{
InBlock.gif   
string bmpName = null;
InBlock.gif   CardTypes C 
= (CardTyes)pe.Value;
InBlock.gif   
switch(C.Value)
ExpandedSubBlockStart.gifContractedSubBlock.gif   
dot.gif{
InBlock.gif    
case CarderTypes.HongTao:
InBlock.gif     bmpName 
= "红桃.bmp";//图片必须是嵌入的资源,大小为16*16,类型为BMP
InBlock.gif
     break;
InBlock.gif    dot.gifdot.gif
ExpandedSubBlockEnd.gif   }

InBlock.gif
InBlock.gif   Bitmap b 
= new Bitmap(typeof(GradeEditor), bmpName);
InBlock.gif
InBlock.gif   pe.Graphics.DrawImage(b, pe.Bounds);
InBlock.gif
InBlock.gif   b.Dispose();   
ExpandedSubBlockEnd.gif  }

ExpandedBlockEnd.gif }

None.gif
None.gif

在上面的代码中,我们通过EditorAttribute来使花色类和一个Editor关联,再通过这个Editor来实现画示意小图的功能。

好了,现在你的创造力可能又在鼓动你思考一个新问题了,我不想让让用户仅仅通过一个简单的只呈现值的下拉列表(通过EnumConverter实现的)来选择属性的值,我想实现像BackColor、Dock这样的非常友善的交互给用户使用,好吧,我们来进入下一步。
TypeConverter.gif首先我们要制做一个合适的小窗口(CardTypesEditorControl)来定制交互时的界面,这个窗体继承自System.Window.Forms.UserControl或System.Window.Forms.From,总之它就是一个WinFrom窗体,这个窗体怎么做,我这里就不展开论述了,只是你要在这个窗体类中聚合(不是组合,这里是引用,由Editor传过来)一个IWindowsFormsEditorService,已便更好的交互,并且,能控件何时关闭打开的这个下列式的窗口,比如说在鼠标按钮的Up事件中edSvc.CloseDropDown(),这样用户点击鼠标进行了选择之后就能关闭窗体,返回值。
好,我们来看我们的Editor怎么扩充:

None.gif  CardTypes target;
None.gif  CardTypesEditorControl ui;
None.gif  
None.gif  
public CardTypesUIEditor(CardTypes target)
ExpandedBlockStart.gifContractedBlock.gif  
dot.gif{
InBlock.gif   
this.target = target;
ExpandedBlockEnd.gif  }

None.gif  
//通过Editor能到用户操作的值的逻辑实现
None.gif
  public override object EditValue(ITypeDescriptorContext context, IServiceProvider sp, object value) 
ExpandedBlockStart.gifContractedBlock.gif  
dot.gif{
InBlock.gif   
// 得到IDE的交互服务
InBlock.gif
   IWindowsFormsEditorService edSvc = (IWindowsFormsEditorService)sp.GetService(typeof(IWindowsFormsEditorService));
InBlock.gif
InBlock.gif   
if (edSvc == null
ExpandedSubBlockStart.gifContractedSubBlock.gif   
dot.gif{
InBlock.gif    
return value;
ExpandedSubBlockEnd.gif   }

InBlock.gif
InBlock.gif   
if (ui == null
ExpandedSubBlockStart.gifContractedSubBlock.gif   
dot.gif{
InBlock.gif    ui 
= new CardTypesEditorControl();//建立属性操作窗体实例
ExpandedSubBlockEnd.gif
   }

InBlock.gif   
InBlock.gif   ui.SelectedCardTypes 
= (CardTypes)value;//原始值,SelectedCardTypes属性只是一个例子,你可以用任意实现自己的逻辑。
InBlock.gif
   ui.EditorService = edSvc;//传服务过去,见代码上面的说明
InBlock.gif
   ui.Target = (CardTypes)context.Instance;//得到连接对象的实例
InBlock.gif
   edSvc.DropDownControl(ui);//把窗体显示为一个下接式窗体,可选的值还有edSvc.ShowDialog(ui),
InBlock.gif      
//这样的话以一个弹出窗体的形式显示窗体,也许你更喜欢这种方式。
InBlock.gif
  
InBlock.gif   
return ui.SelectedCardTypes;//我们在窗体逻辑中更改SelectedCardTypes值,在操作窗体关闭时得到这个值。
ExpandedBlockEnd.gif
  }

None.gif  
//窗口出现样式,可选值还有Modal,在属性后出出现一个省略号,点击弹出模式窗体或有窗口的对话框,就像CollectionEditor,
None.gif  
//None,不出现任何操UI,老老实实填值
None.gif
  public override System.Drawing.Design.UITypeEditorEditStyle GetEditStyle(ITypeDescriptorContext context) 
ExpandedBlockStart.gifContractedBlock.gif  
dot.gif{
InBlock.gif   
return System.Drawing.Design.UITypeEditorEditStyle.DropDown;
ExpandedBlockEnd.gif  }

None.gif
None.gif

呵呵,是不是现在有得花样给你玩了?
在EditValue方法中用一句return UrlBuilder.BuildUrl( (IComponent) context.Instance, null, (string) value, Caption, Filter,Options)你就可以做出一个URL编辑器;用ColorEditor.ColorUI colorUI = new ColorEditor.ColorUI(this);colorUI.Start(edSvc, value);edSvc.DropDownControl(colorUI);这样的几句话就能实现一个颜色选择交互界面。(注意代码没有处理null等异常情况)

 

转载于:https://www.cnblogs.com/think/archive/2005/05/23/160818.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值