ToggleButton:用图片来代替CheckBox

ToggleButton扩展器控件可以将CheckBox用一对图片替代，用更加丰富的视觉效果来表示CheckBox的选中/未选中状态。
示例运行效果：

图(1)

图(2)

图(3)

StyleSheet.css代码示例

*
{...} {
    font-family: Tahoma;
    font-size: 12px;
}

fieldset
{...} {
    margin: 5px;
    padding: 5px;
}

.demoheading
{...} {
    padding-bottom:20px;
    color:#5377A9;
    font-family:Arial,Sans-Serif;
    font-weight:bold;
    font-size:1.5em;
}

ToggleButtonDemo.aspx代码示例：

<% ... @ Page Language="C#" AutoEventWireup="true" CodeFile="ToggleButtonDemo.aspx.cs" Inherits="Chapter08_ToggleButtonDemo"  %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > ToggleButton Demo </ title >
     < link  href ="StyleSheet.css"  rel ="Stylesheet"  type ="text/css"   />
</ head >
< body >
     < form  id ="ToggleButtonForm"  runat ="server" >
         < asp:ScriptManager  ID ="sm"  runat ="server"   />
         < div  class ="demoheading" > 用图片来代替CheckBox </ div >
         < asp:UpdatePanel  ID ="up"  runat ="server" >
             < ContentTemplate >
                 < asp:CheckBox  ID ="CheckBox1"  Checked ="true"  Text ="ASP.NET"  runat ="server"   />< br  />
                 < ajaxToolkit:ToggleButtonExtender  ID ="ToggleButtonExtender1"  runat ="server"  
                    TargetControlID ="CheckBox1"
                    CheckedImageUrl ="Images/checked.png"  
                    UncheckedImageUrl ="Images/unchecked.png"
                    ImageHeight ="16"  
                    ImageWidth ="16"  
                    CheckedImageAlternateText ="取消"  
                    UncheckedImageAlternateText ="选中"   />
                
                 < asp:CheckBox  ID ="CheckBox2"  Checked ="true"  Text ="ASP.NET AJAX"  runat ="server"   />< br  />
                 < ajaxToolkit:ToggleButtonExtender  ID ="ToggleButtonExtender2"  runat ="server"  
                    TargetControlID ="CheckBox2"
                    CheckedImageUrl ="Images/checked.png"  
                    UncheckedImageUrl ="Images/unchecked.png"
                    ImageHeight ="16"  
                    ImageWidth ="16"
                    CheckedImageAlternateText ="取消"  
                    UncheckedImageAlternateText ="选中"   />
                 <!--
                    TargetControlID：该扩展器目标CheckBox控件的ID，即将要被一对图片替换的CheckBox的ID
                    CheckedImageUrl：用来替换CheckBox处于启用且选中状态下的图片的URL
                    UncheckedImageUrl：用来替换CheckBox处于启用且未选中状态下的图片的URL
                    ImageHeight：用来替换CheckBox的图片的高度，单位像素(px)
                    ImageWidth：用来替换ChecnBox的图片的宽度，单位像素(px)
                    CheckedImageAlternateText：当鼠标悬浮在图片上时提示点击图片将取消
                    UncheckedImageAlternateText：当鼠标悬浮在图片上时提示点击图片将选中
                 -->
                
                 < asp:CheckBox  ID ="CheckBox3"  Checked ="true"  Text ="C#"  runat ="server"  Enabled ="False"   />< br  />
                 < ajaxToolkit:ToggleButtonExtender  ID ="ToggleButtonExtender3"  runat ="server"  
                    TargetControlID ="CheckBox3"  
                    ImageWidth ="16"
                    ImageHeight ="16"
                    CheckedImageUrl ="Images/checked.png"  
                    UncheckedImageUrl ="Images/unchecked.png"
                    DisabledCheckedImageUrl ="Images/checked.png"  
                    DisabledUncheckedImageUrl ="Images/unchecked.png"   />
                
                 < asp:CheckBox  ID ="CheckBox4"  Checked ="false"  Text ="VB.NET"  runat ="server"  Enabled ="False"   />< br  />< br  />
                 < ajaxToolkit:ToggleButtonExtender  ID ="ToggleButtonExtender4"  runat ="server"
                    TargetControlID ="CheckBox4"
                    ImageWidth ="16"
                    ImageHeight ="16"
                    CheckedImageUrl ="Images/checked.png"  
                    UncheckedImageUrl ="Images/unchecked.png"
                    DisabledCheckedImageUrl ="Images/checked.png"  
                    DisabledUncheckedImageUrl ="Images/unchecked.png"   />
                 <!--
                    DisabledCheckedImageUrl：用来替换CheckBox处于禁用且选中状态下的图片的URL
                    DisabledUncheckedImageUrl：用来替换CheckBox处于禁用且未选中状态下的图片的URL
                 -->

                 < asp:Button  ID ="btnOK"  runat ="server"  Text ="Submit"  OnClick ="btnOK_Click"   />< br  />< br  />
                 < asp:Label  ID ="lbResult"  runat ="server"  Text ="[No response provided yet]"   />                 
             </ ContentTemplate >
         </ asp:UpdatePanel >
     </ form >
</ body >
</ html >

ToggleButtonDemo.aspx.cs代码示例：

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;

public   partial   class  Chapter08_ToggleButtonDemo : System.Web.UI.Page
... {
    protected void Page_Load(object sender, EventArgs e)
    ...{

    }
    protected void btnOK_Click(object sender, EventArgs e)
    ...{
        lbResult.Text = string.Format("you <b>{0}</b> like ASP.NET <br /> you <b>{1}</b> like ASP.NET AJAX <br />" + 
            "you <b>{2}</b> like C# <br /> you <b>{3}</b> like VB.NET ",(CheckBox1.Checked ? "do" : "do not"),
            (CheckBox2.Checked ? "do" : "do not"),(CheckBox3.Checked ? "do":"do not"),(CheckBox4.Checked ? "do":"do not"));
    }
}