<! ===== Overview of the AmazingProgressBar Class ===== >
<! Graham Wilson >
<! All of the style editing in here was done to make this document look good in HTML Help 1 >
<! When viewed via other browsers, it doesn't look as good :-( >
<html>
<head>
<style type="text/css">
p {font-family: Verdana,Arial;
font-size: x-small}
h1 {font-family: Verdana,Arial;
text-align: left;
font-size: large;
color: darkblue}
h2 {font-family: Verdana,Arial;
text-align: left;
font-size: medium;
font-weight: bolder;
color: darkorange}
h3 {font-family: Verdana,Arial;
text-align: left;
font-size: x-small;
font-weight: bolder;
font-style: italic;
color: sienna}
ul {font-family: Verdana,Arial;
font-size: x-small}
li {font-family: Verdana,Arial;
font-size: x-small}
</style>
</head>
<h1>The AmazingProgressBar Class</h1>
<h2>Introduction</h2>
<p>The AmazingProgressBar class is a drop-in replacement for the .NET 2.0 ProgressBar control,
which displays progress as progression through a simple maze.
This article explains the additions and extensions provided by this control.
The reader is assumed to already be familiar with <c>ProgressBar</c>.</p>
<table align="center" cellpadding="5">
<tr>
<td align="center"><img src="./Images/examples.png"></td>
</tr>
</table>
<h2>Maze Style and Size</h2>
<p>The progress direction and general style of the maze is determined by the <c>MazeStyle</c> property:</p>
<table cellpadding="5" >
<tr><td><code>SingleRight</code></td>
<td><p>Maze with a single path progressing left to right.</p></td></tr>
<tr><td><code>SingleLeft</code></td>
<td><p>Maze with a single path progressing right to left.</p></td></tr>
<tr><td><code>SingleUp</code></td>
<td><p>Maze with a single path progressing up.</p></td></tr>
<tr><td><code>SingleDown</code></td>
<td><p>Maze with a single path progressing down.</p></td></tr>
<tr><td><code>SplitConvergeHorizontal</code></td>
<td><p>Maze with two paths starting at the left and right ends, converging in the middle.</p></td></tr>
<tr><td><code>SplitConvergeVertical</code></td>
<td><p>Maze with two paths starting at the top and bottom, converging in the middle.</p></td></tr>
<tr><td><code>SplitDivergeHorizontal</code></td>
<td><p>Maze with two paths starting in the middle, ending at the left and right ends.</p></td></tr>
<tr><td><code>SplitDivergeVertical</code></td>
<td><p>Maze with two paths starting in the middle, ending at the top and bottom.</p></td></tr>
</table>
<p>The generated mazes usually only have one route by which they can be traversed.
There are no loops, and branching is avoided (though a small amount may occur if <c>RowCount</c> is greater than 3).
The maze direction is the general direction, though
there will be always be twists and turns and some doubling back.</p>
<p>The size and complexity of the maze generally depends on the <c>RowCount</c> parameter.
Set this parameter to fix the number of rows in the maze.
A value of 1 results in a maze which looks just like a standard progress bar.
A value of 2 results in a distinctly uninteresting maze.
A value of 3 or more is strongly recommended.</p>
<p>The number of columns in the maze is the largest value given the size of the control,
the current values of <c>RowCount</c>, <c>WallSize</c> and <c>BorderSize</c>,
and the rule that all cells in the maze must be square.</p>
<p>The <c>ProgressBar.Style</c> property can still be set.
The <c>Marquee</c> style works as expected, but if the maze length is excessive, it may not work
as fast as expected.
The <c>Blocks</c> style is generally not as visually appealing as <c>Continuous</c>,
though an interesting effect is to be had combining <c>Blocks</c> with a zero <c>WallSize</c>.</p>
<p>The following code segment shows how to set the <c>Style</c>, <c>MazeStyle</c> and number of rows.</p>
<table cellpadding="10">
<tr>
<td width="30p"></td>
<td bgcolor="khaki" font face="Courier New,Courier">
<pre>// Assumes "AmazingProgressBar abar" already declared and initialized
abar.Style = ProgressBarStyle.Continous;
abar.MazeStyle = MazeStyleType.SingleLeft;
abar.RowCount = 4;</pre>
</td>
</tr>
</table>
<p>If the control cannot generate a maze, then the control is filled with a
pink - on - black ripple pattern.
This is usually the result of <c>RowCount</c> being too high or too low.</p>
<table align="center" cellpadding="5">
<tr>
<td align="center"><img src="./Images/bad.png"></td>
</tr>
</table>
<h2>Maze Coloring</h2>
<p>The filled cells inside the maze can either all be the same fixed color,
or follow a color gradient.
This is determined by the <c>Gradient</c> property:</p>
<table cellpadding="5">
<tr><td><code>None</code></td>
<td><p>No gradient coloring. All filled cells are <c>ForeColor</c>.</p></td></tr>
<tr><td><code>Rows</code></td>
<td><p>Each row in the maze is a different color, spanning a gradient with
the first row being <c>GradientStartColor</c>, and the last row being <c>GradientEndColor</c>.</td></tr>
<tr><td><code>Columns</code></td>
<td><p>Each column in the maze is a different color, spanning a gradient with
the first column being <c>GradientStartColor</c>, and the last column being <c>GradientEndColor</c>.</p></td></tr>
<tr><td><code>Flow</code></td>
<td><p>Each cell in the maze is a different color, spanning a gradient with
the first cell being <c>GradientStartColor</c>, and the last cell being <c>GradientEndColor</c>.</p></td></tr>
</table>
<p>All unfilled cells are always <c>BackColor</c>.</p>
<p>The maze walls are visible if <c>WallSize</c> is greater than zero.
The walls can only be one fixed color, as indicated by the <c>WallColor</c> property.</p>
<p>The maze border can either be one fixed color,
or a gradient from that fixed color to the default control color.</p>
<p>The following code segment shows how to set the various color properties.</p>
<table cellpadding="10">
<tr>
<td width="30p"></td>
<td bgcolor="khaki" font face="Courier New,Courier">
<pre>// Assumes "AmazingProgressBar abar" already declared and initialized
abar.Gradient = GradientType.Rows;
abar.GradientStartColor = Color.LightBlue;
abar.GradientEndColor = Color.DarkBlue;
abar.BorderSize = 2;
abar.BorderColor = Color.LightGreen;
abar.BackColor = Color.White;</pre>
</td>
</tr>
</table>
<h2>Internals: How It Works</h2>
<h3>The Maze Class</h3>
<p>The <c>Maze</c> class represents the actual structure of the maze (called the map)
and the path through which the progress bar progresses.
The structure refers the location of walls with the maze.
The path refers to the order in which cells are filled.</p>
<p>The map is represented by a 2D array of <c>Maze.Dir</c> values.
Each value represents one cell in the array,
with the bitmask defining which direction one may move from this cell.
The directions are those as used on a compass:</p>
<table align="center" cellpadding="5">
<tr>
<td align="center"><img src="./Images/dirs.png"></td>
</tr>
</table>
<p>The path is a jagged 2D array of <c>Maze.Cell</c> values.
The first entry in the array is the list of start cells.
The <i>n</i>th entry in the array is the list of cells for whom
the closest start cell is <i>n</i> steps away.</p>
<p>For example, consider the following 3x5 (3 rows, 5 columns) maze:</p>
<table align="center" cellpadding="5">
<tr>
<td align="center"><img src="./Images/maze53empty.png"></td>
</tr>
</table>
<p>The <c>Maze.Dir</c> value for cell at row 0, column 3 (0,3) is <c>Maze.Dir.S</c>.
The <c>Maze.Dir</c> value for cell (1,2) is <c>Maze.Dir.N|Maze.Dir.S|Maze.Dir.E|Maze.Dir.W</c>.</p>
<p>If the path starts at cell (2,0), the distance of each cell from this start cell is:</p>
<table align="center" cel
- 1
- 2
- 3
- 4
前往页