Programming Microsoft ASP.NET 4 - Dino Esposito [273]
if (o == null)
return 100;
return (float) o;
}
set { ViewState["Maximum"] = value; }
}
// Number of segments to divide the bar into
public int Segments
{
get
{
var o = ViewState["Segments"];
if (o == null)
return 4;
return (int) o;
}
set
{
ViewState["Segments"] = value;
if( value < 1)
ViewState["Segments"] = 1;
}
}
// Gets and sets the pattern to format the value in the gauge bar
public string FormatString
{
get
{
var o = ViewState["FormatString"];
if (o == null)
return "{0} / {1}";
return (string) o;
}
set { ViewState["FormatString"] = value; }
}
// Gets and sets whether the gauge bar has grid lines
public bool GridLines
{
get
{
var o = ViewState["GridLines"];
if (o == null)
return true;
return (bool) o;
}
set { ViewState["GridLines"] = value; }
}
...
}
The control maintains some state by using the view-state collection. All the properties, in fact, are persisted using ViewState. Because all the persisted properties are marked as public, you can disable the view state altogether and still keep the control fully functional by explicitly setting properties upon page loading.
Setting Up the Ruler
The ruler divides the area of the control into segments, which are filled proportionally based on the current value of the gauge. Each segment of the ruler corresponds to a cell in the underlying table. All cells but one are entirely filled or entirely empty. Filled cells are rendered using the current foreground color; empty cells are rendered using the current background color. One cell, named the divider cell, contains a child table with exactly one row and two cells. The first cell is rendered with the foreground color; the second cell is colored as the control’s background. The two cells have a width, measured in percent, whose total amounts to 100. The latter cell denotes how much is still left to do to reach the maximum. The following HTML code snippet shows the final HTML markup to render a value of 52 out of 100 using a ruler with four notches or segments:
Figure 12-2 shows gauges with different ruler settings.
Figure 12-2. The effect of different settings on the gauge ruler.
Setting Up the Control’s Site
As you might have guessed already from the preceding figures, other properties get into the game in addition to those discussed in Table 12-2. Admittedly, the grayscale rendering used in this book doesn’t do justice to the actual capabilities of the SimpleGaugeBar control in terms of color support. However, the control exploits a few color-related properties defined on the base class. These properties are BackColor, ForeColor, Width, and Height.
Width and Height are used to delimit the control’s site—that is, the area within the container the control is assigned for rendering. The control is assigned a default size that can be changed either programmatically or through the Visual Studio Properties window.
The value of the ForeColor property is used to render the text of the label that accompanies the gauge. The value of the BackColor property determines the color to be used for the progress bar. Note that the implementation we just discussed assumes that only known colors can be used.
Rendering the SimpleGaugeBar Control
The user interface of a Web control is pure HTML, sometimes topped off with a bit of client script. As mentioned, there are basically two ways in which this HTML can be generated. You can compose the HTML code in the supplied writer, or you can build an in-memory representation of the output using existing HTML and Web server controls and then have them recursively render their contents to the writer. Let’s discuss these two options in more detail.
Generating the HTML for a Custom Control
From a pure performance standpoint, writing out the control’s markup to