[Web服务器控件] - ImageSlide（一）

 

这是一个服务器端控件，vs2005/.net2.0开发。该控件通过服务器端程序，将指定（磁盘或http）的图片进行裁切后，讲图片、缩略图地址及javascript代码返回到客户端，并在浏览器中构建一个动画（淡出淡入）方式切换的图片轮显单元。

服务器端文件包含一份图片裁切代码（ThumbMaker.cs）和一份服务器控件构建代码（ImageSlide.cs）。先从简单的ThumbMaker说起：

WEB要显示的图片，必须有一个实体。或者说，服务器上必须存在那样一个文件。并且我比较讲究效果，并不想直接显示原图，所以，处理后的图片，必须要保存到服务器端。ThumbMaker就是做这个工作的，它可以处理两类文件：本地的，和HTTP的。本地不必多讲了，http图片就是先下载保存本地，而后按本地图片处理。判断的方式是使用URI。

if (uri.IsFile)
{
    FileInfo fi = new FileInfo(url);
    //other code  
}
else
{
    using (MK.Download d = new Download(uri))
    {
        d.Get();
        Image i = Image.FromStream(d.ResultStream);
        //other code
    }

} 

下载和图片处理的程序都写成工具封装了，所以这份代码主要是处理url格式、判断web文件夹物理位置和创建文件夹等等一些周边的工作。

再说ImageSlide.cs

public class ImageSlide : WebControl, INamingContainer

继承INamingContainer，是为了在页面上拖拽多个控件时自动区别命名。

首先定义几个布局方面所需的属性

[Bindable(true)]
[Category("MK.Control.ImageSlide")]
[Description("主图片宽度(px)")]
[DefaultValue(400)]
[Localizable(true)]
public int MainImageWidth
{
    get
    {
        object o = ViewState["MainImageWidth"];
        if (o == null) return 400;
        try { return (int)o; }
        catch { return 400; }
    }
    set
    {
        ViewState["MainImageWidth"] = value;
    }
}
[Bindable(true)]
[Category("MK.Control.ImageSlide")]
[Description("主图片右侧间隙")]
[DefaultValue(3)]
[Localizable(true)]
public int MainImageMarginRight
{
    get
    {
        object o = ViewState["MainImageMarginRight"];
        if (o == null) return 3;
        try { return (int)o; }
        catch { return 3; }
    }
    set
    {
        ViewState["MainImageMarginRight"] = value;
    }
}
[Bindable(true)]
[Category("MK.Control.ImageSlide")]
[Description("缩图间隙")]
[DefaultValue(3)]
[Localizable(true)]
public int ThumbImageMargin
{
    get
    {
        object o = ViewState["ThumbImageMargin"];
        if (o == null) return 3;
        try { return (int)o; }
        catch { return 3; }
    }
    set
    {
        ViewState["ThumbImageMargin"] = value;
    }
}
[Bindable(true)]
[Category("MK.Control.ImageSlide")]
[Description("索引按钮高度")]
[DefaultValue(20)]
[Localizable(true)]
public Unit IndexTableHeight
{
    get
    {
        object o = ViewState["IndexTableHeight"];
        if (o == null) return Unit.Pixel(20);
        try { return (Unit)o; }
        catch { return Unit.Pixel(20); }
    }
    set
    {
        ViewState["IndexTableHeight"] = value;
    }
}
[Bindable(true)]
[Category("MK.Control.ImageSlide")]
[Description("索引按钮高度")]
[DefaultValue(0)]
[Localizable(true)]
public Unit IndexTableOffset
{
    get
    {
        object o = ViewState["IndexTableOffset"];
        if (o == null) return Unit.Pixel(0);
        try { return (Unit)o; }
        catch { return Unit.Pixel(0); }
    }
    set
    {
        ViewState["IndexTableOffset"] = value;
    }
}
[Bindable(true)]
[Category("MK.Control.ImageSlide")]
[Description("标题栏背景颜色")]
[Localizable(true)]
public System.Drawing.Color TextBarBackColor
{
    get
    {
        object o = ViewState["TextBarBackColor"];
        if (o == null) return System.Drawing.Color.FromArgb(0x33, 0x33, 0x33);
        return (System.Drawing.Color)o;
    }
    set
    {
        ViewState["TextBarBackColor"] = value;
    }
}

[Bindable(true)]
[Category("MK.Control.ImageSlide")]
[Description("标题字数限制")]
[DefaultValue(20)]
[Localizable(true)]
public int TextLengthLimit
{
    get
    {
        object o = ViewState["TextLengthLimit"];
        if (o == null) return 20;
        try { return (int)o; }
        catch { return 20; }
    }
    set
    {
        ViewState["TextLengthLimit"] = value;
    }
}

[Bindable(true)]
[Category("MK.Control.ImageSlide")]
[Description("主图片容器颜色")]
[Localizable(true)]
public System.Drawing.Color MainImageColor

{
    get
    {
        object o = ViewState["MainImageColor"];
        if (o == null) return System.Drawing.Color.FromArgb(0xfa, 0xfa, 0xfa);
        return (System.Drawing.Color)o;
    }
    set
    {
        ViewState["MainImageColor"] = value;
    }
}

由于一张图片包括服务器位置（或http地址）、说明文字及字数超长限制、文字颜色、大图尺寸、小图尺寸等多个属性，所以定义了一个ImageItem对象，来集中存储所有这些信息。下面是这个子类的完整代码，非常简单的一个隐藏的控件。

[DesignTimeVisible(false)]
[ToolboxData("<{0}:ImageItem runat=server></{0}:ImageItem>")]
public class ImageItem : WebControl
{
    private string _OriginalImageUrl = String.Empty;
    [Category("MK.Control.ImageSlide.ImageItem")]
    public string OriginalImageUrl
    {
        get { return _OriginalImageUrl; }
        set { _OriginalImageUrl = value; }
    }

    private string _ThumbImageUrl = String.Empty;
    [Category("MK.Control.ImageSlide.ImageItem")]
    public string ThumbImageUrl
    {
        get { return _ThumbImageUrl; }
        set { _ThumbImageUrl = value; }
    }

    private string _ViewImageUrl = String.Empty;
    [Category("MK.Control.ImageSlide.ImageItem")]
    public string ViewImageUrl
    {
        get { return _ViewImageUrl; }
        set { _ViewImageUrl = value; }
    }

    private string _HRef = String.Empty;
    [Category("MK.Control.ImageSlide.ImageItem")]
    public string HRef
    {
        get { return _HRef; }
        set { _HRef = value; }
    }

    private string _Text = String.Empty;
    [Category("MK.Control.ImageSlide.ImageItem")]
    public string Text
    {
        get { return _Text; }
        set { _Text = value; }
    }

    private int _TextLimit;
    [Category("MK.Control.ImageSlide.ImageItem")]
    public int TextLimit
    {
        get { return _TextLimit; }
        set { _TextLimit = value; }
    }
    public string LimitText
    {
        get
        {
            if (_Text.Length <= _TextLimit) return _Text;
            return _Text.Substring(0, _TextLimit) + "…";
        }
    }

    private int _Offset;
    [Category("MK.Control.ImageSlide.ImageItem")]
    public int Offset
    {
        get { return _Offset; }
        set { _Offset = value; }
    }

    private Unit _ThumbWidth = new Unit();
    [Category("MK.Control.ImageSlide.ImageItem")]
    public Unit ThumbWidth
    {
        get { return _ThumbWidth; }
        set { _ThumbWidth = value; }
    }

    private Unit _ThumbHeight = new Unit();
    [Category("MK.Control.ImageSlide.ImageItem")]
    public Unit ThumbHeight
    {
        get { return _ThumbHeight; }
        set { _ThumbHeight = value; }
    }

    private Unit _ViewHeight = new Unit();
    [Category("MK.Control.ImageSlide.ImageItem")]
    public Unit ViewHeight
    {
        get { return _ViewHeight; }
        set { _ViewHeight = value; }
    }

    private Unit _ViewWidth = new Unit();
    [Category("MK.Control.ImageSlide.ImageItem")]
    public Unit ViewWidth
    {
        get { return _ViewWidth; }
        set { _ViewWidth = value; }
    }

    internal void Deal()
    {
        ThumbMaker.DealImageItem(this);
    }
    private int _TextBarOffset;
    [Category("MK.Control.ImageSlide.ImageItem")]
    public int TextBarOffset
    {
        get { return _TextBarOffset; }
        set { _TextBarOffset = value; }
    }
    private Unit _TextBarHeight;
    [Category("MK.Control.ImageSlide.ImageItem")]
    public Unit TextBarHeight
    {
        get { return _TextBarHeight; }
        set { _TextBarHeight = value; }
    }
    [Category("MK.Control.ImageSlide.ImageItem")]
    private System.Drawing.Color _TextBarBackColor = System.Drawing.Color.FromArgb(0x33, 0x33, 0x33);
    public System.Drawing.Color TextBarBackColor
    {
        get
        {
            return _TextBarBackColor;
        }
        set
        {
            _TextBarBackColor = value;
        }
    }
    private HtmlAnchor _ViewImage;
    internal HtmlAnchor ViewImage
    {
        get
        {
            if (_ViewImage == null) _ViewImage = new HtmlAnchor();
            if (_ViewImageUrl != String.Empty)
            {
                HtmlImage hi = new HtmlImage();
                hi.Src = _ViewImageUrl;
                hi.Style[HtmlTextWriterStyle.BorderWidth] = "0px";
                HtmlGenericControl textBar = new HtmlGenericControl("div");
                textBar.InnerText = LimitText;
                textBar.Style[HtmlTextWriterStyle.Height] = _TextBarHeight.ToString();
                textBar.Style[HtmlTextWriterStyle.Width] = String.Format("{0}px", (int)(_ViewWidth.Value - 5));
                textBar.Style[HtmlTextWriterStyle.Position] = "relative";
                textBar.Style[HtmlTextWriterStyle.MarginTop] = String.Format("-{0}px", _TextBarOffset);
                textBar.Style[HtmlTextWriterStyle.BackgroundColor] = System.Drawing.ColorTranslator.ToHtml(_TextBarBackColor);
                textBar.Attributes.Add("class", "ImageSlite_TitleBar");
                _ViewImage.Controls.Add(hi);
                _ViewImage.Controls.Add(textBar);

                _ViewImage.HRef = HRef;

                _ViewImage.Target = "_blank";
                _ViewImage.Style[HtmlTextWriterStyle.BorderWidth] = "0px";
                _ViewImage.Style[HtmlTextWriterStyle.Display] = "block";
                _ViewImage.Style[HtmlTextWriterStyle.Overflow] = "hidden";
            }
            else
            {
                _ViewImage.InnerText = _Text;
            }
            _ViewImage.Attributes["title"] = Text;
            return _ViewImage;
        }
    }
    private HtmlAnchor _ThumbImage;
    internal HtmlAnchor ThumbImage
    {
        get
        {
            if (_ThumbImage == null) _ThumbImage = new HtmlAnchor();
            if (_ThumbImageUrl != String.Empty)
            {
                HtmlImage hi = new HtmlImage();
                hi.Src = _ThumbImageUrl;
                hi.Style[HtmlTextWriterStyle.BorderWidth] = "0px";
                _ThumbImage.Controls.Add(hi);
            }
            else
            {
                _ThumbImage.InnerText = LimitText;
            }
            _ThumbImage.Style.Value = Style.Value;
            _ThumbImage.Style[HtmlTextWriterStyle.Display] = "block";
            _ThumbImage.HRef = HRef;
            _ThumbImage.Target = "_blank";
            _ThumbImage.Attributes["title"] = Text;
            return _ThumbImage;
        }
    }

    protected override void Render(HtmlTextWriter writer)
    {
        if ((int)ThumbWidth.Value > 0)
        {
            writer.AddAttribute(HtmlTextWriterAttribute.Href, _HRef);
            writer.AddAttribute(HtmlTextWriterAttribute.Title, _Text);
            //writer.AddAttribute(HtmlTextWriterAttribute.Style, String.Format("display:block;width:{0};height:{1}", _ThumbWidth, _ViewHeight));
            writer.RenderBeginTag(HtmlTextWriterTag.A);
            writer.AddAttribute(HtmlTextWriterAttribute.Src, _ThumbImageUrl);
            writer.RenderBeginTag(HtmlTextWriterTag.Img);
            writer.RenderEndTag();
            writer.RenderEndTag();
        }
    }
}

下面是一个稍微复杂的问题，就是以集合的方式在ImageSilde内存储ImageItem。不过随着时间推移，现在类似的文章越来越多了，其实也很容易GOOGLE到答案。不过那些文章大部分是用ArrayList来存储。出于C#类型安全的初衷，我使用泛型来存储集合。

下面是ImageSlide中的ImageItem集合设置：

private List<ImageItem> _ImageItemList;
[Bindable(true)]
[Category("MK.Control.ImageSlide")]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
[PersistenceMode(PersistenceMode.InnerProperty)]
[Editor(typeof(System.ComponentModel.Design.CollectionEditor), typeof(System.Drawing.Design.UITypeEditor))]
[NotifyParentProperty(true)]
public List<ImageItem> ImageItemList
{

    get
    {
        if (_ImageItemList == null) { _ImageItemList = new List<ImageItem>(); }
        return _ImageItemList;
    }
}

关键部分的内容，就是这些了。下一篇讲叙述该控件的js部分的内容。