图像库 1.0

分享于 

8分钟阅读

Web开发

  繁體

介绍

图 1.0是一个自定义控件,具有完整的设计时间支持。 本文将提供创建自定义控件。复杂属性。内部属性和智能标记以及如何在自定义控件中提供设计时间支持的完整信息。 这个控件为你提供了显示像BBC和CNN新闻网站这样的图片的解决方案。 它还提供自动下一个( 幻灯片放映) 特性,以及一些图像更改样式。

如何使用

要在网站上使用图像库 1.0控件,需要在工具箱中添加控件,选择'自定义工具箱',选择'.NET 框架。 导航到 ImageGallery.dll。 这应该会将它添加到工具箱。 然后,只需将这里控件拖到你希望控件执行的页上。

图 1.0展示了如何添加复杂的属性,如 GridView

<cc1:GalleryID="Gallery1"runat="server"><NavigationItemBarItemStyleBackColor="#5F74A3"Height="20px"Width="20px"/><TitleStyleFont-Bold="True"Font-Size="16px"ForeColor="Black"/><NavigationItemBarSelectedItemStyleBackColor="#8C9FCA"Height="20px"Width="20px"/><NavigationBarStyleHorizontalAlign="Center"/><ImageStyleHeight="300px"Width="400px"/><DescriptionStyleFont-Size="10px"Height="75px"/><NavigationItemBarHoverItemStyleBackColor="#8C9FCA"Height="20px"Width="20px"/><Images><cc1:ImageImageUrl="~/images/p1.jpg"Selected="true"/><cc1:ImageImageUrl="~/images/p2.jpg"Selected="false"/><cc1:ImageImageUrl="~/images/p3.jpg"Selected="false"/> 
 </Images></cc1:Gallery>

某些属性的详细信息:

  • AutoNext: 用于在 AutoNextAfter 属性中设置特定时间之后自动显示下一个图像。
  • AutoNextAfter: 是自动下一次,以秒为单位。
  • DataSource: 用于绑定来自特定数据源的图像。
  • DataImageField: 数据源中提供图像URL的字段。
  • DataTitleField: 数据源中提供图像标题的字段。
  • DataDescriptionField: 数据源中提供图像描述的字段。
  • ShowTitle: 用于设置图像标题可见性。
  • ShowDescription: 用于设置图像描述可见性。
  • ShowNavigationBar: 用于设置导航栏可见性。
  • ImageFolder: 用于设置用户希望显示图像的图像文件夹的路径。
  • ImagesExtensions: 包含图像扩展名的逗号分隔列表。
  • ImageChangeStyle: 用于设置图像更改样式。

如何添加图像

用户可以通过三种方式选择或者添加图像:

  • 将图像添加到图像集合。 Images 属性用于向控件添加图像。
  • 选择存在图像的文件夹的路径,使用 ImageFolder 属性。
  • 使用数据源

Images 属性用于存储图像的集合。 Images 属性是一个集合基;在设计时,它将是一个打开的集合编辑器。

Images 属性是内部属性;因此,我们添加属性级别元数据属性 [PersistenceMode(PersistenceMode.InnerProperty)]

[DesignerSerializationVisibility(DesignerSerializationVisibility.Visible)][PersistenceMode(PersistenceMode.InnerProperty)]
[Description("Images")]public ImageCollection Images
{
 get {
 if (_images == null)
 _images = new ImageCollection();
 return _images;
 }
}

CollectionBase 类继承了 ImageCollection 类,并且 CollectionBase 类用于创建自定义集合。

publicclass ImageCollection : CollectionBase
{
 public Image this[int index]
 {
 get{ return (Image)this.List[index];}
 set{this.List[index] = value;}
 }
 publicvoid Add(Image image)
 {
 image.Index = this.List.Count;
 this.List.Add(image);
 }
 publicvoid Insert(int index, Image image)
 {
 this.List.Insert(index, image);
 }
 publicvoid Remove(Image image)
 {
 this.List.Remove(image);
 }
 publicbool Contains(Image image)
 {
 returnthis.List.Contains(image);
 }
 publicint IndexOf(Image image)
 {
 returnthis.List.IndexOf(image);
 }
 publicvoid CopyTo(Array array, int index)
 {
 this.List.CopyTo(array, index);
 }
}

智能标记

这里控件提供完整的设计时间支持。 你还可以使用智能标记设置属性。 用户还可以使用自动格式应用一些预先定义的样式。 本文介绍如何创建专业的智能标记。

创建一个智能标记,创建一个设计器类并从 System.Web.UI.Design.ControlDesigner 设计器类处理设计图面上控件的行为。 我们可以重写 ControlDesigner 类的方法以支持设计时支持。 在本文中,我将解释一种方法,该方法用于处理智能标记。 为了显示智能标记,我们重写 ControlDesigner 类的ActionLists 属性。

class GalleryDesigner : System.Web.UI.Design.ControlDesigner
{ 
 DesignerActionListCollection _actionList = null;
 publicoverride DesignerActionListCollection ActionLists
 {
 get {
 if (_actionList == null)
 {
 _actionList = new DesignerActionListCollection();
 _actionList.Add( new GalleryActionList(this));
 } 
 return _actionList;
 }
 }
}

ActionLists 返回智能标记上显示的所有操作的列表。 在本文中,我们从 GalleryActionList 获得这个列表,它继承自 System.ComponentModel.Design.DesignerActionList 类,然后重写它的方法 GetSortedActionItems(),如下所示:

class GalleryActionList : System.ComponentModel.Design.DesignerActionList
{
 #region OVERRIDED METHODSpublicoverride DesignerActionItemCollection GetSortedActionItems()
 {
 DesignerActionItemCollection list = new DesignerActionItemCollection();
 list.Add(new DesignerActionMethodItem(this, "ShowAutoFormat", 
 "Auto Format...", "Format")); 
 list.Add(new DesignerActionMethodItem(this, "EditImages", 
 "Images...", "images"));
 list.Add(new DesignerActionPropertyItem("ShowTitle", 
 "Show Title", "Other"));
 list.Add(new DesignerActionPropertyItem("ShowDescription", 
 "Show Description", "Other"));
 return list;
 }
 #endregion}

Points of interest

在该控件的开发过程中,我发现了一个主要问题,即如何从智能标记中添加图像。 我试图通过许多方法解决它,但是无法成功解决它,因为智能标记的更改没有正确反映。 最后,我从一个论坛得到了一个解决方案。 解决方案在 EditorServiceContext.cs 文件中可用。


相关文章