Andrew Rea : Custom Controls

Programmatic WebControls – Variations of design

REA_ANDREW — Tue, 17 Mar 2009 17:50:25 GMT

I thought I would compose a short how to on programmatic web controls. Often I have looked at the core set of controls within ASP.NET and wonder what design is required in order to get the design time mark up similar to that of the various controls. The types of markup I am referring to includes:

Containers
Lists
Templates
Nested Controls of a certain type
Data bound controls
- Only one example here, as I have wanted to do for ages and could not quite put my finger on how it was achieved. Turns out, really simple lol

The following imports are used in these examples:

using System.Web.UI;
using System.Web.UI.WebControls;
using System.ComponentModel;

Simple Container Control

The first custom control structure I want to make is a custom panel. Not inherited from a panel, although the same would be achieved but rather the simplest custom container.

Desired Mark up

        <aebs:CustomPanel ID="Panel1" runat="server">
            Hell World
        </aebs:CustomPanel>

This is as simple as it gets. This is a web control which persists any children controls or elements which you put in side.

    [ParseChildren(false)]
    [PersistChildren(true)]
    public class CustomPanel : WebControl
    {
        public CustomPanel()
        {
            //
            // TODO: Add constructor logic here
            //
        }
    }

A Control with an object list

This control is a web control but it has a list of an object, so you can add numerous types of the object to its collection. The collection could be of a web control and if so it would be wise to inherit from a composite control as opposed to a web control.

Desired mark-up

        <aebs:ListControl1 ID="ListControl1" runat="server">
            <CustomObjects>
                <aebs:CustomObject CustomProperty="Hello World" />
                <aebs:CustomObject CustomProperty="Hello World 2" />
            </CustomObjects>
        </aebs:ListControl1>

So in design time you will see the intellisense prompt you for a tag called CustomObjects followed by nested prompts of a tag called Custom Object.

    [ParseChildren(true)]
    [PersistChildren(false)]
    public class ListControl1 : WebControl
    {
        [PersistenceMode(PersistenceMode.InnerProperty)]
        public List<CustomObject> CustomObjects { get; set; }

        public ListControl1()
        {
            //
            // TODO: Add constructor logic here
            //
        }
    }

The Custom object is nothing more than a class with a property. see here

    public class CustomObject
    {
        public string CustomProperty { get; set; }

        public CustomObject()
        {
            //
            // TODO: Add constructor logic here
            //
        }
    }

A Template Control

The mark up achieved with this type of control is like the type you see with for example the form view control which allows for:

Item Template
Insert Item Template
Edit Item Template

All I am doing is showing the mark-up required for the design time mark-up, so when using you will need to use the ITemplate InstantiateIn method providing a web control or html control as the container.

Desired mark-up

        <aebs:TemplateControl ID="TemplateControl1" runat="server">
            <HeaderTemplate>
                Hello Header World
            </HeaderTemplate>
            <ContentTemplate>
                Hello Content World
            </ContentTemplate>
            <FooterTemplate>
                Hello Footer World
            </FooterTemplate>
        </aebs:TemplateControl>

The code to achieve this is as follows.

    [ParseChildren(true)]
    [PersistChildren(false)]
    public class TemplateControl : WebControl
    {
        [PersistenceMode(PersistenceMode.InnerProperty)]
        public ITemplate HeaderTemplate { get; set; }

        [PersistenceMode(PersistenceMode.InnerProperty)]
        public ITemplate ContentTemplate { get; set; }

        [PersistenceMode(PersistenceMode.InnerProperty)]
        public ITemplate FooterTemplate { get; set; }

        public TemplateControl()
        {
            //
            // TODO: Add constructor logic here
            //
        }
    }

You are going to want to control how each template is rendered but for the purposes of this example I am only showing the bare bones of how to achieve the mark-up.

A container control with specific object types as options

A good example of this type of control is when you use the object or sql data source control. It allows you to specify parameters for the select, insert, update etc… The options though which are provided to you are restricted so you can only choose parameter objects. The key here is to specify a list property of the control with the type being a class other inherit from, not necessarily abstract.

Desired mark-up

        <aebs:ConstrainedCollection ID="Constrained1" runat="server">
            <AbstractProperties>
                <aebs:ConcreteOne />
                <aebs:ConcreteTwo />
            </AbstractProperties>
        </aebs:ConstrainedCollection>

The code to achieve this mark-up is as follows:

    [ParseChildren(true)]
    [PersistChildren(false)]
    public class ConstrainedCollection : WebControl
    {
        [PersistenceMode(PersistenceMode.InnerProperty)]
        public List<AbstractClass1> AbstractProperties { get; set; }

        public ConstrainedCollection()
        {
            //
            // TODO: Add constructor logic here
            //
        }
    }

So you can see that the only difference between this and the list control example above is that I use a type for the list which is inherited by two other types being ConcreteOne and also ConcreteTwo.

A DataPanel

I have wanted to do this for a while but could not quite put my finger on how it was achieved. Like I said up top, this turns out to be really simple. The same could be achieved with an ObjectDataSource and a FormView but i want a light weight container which I could throw an object at and use Eval inside it. I have many many uses for such a light weight singular object display. Plus I also wondered how the use of Eval was achieved in Custom Controls, turns out that it is through the use the System.Web.UI.IDataItemContainer Interface.

Desired Mark-up

        <aebs:DataPanel ID="datapanel1" runat="server">
            <%# Eval("ProjectName") %>
        </aebs:DataPanel>

So I am not doing anything more than requesting a property of the object which I throw at the control. Throwing the object at the control I do inside the Page_Load event just for demo.

    public void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataPanel.Project p = new DataPanel.Project();
            p.ProjectName = "Project 101";

            datapanel1.BoundObject = p;
            datapanel1.DataBind();
        }
    }

So the code to achieve this is just the simple container control above but this time I implement the interface. For the purposes of demonstration I have also banged the class inside this type as nested too.

    [ParseChildren(false)]
    [PersistChildren(true)]
    public class DataPanel : WebControl, IDataItemContainer
    {
        public class Project
        {
            public string ProjectName { get; set; }
        }

        private object boundObject;

        public DataPanel()
        {
            //
            // TODO: Add constructor logic here
            //
        }

        public object BoundObject
        {
            set
            {
                boundObject = value;
            }
        }

        #region IDataItemContainer Members

        public object DataItem
        {
            get { return boundObject; }
        }

        public int DataItemIndex
        {
            get { return 0; }
        }

        public int DisplayIndex
        {
            get { return 0; }
        }

        #endregion
    }

Well I hope this is of some use to others, I will try and update this post soon with examples of custom DataSource controls and also custom DataBound Controls. When you start get into List Controls from a data source it gets real fun.

Cheers

Andrew

A Custom DropDownList using an Enum Type as a DataSource

REA_ANDREW — Mon, 03 Nov 2008 22:31:19 GMT

First off, I have to again express my admiration at the job Microsoft have done at building the core ASP.NET Web Form Controls. I think they are sometimes taken for granted.

This post is about making a control which derives from the DropDownList and uses a Enum as a Data Source. A little more though, you can transform the text with the use of Regular Expressions. I had a scenario where by I need a static set of Enum Values in the database to correspond with foreign keys in another table. So for example, say you have a table called Cars and it has a TransmissionID field which is linked to another table called TransmissionType.

TransmissionType

TransmissionTypeID

TransmissionTypeName

The values for exmaple in this table could be Manual Drive, Automatic Drive. Now, I know that these values will not change, and the point is made stronger when the number of types is great and static or will not be changed that often at all. So that I can communicate these values back to the database and take advantage of the C# Enum Type I create an Enum called TransmissionType.

pubilc enum TransmissionType{
	ManualDrive = 1,
	AutomaticDrive = 2
}

Notice the format of the text between the enum names and the table fields i.e. Enum is CamelCase and the field values have a space to make good language and sense. Now I want to assign this enum as the DataSource to a DropDownList and even more than that I want the actual value of the enum to be the value of the ListItems in the DropDownList.

You can simply bind a list of Enums to a DropDownList and it will render but will not contain the value of each of the Enum Names, assuming you have values. I simply created a quick ASP.NET Server Control, derived it from the DropDownList and added a few more bits:

1. Define a private collection of ListItems

private ListItemCollection collection;

2. Define a custom property in the control called EnumType

        [Bindable(true)]
        [Category("Behaviour")]
        [Localizable(false)]
        public string EnumType
        {
            get
            {
                String s = (String)ViewState["EnumType"];
                return ((s == null) ? String.Empty : s);
            }

            set
            {
                ViewState["EnumType"] = value;
            }
        }

3. Define a custom property in the control called TextTransaformationPattern

        [Bindable(true)]
        [Category("Behaviour")]
        [Localizable(false)]
        [DefaultValue("[A-Z]")]
        public string TextTransaformationPattern
        {
            get
            {
                String s = (String)ViewState["TextTransaformationPattern"];
                return ((s == null) ? String.Empty : s);
            }

            set
            {
                ViewState["TextTransaformationPattern"] = value;
            }
        }

4. Define a custom property in the control called TextTransaformationReplacement

        [Bindable(true)]
        [Category("Behaviour")]
        [Localizable(false)]
        [DefaultValue(" $0")]
        public string TextTransaformationReplacement
        {
            get
            {
                String s = (String)ViewState["TextTransaformationReplacement"];
                return ((s == null) ? String.Empty : s);
            }

            set
            {
                ViewState["TextTransaformationReplacement"] = value;
            }
        }

5.Instantiate the collection in the OnInit Event Handler, add the List Items whilst formatting the names to give a slightly better effect and also enabling the value of the enum to go into the value of the ListItem.

        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            collection = new ListItemCollection();

            foreach (string s in Enum.GetNames(Type.GetType(EnumType)))
            {
                ListItem li = new ListItem(
                    Regex.Replace(s, TextTransaformationPattern, TextTransaformationReplacement),
                    ((int)Enum.Parse(Type.GetType(EnumType), s)).ToString());
                collection.Add(li);
            }
        }

6.Override the ListItemCollection getter and return our new list of ListItems.

        public override ListItemCollection Items
        {
            get
            {
                return collection;
            }
        }

The need for the regular expressions is just one way I came up with to format the text in a way which avoided the Camel Case look. In the regular expression replace I simply tell it to replace the Matched Element with a space and the Matched Element i.e. $0 so CamelCase becomes Camel Case. Probably better to trim the string also to take away the first space, but anyway you get the idea. Implementation includes using the AssemblyQualifiedName i.e. "MyNameSpace.Type, MyAssembly." An example implementation is below:

<aebs:EnumDropDownList ID="EnumDropDownList1" runat="server" 
            EnumType="uk.co.andrewrea.commerce.DeliveryMethod,uk.co.andrewrea.commerce"
            TextTransaformationReplacement=" $0"
            TextTransaformationPattern="[A-Z]">
            </aebs:EnumDropDownList>

I am sure you could cache the values to make better for performance but it was a nice fix for some of the FormView Elements I am working with. You can also enable the DropDownList to work with the Bind method in mark up by say creating a Property which gets and sets the selectedValue property of the DropDownList and use the Bind Method there. I will modify the control and make another post about using the DropDownList and the Bind within say a FormView next.

This is based on the following Enum:

    public enum InventoryStatus
    {
        InStock = 1,
        BackOrder = 2,
        PreOrder = 3,
        SpecialOrder = 4,
        Discontinued = 5,
        CurrentlyUnavailable = 6
    }

The output in html is then the following:

InventoryStatus:
  
<select name="ctl00$ContentPlaceHolder1$FormView1$ddlInventoryStatus"

id="ctl00_ContentPlaceHolder1_FormView1_ddlInventoryStatus">
  
<option selected="selected" value="1"> In Stock</option>
  
<option value="2"> Back Order</option>
  
<option value="3"> Pre Order</option>
  
<option value="4"> Special Order</option>
  
<option value="5"> Discontinued</option>
  
<option value="6"> Currently Unavailable</option>
  
  
</select>

Here is the full code:

Cheers,

Andrew

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text.RegularExpressions;

namespace uk.co.andrewrea.web.ui.control
{
    [DefaultProperty("Value")]
    [ToolboxData("<{0}:EnumDropDownList runat=server></{0}:EnumDropDownList>")]
    public class EnumDropDownList : DropDownList
    {
        private ListItemCollection collection;


        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("")]
        [Localizable(true)]
        public string Value
        {
            get
            {
                String s = (String)ViewState["Value"];
                return ((s == null) ? String.Empty : s);
            }

            set
            {
                ViewState["Value"] = value;
            }
        }

        [Bindable(true)]
        [Category("Behaviour")]
        [Localizable(false)]
        public string EnumType
        {
            get
            {
                String s = (String)ViewState["EnumType"];
                return ((s == null) ? String.Empty : s);
            }

            set
            {
                ViewState["EnumType"] = value;
            }
        }

        [Bindable(true)]
        [Category("Behaviour")]
        [Localizable(false)]
        [DefaultValue("[A-Z]")]
        public string TextTransaformationPattern
        {
            get
            {
                String s = (String)ViewState["TextTransaformationPattern"];
                return ((s == null) ? String.Empty : s);
            }

            set
            {
                ViewState["TextTransaformationPattern"] = value;
            }
        }

        [Bindable(true)]
        [Category("Behaviour")]
        [Localizable(false)]
        [DefaultValue(" $0")]
        public string TextTransaformationReplacement
        {
            get
            {
                String s = (String)ViewState["TextTransaformationReplacement"];
                return ((s == null) ? String.Empty : s);
            }

            set
            {
                ViewState["TextTransaformationReplacement"] = value;
            }
        }

        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            collection = new ListItemCollection();

            foreach (string s in Enum.GetNames(Type.GetType(EnumType)))
            {
                ListItem li = new ListItem(
                    Regex.Replace(s, TextTransaformationPattern, TextTransaformationReplacement),
                    ((int)Enum.Parse(Type.GetType(EnumType), s)).ToString());
                collection.Add(li);
            }
        }

        public override ListItemCollection Items
        {
            get
            {
                return collection;
            }
        }
    }
}

ASP.NET MVC "Pager" HTML Helper

REA_ANDREW — Tue, 01 Jul 2008 15:26:38 GMT

So I am building my own custom blog using the ASP.NET MVC Framework, and I have been working on the paging aspect. I will be going into more detail how i achieved this but for now, I am publishing a HtmlHelper I have made which has helped me, believe it or not lol, in the paging. The way I have designed it also is kind of decoupled, so i see no reason for its integration into many other applications.

My implmentation of the HtmlHelper is here:

<%= Html.Pager((pc.StartingIndex / pc.PageSize) ,pc.PageSize,pc.TotalRecords,"/Home/Page") %>

And the code which makes it is here. The major thing is calculating the seed of the iteration based on the current page, after that you are laughing!

    public static string Pager(this HtmlHelper helper, int currentPage, int currentPageSize, int totalRecords, string urlPrefix)
    {
        StringBuilder sb1 = new StringBuilder();

        int seed = currentPage % currentPageSize == 0 ? currentPage : currentPage - (currentPage % currentPageSize);

        if(currentPage > 0)
            sb1.AppendLine(String.Format("<a href=\"{0}/{1}\">Previous</a>", urlPrefix, currentPage));

        if(currentPage - currentPageSize >= 0)
            sb1.AppendLine(String.Format("<a href=\"{0}/{1}\">...</a>", urlPrefix, (currentPage - currentPageSize) + 1));

        for (int i = seed; i < Math.Round((totalRecords / 10) + 0.5) && i < seed + currentPageSize; i++)
        {
            sb1.AppendLine(String.Format("<a href=\"{0}/{1}\">{1}</a>", urlPrefix, i + 1));
        }

        if (currentPage + currentPageSize <= (Math.Round((totalRecords / 10) + 0.5) - 1))
            sb1.AppendLine(String.Format("<a href=\"{0}/{1}\">...</a>", urlPrefix, (currentPage + currentPageSize) + 1));

        if (currentPage < (Math.Round((totalRecords / 10) + 0.5) - 1))
            sb1.AppendLine(String.Format("<a href=\"{0}/{1}\">Next</a>", urlPrefix, currentPage + 2));

        return sb1.ToString();
    }

Hope this helps some people,

Cheers,

Andrew :-)

Group Enabled Web Form Control Extensions

REA_ANDREW — Fri, 22 Feb 2008 12:28:49 GMT

The Idea
The Control Library
IGroupingControl
GroupingEventArgs
GroupingManager
GroupingPanel
A picture of the library
The implementation
The Files

The Idea

If you would like to see the end result before reading on here it is: http://www.andrewrea.co.uk/groupenabledwebformcontrols/default.aspx

My idea for this sort of control library actually came from working with the LoginView control. There you can specify different controls to be shown dependant on:

Anonymous
Logged
Role Groups

I found this very efficient, but it got me thinking. You will no doubt come across certain times where you would like certain controls to be disabled or enabled dependant on certain conditions with in your program, may be not show certain controls and only show others. My idea is to create a control set where by we have one main controlled object and child controls which subscribe to events from this controller.

It will also help with greatly reducing the amount of UI code required to hide and show controls. Another main concern while making these was this fact. "GROUPS" it may be the case that a control will be shown in one scenario but also in another, i.e. it belongs to more than one group. I liked this idea so i thought I will code it so you can have many groups assigned to one control.

Example: (Form controls in a questionnaire)

GROUP 1: Question modifications for C# Programmers

GROUP 2: Question modifications for C++ Programmers

GROUP 3: Question modifications for Java Programmers

GROUP 4: Question modifications for Java Programmers and C++ Programmers

GROUP 5: Question modifications for C# Programmers and C++ Programmers

GROUP 6: Question modifications for C# Programmers and Java Programmers

So you get the idea, there can be any number of controls and each control can have many groups, the control library I have done which is a simple extension of the Web Forms Control Library means I could make all GROUP 4 controls disabled with one line of code etc... and subsequently enable them.

The Control Library

As I say I have extended the web form default control library with grouping, the control library I have made consists of:

An Interface

IGroupingControl

    /// <summary>
    /// I have only put in three properties for the interface
    /// </summary>
    public interface IGroupingControl
    {
        string GroupNames { set; }
        string GroupingManagerID { get; set; }
        GroupingManager GroupingManagerControl { get; }
    }

Event Arguments

There are only two at present but I feel that this could be extended much further using for example the Strategy Pattern.

GroupingEventArgs

   /// <summary>
    /// Contains the bare necesity of group name, and also a visible and enabled property
    /// </summary>
    public class GroupingEventArgs : EventArgs
    {
        private bool _isEnabled;

        private bool _isVisible;

        private string _groupName;

        public bool IsEnabled
        {
            get
            {
                return _isEnabled;
            }
            set
            {
                _isEnabled = value;
            }
        }

        public bool IsVisible
        {
            get
            {
                return _isVisible;
            }
            set
            {
                _isVisible = value;
            }
        }

        public string GroupName
        {
            get
            {
                return _groupName;
            }
            set
            {
                _groupName = value;
            }
        }

        public GroupingEventArgs(bool isEnabled, bool isVisible, string groupName)
        {
            _isEnabled = isEnabled;
            _isVisible = isVisible;
            _groupName = groupName;
        }
    }

A Control Class which should be supplied to the page at the top, it is a "GroupingManager" and is used to notify all Groupings controls on the page

The GroupingManager

    public class GroupingManager : UserControl
    {
        public event EventHandler<GroupingEventArgs> Notified;

        protected virtual void OnNotified(GroupingEventArgs e)
        {
            if (Notified != null)
                Notified(this, e);
        }

        public void Disable(string groupName)
        {
            GroupingEventArgs e = new GroupingEventArgs(false, true, groupName);
            e.GroupName = groupName;
            OnNotified(e);
        }
        public void Enable(string groupName)
        {
            GroupingEventArgs e = new GroupingEventArgs(true, true, groupName);
            e.GroupName = groupName;
            OnNotified(e);
        }
        public void MakeVisible(string groupName)
        {
            GroupingEventArgs e = new GroupingEventArgs(true, true, groupName);
            e.GroupName = groupName;
            OnNotified(e);
        }
        public void MakeInvisible(string groupName)
        {
            GroupingEventArgs e = new GroupingEventArgs(true, false, groupName);
            e.GroupName = groupName;
            OnNotified(e);
        }

        private static bool FindPredicate(string currentValue, string toCompare)
        {
            if (currentValue == toCompare)
                return true;
            else 
                return false;
        }
    }

The above are the core ingredients to this control library, as I say the other controls are simply inheriting from the web from controls and extending them with the interface. I will paste in the code here for the GroupingPanel which will display how I achieve the functionality. NB: The code for the other objects is the same with the exception of changing the object name, constructor and also the base control it inherits from. I think this may be a case of where the C++ rule that you can inherit from multiple classes and interfaces would be useful here. Of course with C# you can only inherit from one object and multiple interfaces. I say this because I could simply use the same code in another object and inherit from the base control and also my object which provides extended functionality. Either way It uses an interface and here is one of the controls namely the GroupingPanel.

The GroupingPanel

    /// <summary>
    /// The grouping panel
    /// </summary>
    public class GroupingPanel : Panel,IGroupingControl
    {
        /// <summary>
        /// The group names which belong to the controls
        /// </summary>
        private string[] _groupNames
        {
            get
            {
                return (string[])ViewState["GroupName"];
            }
        }
        public GroupingPanel()
        {
            //
            // TODO: Add constructor logic here
            //
        }
        /// <summary>
        /// Here I subscribe the the Grouping Manager Notified event
        /// </summary>
        /// <param name="e"></param>
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
            GroupingManagerControl.Notified += new EventHandler<GroupingEventArgs>(GroupingManagerControl_Notified);
        }

        /// <summary>
        /// This is where the magix happens
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        void GroupingManagerControl_Notified(object sender, GroupingEventArgs e)
        {
            System.Diagnostics.Debug.WriteLine("Entered");
            if (Array.IndexOf(_groupNames,e.GroupName) >= 0)
            {
                this.Enabled = e.IsEnabled;
                this.Visible = e.IsVisible;
            }
        }

        #region ISubscriptionControl Members
        /// <summary>
        /// The string ID of the grouping manager
        /// </summary>
        public string GroupingManagerID
        {
            get
            {
                object o = ViewState["GroupingManagerID"];
                if (o == null)
                    return String.Empty;
                return ViewState["GroupingManagerID"].ToString();
            }
            set
            {
                ViewState["GroupingManagerID"] = value;
            }
        }
        /// <summary>
        /// This returns the grouping manager control
        /// </summary>
        public GroupingManager GroupingManagerControl
        {
            get
            {
                return (GroupingManager)Page.FindControl(GroupingManagerID);
            }
        }

        /// <summary>
        /// The reason why this is of type string and not string[]
        /// is because it will trhow an error trying to assign to array
        /// from the string representation in the mark up which is why
        /// I provide a private accesor to the data above
        /// </summary>
        public string GroupNames
        {
            set
            {
                ViewState["GroupName"] = value.ToString().Split(',');
            }
        }

        #endregion
    }

A Picture of the library

The Implementation

As per the example URL at the start of this blog I created buttons on the left to trigger different calls to the Grouping Manager. e.g.

<asp:Button ID="Button5" runat="server" Text="Disable Group 1" OnClick="Button5_Click" />

With the code

        protected void Button5_Click(object sender, EventArgs e)
        {
            groupingManager1.Disable("Group1");
        }

So straight away this means that it would effect the following grouping controls:

            <aebs:GroupingPanel ID="groupingPanel1" runat="server" GroupNames="Group1,Hybrid"
                GroupingManagerID="groupingManager1">
                <asp:Button ID="Button1" runat="server" Text="Button" />
            </aebs:GroupingPanel>
            <aebs:GroupingPanel ID="groupingPanel2" runat="server" GroupNames="Group1" GroupingManagerID="groupingManager1">
                <asp:Button ID="Button2" runat="server" Text="Button" />
            </aebs:GroupingPanel>
            <aebs:GroupingPanel ID="groupingPanel3" runat="server" GroupNames="Group1,Hybrid"
                GroupingManagerID="groupingManager1">
                <asp:Button ID="Button3" runat="server" Text="Button" />
            </aebs:GroupingPanel>
            <aebs:GroupingPanel ID="groupingPanel4" runat="server" GroupNames="Group1" GroupingManagerID="groupingManager1">
                <asp:Button ID="Button4" runat="server" Text="Button" />
            </aebs:GroupingPanel>

Please notice that two of the grouping panels belong to both Group1 and also Hybrid. So this means that if I disable Group1 and then enable Hybrid, only the two controls with Hybrid in their group names will be enabled.

I hope that this library can be of some use to others and I know this could be extended way further to incorporate many more time saving / code saving ideas.

The Files

The library (http://www.andrewrea.co.uk/GroupEnabledWebFormControls/Grouping.rar)

The test site (http://www.andrewrea.co.uk/GroupEnabledWebFormControls/GroupEnabledWebFormControls.rar)

Example URL (http://www.andrewrea.co.uk/groupenabledwebformcontrols/default.aspx)

A version of a WinForms Rounded GroupBox with transparency

REA_ANDREW — Mon, 18 Feb 2008 18:02:01 GMT

I made something similar a while back and never did anything with it. I started again today as usual because the interest took me lol. So there are custom group boxes out there and I have seen a few on Code Project, but in this blog I have added a few different features simply by exposing properties of the Pen and Brush objects.

Examples of my control, these are in the source I have provided below in the link:

The object itself

All I have done to maintain functionality and simply extend is to inherit from the GroupBox, like below:

namespace WindowsForm_Examples_NET_2
{
    public partial class RoundedGroupBox : GroupBox
    {

Next I added some properties to it. This is the dead easy part, as all I am doing is providing exposure to the properties of the Pen and Brush as well as other things:

        //This is the size of the text of the groupbox, e.g. _groupNameDimensions = e.Graphics.MeasureString(this.Text, this.Font);
        private SizeF _groupNameDimensions;
        //The radius of the corners with a default value of 10
        private float _cornerRadius = 10;
        //The leading text margin of the left side
        private float _leadingTextMargin = 25;
        // I need a graphics path here for the corner arcs and then finally close the figure
        private GraphicsPath _roundBoxPath;
        // The first colour of the gradient
        private Color _gradientFrom = Color.Gray;
        //The second colour of the gradient
        private Color _gradientTo = Color.White;
        //The angle of the gradient
        private float _gradientAngle = 90;
        //The fill type, this could be Fill or Linear Gradient
        private FillType _groupFillType = FillType.Fill;
        //The back colour.  This is the colour within the Graphics path, if you change the controls back color that will be behind the groupbox
        private Color _groupBackColor = Color.White;
        //The colour of the border
        private Color _groupBorderColor = Color.Black;
        //The width of the border
        private int _groupBorderWidth = 1;
        //The dash style of the border, this can be set to Solid
        private DashStyle _groupLineStyle = DashStyle.Solid;
        //A Custom pattern for the dashes like 10,50 etc...
        private float[] _dashPattern = new float[] { 5, 5 };

I encapsulate these fields so you will see the properties, I also attach the following attribute for design time purposes:

        [NotifyParentProperty(true)]
        public float[] DashPattern
        {
            get { return _dashPattern; }
            set { _dashPattern = value;
            }
        }

I can also now attach some descriptions and even categories so that it will look tidy inside the Property Box. I have not added these at this time of writing, but for this one paste into the blog I will.

        [Description("The custom pattern for the Group Box Border")]
        [Category("GroupBox Dash")]
        [NotifyParentProperty(true)]
        public float[] DashPattern
        {
            get { return _dashPattern; }
            set { _dashPattern = value;
            }
        }

This will give you the following behaviour inside the properties window:

Drawing the curved container

I have not gone into Maths yet as much as I should and want being a programmer so please excuse me if the route I have taken,is in any shape a long and inefficient way. The approach I took was to identify the key area where I would place an arc. After this I noted down the sweep angles. For the purposes of this control they will always sweep a distance of 90 degrees but the starting angle will differ.

With reference to the above image please find the method I wrote in order to draw the container. I feel I have over complicated the equations which enable the control to adapt to changes in size and also changes to the Font property of the Group Text.

        private PointF p1;
        private PointF p2;
        private PointF p3;
        private PointF p4;
        private PointF p5;
        private PointF p6;
        private PointF p7;
        private PointF p8;


        protected override void OnPaint(PaintEventArgs e)
        {
            //This will give the lines a smoother look.
            e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
            //I assign the size of the GroupBox Text property
            _groupNameDimensions = e.Graphics.MeasureString(this.Text, this.Font);
            //Below I create the coordinates for each point, I rake into account the control margin, the radius, the size of the text and also the leading Text margin.
            p1 = new PointF(_leadingTextMargin > (_cornerRadius * 2) ? _leadingTextMargin : (_cornerRadius * 2), this.Margin.Top);
            p2 = new PointF(p1.X + _cornerRadius + _groupNameDimensions.Width, this.Margin.Top);
            p3 = new PointF(p1.X + (_cornerRadius * 2) + _groupNameDimensions.Width, this.Margin.Top + _cornerRadius + _groupNameDimensions.Height);
            p4 = new PointF(this.Width - _cornerRadius - this.Margin.Right, this.Margin.Top + (_cornerRadius * 2) + _groupNameDimensions.Height);
            p5 = new PointF(this.Width - _cornerRadius - this.Margin.Right, this.Height - _cornerRadius - this.Margin.Bottom);
            p6 = new PointF(this.Margin.Left, this.Height - _cornerRadius - this.Margin.Bottom);
            p7 = new PointF(this.Margin.Left, this.Margin.Top + (_cornerRadius * 2) + _groupNameDimensions.Height);
            p8 = new PointF(_leadingTextMargin > (_cornerRadius * 2) ? _leadingTextMargin - _cornerRadius : _cornerRadius, this.Margin.Top + _cornerRadius + _groupNameDimensions.Height);

            // I instantiate the Graphics Path
            _roundBoxPath = new GraphicsPath();

            //I now add the arcs to the graphics path using a helper function to genrate the required rectangle, bit overkill I will admit
            _roundBoxPath.AddArc(GetRectangle(p1), 180F, 90F);
            _roundBoxPath.AddArc(GetRectangle(p2), 270F, 90F);
            _roundBoxPath.AddArc(GetRectangle(p3), 180F, -90F);
            _roundBoxPath.AddArc(GetRectangle(p4), 270F, 90F);
            _roundBoxPath.AddArc(GetRectangle(p5), 0F, 90F);
            _roundBoxPath.AddArc(GetRectangle(p6), 90F, 90F);
            _roundBoxPath.AddArc(GetRectangle(p7), 180F, 90F);
            _roundBoxPath.AddArc(GetRectangle(p8), 90F, -90F);
            _roundBoxPath.CloseFigure();

            //I define a pen and conitionally assign the prroperties to it
            Pen p = new Pen(GroupBorderColor);
            p.DashStyle = GroupLineStyle;
            p.Width = GroupBorderWidth;
            if (GroupLineStyle == DashStyle.Custom)
            {
                p.DashPattern = DashPattern;
            }
            e.Graphics.DrawPath(p, _roundBoxPath);

            //Here I conditionally assign the way the group box should be filled with colour
            switch (this.GroupFillType)
            {
                case FillType.Fill:
                    e.Graphics.FillPath(new SolidBrush(GroupBackColor), _roundBoxPath);
                    break;
                default:
                    LinearGradientBrush lgb = new LinearGradientBrush(new Rectangle(0,0,this.Width,this.Height), GradientFrom, GradientTo, GradientAngle);
                    e.Graphics.FillPath(lgb, _roundBoxPath);
                    break;
            }
            
            //Here I draw the group name text into the tab like shape.
            e.Graphics.DrawString(this.Text, this.Font, new SolidBrush(this.ForeColor), new PointF(_leadingTextMargin > (_cornerRadius * 2) ? _leadingTextMargin + _cornerRadius : (_cornerRadius * 2) + _cornerRadius, this.Margin.Top + (_cornerRadius / 2)));

            //To avoid being inconsitent I set the minimum with every time it invalidates so as to keep the tab in propeortion to the groiup box.
            this.MinimumSize = new Size(Convert.ToInt32(_leadingTextMargin + _groupNameDimensions.Width +(_cornerRadius*3)), 0);
        }

        private RectangleF GetRectangle(PointF p)
        {
            return new RectangleF(p, new SizeF(_cornerRadius, _cornerRadius));
        }

Transparency

Even though I have inherited from the groupbox control I can still make this transparent, by setting some of the styles of the form, the crucial one being SupportTransparentBackColor. To avoid flickering as well when you resize the control I have set the ResizeRedraw flag.

        public RoundedGroupBox()
        {
            InitializeComponent();
            this.SetStyle(ControlStyles.ResizeRedraw, true);
            this.SetStyle(ControlStyles.DoubleBuffer, true);
            this.SetStyle(ControlStyles.AllPaintingInWmPaint, true);
            this.SetStyle(ControlStyles.UserPaint, true);
            this.SetStyle(ControlStyles.SupportsTransparentBackColor, true);
            this.SetStyle(ControlStyles.ContainerControl, true);
            this.BackColor = Color.Transparent;
            this.Width = 175;
            this.Height = 75;
        }

The Source Code

I have not yet figured out how to upload a file with Windows Live Writer yet so I have placed this file on my server. Thanks for reading and hope it is of some interest.

http://andrewrea.co.uk/RoundedCornerGroupBox/RoundedCornerGroupBox.rar

Andrew Rea : Custom Controls

Programmatic WebControls – Variations of design

Simple Container Control

A Control with an object list

A Template Control

A container control with specific object types as options

A DataPanel

A Custom DropDownList using an Enum Type as a DataSource

ASP.NET MVC "Pager" HTML Helper

Group Enabled Web Form Control Extensions

Contents

The Idea

The Control Library

IGroupingControl

GroupingEventArgs

GroupingManager

GroupingPanel

A picture of the library

The implementation

The Files

The Idea

The Control Library

IGroupingControl

GroupingEventArgs

The GroupingManager

The GroupingPanel

A Picture of the library

The Implementation

Please notice that two of the grouping panels belong to both Group1 and also Hybrid. So this means that if I disable Group1 and then enable Hybrid, only the two controls with Hybrid in their group names will be enabled.

A version of a WinForms Rounded GroupBox with transparency

The object itself

Drawing the curved container

Transparency

The Source Code