• Choose a category
• All
• Classic-Fiction

By Root 5394 0

control consists of an outermost table that has one row and two cells. The first cell contains the gauge bar; the second cell optionally contains the text, when the companion text has to be displayed on the side of the gauge. (See Figure 12-2.) If the text goes below the gauge, it can either be part of the table (a second row) or just an additional Label control. You control rendering styles of the text through a custom style property—the TextStyle property—that I’ll say more about in a moment. Let’s first focus on the ruler.

The ruler is a sequence of table cells. Each cell corresponds to a notch you want to see on the final gauge. The number of notches is determined by the Segments property. The Value property is scaled as a percentage of the Maximum value, and the resulting value is used to determine the color of the various cells. If the value to represent is larger than the value represented by the current notch, a cell is added with the average width determined by dividing 100 by the number of notches. The same happens if the value is smaller and the divider cell has been rendered already. (In this case, finished is true.)

void BuildRuler(TableRow ruler)

{

// Calculate the value to represent

var val = GetValueToRepresent();

float valueToRepresent = 100f * val / Maximum;

var numOfSegments = GetNumOfSegments();

int segmentWidth = 100 / numOfSegments;

bool finished = false;

for (int i = 1; i <= numOfSegments; i++)

{

if (valueToRepresent < i * segmentWidth)

{

if (finished)

{

// Still-To-Do

var stillToDo = new TableCell();

ruler.Cells.Add(stillToDo);

stillToDo.Width = Unit.Percentage(segmentWidth);

}

else

{

// Cell to divide

_dividerCell = i - 1; // need a 0-based index

var cell = new TableCell();

ruler.Cells.Add(cell);

cell.Width = Unit.Percentage(segmentWidth);

cell.Height = Unit.Percentage(100);

// Add a child table to the cell

var child = new Table();

child.Width = Unit.Percentage(100);

child.Height = Unit.Percentage(100);

cell.Controls.Add(child);

child.CellPadding = 0;

child.CellSpacing = 0;

var childRow = new TableRow();

child.Rows.Add(childRow);

float fx = (100 *

(valueToRepresent - segmentWidth *

(i - 1)) / segmentWidth);

if (valueToRepresent > (i - 1) * segmentWidth)

{

TableCell left = new TableCell();

childRow.Cells.Add(left);

left.Width = Unit.Percentage(fx);

}

var right = new TableCell();

childRow.Cells.Add(right);

right.Width = Unit.Percentage(100 - fx);

finished = true;

}

}

else

{

// Done

var done = new TableCell();

ruler.Cells.Add(done);

done.Width = Unit.Percentage(segmentWidth);

}

}

}

The divider cell is the cell that is split in two to represent the remaining value, as shown in Figure 12-3.

Figure 12-3. The divider cell in sample SimpleGaugeBar controls.

The divider cell is the first cell where the value of the corresponding notch is larger than the value to represent. The divider cell is rendered through an embedded table with one row and two cells. The index of the divider cell is cached for further use.

The companion text of the gauge can be displayed to the right of the gauge or below it. When rendered below it, the text can either be incorporated in the table or added as an extra control. BuildLabel can either add the text as an additional control or place it in the rightmost cell. BuildLabelIntoTable writes the text in an additional table row below the gauge. In this case, the text inherits most of the gauge graphical settings.

void BuildLabel(TableCell container)

{

// Calculate the value to represent

float buf = GetValueToRepresent();

// Get the string to display on the label

string msg = GetTextToRepresent();

var lbl = new Label();

if (container is TableCell)

container.Controls.Add(lbl);

else

Controls.Add(lbl);

lbl.Text = String.Format(msg, buf, Maximum);

}

// Build the control tree for the label

void BuildLabelIntoTable(Table t)

{

// Calculate the value to represent

float valueToRepresent = GetValueToRepresent();

int numOfSegments = GetNumOfSegments();

// Get the string to display on the