21.4 ToggleButton个性化按钮控件(征服ASP.NET 2.0 Ajax——Web开发技术详解 )

---------http://book.csdn.net/bookfiles/305/10030512733.shtml

21.4 ToggleButton个性化按钮控件
ToggleButton是一个专用于CheckBox的按钮控件，本节介绍其主要属性，并以实例的形式，显示如何在项目中应用此控件。
21.4.1 简介
ToggleButton控件只能应用于控件CheckBox，其最主要的功能，是以自定义图片的形式，显示复选框的选中和未选状态，确切的说是一个根据状态变化的图片按钮。ToggleButton控件的主要属性如下：
<ajaxToolkit:ToggleButtonExtender ID="ToggleEx" runat="server"
TargetControlID="CheckBox1"
ImageWidth="19"
ImageHeight="19"
CheckedImageAlternateText="Check"
UncheckedImageAlternateText="UnCheck"
UncheckedImageUrl="ToggleButton_Unchecked.gif"
DisabledCheckedImageUrl=””
CheckedImageUrl="ToggleButton_Checked.gif" />
其中各属性的意义如下：
l TargetControlID：要应用ToggleButton特色的CheckBox控件的ID。
l ImageWidth：显示图片的宽度。
l ImageHeight：显示图片的高度。
l CheckedImageAlternateText：选中状态下的提示文本。
l UncheckedImageAlternateText：未选中状态下的提示文本。
l UncheckedImageUrl：未选中状态下显示的图片地址。
l CheckedImageUrl：选中状态下显示的图片地址。
l DisabledCheckedImageUrl：当控件为不可用状态时，默认选中时要显示的图片。
ToggleButton控件的应用效果如图21-25所示。



图21-25 ToggleButton控件的应用效果

注意：此控件不能应用于CheckBoxList控件。
21.4.2 用ToggleButton装饰CheckBox控件实例
ToggleButton专门用来装饰CheckBox，并不支持其他控件，复选框可以是客户端的，也可以是服务器端的。本例使用ToggleButton来装饰一组服务器端的CheckBox，其中每个得定义又不相同，有CheckBox在不可用状态下的ToggleButton应用，也有CheckBox默认就被选中时ToggleButton的应用。实例的演示步骤如下：
（1）打开VS2005，新建一个AJAX Control Toolkit网站，命名为“AjaxToggleButtonCtrl”。
（2）打开默认生成的Default.aspx页，切换到窗体的设计视图。
（3）在视图中添加6个CheckBox控件和5个ToggleButtonExtender。其中有一个CheckBox并不做任何修饰，体现对比效果。
（4）设计页面的布局，最终效果如图21-26所示。



图21-26 ToggleButton实例的设计视图
（5）将“ToggleButtonExtender1”应用于“CheckBox1”，设计最普通的应用，需要提供两个图片，一个用于显示未选中状态的“wrong.jpg”，一个用于显示选中状态的“right.jpg”。ToggleButtonExtender1最终的设计属性如清单21-17所示。

代码清单21-17 ToggleButtonExtender1的设计属性
<ajaxToolkit:ToggleButtonExtender ID="ToggleButtonExtender1" runat="server"
TargetControlID="CheckBox1"
ImageHeight="20"
ImageWidth="23"
CheckedImageAlternateText="选中"
UncheckedImageAlternateText="未选中"
CheckedImageUrl="right.jpg"
UncheckedImageUrl="wrong.JPG">
</ajaxToolkit:ToggleButtonExtender>
（6）将“ToggleButtonExtender5”应用于“CheckBox5”，此复选框的属性“Enabled”要设置为“false”，表示其处于不可用状态，这时就需要定义ToggleButtonExtender5的“DisabledCheckedImageUrl”属性。最终ToggleButtonExtender5的设计属性，如清单21-18所示。

代码清单21-18 ToggleButtonExtender5的设计属性
<ajaxToolkit:ToggleButtonExtender ID="ToggleButtonExtender5" runat="server"
TargetControlID="CheckBox5"
ImageHeight="20"
ImageWidth="23"
DisabledCheckedImageUrl="wrong.JPG"
DisabledUncheckedImageUrl="right.jpg"
CheckedImageAlternateText="选中"
UncheckedImageAlternateText="未选中"
UncheckedImageUrl="right.jpg"
CheckedImageUrl="wrong.JPG">
</ajaxToolkit:ToggleButtonExtender>
（7）然后将其他的ToggleButtonExtender对应不同的CheckBox，设计属性同ToggleButtonExtender1。
（8）按“Ctrl+S”保存所有的代码，按F5运行程序，效果如图21-27所示。可通过单击按钮，更改CheckBox的选中状态。



图21-27 ToggleButton实例的运行效果