Click here to Skip to main content
Click here to Skip to main content
Technical Blog

GUI 101 - Group Boxes

, 2 Apr 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
Often, it's the little things that matter. In any application, small changes to the user interface can have a major impact on the readability and usability of a form. Fonts, element spacing, order of elements, colors, etc., all come into play. A skillful designer can make a few tweaks to a crappy in

Often, it's the little things that matter. In any application, small changes to the user interface can have a major impact on the readability and usability of a form. Fonts, element spacing, order of elements, colors, etc., all come into play. A skillful designer can make a few tweaks to a crappy interface and make it a delight to use. It's easy to be seduced by the siren songs of AJAX, Silverlight, gradient backgrounds, etc., but simply grouping controls logically can be much more effective in providing a good user experience and…it won't make your web application run like a sick dog.

If you have moved from regular Windows programming to Web programming, you might be missing one of the simplest, yet most powerful, constructs in the graphical interface: Group Boxes. The majority of Windows Form applications use Group Boxes yet you almost never see them on a web page. In HTML, they are called FieldSets. There is not a corresponding Server Control and FieldSets are not on the HTML tab of the Visual Studio tool box. Perhaps that is why we don't often see them.

Here is a FieldSet using CSS to control the appearance:

    .GroupBox
    {
        border: 1px solid #0000FF;
        display: inline;
        padding: 8px;
    }

    .GroupBoxLegend
    {
        padding-bottom: 4px;
    }
    <fieldset class="GroupBox">
        <legend class="GroupBoxLegend">Shipping</legend>
        <asp:RadioButtonList ID="RadioButtonListShipping" runat="server">
            <asp:ListItem Text="US Mail"></asp:ListItem>
            <asp:ListItem Text="Fed Ex"></asp:ListItem>
            <asp:ListItem Text="UPS"></asp:ListItem>
            <asp:ListItem Text="Pony Express"></asp:ListItem>
        </asp:RadioButtonList>
    </fieldset>

Here is the result:

It looks fine, but you don't have to use FieldSets.

It's a carefully hidden fact but the Panel Control can be used to create FieldSets. Normally, when you use a Panel Control, a simple div is rendered. But, when you add GroupingText to the Panel Control, a FieldSet is rendered inside the div. In addition, attributes are magically added to the borders of the FieldSet to give it the appearance of a typical windows group box. Style is not listed as an attribute of a Panel control, but you can add it to control the panel's position.

    <asp:Panel ID="PanelSize" runat="server" GroupingText="Size"       
        style="width:116px; : 341px; : 10px; position: absolute; height: 128px;" >
        <asp:RadioButtonList ID="RadioButtonSize" runat="server">
            <asp:ListItem Text="Small"></asp:ListItem>
            <asp:ListItem Text="Medium"></asp:ListItem>
            <asp:ListItem Text="Large"></asp:ListItem>
            <asp:ListItem Text="Ex Large"></asp:ListItem>
        </asp:RadioButtonList>
    </asp:Panel>

Here is the result (note the styled border):

If you are interested, as I certainly was, in comparing the rendered HTML of a panel with and without grouping text, you can quickly dummy up a function like this:

    protected void Button1_Click(object sender, EventArgs e)
    {
        if (PanelSize.GroupingText == "")
            PanelSize.GroupingText = "Size";
        else
            PanelSize.GroupingText = "";
    }

As usual, once you start tweaking GUIs, you can spend hours of precious time getting it right. With CSS you have much more control over the appearance of details than you do with Windows Forms group boxes. You can change just about everything which may, or may not, be a good thing depending on your schedule.

I hope you found this useful.

Steve Wellens

PS: Thanks to the anonymous poster Ben, who gracefully pointed out a critical error in my original post and made this post much more interesting.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Steve Wellens
EndWell Software, Inc.
United States United States
I am an independent contractor/consultant working in the Twin Cities area in Minnesota. I work in .Net, Asp.Net, C#, C++, XML, SQL, Windows Forms, HTML, CSS, etc., etc., etc.

Comments and Discussions

 
GeneralGood Work! PinmemberPaul Pleasant10-Jun-09 8:26 
Generalok article PinmemberDonsw28-Apr-09 17:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.1411028.1 | Last Updated 2 Apr 2009
Article Copyright 2009 by Steve Wellens
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid