Page view counter

The difference between understanding a concept…

Follow up posted at bottom of article

 

 

… and implementing it, can be the difference between your book being on time, and being, er, ah, well… late.

I’ve written chapters on custom controls at least a dozen times, and I’ve explained how to write custom controls at least a hundred times. You’d think I could do it in my sleep. In this first of a series of blog entries about Silverlight custom controls I’ll try to convey why creating custom controls is not difficult, but explaining it, or at least explaining it well, is.

There were custom controls in ASP.NET, in Windows Forms, in many other GUI platforms, and they’ve always been just  about the same idea. You typically had three options:

DropDownButton

Option One

The first way to create a custom control is to aggregate two or more existing controls into a new type; to make something new (or something monstrous). My favorite example is to combine a button with a DropDown to make a button whose action can change.

 

 

 

 

 

 

 

 

 

 

 

 

 

Option Two

The second approach is to derive from an existing control but to add a little new CountedButtonfunctionality. My standard  example is Clickable button, a button that knows how many times it has been clicked.

The code shown below is taken from Programming ASP.NET  but the concepts are the same across many GUI frameworks.

 

 

   1: using System;
   2: using System.ComponentModel;
   3: using System.Web.UI;
   4:  
   5: namespace CustomControls
   6: {
   7:     [DefaultProperty("Text")]
   8:     [ToolboxData("<{0}:CountedButton2 runat=server></{0}:CountedButton2>")]
   9:     public class CountedButton : System.Web.UI.WebControls.Button
  10:     {
  11:       private string displayString;
  12:  
  13:       public CountedButton(  )
  14:       {
  15:          displayString = "clicks";
  16:          InitValues(  );
  17:       }
  18:  
  19:       private void InitValues(  )
  20:       {
  21:          if (ViewState["Count"] == null)
  22:             ViewState["Count"] = 0;
  23:          this.Text = "Click me";
  24:       }
  25:    
  26:       public int Count 
  27:       {
  28:          get { return (int) ViewState["Count"]; }
  29:          set { ViewState["Count"] = value; }
  30:       }
  31:  
  32:       protected override void OnClick(EventArgs e)
  33:       {
  34:          ViewState["Count"] =  ((int)ViewState["Count"]) + 1;
  35:          this.Text = ViewState["Count"] + " " + displayString;
  36:          base.OnClick(e);
  37:       }
  38:     }
  39: }
  40:  

 

 

Option Three

And the third, typically most labor-intensive approach is to derive from a root Control object and (typically) draw the entire control and write all its logic yourself. An example that I’ve used a number of times is a custom clock face where the date travels around the circumference in Ferris Wheel like fashion and where you must draw the numbers, and the hour and minute hands and the position for the seconds indicator essentially “by hand”

CustomClock

This kind of control requires extensive coding in some environments, as shown in this cut down code listing (full and annotated listing in Programming WinForms.)

   1: public class ClockFaceCtrl : System.Windows.Forms.Control
   2: {
   3:     public ClockFaceCtrl()
   4:     {    }
   5:  
   6:     public void OnTimer(Object source, ElapsedEventArgs e)
   7:     {
   8:         Graphics g = this.CreateGraphics();
   9:         SetScale(g);
  10:         DrawFace(g);
  11:         DrawTime(g,false);
  12:         DrawDate(g);
  13:         g.Dispose();
  14:     }
  15:  
  16:     protected override void OnPaint ( PaintEventArgs e )
  17:     {     }
  18:  
  19:     private void SetScale(Graphics g)
  20:     {
  21:         g.TranslateTransform(Width / 2, Height / 2);
  22:         float inches = Math.Min(Width / g.DpiX, Height / g.DpiX);
  23:         g.ScaleTransform(inches * g.DpiX / 2000, inches * g.DpiY / 2000);
  24:     }
  25:  
  26:     private static float GetSin(float degAngle)
  27:     { return (float) Math.Sin(Math.PI * degAngle / 180f);     }
  28:  
  29:     private static float GetCos(float degAngle)
  30:     { return (float) Math.Cos(Math.PI * degAngle / 180f);     }
  31:  
  32:     private void DrawFace(Graphics g)
  33:     {
  34:         for (int i = 1; i <= numHours; i++)
  35:         {
  36:             SizeF stringSize = g.MeasureString(i.ToString(),font);
  37:             x = GetCos(i*deg + 90) * FaceRadius;
  38:             y = GetSin(i*deg + 90) * FaceRadius;
  39:             if ( currentTime.Second  == i * 5)
  40:                 g.DrawString(i.ToString(), font, greenBrush, -x, -y,format);
  41:             else
  42:                 g.DrawString(i.ToString(), font, brush, -x, -y,format);
  43:         }
  44:     }
  45:  
  46:     private void DrawTime(Graphics g, bool forceDraw)
  47:     {
  48:         rotation = GetSecondRotation();
  49:         state = g.Save();
  50:         g.RotateTransform(rotation);
  51:         g.FillEllipse(blankBrush,-25,-secondLength,50,50);
  52:         g.Restore(state);
  53:     }
  54:  
  55:     private float GetHourRotation()
  56:     { }
  57:     private float GetMinuteRotation()
  58:     { return( 360f * currentTime.Minute / 60f );  }
  59:  
  60:     private float GetSecondRotation()
  61:     { return(360f * currentTime.Second / 60f);  }
  62:  
  63:     private class LtrDraw
  64:     {    }
  65:  
  66:     private class StringDraw
  67:     { 
  68:         public StringDraw(string s, ClockFaceCtrl theControl)
  69:         {           }
  70:  
  71:         public void DrawString(Graphics g, Brush brush)
  72:         {
  73:             foreach (LtrDraw theLtr in theString)
  74:             {
  75:                 theLtr.DrawString(g,brush,theControl);
  76:             }
  77:             ClockFaceCtrl.offset += 1;
  78:         }
  79:     }
  80:  
  81:     private void DrawDate(Graphics g)
  82:     {
  83:         Brush brush = new SolidBrush(ForeColor);
  84:         sdToday.DrawString(g,brush);
  85:     }
  86: }

 

 

 

 

 

 

 

 

 

Why Is This GUI Framework Different From All Other Gui Frameworks?

Writing a templatable custom control in Silverlight is exactly the same, only totally different. That is, the architectural build/ buy/ make-do decisions are the same, and the derivation decisions are the same, but the new wrinkle is the separation of logic from visuals though a contract enforced by the Parts and States model and leveraged by the Visual State Machine.

It is to that, I will turn when I wake up, but I suddenly realized that it is 2:20 am, and I should be sleeping. Very much.

 

Follow-up
More here:  Digging Into Custom Controls

Published Friday, September 12, 2008 2:26 AM by jesseliberty
Filed under:

Comments

# The difference between understanding a concept???

Pingback from  The difference between understanding a concept???

Friday, September 12, 2008 4:40 AM by The difference between understanding a concept???

# Dew Drop - September 12, 2008 | Alvin Ashcraft's Morning Dew

Pingback from  Dew Drop - September 12, 2008 | Alvin Ashcraft's Morning Dew

Friday, September 12, 2008 9:45 AM by Dew Drop - September 12, 2008 | Alvin Ashcraft's Morning Dew

# Silverlight Cream for September 12, 2008 -- #367

Nikolay Raychev on SL and Localization, Chris Koenig on Style, WPF and SL, ux.artu.tv with developer

Friday, September 12, 2008 4:16 PM by Community Blogs

# Digging Into Custom Controls

Last night’s post was something of a preface, but let’s get started. [ For those of you who crave the

Friday, September 12, 2008 9:17 PM by Jesse Liberty - Silverlight Geek

# Digging Into Custom Controls

Last night’s post was something of a preface, but let’s get started. [ For those of you who crave the

Friday, September 12, 2008 10:26 PM by Microsoft Weblogs

# Digging Into Custom Controls

Last night’s post was something of a preface, but let’s get started. [ For those of you who crave the

Friday, September 12, 2008 10:28 PM by Mirrored Blogs

# 2008 September 13 - Links for today &laquo; My (almost) Daily Links

Pingback from  2008 September 13 - Links for today &laquo; My (almost) Daily Links

Saturday, September 13, 2008 3:43 AM by 2008 September 13 - Links for today « My (almost) Daily Links

# Creating Custom Controls – A Common Starter Application

It will be helpful as we explore custom controls to have a common starting project. You may&#160; remember

Sunday, September 21, 2008 8:55 AM by Jesse Liberty - Silverlight Geek

# Creating Custom Controls – A Common Starter Application

It will be helpful as we explore custom controls to have a common starting project. You may&#160; remember

Sunday, September 21, 2008 9:11 AM by Mirrored Blogs

# Creating Custom Controls – A Common Starter Application

It will be helpful as we explore custom controls to have a common starting project. You may&#160; remember

Sunday, September 21, 2008 9:17 AM by Microsoft Weblogs

# re: The difference between understanding a concept…

Just wanted to comment mentioning the level of amusement gained from the line, "Writing a templatable custom control in Silverlight is exactly the same, only totally different."  

Thank you for the chuckle.

Monday, September 22, 2008 1:31 PM by Leonai_art

# Custom Controls – The Denouement

Over the past month I've posted half a dozen min-articles about creating custom controls that can interact

Thursday, October 09, 2008 9:48 AM by Jesse Liberty - Silverlight Geek

# Custom Controls – The Dénouement

Over the past month I've posted half a dozen min-articles about creating custom controls that can interact

Thursday, October 09, 2008 10:10 AM by Microsoft Weblogs

# Custom Controls – The Dénouement

Over the past month I&#39;ve posted half a dozen min-articles about creating custom controls that can

Thursday, October 09, 2008 10:37 AM by Mirrored Blogs

# Custom Controls - the handling at Blog von J??rgen Ebner

Pingback from  Custom Controls - the handling at Blog von J??rgen Ebner

Friday, October 10, 2008 6:15 AM by Custom Controls - the handling at Blog von J??rgen Ebner

# Creating Skinnable Custom Controls - Video

&#160; &#160; I have completed the four part video series Creating Skinnable Customer Controls and I

Friday, December 05, 2008 3:01 PM by Jesse Liberty - Silverlight Geek

# Creating Skinnable Custom Controls - Video

&#160; &#160; I have completed the four part video series Creating Skinnable Customer Controls and I

Friday, December 05, 2008 3:52 PM by Microsoft Weblogs

# Erstellen von anpassbaren Custom Control at Programming with Silverlight, WPF &amp; .NET

Pingback from  Erstellen von anpassbaren Custom Control at Programming with Silverlight, WPF &amp; .NET

# Application Set: Templates & Custom Controls

When we started creating How Do I videos, the idea was to have stand alone videos that do not depend

Monday, December 22, 2008 5:34 PM by Jesse Liberty - Silverlight Geek

# Application Set: Templates & Custom Controls

When we started creating How Do I videos, the idea was to have stand alone videos that do not depend

Monday, December 22, 2008 6:17 PM by Microsoft Weblogs

# Templates &#038; Custum Controls at Programming with Silverlight, WPF &amp; .NET

Pingback from  Templates &#038; Custum Controls at Programming with Silverlight, WPF &amp; .NET

# Templates &#038; Custum Controls at Programming with Silverlight, WPF &amp; .NET

Pingback from  Templates &#038; Custum Controls at Programming with Silverlight, WPF &amp; .NET

# What’s New In Silverlight 3

&#160; &#160; I had the pleasure of presenting What’s New In Silverlight 3 both at TechEd this year and

Friday, May 29, 2009 4:57 PM by Jesse Liberty - Silverlight Geek

# What’s New In Silverlight 3

I had the pleasure of presenting What’s New In Silverlight 3 both at TechEd this year and then again

Friday, May 29, 2009 5:42 PM by Microsoft Weblogs

# Programming with Silverlight, WPF &amp; .NET &raquo; Was ist neu in Silverlight 3

Pingback from  Programming with Silverlight, WPF &amp; .NET &raquo; Was ist neu in Silverlight 3

# Top-silverlight &raquo; Blog Archive &raquo; What???s New In Silverlight 3

Pingback from  Top-silverlight  &raquo; Blog Archive   &raquo; What???s New In Silverlight 3

# Writing a Silverlight Custom Control Part 1 &laquo; Alan&#039;s Topics

Pingback from  Writing a Silverlight Custom Control Part 1 &laquo;  Alan&#039;s Topics