The Decorator pattern is used when an abstraction from the original object is needed from properties that need to be added to the original object.

For example, we may want to add a border to an object instance and not the entire class. Sure, you could simply add a ‘border’ property to the class – but what happens when the object isn’t even aware that it may need a border added? Such a case may be when you want to add a scroll bar to an object without the object being aware of what a scroll bar is. Of course this can be applied outside of a user interface – there are many other examples out there such as this one: http://www.dofactory.com/Patterns/PatternDecorator.aspx

Here’s my application of the pattern to add padding, or a border to an HTML image or HTML5 video tag.

class DecoratorPattern2
	{
		public DecoratorPattern2()
		{
			// Participants:
			// Component (Visual)
			// ConcreteComponent
			// Decorator
			// ConcreteDecorator (BorderDecorator, ScrollDecorator)

			DisplayImage image1 = new DisplayImage("/images/image.png", "This is an image", 640, 480);
			DisplayVideo video1 = new DisplayVideo("/videos/video.mp4", "This is a test video", "controls", 520, 319);

			BorderDecorator imageborderDecorator = new BorderDecorator(image1);
			PaddingDecorator imagepaddingDecorator = new PaddingDecorator(image1);
			PaddingDecorator videopaddingDecorator = new PaddingDecorator(video1);

			image1.Render();
			video1.Render();
		}
	}

	/// <summary>
	/// The 'Component' abstract class
	/// </summary>
	public abstract class DisplayObject
	{
		private int width = 320;
		private int height = 240;
		private string additionalOptions = "";

		public int Width
		{
			get { return width; }
			set { width = value; }
		}

		public int Height
		{
			get { return height; }
			set { height = value; }
		}

		public string AdditionalOptions
		{
			get { return additionalOptions; }
			set { additionalOptions = value; }
		}

		public abstract void Render();
	}

	/// <summary>
	/// The 'ConcreteComponent' class
	/// </summary>
	public class DisplayImage : DisplayObject
	{
		private string src;
		private string caption;

		public DisplayImage(string src, string caption, int width, int height)
		{
			this.src = src;
			this.caption = caption;
			// Base class properties
			this.Width = width;
			this.Height = height;
		}

		public override void Render()
		{
			Console.WriteLine("<img src='{0}' alt='{1}' title='{1}' width='{2}' height='{3}' style='{4}'>\n", this.src, this.caption, this.Width, this.Height, this.AdditionalOptions);
		}
	}

	/// <summary>
	/// Another 'ConcreteComponent' class
	/// </summary>
	public class DisplayVideo : DisplayObject
	{
		private string src;
		private string caption;
		private string controls;

		public DisplayVideo(string src, string caption, string controls, int width, int height)
		{
			this.src = src;
			this.caption = caption;
			this.controls = controls;
			// Base class properties
			this.Width = width;
			this.Height = height;
		}

		public override void Render()
		{
			Console.WriteLine("<video src='{0}' title='{1}' controls='{2}' width='{3}' height='{4}' style='{5}'></video>\n", this.src, this.caption, this.controls, this.Width, this.Height, this.AdditionalOptions);
		}
	}

	/// <summary>
	/// The 'Decorator' abstract class
	/// </summary>
	public abstract class Decorator : DisplayObject
	{
		protected DisplayObject displayObject;

		// we add the 'ConcreteComponent' item inside the decorator so we know what to decorate
		public Decorator(DisplayObject displayObject)
		{
			this.displayObject = displayObject;
		}

		public override void Render()
		{
			displayObject.Render();
		}
	}

	/// <summary>
	/// The 'ConcreteDecorator' class allows attaching extra data to an object - in this case adding a border
	/// </summary>
	public class BorderDecorator : Decorator
	{
		private string borderProperties = "border: 1px solid #000; ";
		public BorderDecorator(DisplayObject displayObject) : base(displayObject)�
		{
			base.displayObject.AdditionalOptions += borderProperties;
		}

		public override void Render()
		{
			base.Render();
		}
	}

	/// <summary>
	/// The 'ConcreteDecorator' class allows attaching extra data to an object - in this case adding padding
	/// </summary>
	public class PaddingDecorator : Decorator
	{
		private string paddingProperties = "padding: 5px; ";
		public PaddingDecorator(DisplayObject displayObject)
			: base(displayObject)
		{
			base.displayObject.AdditionalOptions += paddingProperties;
		}

		public override void Render()
		{
			base.Render();
		}
	}