• Choose a category
• All
• Classic-Fiction

var companionText = GetTextToRepresent();

if (_textStyle.DisplayTextAtBottom)

{

// Add a bottom row

var label = new TableRow();

t.Rows.Add(label);

var lblCell = new TableCell();

label.Cells.Add(lblCell);

lblCell.ColumnSpan = numOfSegments;

lblCell.Text = String.Format(companionText, valueToRepresent, Maximum);

}

}

Note

In the code shown thus far for the SimpleGaugeBar control, there a pair of unexplained methods: GetValueToRepresent and GetTextToRepresent. In this simple control, the methods return, respectively, the value of the Value and FormatString properties. However, you can extend the control with data-binding capabilities. In doing so, most of the changes will consist of extending the GetValueToRepresent and GetTextToRepresent methods.

There’s no functional difference between the two approaches—it’s purely a matter of appearance and preference. But how can you control the rendering and the styles of the companion text? You do that through a new style property.

The Gauge in Action

After it’s compiled, the SimpleGaugeBar control can be installed in the Visual Studio toolbox and dragged and dropped onto any Web Forms page you’re developing. Here’s some sample code being added to a page:

Width="500px" Height="15px"

FormatString="{0} out of {1}"

Segments="10"

Value="65">

The properties of the control that feature simple types can be set using the Properties window; for properties of a complex type, such as classes, you need to write a type converter and configure the property for the design-time environment of Visual Studio. The following code shows how to set properties on the gauge control programmatically:

private void Button1_Click(Object sender, EventArgs e)

{

GaugeBar1.Maximum = 200;

GaugeBar1.Value = 55;

}

You should try to set the Maximum property first because, in this way, the control automatically validates the value. Maximum and Value are stored in the view state and are automatically restored when the page posts back. If the host page disables the view state, you should modify the code that relates to the control so that the needed properties are set on each request.

Building a Data-Bound Control

So far, we’ve created the SimpleGaugeBar control as a composite control to display a notched indicator of a given quantity. By setting the Value and Maximum properties on the control, you can graphically represent a value on the proper scale. The SimpleGaugeBar control is not data bound, meaning that no elements in its programming interface can be automatically and declaratively bound to external data. Derived from CompositeControl, the SimpleGaugeBar control doesn’t incorporate any of the features listed previously regarding data-bound controls.

The goal of this section is to extend the SimpleGaugeBar control to make it support data binding through enumerable objects and data source controls.

Key Features

A data-bound version of SimpleGaugeBar is a form of simple binding. A couple of existing properties—Value and FormatString—can be automatically filled with external data according to the classic data-binding pattern of ASP.NET. A data source object specified through either DataSource or DataSourceID and bindable properties are mapped to public fields on the data source object through mapper properties. In simple binding, the bound data source object is an individual object that contains just one logical piece of information—no items, no lists.

The key features of a data-bound control can be summarized as follows:

Additional properties to represent mappings between control properties and data source fields

An additional property to represent and persist the data source object

Additional view-state management to persist the data source object

Modified rendering to take bound data into account

Let’s dig out more.

Adding Data-Bound Properties

When you bind data to, say, a DropDownList control, you first set the data source and then specify which