Tutorial

Ok let's say we want to define for all GUI component whether they should be displayed to beginner, intermediate or advanced users.
One natural approach would be to derive all GUI component just to be able to add one property. This would be quite tedious.

WebForms.ControlExtender let you achieve the same goal (add properties) without all this hard work.

1 - Define the properties to be added

    public enum Level
    {
        Beginner,
        Intermediate,
        Advanced
    }

    public class LevelUIProperties : TargetControlProperties
    {

        [NotifyParentProperty(true)]
        public Level UILevel
        {
            get
            {
                object savedState = (ViewState["UILevel"]);

                if (savedState == null)
                    return Level.Beginner;

                Level level;

                return Enum.TryParse(savedState.ToString(), out level) ? level : Level.Beginner;
            }
            set
            {
                ViewState["UILevel"] = (int)value;
            }
        }
    }

2 - Tie it to the designer

This is the class / component which you'll drop on the webform and that will extend all other components.

    // Names the Property to show on other controls in the designer
    [
        ProvideProperty("UILevel", typeof(Control)),
        Designer(typeof(ControlExtenderDesigner<LevelUIProperties>))
    ]
    public class LevelUIProvider : ControlExtender<LevelUIProperties>
    {
        /// <summary>
        ///   Defines the controls which can be extended.
        /// </summary>
        /// <remarks>
        ///   In general, the Page, the Form, and buttons cannot be extended.
        /// </remarks>
        public override Boolean CanExtend(Object target)
        {
            return target is Control && !(target is LevelUIProvider);
        }

        /// <summary>
        ///   gets the property value for the given control
        /// </summary>
        public Level GetUILevel(Control control)
        {
            return EnsureControlItem(control).UILevel;
        }

        /// <summary>
        ///   sets the property value for the given control
        /// </summary>
        public void SetUILevel(Control control, Level uiLevel)
        {
            EnsureControlItem(control).UILevel = uiLevel;
            NotifyDesignerOfChange();
        }

        private LevelUIProperties EnsureControlItem(Control control)
        {
            if (control == null)
                throw new ArgumentNullException("control");

            LevelUIProperties item;

            if (TargetProperties.Contains(control.ID))
                item = TargetProperties[control.ID];

            else
            {
                item = new LevelUIProperties { ControlId = control.ID };
                TargetProperties.Add(item);
                NotifyDesignerOfChange();
            }

            return item;
        }
    }

Please pay attention to the naming convention of the methods GetUILevel and SetUILevel. It's composed of the provided property preceded by the accessor's (get or set) name.
Note : it's also possible to add multiple properties at once.

3 - Result

Drag a button on a form and the newly created LevelUIProvider.

surface.png

if you select the button, our new property LevelUI has appeared in designer

PropertyGrid.png



if you like WebForms.ControlExtender you might want to read this disclaimer.

Last edited Oct 21, 2011 at 3:54 PM by Fab_Michellonet, version 6

Comments

No comments yet.