New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Appearance

  • Demo Configurator
Size
Layout Mode

The WebForms SegmentedControl offers various options that allow you to control its appearance, such as size and layout mode (Compact or Stretch).

Use the styling options showcased in this demo to modify the overall appearance of the component. You can review and copy the widget's configuration with all styling options from the source code of the demo.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb"  Inherits="SegmentedControl_Appearance_DefaultVB" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="scripts.js"></script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg flex-center" runat="server">
        <telerik:RadSegmentedControl ID="RadSegmentedControl1" runat="server" SelectedValue="week">
            <Items>
                <telerik:SegmentedControlItem Text="Day" Value="day" />
                <telerik:SegmentedControlItem Text="Week" Value="week" />
                <telerik:SegmentedControlItem Text="Month" Value="month" />
            </Items>
        </telerik:RadSegmentedControl>
    </div>

    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Title="Size" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="cbSize" runat="server" AutoPostBack="false" AllowCustomText="false" Size="Medium" OnClientSelectedIndexChanged="changeSize">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Small" Value="small" />
                                    <telerik:RadComboBoxItem Text="Medium" Value="medium" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Large" Value="large" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Title="Layout Mode" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:ComboBox ID="cbLayoutMode" runat="server" AutoPostBack="false" AllowCustomText="false" Size="Medium" OnClientSelectedIndexChanged="changeLayoutMode">
                                <Items>
                                    <telerik:RadComboBoxItem Text="Compact" Value="Compact" Selected="true" />
                                    <telerik:RadComboBoxItem Text="Stretch" Value="Stretch" />
                                </Items>
                            </qsf:ComboBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance