使用 AnyButton 创建动态图像按钮

• 下载演示项目及源代码 - 35.3 Kb

引言

我们都遇到过这样的问题——在设计我们的网站时，希望获得特定的外观和感觉。不幸的是，并非所有访问者都会按照您期望的方式查看网站。这是因为不同的操作系统以不同的方式渲染原生的浏览器控件。OS X 中的按钮具有 Aqua 风格，而 Windows 2000 中的按钮则看起来灰暗过时。

使用 AnyButton

直到现在，要强制保持一致的外观，一个流行的选择是使用图像作为按钮。这是一个很好的替代方案，但如果需要添加新按钮或修改现有按钮，您最好手边准备好 Photoshop（以及时间）来完成。

我创建了一个名为 `AnyButton` 的控件，它继承自 `System.Web.UI.WebControls.ImageButton`。这个按钮使用图像模板作为皮肤。它可以接受 JPG、GIF 或 PNG 作为模板。它非常易于使用，最重要的是，看起来就像一个真正的按钮。此控件兼容 IE6、Firefox、Netscape 和 Safari 浏览器。

该控件接受一个单一图像作为模板。按钮支持三种不同的状态——默认、悬停（hover）和按下（press）。此外，每个按钮支持三种不同的皮肤——每种状态一种。这允许您通过继承 `Button` 基类来创建任意数量的按钮类型。例如，您可以拥有 `XPButton`、`AquaButton`、`AmazonComButton` 等。最好的部分是，您不必使用 Photoshop 来创建按钮——如果您喜欢某个网站上的按钮，截屏、裁剪中间部分，您就基本准备就绪了。

这是一个使用 XP 按钮作为皮肤的示例

• 这是我将分配给按钮的默认状态模板

  

• 这是我将分配给按钮的悬停状态模板

  

• 这是我将分配给按钮的按下状态模板

  

如您所见，红色线条指示如何分割按钮。这些线条必须是精确的 RGB 颜色 (255, 0, 0) 或 #FF0000。

每个按钮都有一个 `ButtonConfig` 类作为属性。`ButtonConfig` 类包含有关按钮模板的所有信息。这是一个使用所有按钮状态的示例，生成一个类似于 XP Silver 按钮的按钮

/// <summary>
/// Default button templated to resemble the Silver XP Button
/// </summary>
public class XPButton : AnyButton
{
    public XPButton()
    {
        this.EnableHover = true;
        this.EnablePress = true;
    }

    public XPButton(Page page)
    {
        this.Page = page;
        this.EnableHover = true;
        this.EnablePress = true;
    }

    protected override void OnInit(EventArgs e)
    {
        Initialize();
        base.OnInit(e);
    }

    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
    }

    protected void Initialize()
    {
        Font f = new Font("Tahoma", 8, FontStyle.Regular);

        ButtonConfig buttonConfig = new ButtonConfig();
        buttonConfig.TemplatePath = "~/xp_button/default.png";
        buttonConfig.OutputPath = "~/output/xp";
        buttonConfig.Font = f;
        buttonConfig.VerticalTextOffset = 1;
        buttonConfig.FontColor = Color.Black;
        this.Config = buttonConfig;

        ButtonConfig hoverConfig = new ButtonConfig();
        hoverConfig.TemplatePath = "~/xp_button/hover.png";
        hoverConfig.OutputPath = buttonConfig.OutputPath;
        hoverConfig.Font = buttonConfig.Font;
        hoverConfig.VerticalTextOffset = buttonConfig.VerticalTextOffset;
        hoverConfig.FontColor = buttonConfig.FontColor;
        this.HoverConfig = hoverConfig;

        ButtonConfig pressConfig = new ButtonConfig();
        pressConfig.TemplatePath = "~/xp_button/press.png";
        pressConfig.OutputPath = buttonConfig.OutputPath;
        pressConfig.VerticalTextOffset = buttonConfig.VerticalTextOffset + 1;
        pressConfig.HorizontalTextOffset = buttonConfig.VerticalTextOffset + 1;
        pressConfig.Font = hoverConfig.Font;
        pressConfig.FontColor = buttonConfig.FontColor;
        this.PressConfig = pressConfig;
    }
}

这个例子非常直观。需要注意的是 `pressConfig` 中使用了 `VerticalTextOffset` 和 `HorizontalTextOffset` 属性。为了获得真正的按下效果，文本应该移动到右下角 1 像素 x 1 像素。

此示例演示了如何创建 XP 主题按钮。为了让您立即开始，我将 `XPButton` 与 AnyButton 程序集打包在一起。我这样做是为了让您能够立即使用 `AnyButton` 而无需模板（XP）。`XPButton` 的三种状态模板嵌入在 DLL 中。首次调用 `XPButton` 时，它需要将模板提取到指定的路径。此路径可以通过 `TemplateExtractPath` 属性进行设置。此属性仅对 `XPButton` 独有，仅用于提取其模板。

当调用派生自 `AnyButton` 的按钮时，它必须将这些生成的图像保存到磁盘上的某个位置以备将来使用。每种按钮类型的每个状态在技术上都可以有不同的输出路径。很可能，所有状态的输出路径将是相同的。要设置输出路径，请使用 `OutputPath` 属性。此属性接受应用程序范围的路径（~/）。ASPNET 用户帐户必须对该路径具有读/写访问权限，这一点至关重要。

到目前为止一切顺利，对吧？使用此控件是最简单的部分。看一下

<%@ Register TagPrefix="btn" Namespace="MyNamespace" Assembly="MyAssembly" %>

<btn:XPButton Runat="server" Text="Click Me"/>

这是上一个调用的结果

如您所见，创建了三个图像；每种状态一个。任何后续对带有文本“Click Me”的 `XPButton` 的请求现在都将被重定向到已生成的按钮图像。要清除图像缓存，只需删除输出目录即可。

附加属性

• AlphaPng

  如果您正在使用 PNG 文件并希望强制透明度，请将 `AlphaPng` 设置为 true。这是必需的，因为 IE 不支持 alpha PNG（对 MS 来说）。当 `AlphaPng` 为 true 时，一个特殊的 CSS 过滤器将仅添加到 IE 用户（Firefox、Safari 等用户不受影响）。

• TextWidth

  当您想强制文本具有特定宽度，而不管文本实际宽度时，请使用此属性。

• OnClientClick

  一个方便的小属性，可以在标记中设置，在按下按钮时添加客户端函数调用。

• AntiAliasText

  默认情况下为 true，应用抗锯齿和 `ClearType` 效果。

• CausesPostback

  默认情况下，`ImageButton`（此控件从中派生）是一个提交按钮。要禁用回发，请将 `CausesPostback` 设置为 false。

• ForceRedraw

  这不是一个属性，而是一个查询字符串变量，当存在时，它将强制重绘按钮，忽略缓存。[示例用法：http://www.mysite.com/default.aspx?ForceRedraw=true。]

差不多就是这样了。

链接

• 点击此处查看在线演示.
• 点击此处查看 GNU 许可.
• 点击此处获取最新文章和下载更新.