WinForm界面开发论（二）容器控件论

我们的生活中存在着大量的容器关系，比如吃饭需要有碗装米饭，碗放在桌上，桌在家里，家在某一栋楼内，楼在小区内...。一层一层的，控件开发也是这样。在上一篇中，我们介绍了一个简单的控件是如何编写的，本章再说说怎样实现多级的控件。

说到这里，我们需要一个例子，ACDSEE有个展现目录下所有文件夹和图片的控件，如下图。我们将一步步对该控件的开发过程进行详解。



第一步，我们新建一个用户控件，假设名称为ImageBox，为类加上声明语句：


[Designer("System.Windows.Forms.Design.ParentControlDesigner,System.Design")]


public partial class ImageBox : UserControl




...{


//.....

这样,ImageBox就为定义为容器控件，它可以摆放其他控件在容器控件里面。
第二部，我们再新建一个用户控件，就是每个显示图片的子项了，名称为ImageItem，并在设计器中设计它！

第三步，容器里面的项，和ListView的ListViewItem一样，里面有一个ItemList的集合，我们也需要实现这样的结合，并且希望可以使用[int]来获得Box里面的项，要实现集合的结构，我们需要使用System.Collections.ICollection接口，


public class ImageItemCollection : System.Collections.ICollection




...{


private SortedList items = new SortedList();




public int Count




...{


get




...{


return items.Count;


}


}




//------------------------------------事件----------------------------------------


public delegate void itemDelegate(ImageItem itemIsAdd,int addIndex);


public event itemDelegate AddItem;




//------------------------------------属性----------------------------------------


public ImageItem this[int index]




...{


get




...{


object tmp = items.GetByIndex(index);


return (ImageItem)tmp;


}


}




public ImageItem this[string name]




...{


get




...{


object tmp = items[name];


return (ImageItem)tmp;


}


}




//------------------------------------方法----------------------------------------




public void RemoveAll()




...{


this.RemoveAllItem();


items.Clear();


}






/**//// <summary>


/// 添加一个新的图片项


/// </summary>


/// <param name="itemIsAdd">要添加的图片项</param>


/// <returns>包括新增后的图片项数</returns>


public int Add(ImageItem itemIsAdd)




...{


if (itemIsAdd.Name == "ImageItem")




...{


string autoName = "ImageItemAuto" + getAddItemNum();


itemIsAdd.Name = autoName;


}


if (this.AddItem != null)




...{


this.AddItem(itemIsAdd, items.Count + 1);


}


this.items.Add(itemIsAdd.Name, itemIsAdd);


return items.Count - 1;


}






/**//// <summary>


/// 移除某个图片项


/// </summary>


/// <param name="itemIsRemove">要移除的项</param>


/// <returns>包括新增后的图片项数</returns>


public int Remove(ImageItem itemIsRemove)




...{


if(!items.Contains(itemIsRemove.Name))




...{


throw new Exception("该图片项不在图片容器中");


}


items.Remove(itemIsRemove.Name);


if (this.RemoveItem != null)




...{


this.RemoveItem(itemIsRemove);


}


return items.Count - 1;


}




private int addItemNum = 0;


private string getAddItemNum()




...{


addItemNum = addItemNum + 1;


return addItemNum.ToString();


}




#endregion


}


}

第四步，我们需要把集合，容器，子项目这三个东西组装在一起，就完成了我们的图片展现控件了。我们在ImageBox类中加入下面的代码：


public ImageItemCollection Items = new ImageItemCollection();




private void ImageView_Load(object sender, EventArgs e)




...{


Items.AddItem += new ImageItemCollection.itemDelegate(Items_AddItem);


}




private void Items_AddItem(ImageItem itemIsAdd, int itemIndex)




...{


itemIsAdd.Size = itemSize;


this.Controls.Add(itemIsAdd);


this.setImageLocation(itemIsAdd, itemIndex);


}




private void setImageLocation(ImageItem itemIsAdd, int itemIndex)




...{


int columnNum = this.calculationsColumn();


int imageItemX = 0;


if (itemIndex % columnNum != 0)




...{


imageItemX = ((itemIndex % columnNum) - 1) * (itemSize.Width + ImageLayout) + ImageLayout;


}


else




...{


imageItemX = (columnNum - 1) * (itemSize.Width + ImageLayout) + ImageLayout;


}




int rowNum = (itemIndex - 1) / columnNum;


int imageItemY = rowNum * (itemSize.Height + ImageLayout) + ImageLayout;




//itemIsAdd.Location = new Point(imageItemX, imageItemY);


itemIsAdd.Left = imageItemX;


itemIsAdd.Top = imageItemY + this.lbl_Point.Top;


}




private int calculationsColumn()




...{


int thisWidth = this.Size.Width;


int itemWidth = itemSize.Width + ImageLayout;


int columnNum = thisWidth / itemWidth;


return columnNum;


}





但调用项集合类的Add的时候，会在Box发生Add时间，把新项添加到Box中，并且根据需要，设置图片被插入的位置。如果还有其他的需要，如remove，设置item的大小，定义子项的双击事件等等，读者可以根据本章和上一章的原理，对控件进行扩展。