适用于 ASP.NET 2.0 的图像阴影 UserControl

• 下载源代码 - 4.28 KB

引言

这个 ASP.NET 2.0 UserControl 将为网页上的图像添加阴影（请参见上面的示例图像）。

背景

最近，我正在为一位客户开发一个网店，他们希望在产品图像上添加阴影，以使其外观更具吸引力。不幸的是，没有 ASP.NET 2.0 图像控件支持投影阴影功能。因此，我开始在网上搜索，偶然发现了 Brian Williams 的精彩教程 Onion Skinned Drop Shadows。我立刻意识到这就是我所需要的。感谢 Brian 提供了这个精美的教程。

当我阅读以下特性时

• 自动扩展和收缩以适应任何对象，无需指定宽度。
• 允许您在不进行图像操作的情况下修改阴影深度。
• 在所有浏览器上以相同的方式渲染 跨所有浏览器，不打任何折扣。

我知道这可以成为任何网站的一个很棒的 UserControl。因此，我启动 Visual Studio 并开始编码。结果是一个只有六个属性的 UserControl

• 图片 URL
• 宽度
• 高度
• 样式
• OffsetX
• OffsetY

ImageUrl 属性用于设置图像的虚拟路径。宽度和高度属性是可选的。使用 Style 属性，您可以为图像添加样式 - 边距或边框等。OffsetX 和 OffsetY 是阴影的宽度和高度。

Using the Code

• 下载源代码并解压缩它。
• 将两个文件 ShadowImage.ascx 和 ShadowImage.ascx.vb 以及图像文件夹添加到您的项目中。
• 将控件从解决方案资源管理器拖到设计模式下的 ASPX 页面上。
• 切换到代码视图并添加如下所示的属性。
• 按 F5 并运行您的解决方案。

<uc1:shadowimage id="ShadowImage1" runat="server" 
         Width="160" ImageUrl="myimage.jpg" 
         OffsetX="8" OffsetY="8" 
         Style="border:2px solid #666666" />

关注点

此控件仅支持图像 - 这正是我需要的。如果您想使其可点击，只需将图像替换为 ImageButton，并在单击时引发公共事件。您可以轻松地为任何对象添加阴影，因为它会自动扩展和收缩以适应任何对象，而无需指定宽度。您还应该访问 Brian Williams 的教程 Onion Skinned Drop Shadows，以获取更多详细信息和额外的阴影模式...