创建 ASP.NET 圆角面板 WebControl

• 下载源代码文件 - 11.7 KB

引言

在互联网上，关于如何创建那些时尚的圆角“Web 2.0”面板（如上图所示）的方案可能成百上千。这些面板现在在数百万个网站上都可以看到。毫无疑问，有很多服务器控件可以做同样的事情。我见过一些好的，但大多数都很糟糕。 这是我尝试创建一个简洁的解决方案来解决一个肯定应该是简单的问题。

背景

因为制作圆角没有一个“正确”的答案，所以我选择了我认为最简单和性能最高的解决方案。 从可扩展性的角度来看，用图片来做没有意义。 虽然我喜欢 JavaScript，但我想计划在客户端关闭 JavaScript 时的情况。 当然，这种情况很少见，但确实会发生。 最后，我想将所有这些功能封装到一个拖放式服务器控件中，该控件在 Visual Studio 中只需要最少的配置，当然，还要与跨浏览器兼容。

因为我不是 CSS 天才，所以我上网找了一些能满足我需求的解决方案。 我真的只是想要纯 CSS，并且，正如我上面所说，不需要图像或 JavaScript。 我在 Stu Nicholls 的网站 CSSPlay 上找到了我想要的东西。 他有一个优雅的 CSS 解决方案，看起来可以在 Web 控件中很好地工作。 而且，由于他不介意任何人使用他的代码，我认为这是最好的方法。 谢谢，Stu！

代码内部

控件本身只包含五个属性和一个重写的方法。 我允许用户配置面板边框颜色、面板文本颜色、面板内部背景颜色、面板外部背景颜色以及面板内的文本。 当然，您可以在面板中嵌套控件（它继承自 ASP Panel 控件），但有时您不想配置标签控件。 设置文本使其更简单。

该方法只是重写 RenderContents 方法来输出我需要的嵌套在样式标签中的 CSS，以及组成面板的 div 及其嵌套标签。 我更改了 CSS 以按其唯一的客户端 ID 引用元素，因此可以在页面上拥有多个具有不同样式的面板（如上面的屏幕截图所示）是可行的。 所有其余的设计功能都继承自 Panel 控件，包括可见性。

最后，我确保在段落标签之间呈现任何子控件。 这使得最终的面板渲染干净整洁。 是的，您也可以使用 output.WriteBeginTag("p"); 如果你愿意。 我喜欢 output.Write();

if (HasControls())
{
     output.Write("<p>");
     this.RenderChildren(output);
     output.Write("</p>");
}

Using the Code

我在可下载的源代码中包含了输出 DLL (Web2Controls.dll) 以及代码文件。 您可以简单地将其添加到工具箱，将控件拖到您的页面上，然后开始添加嵌套控件。 所有属性都位于“圆角面板”类别下，并设置了默认值。 该面板还考虑了不同的高度和宽度单位。 您可以使用百分比或像素。 因为它从 Panel 控件继承其设计器属性，所以在运行之前，您不会获得面板的图形表示（颜色和样式方面）。 它将简单地显示为任何 Panel，您可以拖放控件。

我在 IE6、IE7 和 Firefox 中测试过这个，没有遇到任何问题。 我没有在本地安装 Opera 或 Safari，所以如果你们中的任何人在这些平台上进行测试，我很想听听你们的结果。

祝你 UI 愉快！

历史

• 2007/9/25 - 删除了一个用于测试的残留段落标签
• 2007/9/22 - 添加了关闭 div 标签以输出渲染