65.9K
CodeProject 正在变化。 阅读更多。
Home

幻灯片用户控件

Samir NIGAM
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.91/5 (46投票s)

2008 年 5 月 28 日

CPOL

7分钟阅读

viewsIcon

209424

downloadIcon

4362

本文介绍了如何借助 DataList 控件创建幻灯片用户控件。

Preview.gif

引言

在本文中，我将介绍一个 ASP.NET 幻灯片用户控件的实现。这是一个基于 HTML 表格的幻灯片。它是一个非常简单的用户控件，可以根据您的需求轻松修改。

背景

几个月前，我一直在互联网上寻找一个可以轻松应用于 DataList 控件的 JavaScript 幻灯片。我找到了一些不错的 JavaScript 幻灯片示例，但它们都是基于 div 的，而不是基于 HTML 表格的。此外，JavaScript 非常复杂，难以理解。因此，我决定开发自己的基于 HTML 表格的 JavaScript 幻灯片。后来，我将其转换为用户控件，以便可以根据未来的需求轻松修改和重用。

关于用户控件

运行时，幻灯片用户控件的外观如下

Slide_Show.png

上半部分是幻灯片的标题，下半部分是左右箭头（超链接）。中间部分包含幻灯片所需的图像。当我们将鼠标指针移到左箭头上方时，图像将从右向左移动，当我们将鼠标指针移到右箭头上方时，图像将从左向右移动。当我们将鼠标指针移开左箭头或右箭头时，幻灯片不会立即停止。当前图像的移动将首先完成，然后幻灯片停止。此用户控件中幻灯片的速度因浏览器而异。

用户控件的属性

幻灯片用户控件具有以下公共属性

  • NoOfVisibleImages：可见图像的数量。
  • ImageHeight：图像的高度。
  • ImageWidth：图像的宽度。
  • ImageDataSource：图像项集合。
  • RightImage：右箭头图像的路径。
  • LeftArrowToolTip：左箭头图像的工具提示。
  • RightArrowToolTip：右箭头图像的工具提示。
  • Title：用户控件的标题。
  • ArrowAlign：导航箭头的水平对齐方式。
  • TitleAlign：用户控件标题的水平对齐方式。
  • SlideShowSpeed：幻灯片速度（以毫秒为单位）。默认值为 10 毫秒。
  • EnableImageClick：指定是否启用 Click 事件。默认值为 false。

用户控件的事件

幻灯片用户控件只有一个服务器端事件

  • Click：单击幻灯片中的图像时触发。

使用用户控件

将用户控件拖放到 ASPX 页面，并为其属性设置值。此用户控件的 HTML 代码如下

<uc1:SlideShow ID="SlideShow1" runat="server" NoOfVisibleImages="4" 
     ImageHeight="71" ImageWidth="95" LeftImage="~/ArrowImages/back[1].gif" 
     RightImage="~/ArrowImages/next[1].gif" Title="Image Slide Show"
     ArrowAlign="Left" TitleAlign="Left" />

现在，在 Page_Load 事件中将幻灯片用户控件绑定到 ImageItems 类型的图像数据源

SlideShow1.ImageDataSource = GetImageItems();

其中 GetImageItems 方法返回一个 ImageItems 集合。GetImageItems 方法的代码如下

private ImageItems GetImageItems()
{
   ImageItems oImageItems = new ImageItems();
   ImageItem oImageItem = null;

   FileInfo[] Images = new DirectoryInfo(Server.MapPath("Images")).GetFiles("*.*");

   foreach (FileInfo Image in Images)
   {
      oImageItem = new ImageItem();
      oImageItem.URL = string.Format("~/Images/{0}", Image.Name);
      oImageItem.ToolTip = Image.Name;
      oImageItems.Add(oImageItem);
   }

   return oImageItems;
}

您还可以处理幻灯片用户控件的 Click 事件。为此，首先需要启用 Click 事件，如下所示

< ... EnableImageClick="true" ... >

然后，为 Click 事件创建事件处理程序

protected void SlideShow1_Click(object sender, SlideShowImageEventArgs e)
{
   ...
}

接下来，通过在事件名称前添加前缀 On 来将事件处理程序连接到控件标签中

< ... OnClick="SlideShow1_Click" ... >

我稍后将讨论 SlideShowImageEventArgs 类。

用户控件 HTML

此用户控件的 HTML 非常简单。

<asp:Panel ID="pnlParent" runat="server">
   <asp:Panel ID="pnlTitle" runat="server" HorizontalAlign="Left">      
      <asp:Label ID="lblTitle" runat="server" Text="Slide Show" 
           Font-Bold="True" Font-Names="Garamond" ForeColor="#404040">
      </asp:Label>
   </asp:Panel>
   <asp:Panel ID="pnlBase" runat="server">
      <table id="tblBase" border="0" cellpadding="0" cellspacing="0" 
             runat="server" style="position:absolute; left: 0px;">
         <tr>
            <td>
               <asp:DataList ID="dataList" runat="server" GridLines="Vertical" 
                    RepeatDirection="Horizontal" ShowHeader="False" 
                    CellPadding="0" OnItemCreated="dataList_ItemCreated"
                    ShowFooter="False">
                  <ItemTemplate>
                     <asp:ImageButton ID="imgSlideShow" alt="" ImageUrl='<%# Eval("URL") %>' 
                                      ToolTip='<%# Eval("ToolTip") %>' runat="server" />
                  </ItemTemplate>
                  <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
               </asp:DataList>
            </td>
         </tr>
      </table>
    </asp:Panel>
    <asp:Panel ID="pnlNavigation" runat="server" BackColor="#E0E0E0">
       <asp:HyperLink ID="aLeft" runat="server"></asp:HyperLink>
       <asp:HyperLink ID="aRight" runat="server"></asp:HyperLink>
    </asp:Panel>
</asp:Panel>

在父 Panel [ID="pnlParent"] 中有三个 Panel。第一个 Panel [ID="pnlTitle"] 用于显示用户控件的标题。为此，它包含一个 Label 控件。

第二个 Panel [ID="pnlBase"] 用于显示幻灯片的图像。它包含一个 HTML 表格 [id="tblBase"]，其 position 设置为 absolute [style="position: absolute;”]。这里使用 absolute 的 position 是为了能够在运行时使用 JavaScript 更改 HTML 表格在容器 Panel [ID="pnlBase"] 中的位置，以创建移动效果。此 HTML 表格包含一个 DataList 服务器控件，其 RepeatDirection 设置为 Horizontal。实际上，此 DataList [ID="dataList"] 在此处用于将图像绑定到用户控件。为此，在 ItemTemplate 中放置了一个 ImageButton 服务器控件 [ID="imgSlideShow"]。已使用数据绑定表达式设置 Image 服务器控件的 ImageUrl 和 ToolTip 属性。

第三个 Panel [ID="pnlNavigation"] 用于显示左右箭头。这些左右箭头负责图像从右到左或从左到右的移动。为此，在该 Panel 中放置了两个 HyperLink 控件 [ID="aLeft" 和 ID="aRight"]。

用户控件代码

SlideShow 类继承自 System.Web.UI.UserControl 类。

public partial class SlideShow : System.Web.UI.UserControl
{
   ...
}

在 DataList 的 ItemCreated 事件中设置了每个图像的高度和宽度

if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
   ImageButton imgSlideShow = (ImageButton)e.Item.FindControl("imgSlideShow");
   imgSlideShow.Height = Unit.Pixel(_ImageHeight);
   imgSlideShow.Width = Unit.Pixel(_ImageWidth);
}

SlideShow 类中有两个 private 方法：GetCSS 和 GetJS，它们在客户端生成此用户控件所需的 JavaScript 和 CSS。

private string GetJS()
{
   StringBuilder JS = new StringBuilder();
   JS.Append("<script type=\"text/javascript\">\n");
 
   ...

   JS.Append("</script>");
   return JS.ToString();
}

private string GetCSS ()
{
   StringBuilder CSS= new StringBuilder();
   CSS.Append("<style type=\"text/css\">\n");

   ...

   CSS.Append("</style>");
   return CSS.ToString();
}

在用户控件的 Page_Load 事件中，CSS 已附加到页面的 header 部分，如下所示

//Adding a stylesheet to the page header
((HtmlHead)this.Page.Header).Controls.Add(new LiteralControl(GetCSS()));

请注意，要通过代码附加必要的 CSS，页面的 header 部分应标记为 runat=server，如下所示

<head runat="server">

在用户控件的 Page_Load 事件中，JavaScript 已注册到页面，如下所示

//Register client side script.
this.Page.ClientScript.RegisterStartupScript(typeof(Page), "MyScript", GetJS());

在用户控件的 Page_Load 事件中，还为左右 HyperLink 控件附加了客户端的 mouseover 和 mouseout 事件，如下所示

aLeft.Attributes["onmouseover"] = "javascript:Start();MoveLeft();";
aLeft.Attributes["onmouseout"] = "javascript:Stop();StopMoveLeft();";
aRight.Attributes["onmouseover"] = "javascript:Start();MoveRight();";
aRight.Attributes["onmouseout"] = "javascript:Stop();StopMoveRight();";

幻灯片用户控件对其 Click 事件具有以下定义

public event SlideShowClick Click;

代表 Click 事件的委托具有以下签名

public delegate void SlideShowClick(object sender, SlideShowImageEventArgs e);

此用户控件的 Click 事件已在 ImageButton 的 click 事件中触发，如下所示

protected void imgSlideShow_Click(object sender, ImageClickEventArgs e)
{
   // Fire the event.
   if (Click != null)
      Click(this, new SlideShowImageEventArgs((ImageButton)sender, e.X, e.Y));
}

Click 事件已以如下方式附加到每个 ImageButton 控件的 DataList 的 ItemCreated 事件中

if (_EnableImageClick)
   imgSlideShow.Click += new ImageClickEventHandler(imgSlideShow_Click);
else
   imgSlideShow.Attributes["onclick"] = "javascript:return false;";

请注意，如果 EnableImageClick 为 false，则通过 JavaScript 阻止回发。还有一件事：如果您想处理幻灯片用户控件的 Click 事件（即 EnableImageClick 为 true），请将以下代码行放在 web.config 文件的 system.web 部分

<pages enableEventValidation="false"></pages>

如果不添加此代码行，您将遇到以下错误

error.png

我曾尝试通过代码处理它，但未能成功。如果有人对此有任何想法，请告诉我。

SlideShowImageEventArgs 是此用户控件的事件参数类，包含有关要单击的 Image 的一些基本信息。该类的定义如下

public class SlideShowImageEventArgs : EventArgs
{
    private ImageButton _ImageButton = null;
    private int _X = 0;
    private int _Y = 0;

    public int X
    {
        get { return _X; }
    }

    public int Y
    {
        get { return _Y; }
    }

    public string URL
    {
        get { return _ImageButton.ImageUrl; }
    }

    public string ToolTip
    {
        get { return _ImageButton.ToolTip; }
    }

    public SlideShowImageEventArgs(ImageButton O, int X, int Y)
    {
        _ImageButton = O;
        _X = X;
        _Y = Y;
    }
}

图像源

幻灯片用户控件具有一个公共属性 ImageDataSource。用于将图像项绑定到用户控件以进行幻灯片显示。ImageDataSource 属性接受 ImageItems 类型的图像项集合作为图像数据源。ImageItems 是一个通用集合类，继承自 List 类。ImageItems 和 ImageItem 类的定义如下

public class ImageItems : List<ImageItem>
{
   public ImageItems() { }
}

public class ImageItem
{
   private string _ToolTip = string.Empty;
   public string ToolTip
   {
      get { return _ToolTip; }
      set { _ToolTip = value; }
   }

   private string _URL = string.Empty;
   public string URL
   {
      get { return _URL; }
      set { _URL = value; }
   }

   // Default constructor.
   public ImageItem() { }

   public ImageItem(string ToolTip, string URL)
   {
      this._ToolTip = ToolTip;
      this._URL = URL;
   }
}

JavaScript 方法

有六个 JavaScript 方法负责在客户端执行幻灯片功能，分别是：Start、Stop、MoveLeft、StopMoveLeft、MoveRight 和 StopMoveRight。一旦我们将鼠标指针移到左或右 HyperLnk 上，就会触发 onmouseover 事件。首先调用 Start 方法，它将一个全局标志 IsPaused 设置为 false，表示幻灯片即将开始。然后，调用 MoveLeft 或 MoveRight 方法。这些方法负责为幻灯片将图像从右向左或从左向右移动。当我们将来鼠标指针从左或右 HyperLnk 上移开时，将触发 onmouseout 事件。首先调用 Stop 方法，它将全局标志 IsPaused 设置为 true，表示幻灯片即将停止。然后，调用 StopMoveLeft 或 StopMoveRight 方法。这些方法不会立即停止幻灯片。而是先完成当前图像从右向左或从左向右的移动，然后停止幻灯片。

结论

这就是我使用 DataList 实现 ASP.NET 幻灯片的方法。我已尽最大努力使其没有 bug。我非常欢迎提出进一步改进此用户控件的建议和批评。我在各种浏览器上测试过此用户控件，它工作正常。下面列出了支持的浏览器及其版本

Browsers.png

© . All rights reserved.