图 1：RadButton 配置为 StandardButton。

图 2：RadButton 配置为 LinkBut​​ton。

示例 2：在图 2中创建LinkBut​​ton的代码。

<telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" Text="Link Button"ButtonType="LinkButton" NavigateUrl="https://www.telerik.com" Target="_blank" />

将RadButton配置为SkinnedButton

图 3：配置为 SkinnedButton 的 RadButton。

示例 3：在图 3中创建SkinnedButton的代码。

<telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" Text="Skinned Button" ButtonType="SkinnedButton" />

将RadButton配置为ToggleButton

切换按钮。该控件的呈现方式与LinkBut​​ton相同，不同之处在于应用的样式。ToggleButton看起来像一个复选框或单选按钮，具体取决于为ToggleType属性指定的值。如果ToggleType设置为“ None ”或使用“ CustomToggle ” ，它也可以看起来像一个简单的文本（标签）按钮 [可点击文本] 。当需要样式丰富的复选框或单选按钮时，应使用此按钮类型。

图 1：配置为拆分按钮的 RadButton。示例 1 中提供了创建此图的代码。

额外的按钮在右侧（默认）或左侧呈现，具体取决于设置为SplitButtonPosition属性的值。开发人员还可以使用SplitButtonCssClass属性将自定义样式应用于控件。

不能同时启用具有SplitButtonPosition =" Left " 的PrimaryIcon和拆分按钮。SecondaryIcon和SplitButtonPosition =" Right "也是如此。

在客户端使用拆分按钮功能

可以处理客户端的OnClientClickedOnClientClicked或OnClientClicking事件，然后根据用户单击的按钮执行所需的操作。请参见示例 1中的示例。

<telerik:RadButton RenderMode="Lightweight" ID="SplitButton1" Text="SplitButton" runat="server" EnableSplitButton="true"OnClick="SplitButton1_Click" OnCommand="SplitButton1_Command">
</telerik:RadButton>

protected void SplitButton1_Command(object sender, CommandEventArgs e)
{Telerik.Web.UI.ButtonCommandEventArgs args = e as Telerik.Web.UI.ButtonCommandEventArgs;if (args.IsSplitButruytonClick){//TODO: Split button logic}
}
protected void SplitButton1_Click(object sender, EventArgs e)
{Telerik.Web.UI.ButtonClickEventArgs args = e as Telerik.Web.UI.ButtonClickEventArgs;if (args.IsSplitButtonClick){//TODO: Split button logic}
}

示例 2：利用服务器端的拆分按钮功能。

<telerik:RadButton RenderMode="Lightweight" EnableSplitButton="true" ID="SplitButton" AutoPostBack="false" runat="server" Text="Transfer Item" OnClientClicked="OnClientClicked">
</telerik:RadButton>

function OnClientClicked(sender, args) {if (args.IsSplitButtonClick()) {//TODO: Execute SplitButton logicalert("Split button clicked!");} else {//TODO: Execute main button logicalert("Main button clicked!");}
}

图像按钮

图 1：用作 ImageButton 的 RadButton（图像代表按钮）。

图 2：带有背景图像、图标和文本的 RadButton。

有两种方法可以在控件上显示图像：

1. 第一种也是最简单的方法是将Image.ImageUrl属性设置为所用图像的位置。将IsBackgroundImage设置为 true 使开发人员可以将图像用作背景，并将文本和图标设置为他/她的按钮。

2. 使用RadButton的CssClass属性设置图像的第二种方法。基本上我们在CssClass中设置背景图像，并通过设置Image.EnableImageButton=true来启用图像按钮功能（示例 1）。

当想为按钮使用图像精灵时，这种方法是首选（参见下面的示例）。在CssClass中设置背景图像和背景位置，然后在HoveredCssClass和PressedCssClass中，仅设置悬停和按下图像的背景位置。如果用户希望她/他可以在鼠标悬停在控件上时显示不同的图像，或者分别使用HoveredImageUrl和PressedImageUrl属性按下按钮。

<style type="text/css">.classImage{background: url(img/categories.png);background-position: 0 0;width: 150px;height: 94px;}.classHoveredImage{background-position: 0 -100px;}.classPressedImage{background-position: 0 -200px;}
</style>

<telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" Text="Image Button" CssClass="classImage"HoveredCssClass="classHoveredImage" PressedCssClass="classPressedImage"><Image EnableImageButton="true" />
</telerik:RadButton>

无论控件是否仅用作图像按钮（不显示文本和图标），设置Text属性总是好的，因为这样可以提高控件的可访问性。

切换按钮

RadButton控件可以轻松配置为切换按钮。只需将ToggleType属性设置为与 ButtonToggleType.None 不同的值，按钮就会转换为复选框、单选按钮或完全自定义的切换按钮。由于ButtonType属性控制组件的外观，用户可以让他/她的按钮看起来像标准按钮<input type="submit|button" />元素，并且表现得像复选框或单选按钮。以下是一些代码示例，展示了如何实现这一点：

将RadButton控件配置为复选框：

要将 RadButton配置为复选框，必须执行以下步骤：

1. 将按钮的ToggleType属性设置为“ CheckBox ”。

2. 通过ButtonType属性选择所需的按钮类型：

   • StandardButton - 用于标准按钮布局。
   • LinkBut​​ton - 用于链接按钮布局。
   • ToggleButton - 用于原生复选框布局。

3. 通过Checked属性定义复选框是否被选中。

4. 可以通过RadButtonToggleState类的相应属性（例如Text、Value、Selected、CssClass等）对两种切换状态进行进一步定制。

<telerik:RadButton RenderMode="Lightweight" ID="btnToggle1" runat="server" Text="Checkbox 1" ToggleType="CheckBox"ButtonType="StandardButton"></telerik:RadButton><telerik:RadButton RenderMode="Lightweight" ID="btnToggle2" runat="server" Text="Checkbox 2" ToggleType="CheckBox" ButtonType="LinkButton"></telerik:RadButton><telerik:RadButton RenderMode="Lightweight" ID="btnToggle2" runat="server" Text="Checkbox 3" ToggleType="CheckBox" ButtonType="ToggleButton"></telerik:RadButton>

<telerik:RadButton RenderMode="Lightweight" ID="btnToggle1" runat="server" Text="Radio Button 1" ToggleType="Radio" ButtonType="StandardButton"></telerik:RadButton><telerik:RadButton RenderMode="Lightweight" ID="btnToggle2" runat="server" Text="Radio Button 2" ToggleType="Radio" ButtonType="LinkButton"></telerik:RadButton><telerik:RadButton RenderMode="Lightweight" ID="btnToggle3" runat="server" Text="Radio BUtton 3" ToggleType="Radio" ButtonType="ToggleButton"></telerik:RadButton>

图 2：RadButton 的单选按钮功能不仅与本机单选按钮的外观相关，还与 StandardButton 和 LinkBut​​ton 按钮类型相关。

使用自定义切换状态配置RadButton控件

为了配置具有自定义切换状态的RadButton，必须执行以下步骤：

1. 将按钮的ToggleType属性设置为“ CustomToggle ”。

2. 通过ButtonType属性选择所需的按钮类型：

   • StandardButton - 用于标准按钮布局。
   • LinkBut​​ton - 用于链接按钮布局。
   • ToggleButton - 用于原生布局。

3. 向ToggleStates集合添加任意数量的RadButtonToggleState实例。通过RadButtonToggleState类的相应属性（例如Text、Value、Selected、CssClass等）对每个切换状态进行进一步定制。

<telerik:RadButton RenderMode="Lightweight" ID="btnToggle1" runat="server" ToggleType="CustomToggle" ButtonType="StandardButton"><ToggleStates><telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox" /><telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="rbToggleCheckboxFilled" /><telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked" /></ToggleStates>
</telerik:RadButton><telerik:RadButton RenderMode="Lightweight" ID="btnToggle1" runat="server" ToggleType="CustomToggle" ButtonType="LinkButton"><ToggleStates><telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox" /><telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="rbToggleCheckboxFilled" /><telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked" /></ToggleStates>
</telerik:RadButton><telerik:RadButton RenderMode="Lightweight" ID="btnToggle1" runat="server" ToggleType="CustomToggle" ButtonType="ToggleButton"><ToggleStates><telerik:RadButtonToggleState Text="UnChecked" PrimaryIconCssClass="rbToggleCheckbox" /><telerik:RadButtonToggleState Text="Filled" PrimaryIconCssClass="rbToggleCheckboxFilled" /><telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked" /></ToggleStates>
</telerik:RadButton>

在上面的代码中，PrimaryIconCssClass属性用于指定一个三态（3-state）复选框，Text 属性根据当前选定的状态具有不同的文本。

内容模板

接下来将展示展示了如何在RadButton中而不是纯文本中添加复杂的内容（服务器端控件和 HTML 元素） 。可以在标记中或在后面的代码中执行此操作：

在标记中将元素添加到RadButton

为了将控件添加到标记中的RadButton，应该将它们直接放在复合ContentTemplate属性中（示例 1）。

<telerik:RadButton RenderMode="Lightweight" runat="server" ID="RadButton1"><ContentTemplate><img alt="cog" src="https://demos.telerik.com/aspnet-ajax/button/examples/contenttemplate/Img/cog.png" /><span>Tasks</span><telerik:RadRating RenderMode="Lightweight" ID="RadRating1" runat="server" Enabled="false" Value="3" SelectionMode="Continuous" ItemCount="5" /></ContentTemplate>
</telerik:RadButton>

<telerik:RadButton RenderMode="Lightweight" runat="server" ID="RadButton1" Width="160px" Height="70px">
</telerik:RadButton>

protected void Page_Init(object sender, EventArgs e)
{Literal radButtonContent = new Literal();radButtonContent.ID = "radButtonContent";radButtonContent.Text = "<img alt='car' src='https://demos.telerik.com/aspnet-ajax/button/examples/contenttemplate/Img/car.png' /><span>Vehicles</span>";RadButton1.Controls.Add(radButtonContent);
}

<telerik:RadButton RenderMode="Lightweight" runat="server" ID="RadButton1" Width="160px" Height="70px">
</telerik:RadButton>

protected void Page_Init(object sender, EventArgs e)
{RadButton1.ContentTemplate = new ButtonContentTemplate();
}public class ButtonContentTemplate : ITemplate
{void ITemplate.InstantiateIn(Control container){System.Web.UI.WebControls.Image contentImage = new System.Web.UI.WebControls.Image();contentImage.ID = "contentImage";contentImage.ImageUrl = "https://demos.telerik.com/aspnet-ajax/button/examples/contenttemplate/Img/envelope.png";contentImage.AlternateText = "envelope";container.Controls.Add(contentImage);Label contentLabel = new Label();contentLabel.ID = "contentLabel";contentLabel.Text = "E-Mail";container.Controls.Add(contentLabel);}
}

<telerik:RadButton runat="server" ID="RadButton1" Text="RadButton"><ConfirmSettings ConfirmText="Are you sure you want to continue?" />
</telerik:RadButton>

除了 RadButton，还可以在页面上添加一个 RadWindowManager。

<telerik:RadButton runat="server" ID="RadButton1" Text="RadButton"><ConfirmSettings ConfirmText="Are you sure you want to continue?"  />
</telerik:RadButton><telerik:RadWindowManager ID="RadWindowManager1" runat="server"></telerik:RadWindowManager>

不同的按钮类型

辐射复选框

<telerik:RadCheckBox ID="RadCheckBox1" runat="server" Text="RadCheckBox"><ConfirmSettings ConfirmText="Are you sure you want to continue?" />
</telerik:RadCheckBox>

辐射按钮

<telerik:RadPushButton ID="RadPushButton1" runat="server" Text="RadPushButton1"><ConfirmSettings ConfirmText="Are you sure you want to continue?" />
</telerik:RadPushButton>

辐射链接按钮

<telerik:RadLinkButton ID="RadLinkButton1" runat="server" Text="RadLinkButton1" NavigateUrl="https://demos.telerik.com/aspnet-ajax/button" Target="_blank"><ConfirmSettings ConfirmText="Are you sure you want to continue?" />
</telerik:RadLinkButton>

RadToggleButton

<telerik:RadToggleButton runat="server" ID="RadToggleButton1"><ConfirmSettings ConfirmText="Are you sure you want to continue?" /><ToggleStates><telerik:ButtonToggleState Text="RadToggleButton1 - First Toggle"></telerik:ButtonToggleState><telerik:ButtonToggleState Text="RadToggleButton1 - Second Toggle"></telerik:ButtonToggleState></ToggleStates>
</telerik:RadToggleButton>

辐射图像按钮

<telerik:RadImageButton ID="RadImageButton1" runat="server" Text="RadImageButton1" Width="230px" Height="230px"><ConfirmSettings ConfirmText="Are you sure you want to continue?" /><Image Url="https://demos.telerik.com/aspnet-ajax/editor/images/top_image.png" />
</telerik:RadImageButton>

单击按钮

单击按钮（图 1）用于避免对服务器的多次回发/回调。当开发人员应防止向服务器多次提交相同的内容时，此功能在数据库和/或电子邮件发送场景中很有用。

图 1：在单击前后具有 SingleClick 功能的 RadButton。

应使用以下属性来启用单击功能：

• SingleClick - 确定RadButton控件在用户单击后是否立即被禁用。将其设置为true以启用单击功能。

• SingleClickText - 确定在单击和禁用按钮后显示在RadButton控件中的文本。

<asp:TextBox ID="txtName" runat="server" /><telerik:RadButton RenderMode="Lightweight" ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click"SingleClick="true"  SingleClickText="Processing...">
</telerik:RadButton><asp:Label ID="lblGreeting" runat="server" />

protected void btnSubmit_Click(object sender, EventArgs e)
{if (Page.IsPostBack) System.Threading.Thread.Sleep(3000);lblGreeting.Text = String.Format("Hello, {0}!", txtName.Text);
}